Руководство пользователя Отмена

Создание дизайна, прототипов и совместная работа в Adobe XD

  1. Руководство пользователя Adobe XD
  2. Введение
    1. Новые возможности Adobe XD
    2. Распространенные вопросы
    3. Создание дизайна, прототипов и совместная работа в Adobe XD
    4. Системные требования
      1. Требования к оборудованию и программному обеспечению
      2. Adobe XD, Big Sur и Apple Silicon | macOS 11
    5. Основные сведения о рабочей среде
    6. Изменение языка приложения в Adobe XD
    7. Доступ к наборам для дизайна пользовательского интерфейса
    8. Доступность в Adobe XD
    9. Сочетания клавиш
    10. Советы и рекомендации
    11. Изменения в начальном плане XD
  3. Дизайн
    1. Монтажные области, направляющие и слои
      1. Начало работы с монтажными областями
      2. Использование направляющих и сеток
      3. Создание прокручиваемых монтажных областей
      4. Работа со слоями
      5. Создание групп прокрутки
    2. Фигуры, объекты и путь
      1. Выделение, изменение размера и поворот объектов
      2. Перемещение, выравнивание, распределение и упорядочивание объектов
      3. Группирование, блокирование, дублирование, копирование и зеркальное отражение объектов
      4. Задание обводки, заливки и теней для объектов
      5. Создание повторяющихся элементов
      6. Создание перспективных проектов с помощью 3D-преобразований
      7. Редактирование объектов с помощью логических операций
    3. Текст и шрифты
      1. Работа с инструментами для рисования и создания текста
      2. Шрифты в Adobe XD
    4. Компоненты и состояния
      1. Работа с компонентами
      2. Работа с вложенными компонентами
      3. Добавление нескольких состояний для компонентов
    5. Маскировка и эффекты
      1. Создание маски с фигурами
      2. Работа с эффектами размытия
      3. Создание и изменение градиентов
      4. Применение эффектов наложения
    6. Макет
      1. Адаптивное изменение размера и ограничения
      2. Установка фиксированного отступа для компонентов и групп
      3. Создание динамичных проектов с подборками
    7. Видео и анимации Lottie
      1. Работа с видео
      2. Работа с анимацией Lottie
  4. Создание прототипа
    1. Создание интерактивных прототипов
    2. Анимирование прототипов
    3. Свойства объекта, которые поддерживаются при автоматическом анимировании
    4. Создание прототипов с клавиатуры и геймпада
    5. Создание прототипов с помощью голосовых команд и воспроизведения
    6. Создание синхронизированных переходов
    7. Добавление наложений
    8. Создание голосовых прототипов
    9. Создание якорных ссылок
    10. Предварительный просмотр проектов и прототипов
    11. Создание прототипов при помощи видео
  5. Публикация, экспорт и проверка
    1. Публикация выбранных монтажных областей
    2. Предоставление совместного доступа к проектам и прототипам
    3. Настройка разрешений на доступ к ссылкам
    4. Работа с прототипами
    5. Просмотр прототипов
    6. Работа со спецификациями дизайна
    7. Предоставление общего доступа к спецификациям дизайна
    8. Проверка спецификаций дизайна
    9. Навигация в спецификациях дизайна
    10. Проверка и комментирование спецификаций дизайна
    11. Экспорт ресурсов дизайна
    12. Экспорт и скачивание ресурсов из спецификаций дизайна
  6. Системы дизайна
    1. Системы дизайна с библиотеками Creative Cloud Libraries
    2. Работа с ресурсами документа в Adobe XD
    3. Работа с библиотеками Creative Cloud Libraries в Adobe XD
    4. Переход от связанных ресурсов к библиотекам Creative Cloud Libraries
    5. Работа с проектными токенами 
    6. Использование ресурсов из библиотек Creative Cloud Libraries
  7. Облачные документы
    1. Облачные документы в Adobe XD
    2. Совместная работа и совместное редактирование проектов
    3. Совместное редактирование документов, к которым вам предоставили доступ
  8. Интеграция и плагины
    1. Работа с внешними ресурсами
    2. Работа с ресурсами проекта из Photoshop
    3. Копирование ресурсов из Photoshop
    4. Как импортировать или открыть проекты Photoshop
    5. Работа с ресурсами Illustrator в Adobe XD
    6. Импортирование и открытие проектов Illustrator
    7. Копирование векторных объектов из Illustrator в XD
    8. Плагины для Adobe XD
    9. Создание плагинов и управление ими
    10. Интеграция Jira с XD
    11. Подключаемый модуль Slack для XD
    12. Подключаемый модуль Zoom для XD
    13. Публикация работы из XD на Behance
  9. XD для iOS и Android
    1. Предварительный просмотр на мобильных устройствах
    2. Часто задаваемые вопросы по Adobe XD для мобильных устройств
  10. Устранение неполадок
    1. Выявленные неполадки и исправленные ошибки
      1. Выявленные неполадки
      2. Исправленные неполадки
    2. Установка и обновления
      1. XD отображается как несовместимый в Windows
      2. Код ошибки 191
      3. Код ошибки 183
      4. Проблемы при установке плагинов XD
      5.  Запрос на удаление и переустановку XD в Windows 10
      6. Проблемы с миграцией предпочтений
    3. Запуск и сбой
      1.  XD аварийно завершает работу при запуске в Windows 10
      2.  XD закрывается при выходе из Creative Cloud
      3. Проблема со статусом подписки в Windows
      4. Предупреждение о заблокированном приложении при запуске XD в Windows
      5. Создание аварийного дампа в Windows
      6. Сбор и отправка журнала сбоев
    4. Облачные документы
      1. Проблемы с облачными документами XD
    5. Прототип, публикация и обзор
      1. Не удается записать взаимодействия прототипов в macOS Catalina
      2. Проблемы с процессами публикации
      3. Опубликованные ссылки не отображаются в браузерах
      4. Прототипы некорректно отображаются в браузерах
      5. На общих ссылках внезапно появляется панель комментариев
      6. Невозможно опубликовать библиотеки
    6. Импорт, экспорт и работа с другими приложениями
      1. Импорт и экспорт в XD
      2. Файлы Photoshop в XD
      3. Файлы Illustrator в XD
      4. Экспорт из XD в After Effects
      5. Файлы Sketch в XD
      6. В разделе экспорта не представлены сторонние приложения

Узнайте, как создавать интерактивные прототипы, каркасы и графику с помощью XD.

Adobe XD позволяет дизайнерам UX создавать интерактивные пользовательские интерфейсы для веб-приложений и мобильных приложений.

Вы можете быстро и без труда создать дизайн на монтажной области в XD. Затем соедините монтажные области вместе, чтобы создать интерактивный прототип, которым можно поделиться с заинтересованными сторонами, чтобы организовать совместную работу. Воспользуйтесь плагинами, чтобы автоматизировать повторяющиеся операции или части технологических процессов дизайнера, которые являются утомительными, сложными или рутинными. 

Adobe XD хорошо интегрируется с Photoshop, Illustrator и After Effects.

Вы можете продолжить проектирование в своих любимых приложениях, перенести ресурсы в XD, а затем использовать XD, чтобы создать прототипы и поделиться ими. XD поддерживает SVG и растровые изображения без потери качества. В Adobe XD можно продолжить работу над ресурсами или использовать их для разработки интерактивных прототипов. 

Общий технологический процесс

Создание дизайна, прототипов и совместная работа в Adobe XD
Создание дизайна, прототипов и совместная работа в Adobe XD

Технологический процесс можно кратко описать с помощью следующих шагов.

  • Создание дизайна. Создавайте элементы макета дизайна, добавляйте монтажные области и импортируйте ресурсы из других приложений, таких как Adobe Illustrator, Adobe Photoshop и Adobe After Effects. Воспользуйтесь плагинами, чтобы автоматизировать повторяющиеся операции или части технологических процессов дизайнера, которые являются утомительными, сложными или рутинными. 
  • Создание прототипа. Выберите объекты или монтажные области в своем дизайне и создайте взаимосвязи между монтажными областями.
  • Предоставление доступа. Как только ваш проект будет готов к рассмотрению, вы можете поделиться прототипами или спецификациями дизайна или экспортировать проект либо ресурсы для заинтересованных сторон.

Далее мы расскажем подробнее о разработке дизайнов, создании прототипов и совместной работе в XD.

Дизайн

Выберите предустановленный размер для монтажной области. Если вы хотите работать с нестандартным размером, введите ширину и высоту в пикселях в текстовые поля настраиваемого параметра.  Если вы хотите указать нестандартный размер, нажмите значок Нестандартный размер.

Выберите ресурсы одним из следующих способов.

  • Воспользуйтесь инструментами дизайна Adobe XD, чтобы создать ресурсы с нуля. Подробнее см. в разделах об инструментах рисования и инструментах работы с текстом.
  • Скопируйте свои проекты из Photoshop, Sketch, After Effects или Illustrator в монтажную область в Adobe XD. Вы также можете импортировать, перетаскивать или копировать и вставлять файлы JPG, SVG, PNG или GIF из следующих мест:
    • проводник (в Windows);
    • Finder (на Mac); 
    • веб-браузер;
    • буфер обмена ОС.

 

Улучшайте объекты в своем дизайне. Например, можно комбинировать или маскировать объекты, изменять свойства обводки и заливки, использовать наложения, чтобы размещать контент поверх базовой монтажной области, а также перемещать или вращать объекты или использовать функцию адаптивного изменения размеров, чтобы проектировать ресурсы для разных размеров экрана и макетов. Используйте связанные ресурсы для создания и поддержания единой версии для комплектов пользовательского интерфейса, листов наклеек или руководств по стилю, а также делитесь ими в разных документах для обеспечения согласованной масштабируемости дизайна и плагинах для автоматизации повторяющихся операций или частей технологических процессов дизайнера, которые являются утомительными, сложными или рутинными.

Подробнее см.:

Размещайте повторяющиеся элементы с помощью функции повторяющейся сетки, которая позволяет создавать сетку из существующего контента без дублирования элементов вручную. Подробнее см. в разделе Создание повторяющихся элементов.

Воспользуйтесь плагинами, чтобы автоматизировать повторяющиеся операции или части технологических процессов дизайнера, которые являются утомительными, сложными или рутинными. Подробнее см. в разделе Создание плагинов и управление ими.

Добавьте больше монтажных областей для каждого из экранов, которые вам нужны в вашем прототипе. Подробнее см. в разделе Работа с монтажными областями.

Создание прототипа

Вы можете создавать интерактивные прототипы с помощью голосовых возможностей, автоматического анимирования, жестов перетаскивания и синхронизированных переходов. Подробнее см. в разделах Голосовой дизайн и прототипирование в XD, Создание прототипов с помощью автоматического анимирования и жестов перетаскивания и Использование синхронизированных переходов.

Вы можете просмотреть интерактивные возможности в прототипах и во время предварительного просмотра записать взаимодействие в виде файла MP4.

Чтобы связать монтажные области или настроить интерактивные возможности, выберите монтажную область или объект и нажмите стрелку справа. Появится соединительная линия. Просто перетащите и подключите ее к другому объекту или монтажной области. В появившемся всплывающем окне укажите параметры и продолжительность перехода.

Вы также можете использовать наложение, чтобы смоделировать концепцию переходов без дублирования контента на нескольких монтажных областях. Подробнее см. Создание интерактивных прототипов.

Нажмите значок предварительного просмотра в правом верхнем углу приложения. В XD появится экран предварительного просмотра, на котором вы можете посмотреть разные страницы. На экране предварительного просмотра есть значок записи, который позволяет записывать перемещения между страницами и сохранять действия в формате MP4. 

Подробнее см. в разделе Предварительный просмотр и запись действий.

Предоставление доступа

Делитесь прототипами для проверки дизайна, презентации или пользовательского тестирования. Вы также можете публиковать прототипы и спецификации дизайна для разработки или настраивать процесс просмотра в соответствии с вашими предпочтениями. Дополнительные сведения см. в разделе Предоставление совместного доступа к дизайнам и прототипам.

Логотип Adobe

Вход в учетную запись