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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Видео перестает воспроизводиться, когда запускаются действия, отличные от автоматической анимации и воспроизведения 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.

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

• Создание интерактивных прототипов
  
• Создание прототипов с помощью голосовых команд и воспроизведения
  
• Работа с анимацией Lottie

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