Хотите задать вопрос или поделиться идеей? Присоединяйтесь к сообществу Adobe XD. Мы будем рады услышать ваши идеи и увидеть ваши работы!
Последнее обновление
11 янв. 2022 г.
Узнайте, как создавать интерактивные прототипы при помощи видео в Adobe XD.
Выберите предустановленную или индивидуальную опцию воспроизведения для видео и определите, как осуществляются другие взаимодействия с видео. Изучая варианты воспроизведения видео и взаимодействия, ознакомьтесь с некоторыми реалистичными примерами прототипов с использованием видео.
Перед началом работы
Узнайте, как импортировать видео и настроить параметры.
После импорта вашего видео в XD выберите, когда будет воспроизводиться ваше видео. Выполните действия, описанные ниже, чтобы задать режим воспроизведения.
- В режиме «Проект» выберите видео на холсте.
- В разделе Видео в инспекторе свойств выберите один из предустановленных параметров воспроизведения, описанных ниже.
Параметры воспроизведения и соответствующие взаимодействия
Когда вы настраиваете параметры воспроизведения для видео в режиме «Проект», соответствующие взаимодействия автоматически устанавливаются в режиме «Прототип».
Если выбрать параметр Воспроизведение касанием, то триггер Касание автоматически принимает значение действия по умолчанию Переключить воспроизведение / пауза.
При выборе функции Воспроизводить автоматически триггер Время автоматически принимает значение времени отображения в 0 секунд.
При выборе функции Без воспроизведения все взаимодействия в режиме «Прототип» отключаются.
Настроить проигрывание видео
Чтобы настроить воспроизведение видео, в разделе Видео в инспекторе свойств выберите Редактировать проигрывание.
При выборе функции Редактировать проигрывание вы автоматически переключаетесь на режим «Прототип».
В режиме «Прототип» выберите одну из настроек, описанных ниже.
Выберите один из следующих триггеров: Время (настройте параметр Время отображения на время, превышающее 0 секунд), Клавиши и геймпад или Голосовая команда.
Измените действие триггера воспроизведения видео Касание с Переключить воспроизведение / пауза на Выполнить или Пауза.
Вы не можете настроить воспроизведение видео с помощью триггера перетаскивания.
Использование воспроизведения видео с другими взаимодействиями
После того как вы установили параметр воспроизведения для своего видео, изучите возможность подключения его к другим взаимодействиям.
- Установите триггер «Окончание воспроизведения» для видео, чтобы он запускал действие после его воспроизведения.
- Воспроизводите видео и несколько файлов Lottie одновременно.
Подробнее о создании прототипов в XD см. в разделе Создание интерактивных прототипов.
Видео останавливается или продолжает воспроизводиться в зависимости от взаимодействий, которые вы установили для других объектов.
- Видео перестает воспроизводиться, когда запускаются действия, отличные от автоматической анимации и воспроизведения Lottie.
- Если вы хотите, чтобы видео продолжало воспроизводиться при наведении указателя мыши или касании других объектов, используйте автоматическую анимацию в качестве действия для триггеров наведения и касания.
Видео и триггеры времени
На любой монтажной области действуют правила, описанные ниже.
- Вы можете создать несколько триггеров времени. Интерактивные возможности будут воспроизводиться последовательно в зависимости от их задержки по времени.
- Вы можете настроить автоматическое воспроизведение видео и нескольких анимаций Lottie.
- Если вы установите триггеры времени с одинаковой задержкой по времени на монтажной области, видео и Lottie, приоритет будет следующим: монтажная область > видео > Lottie.
Примеры прототипирования
Теперь, когда вы узнали, как установить параметр воспроизведения для вашего видео и связать его с другими взаимодействиями, давайте попробуем несколько примеров.
Попрактикуйтесь в создании прототипов с видео, используя примеры файлов.
Узнайте, как создать прототип кнопки развертывания для видео.
Ex 1-artboard 1
- В режиме «Проектирование» импортируйте видео Tip 1 и разместите его на монтажной области. Задайте для него воспроизведение касанием.
- Поместите значок «Развернуть» (указанный в разделе «Значки» справа от монтажных областей) в правом нижнем углу видео.
- В режиме прототипа соедините значок «Развернуть» с Ex 1-artboard 2 и установите для него триггер касания с типом действия «Автоматическая анимация».
Ex 1-artboard 2
- В режиме «Проектирование» импортируйте видео Tip 1 и разместите его на монтажной области (полноэкранное видео). Задайте для него воспроизведение касанием.
- Поместите значок «Свернуть» (указанный в разделе «Значки» справа от монтажных областей) в правом нижнем углу видео.
- В режиме прототипа соедините значок «Свернуть» с Ex 1-artboard 1 и установите для него триггер касания с типом действия «Автоматическая анимация».
Когда вы завершите связывание взаимодействий, просмотрите прототип и проверьте взаимодействия.
Узнайте, как воспроизводить видео подряд в XD.
Ex 2-artboard 1
- В режиме «Проектирование» импортируйте начальное видео и разместите его в разделе «Введение». Задайте режим «Без воспроизведения».
- Импортируйте видео Tip 1 и Tip 2 и поместите их в раздел Tips. Задайте для них режим «Без воспроизведения».
- Поместите копию кнопки «Воспроизвести» (из раздела «Значки») на все видео.
- В режиме прототипа выполните действия, описанные ниже.
- Подключите кнопку Play на вводном видео к Ex 2-artboard 2.
- Подключите кнопку Play на видео с советом 1 к Ex 2-artboard 3.
- Подключите кнопку Play на видео с советом 2 к Ex 2-artboard 4.
Установите для них триггер касания с типом действия «Переход».
Ex 2-artboard 2
- В режиме «Проектирование» импортируйте начальное видео и разместите над разделом «Советы». Задайте для него автоматическое воспроизведение.
- В режиме прототипа соедините видео с Ex 2-artboard 3 и установите для него триггер окончания воспроизведения с типом действия «Переход».
Ex 2-artboard 3
- В режиме «Проектирование» импортируйте видео Tip 1 и разместите его над разделом Tip 1. Задайте для него автоматическое воспроизведение.
- В режиме прототипа соедините видео с Ex 2-artboard 4 и установите для него триггер окончания воспроизведения с типом действия «Переход».
Ex 2-artboard 4
- В режиме «Проектирование» импортируйте видео Tip 2 и разместите его над разделом Tip 2. Задайте для него автоматическое воспроизведение.
- В режиме прототипа соедините видео с Ex 2-artboard 1 и установите для него триггер окончания воспроизведения с типом действия «Переход».
Когда вы завершите связывание взаимодействий, просмотрите прототип и проверьте взаимодействия.
Ознакомьтесь с другими примерами, включающими видео, анимацию Lottie и состояния компонентов.
Подробнее
Посмотрите это 2-минутное видео, чтобы узнать несколько профессиональных советов по работе с видео в XD.
Связанные ресурсы
Есть вопрос или идея?
Проектируйте прототипы пользовательских интерфейсов при помощи Adobe XD
Создавайте интерактивные макеты для веб-сайтов и мобильных приложений.
