Медиа для онбординга

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

Изображения и видео

Изображения и видео отлично подходят для превью функций и туров по приложению. Показать пользователям, что они получат, эффективнее, чем просто описать это словами.

Чтобы загрузить медиа:

  1. Нажмите Add в верхнем левом углу.
  2. Перейдите в Media & Display и выберите Image/Video.
  3. Нажмите на область загрузки справа и выберите изображение или видео.
onboarding-media.gif

Поддерживаемые форматы и размеры

ПараметрПодробности
РасширенияPNG, JPG, JPEG, WEBP, MP4, WEBM
Максимальный размер15 МБ
Максимальное разрешение1920x1920

Если вы хотите добавить анимированный элемент в неподдерживаемом формате (например, Lottie), конвертируйте его в видео (например, с помощью этого инструмента) и вставьте как видео.

Анимированные графики

Графики — это анимации, которые визуализируют результаты и персонализируют пользовательский опыт в ваших онбордингах. Чтобы добавить график:

  1. Нажмите Add в верхнем левом углу.
  2. Перейдите в Media & Display и выберите Chart.
  3. Настройте график справа:
    • Type: выберите тип кривой. Обратите внимание, что тип кривой не связан напрямую со значениями.
    • Left и Right badges: задайте названия начальной и конечной точек графика.
    • X Labels и Date Range: по умолчанию на оси X отображаются даты. Можно настроить диапазон дат или указать произвольные значения.
    • Animation Duration: задайте длительность анимации в соответствии с вашим дизайном.

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

chart-onboarding.png

Настройка медиа

Помимо базовой настройки расположения элементов, вы можете дополнительно изменить внешний вид изображений, видео и графиков:

  1. Выберите элемент слева.
  2. Перейдите в Styles в правом меню.
  3. В зависимости от типа элемента доступны следующие параметры:
    • Image/Video: ширина, высота, скругление, прозрачность, выравнивание.
    • Chart: цвет и ширина линии, отступы бейджа, скругление, шрифт и цвет, шрифт и цвет оси X.

Удаление медиа

Вы можете удалить весь медиаэлемент или только файл, чтобы загрузить новый:

  • Удалить медиаэлемент: щёлкните правой кнопкой мыши по медиаэлементу слева и выберите Delete.
  • Удалить медиафайл: нажмите на превью медиа справа. Откроется область для загрузки нового файла.
onboarding-delete.gif