Рисунок: Мэтт Рей
Adobe XD поддерживает различные типы медиаконтента — от изображений и векторной графики до музыкальных и звуковых файлов, что позволяет без труда создавать дизайн и прототипы потрясающих цифровых интерфейсов.
Из этого руководства вы узнаете, как, используя медиаконтент двух типов ( видеоролики и анимации Lottie), создать прототип приложения для публикации видео в социальных сетях, похожего на TikTok и Instagram Reels. Загрузите начальный файл и откройте его в Adobe XD, чтобы продолжить работу с данным учебным пособием.
Добавление видеоролика и анимации Lottie в Adobe XD
Перед началом работы с данным учебным пособием полезно разобраться в том, как видеоролики и анимации Lottie используются в Adobe XD. Подобно изображениям и векторной графике видеоролики и файлы Lottie можно перетащить на холст из файловой системы компьютера. На холсте вы можете переместить файл в нужное место. Параметры файла можно настроить в инспекторе свойств в режиме создания дизайна.
Точно так же, как и в случае с изображениями, при перетаскивании файла одного из этих типов на векторную фигуру или контур к нему будет автоматически применена функция маскирования с использованием фигуры. Это упрощает добавление видеороликов и анимаций Lottie в фигуры-заполнители. Такая возможность может быть очень полезна при заполнении каркасных макетов высококачественными ресурсами. Если после добавления видеоролика или анимации Lottie в фигуру дважды щелкнуть маску, можно настроить положение файла в пределах маски.
В настоящее время Adobe XD поддерживает видеофайлы формата MP4 размером не более 15 МБ (из соображений оптимизации скорости работы и производительности). Файлы Lottie используются в формате JSON, и их можно загрузить из LottieFiles или экспортировать из Adobe After Effects с помощью подключаемого модуля LottieFiles для After Effects.
В начальных файлах, которые мы упомянули ранее, есть папка с несколькими видеороликами и файлами Lottie, которые можно использовать в данном учебном проекте.
Предоставляемый вам начальный файл включает ряд ресурсов, компонентов и элементов пользовательского интерфейса, которые вы будете использовать для разработки и создания прототипа мобильного приложения для просмотра коротких видеоклипов. В данном руководстве мы сосредоточимся на добавлении видеороликов и файлов Lottie, поэтому мы подготовили для вас несколько страниц, которые уже размещены и готовы к работе.
Создание потока входа в приложение
Сначала мы создадим интерфейс для потока входа в систему, с которого пользователи будут начинать работу с этим мобильным приложением. Этот поток начинается с анимированного логотипа приложения на начальном экране, после чего выполняется переход к экрану входа в систему. На этом экране в качестве фонового изображения будет использоваться автоматически воспроизводимый видеоролик.
Анимированный логотип приложения
Прежде всего на панели ресурсов документа найдите компонент Animated Logo и перетащите экземпляр этого компонента на первый экран, заменив им прямоугольник заполнителя в середине монтажной области. Этот компонент включает файл Lottie, созданный в After Effects и импортированный в Adobe XD.
Чтобы анимация логотипа воспроизводилась автоматически, необходимо изменить параметры воспроизведения в инспекторе свойств. В разделе интерактивных медиаданных в раскрывающемся меню выберите пункт автоматического воспроизведения. Если выполнить предварительный просмотр проекта, будет видно, что анимация Lottie автоматически воспроизводится, если открыто окно предварительного просмотра.
Так как эта анимация логотипа имитирует загрузку приложения, после ее завершения прототип должен перейти к следующему экрану. Для этого еще раз выберите анимацию Lottie и переключитесь в режим создания прототипа. В меню взаимодействий выберите пункт + и добавьте новое взаимодействие с триггером окончания воспроизведения. Не переопределяйте триггер времени, так как это взаимодействие запускает автоматическое воспроизведение анимации.
Если выбран триггер окончания воспроизведения, укажите место назначения на первом экране потока входа в систему (загрузки домашнего экрана). Благодаря этому выполнение прототипа будет продолжено после завершения анимации.
Фоновое видео
Следующий шаг — добавление видеофайла в качестве фона в поток регистрации. Так как для этого потока регистрации используется несколько экранов, удобно настроить фон на одном экране, а затем скопировать его и вставить в другие.
На первом экране на панели слоев выберите слой заполнителя видео и переместите его в верхнюю часть стопки (это упростит добавление видеоролика, и эту операцию можно выполнить, используя сочетания клавиш). Затем перетащите файл HomeScreen.mp4 из папки с образцами файлов и поместите его в прямоугольную фигуру (отпустите файл, когда прямоугольник станет синим).
Дважды щелкните прямоугольник, чтобы настроить маску нужным образом. Выбрав нужное положение, перейдите в инспектор свойств и откройте раздел параметров видео. В нашем случае видео должно быть зациклено, поэтому щелкните переключатель цикла, чтобы включить эту функцию. В раскрывающемся меню параметров видео выберите пункт автоматического воспроизведения.
Теперь скопируйте этот видеоэлемент в буфер обмена и вставьте его в предварительно выбранные оставшиеся монтажные области в потоке регистрации (XD автоматически выполнит вставку во все выбранные монтажные области).
И, наконец, переместите каждый экземпляр на задний план стопки слоев в каждой монтажной области (это можно сделать с помощью клавиш SHIFT+[). Монтажные области в этом потоке регистрации уже связаны друг с другом с помощью функции Auto-Animate, поэтому если щелкнуть их во время предварительного просмотра, будет видно, что видео воспроизводится автоматически и продолжает воспроизводиться при перемещении пользователя по прототипу. Для двух последних монтажных областей отключите параметр воспроизведения, так как видео не должно отображаться на этих экранах.
Создание индикатора загрузки
После завершения регистрации приложение начнет загружаться, а затем перейдет на начальную страницу. Чтобы создать этот процесс, можно добавить еще одну анимацию Lottie на экран между этапом регистрации и начальной страницей.
В монтажной области загрузки приложений перетащите файл Lottie Loading Indicator из ресурсов документа в прямоугольник заполнителя. Используя тот же подход, что и в случае с анимированным логотипом, настройте автоматическое воспроизведение для анимации. После завершения воспроизведения перейдите к монтажной области средней фазы, которая будет автоматически выполнять переход на начальный экран.
Чтобы создать плавный переход с предыдущего экрана, поместите копию индикатора загрузки на последний экран потока регистрации. При этом уменьшите его размер, а для параметра непрозрачности задайте значение 0 %. Когда при переходе на страницу с помощью функции Auto-Animate начнется воспроизведение, индикатор загрузки будет развернут.
Создание вертикальной видеокарусели
После завершения процесса регистрации можно завершить работу главного начального экрана приложения. Этот экран работает как вертикальная видеокарусель, которая после завершения воспроизведения одного видеоролика прокручивает содержимое экрана до следующего видеоролика. Эта карусель будет создана аналогично карусели изображений с помощью Adobe XD, чтобы позволит получить интерактивный элемент. В данной ситуации воспроизведение видео будет управляемым, чтобы можно было воспроизводить один видеоролик и по его завершении автоматически переходить на следующий этап карусели.
Создание видеокомпонентов
Компоненты для этого элемента уже созданы. Найдите главный компонент в разделе компонентов учебного файла. Для каждого из четырех видеороликов, которые нужно включить в канал, создано по одному экземпляру.
Для начала выберите первый экземпляр с меткой Post Element и прямоугольник изображения заполнителя, как вы делали ранее. Перетащите видеоролик Berg.mp4 из папки ресурсов и (при необходимости) скорректируйте маску. Не беспокойтесь о других параметрах, так как мы настроим их в каждом состоянии компонента.
Повторите это действие для трех других экземпляров на странице, добавив видеоролики Walk.mp4, Dive.mp4 и River.mp4 в каждый заполнитель видео.
В завершение скомпилируйте каждый из этих видеоэлементов в компонент, разместив их вертикально в стопке один поверх другого и сформировав компонент с названием Video Feed.
Для этого видеоканала будет доступно действие перетаскивания, позволяющее перейти к следующему видеоролику, а также функция автоматического перехода к следующему видеоролику по окончании воспроизведения текущего видеоролика. Для этого вместо состояний компонентов мы будем использовать отдельные монтажные области, а при позиционировании компонентов будем просто перемещать их вверх и вниз в зависимости от воспроизводимого видеоролика.
Позиционирование скомпилированного компонента
Для начала возьмите экземпляр скомпилированного компонента (так как у каждого из них будут переопределения) и разместите его в первой монтажной области для начального канала. Используя сочетание клавиш с квадратной скобкой или панель слоя, расположите его в нижней части стопки слоев и убедитесь, что верхняя часть компонента (первое видео в стопке) находится на своем месте в верхней части.
Затем дважды щелкните компонент и для параметра воспроизведения первого видео задайте значение автоматического воспроизведения. В каждой монтажной области следует задать значение автоматического воспроизведения только для видеороликов в представлении, поэтому обязательно примените эти изменения к экземплярам скомпилированного компонента, а не к главному компоненту.
Создание прототипов взаимодействий с видео
И, наконец, чтобы соединить видеоролики друг с другом, необходимо создать два взаимодействия для каждого видеоролика. Первое взаимодействие будет размещено на самом видеоролике: на первом видеоролике выберите видеоролик на панели слоев. В режиме создания прототипа настройте новое взаимодействие с триггером окончания воспроизведения и в качестве места назначения задайте для него следующую монтажную область в серии. Используя функцию Auto-Animate в качестве типа действия, выберите нужное замедление. Это взаимодействие будет автоматически выполнять переход к следующему видеоролику после завершения воспроизведения первого видеоролика.
Если видеоролик длинный либо пользователь хочет пропустить его и перейти к следующему видеоролику, можно добавить взаимодействие перетаскивания. Для этого выберите скомпилированный видеокомпонент и в режиме создания прототипов добавьте взаимодействие с триггером перетаскивания. Еще раз, используя функцию Auto-Animate, выберите следующую монтажную область в серии. Если теперь пользователь потянет видеокомпонент вверх, прототип выполнит анимацию видеороликов, прокрутив содержимое экрана вверх и выполнив переход к следующему видеоролику.
Подключение остальной части приложения
На холсте доступны дополнительные монтажные области с внедренными видеороликами. Попробуйте поэкспериментировать с этими ресурсами и создать подробное представление видео на странице профиля или собственные ресурсы, чтобы закончить интерфейс приложения для работы с видеороликами.
Узнайте больше о том, как создавать прототипы, используя Adobe XD, и разрабатывать другие подобные интерфейсы, с помощью этих руководств по созданию прототипов.
