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

Создание прототипов при помощи видео

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

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

Перед началом работы

Настройка параметров воспроизведения

Настройка параметров воспроизведения для видео
Настройка параметров воспроизведения для видео

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

  1. В режиме «Проект» выберите видео на холсте.
  2. В разделе Видео в инспекторе свойств выберите один из предустановленных параметров воспроизведения, описанных ниже.

Параметры воспроизведения и соответствующие взаимодействия

Когда вы настраиваете параметры воспроизведения для видео в режиме «Проект», соответствующие взаимодействия автоматически устанавливаются в режиме «Прототип».

Воспроизведение касанием

Если выбрать параметр Воспроизведение касанием, то триггер Касание автоматически принимает значение действия по умолчанию Переключить воспроизведение / пауза.

Воспроизведение касанием — Режим проектирования

Воспроизведение касанием — Режим прототипа

Функция «Воспроизводить автоматически»

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

Воспроизводить автоматически — Режим проектирования

Воспроизводить автоматически — Режим прототипа

Без воспроизведения.

При выборе функции Без воспроизведения все взаимодействия в режиме «Прототип» отключаются.

Настроить проигрывание видео

Чтобы настроить воспроизведение, выберите «Редактировать проигрывание».
Чтобы настроить воспроизведение, выберите «Редактировать проигрывание».

Чтобы настроить воспроизведение видео, в разделе Видео в инспекторе свойств выберите Редактировать проигрывание.

При выборе функции Редактировать проигрывание вы автоматически переключаетесь на режим «Прототип».

В режиме «Прототип» выберите одну из настроек, описанных ниже.

Выберите один из следующих триггеров: Время (настройте параметр Время отображения на время, превышающее 0 секунд), Клавиши и геймпад или Голосовая команда.

Выберите триггер «Время» с параметром «Время отображения» на время, превышающее 0 секунд.
Выберите триггер «Время» с параметром «Задержка», значение которого не превышает 0 секунд.

Измените действие триггера воспроизведения видео Касание с Переключить воспроизведение / пауза на Выполнить или Пауза.

Настройте воспроизведение, выбрав триггер «Касание» с действием «Выполнить» или «Пауза».
Настройте воспроизведение, выбрав триггер «Касание» с действием «Выполнить» или «Пауза».

 Вы не можете настроить воспроизведение видео с помощью триггера перетаскивания.

Использование воспроизведения видео с другими взаимодействиями

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

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

  • Установите триггер «Окончание воспроизведения» для видео, чтобы он запускал действие после его воспроизведения.
  • Воспроизводите видео и несколько файлов Lottie одновременно.

Подробнее о создании прототипов в XD см. в разделе Создание интерактивных прототипов.

Взаимодействия и воспроизведение видео 

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

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

Видео и триггеры времени

На любой монтажной области действуют правила, описанные ниже.

  • Может быть задано несколько триггеров «Время», выставленных последовательно в зависимости от их времени отображения.
  • Можно настроить совместное воспроизведение видео и нескольких анимаций Lottie с одинаковой временной задержкой. Можно также настроить их автоматическое совместное воспроизведение (установлено время задержки 0 с).
  • Если вы установите триггеры времени с одинаковой задержкой на монтажной области, в видео и Lottie, приоритет будет следующим: монтажная область > видео > Lottie.

Примеры прототипирования

Теперь, когда вы узнали, как установить параметр воспроизведения для вашего видео и связать его с другими взаимодействиями, давайте попробуем несколько примеров.

Загрузить образцы файлов

Пример 1. Создание прототипа кнопки развертывания для видео

Узнайте, как создать прототип кнопки развертывания для видео.

Ex 1-artboard 1

  1. В режиме «Проектирование» импортируйте видео Tip 1 и разместите его на монтажной области. Задайте для него воспроизведение касанием.
  2. Поместите значок «Развернуть» (указанный в разделе «Значки» справа от монтажных областей) в правом нижнем углу видео. 
  3. В режиме прототипа соедините значок «Развернуть» с Ex 1-artboard 2 и установите для него триггер касания с типом действия «Автоматическая анимация».

Ex 1-artboard 2

  1. В режиме «Проектирование» импортируйте видео Tip 1 и разместите его на монтажной области (полноэкранное видео). Задайте для него воспроизведение касанием.
  2. Поместите значок «Свернуть» (указанный в разделе «Значки» справа от монтажных областей) в правом нижнем углу видео. 
  3. В режиме прототипа соедините значок «Свернуть» с Ex 1-artboard 1 и установите для него триггер касания с типом действия «Автоматическая анимация».

Когда вы завершите связывание взаимодействий, просмотрите прототип и проверьте взаимодействия.

Пример 2. Воспроизведение прототипа

Узнайте, как воспроизводить видео подряд в XD.

Ex 2-artboard 1

  1. В режиме «Проектирование» импортируйте начальное видео и разместите его в разделе «Введение». Задайте режим «Без воспроизведения».
  2. Импортируйте видео Tip 1 и Tip 2 и поместите их в раздел Tips. Задайте для них режим «Без воспроизведения».
  3. Поместите копию кнопки «Воспроизвести» (из раздела «Значки») на все видео.
  4. В режиме прототипа выполните действия, описанные ниже.
  • Подключите кнопку Play на вводном видео к Ex 2-artboard 2.
  •  Подключите кнопку Play на видео с советом 1 к Ex 2-artboard 3.
  • Подключите кнопку Play на видео с советом 2 к Ex 2-artboard 4. 

Установите для них триггер касания с типом действия «Переход».

Ex 2-artboard 2

  1. В режиме «Проектирование» импортируйте начальное видео и разместите над разделом «Советы». Задайте для него автоматическое воспроизведение.
  2. В режиме прототипа соедините видео с Ex 2-artboard 3 и установите для него триггер окончания воспроизведения с типом действия «Переход».

Ex 2-artboard 3

  1. В режиме «Проектирование» импортируйте видео Tip 1 и разместите его над разделом Tip 1. Задайте для него автоматическое воспроизведение.
  2. В режиме прототипа соедините видео с Ex 2-artboard 4 и установите для него триггер окончания воспроизведения с типом действия «Переход».

Ex 2-artboard 4

  1. В режиме «Проектирование» импортируйте видео Tip 2 и разместите его над разделом Tip 2. Задайте для него автоматическое воспроизведение.
  2. В режиме прототипа соедините видео с Ex 2-artboard 1 и установите для него триггер окончания воспроизведения с типом действия «Переход».

Когда вы завершите связывание взаимодействий, просмотрите прототип и проверьте взаимодействия.

Дополнительные примеры

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

Подробнее

Посмотрите это 2-минутное видео, чтобы узнать несколько профессиональных советов по работе с видео в XD.

Связанные ресурсы

Есть вопрос или идея?

обратитесь за помощью в сообщество

Хотите задать вопрос или поделиться идеей? Присоединяйтесь к сообществу Adobe XD. Мы будем рады услышать ваши идеи и увидеть ваши работы!

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

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