Последнее обновление
1 авг. 2023 г.
- Руководство пользователя Adobe XD
- Введение
- Новые возможности Adobe XD
- Распространенные вопросы
- Создание дизайна, прототипов и совместная работа в Adobe XD
- Управление цветом
- Системные требования
- Основные сведения о рабочей среде
- Изменение языка приложения в Adobe XD
- Доступ к наборам для дизайна пользовательского интерфейса
- Доступность в Adobe XD
- Сочетания клавиш
- Советы и рекомендации
- Дизайн
- Монтажные области, направляющие и слои
- Фигуры, объекты и путь
- Выделение, изменение размера и поворот объектов
- Перемещение, выравнивание, распределение и упорядочивание объектов
- Группирование, блокирование, дублирование, копирование и зеркальное отражение объектов
- Задание обводки, заливки и теней для объектов
- Создание повторяющихся элементов
- Создание перспективных проектов с помощью 3D-преобразований
- Редактирование объектов с помощью логических операций
- Текст и шрифты
- Компоненты и состояния
- Маскировка и эффекты
- Макет
- Видео и анимации Lottie
- Создание прототипа
- Создание интерактивных прототипов
- Анимирование прототипов
- Свойства объекта, которые поддерживаются при автоматическом анимировании
- Создание прототипов с клавиатуры и геймпада
- Создание прототипов с помощью голосовых команд и воспроизведения
- Создание синхронизированных переходов
- Добавление наложений
- Создание голосовых прототипов
- Создание якорных ссылок
- Создание гиперссылок
- Предварительный просмотр проектов и прототипов
- Публикация, экспорт и проверка
- Публикация выбранных монтажных областей
- Предоставление совместного доступа к проектам и прототипам
- Настройка разрешений на доступ к ссылкам
- Работа с прототипами
- Просмотр прототипов
- Работа со спецификациями дизайна
- Предоставление общего доступа к спецификациям дизайна
- Проверка спецификаций дизайна
- Навигация в спецификациях дизайна
- Проверка и комментирование спецификаций дизайна
- Экспорт ресурсов дизайна
- Экспорт и загрузка ресурсов из спецификаций дизайна
- Корпоративный групповой совместный доступ
- Резервное копирование или перенос ресурсов XD
- Системы дизайна
- Системы дизайна с библиотеками Creative Cloud Libraries
- Работа с ресурсами документа в Adobe XD
- Работа с библиотеками Creative Cloud Libraries в Adobe XD
- Переход от связанных ресурсов к библиотекам Creative Cloud Libraries
- Работа с проектными токенами
- Использование ресурсов из библиотек Creative Cloud Libraries
- Облачные документы
- Интеграция и плагины
- Работа с внешними ресурсами
- Работа с ресурсами проекта из Photoshop
- Копирование ресурсов из Photoshop
- Как импортировать или открыть проекты Photoshop
- Работа с ресурсами Illustrator в Adobe XD
- Импортирование и открытие проектов Illustrator
- Копирование векторных объектов из Illustrator в XD
- Плагины для Adobe XD
- Создание плагинов и управление ими
- Интеграция Jira с XD
- Подключаемый модуль Slack для XD
- Подключаемый модуль Zoom для XD
- Публикация работы из XD на Behance
- XD для iOS и Android
- Устранение неполадок
- Выявленные неполадки и исправленные ошибки
- Установка и обновления
- Запуск и сбой
- Облачные документы и библиотеки Creative Cloud Libraries
- Прототип, публикация и обзор
- Импорт, экспорт и работа с другими приложениями
Узнайте, как использовать монтажные области для создания дизайн-проектов в XD.
Познакомьтесь с Джинни (Jeanee) — графическим дизайнером, которого выбрали руководителем проекта UX-дизайна. Она предлагает Adobe XD своей рабочей группе, участники которой имеют разный уровень опыта в дизайне и инструментах UX.
- Она ищет ресурсы, которые помогут быстро начать работу над проектом.
- Чтобы начать работу, ей нужны учебные пособия, а чтобы продолжить — примеры файлов.
Джинни изучает основы терминологии дизайна и работает с монтажными областями, чтобы создать в XD свой первый прототип. Прочтите, чтобы узнать, как мы можем помочь ей приступить к работе.
Прежде чем продолжить
Ознакомьтесь с основами XD:
Настройка монтажных областей за 4 простых шага
Что такое монтажная область? Монтажные области представляют собой экраны вашего приложения или страницы вашего веб-сайта. Это упрощает процессы проектирования и создает интерактивные проекты для экранов разных размеров в одном документе. Используйте монтажные области для создания проекта XD.
Прочтите, и вы узнаете, как настроить монтажные области.
Создать новую монтажную область
Adobe XD предоставляет монтажные области для экранов популярных размеров, например для различных версий iPhone, iPad и веб-страниц. Вы можете создать собственную монтажную область, если выбранные вами варианты не соответствуют вашим требованиям.
Главный экран
Используйте предустановленные размеры монтажной области или создайте собственную монтажную область.
Приложение XD
Используйте инструмент Монтажная область 
для создания дополнительных монтажных областей.
Выберите стиль монтажной области в инспекторе свойств или перетащите на холст, чтобы создать пользовательскую монтажную область.
Используйте имеющуюся монтажную область из Photoshop и Illustrator
Вы можете импортировать имеющиеся монтажные области из Photoshop или Illustrator в приложении XD без их повторного создания.
Используйте Файл > Импорт в приложении XD, чтобы открыть монтажные области Photoshop или Illustrator в приложении XD с сохранением всех монтажных областей и слоев, которые можно редактировать.
Ознакомьтесь со статьей, в которой описаны 5 самых эффективных способов использования ресурсов Photoshop в приложении XD.
В XD 57 и более поздних версиях вы получите единообразные цвета при использовании существующего ресурса с цветовым профилем sRGB из Photoshop в документ XD с цветовым профилем sRGB. Если документ XD имеет Неизменяемый цветовой профиль, вы получите сообщение с предложением переключить цветовой профиль на sRGB.
Управлять монтажными областями
Передумали по поводу размера монтажной области? Измените размер. Заголовок проекта можно при необходимости изменить. Хотите создать больше монтажных областей и управлять их размещением? Выполняйте дублирование и перестановки.
Переименование
Дважды нажмите на заголовок монтажной области.
Изменение размера
Перетащите круглый маркер, который появился по краям монтажной области.
Дублировать
Выберите монтажную область и нажмите Ctrl /Cmd + D.
Выровнять и распределить
Выделите несколько монтажных областей и нажмите Выровнять и распределить в инспекторе свойств. Для перестановки перетащите монтажную область.
Применение макета или квадратных сеток
Хотите определить базовую структуру содержимого, добавленного в монтажные области вашего проекта? Используйте сетки макета. Хотите узнать, как быстро измерить и выровнять содержимое дизайна при размещении объектов или текста на монтажных областях? Используйте квадратные сетки.
Сетки макета
Выберите одну или несколько монтажных областей, а в разделе Сетка в инспекторе свойств выберите Макет.
Квадратные сетки
Выберите одну или несколько монтажных областей в разделе Сетка в инспекторе свойств, выберите Квадрат.
Создание монтажных областей
Теперь, когда вы создали свою первую монтажную область, узнайте, как добавлять визуальные и текстовые элементы, изменять фон и создавать эффекты прокрутки.
Добавление визуальных и текстовых элементов
Теперь, когда ваша базовая монтажная область создана и настроена, вы можете создавать или изменять цвет фона, добавлять графику и создавать или форматировать текстовые стили в повторно используемых ресурсах. Хотите создать редактируемую сетку повторяющихся элементов? Используйте повторяющиеся сетки.
Добавление визуальных и текстовых элементов
Используйте инструменты для рисования, чтобы создавать пользовательские элементы или выбирать Файл > Импорт для импорта существующих элементов, а именно изображений и значков из папки вашего устройства. Используйте текстовые инструменты для создания, форматирования и захвата текстовых стилей в повторно используемых ресурсах.
Чтобы изменить фоновый цвет монтажной области, в инспекторе свойств выберите Заливку и примените цвет из палитры цветов.
Создание повторяющихся элементов
Используйте повторяющиеся сетки для создания объектов с повторяющимися элементами, например списками и карточными макетами.
Создание прокручиваемых монтажных областей
Хотите добавить в свой дизайн эффекты вертикальной и горизонтальной прокрутки? Используйте группы прокрутки для создания прототипа окна содержимого.
Вы хотите добиться реалистичного моделирования прокрутки на настольном компьютере и мобильном устройстве? Задайте фиксированную позицию элемента на монтажной области, чтобы позволить другим элементам прокручиваться вниз.
Вертикальная прокрутка
Чтобы вывести монтажную область за пределы высоты области просмотра, используйте маркер. Маркер указывает на позицию, до которой вам нужно прокрутить, чтобы получить доступ к содержимому.
Фиксация положения при прокрутке
Чтобы закрепить элементы дизайна в фиксированном положении, выберите Фиксировать положение при прокрутке в инспекторе свойств.
Окончательный дизайн
Теперь, когда вы достаточно знаете о монтажных областях, вы можете поэкспериментировать с тем, что было вам известно до этого, и создавать еще более удивительные монтажные области для своих дизайнерских проектов.
Продолжите и скачайте окончательный вариант дизайна, чтобы посмотреть, как будет выглядеть ваш проект дизайна.
Подробнее
Перед вами 4-минутное видео о начале работы. Вы также можете загрузить образцы файлов, чтобы поработать с ними во время просмотра видео.
Советы и рекомендации
Теперь, когда у вас есть базовые знания о монтажных областях в XD, предлагаем несколько полезных советов:
- Чтобы измерить расстояние от объекта до краев монтажной области, щелкните по объекту и нажмите кнопку Параметр (в macOS) или Alt (в Windows).
- Чтобы выключить опцию прокрутки в монтажной области, выберите монтажную область в инспекторе свойств, измените значение параметра Прокрутка на Нет.
Дополнительные советы по работе с монтажными областями получите у @Elainecchao, менеджера продукта XD в Twitter.
Что дальше?
Теперь вы знаете все необходимое о создании, управлении монтажными областями и предоставлении к ним общего доступа. Сделайте шаг вперед и научитесь создавать направляющие пользовательских монтажных областей, а затем расположите монтажную область с помощью сеток.
Есть вопрос или идея?
Если вы хотите задать вопрос или поделиться интересной идеей, вступайте в сообщество Adobe XD. Мы будем рады услышать ваши идеи и увидеть ваши работы.