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

Анимирование прототипов

  1. Руководство пользователя Adobe XD
  2. Введение
    1. Новые возможности Adobe XD
    2. Распространенные вопросы
    3. Создание дизайна, прототипов и совместная работа в Adobe XD
    4. Управление цветом
    5. Системные требования
      1. Требования к оборудованию и программному обеспечению
      2. Adobe XD, Big Sur и Apple Silicon | macOS 11
    6. Основные сведения о рабочей среде
    7. Изменение языка приложения в Adobe XD
    8. Доступ к наборам для дизайна пользовательского интерфейса
    9. Доступность в Adobe XD
    10. Сочетания клавиш
    11. Советы и рекомендации
  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. Создание прототипов при помощи видео
      3. Работа с анимацией 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. Экспорт и загрузка ресурсов из спецификаций дизайна
    13. Корпоративный групповой совместный доступ
    14. Резервное копирование или перенос ресурсов XD
  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. Облачные документы и библиотеки Creative Cloud Libraries
      1. Проблемы с облачными документами XD
      2. Проблемы со связанными компонентами
      3. Проблемы с библиотеками и ссылками
    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. В разделе экспорта не представлены сторонние приложения

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

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

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

Цепная реакция взаимодействий на веб-сайте
Цепная реакция на веб-сайте

Эффект проведения пальцем и перетаскивания на сенсорном устройстве
Эффект проведения пальцем и перетаскивания на сенсорном устройстве

Чтобы создать анимированный прототип, выполните следующие действия:

  1. Прежде чем начать, изучите эти простые правила обработки объекты во время анимации:

    • Если объект отсутствует в монтажной области назначения, он постепенно становится более четким на экране.
    • Если объект отсутствует в исходной монтажной области, его яркость постепенно приглушается.
    • Если у объекта есть совпадение как по имени слоя, так и по группе, к которой он принадлежит, его атрибуты анимируются. Полный список поддерживаемых свойств и переходов можно прочитать в разделе Свойства объекта.
    • Если хотите создать прототип эффекта горизонтальной или вертикальной прокрутки, используйте группы прокрутки.
  2. Соедините монтажные области в режиме прототипа. 

  3. Щелкните соединитель, чтобы открыть панель взаимодействий, которая появляется в инспекторе свойств, и задайте следующие параметры:

    • Триггер: выберите параметр для запуска анимации. Например, чтобы смоделировать событие касания карты, выберите Нажатие. 
    • Действие: выберите Автоматическое анимирование. Теперь вы можете назначить два действия на один триггер, например нажатие. Для этого установите для первой кнопки + Действие в инспекторе свойств параметр Переход, Автоматическое анимирование, Наложение, Прокрутка к или Предыдущая монтажная область, затем установите для второй кнопки + Действие непереходный параметр, например Автоматическое воспроизведение или Воспроизведение речи. Обратите внимание, что если в качестве первого действия вы выбрали воспроизведение звука или речи, вы не сможете добавить второе действие.
    • Место назначения: выберите монтажную область назначения для перехода анимации.
    • Смягчение: выберите этот параметр, чтобы смоделировать эффекты смягчения. Например, выберите Ускорение, если нужно, чтобы анимация постепенно уходила из прототипа.
    Процесс автоматического анимирования
    Процесс автоматического анимирования

    A. Выберите тип триггера B. Выберите действие для автоматического анимирования C. Выберите монтажную область назначения D. Выберите эффекты смягчения 

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

     Не забывайте, что триггеры «Нажатие», «Перетаскивание», Наведение и Время можно использовать только один раз, а ГолосКлавиши и геймпад можно использовать много раз. 

  5. Выберите  , чтобы просмотреть свои анимации в поддерживаемых браузерах

     Помните, что XD не поддерживает прокрутку при предварительном просмотре автоматически анимированных монтажных областей.

Примеры и образцы файлов

Хотите узнать, как работает автоматическая анимация? Начните с этого набора элементов интерфейса, в котором есть основные взаимодействия, элементы пользовательского интерфейса, примеры перетаскивания и многое другое.

Такие образцы файлов также можно использовать для тестирования автоматического анимирования.

Хотите достичь эффекта проведения пальцем в YouTube, без волокиты со шкалой времени и опорными кадрами?

Подключите монтажные области и выберите эти параметры в инспекторе свойств прототипа:

  • Триггер: выберите Перетаскивание.  
  • Действие: выберите Автоматическое анимирование.
  • Место назначения: выберите монтажную область назначения для перехода анимации.
  • Смягчение: выберите этот параметр, чтобы создать эффект смягчения. Например, выберите Замедление и Ускорение, чтобы анимация в прототипе постепенно появлялась и уходила.

Загрузите образцы файлов и попробуйте выполнить это самостоятельно либо просмотрите это видео, чтобы получить больше информации.

Время просмотра: 1 минута.

Хотите узнать, как создавать анимированное мобильное меню с эффектом ускорения? 

  1. Загрузите образцы файлов.
  2. В режиме прототипа подключите многослойное меню к монтажной области home_expanded и выберите следующие параметры в инспекторе свойств прототипа:
  • Триггер: выберите Нажатие.  
  • Действие: выберите Автоматическое анимирование.
  • Место назначения: выберите монтажную область назначения для перехода анимации.
  • Смягчение: выберите эффект Ускорение.
  • Продолжительность: установите продолжительность 0,8 секунды.

Желаете добавить к своему дизайну дополнительную анимацию? Посмотрите это видео по работе с After-Effects. 

Экспорт из Adobe XD в After-Effects (время просмотра: 1 минута)

Подробнее

Чтобы узнать больше об автоматическом анимировании в XD, посмотрите это видео.
Время просмотра: 6 минут

 Adobe

Получайте помощь быстрее и проще

Новый пользователь?