Дизайн онбордингов

No-code конструктор онбордингов для мобильных приложений — мощный и гибкий инструмент, который поможет вам создать лучший опыт онбординга для ваших пользователей. Быть разработчиком или дизайнером для этого не нужно.

Экраны онбординга

Онбординг состоит из нескольких экранов, которые вы добавляете и оформляете.

Пользователи будут переходить между ними, нажимая кнопку.

Если часть ваших пользователей нуждается в немного другом флоу (например, в фитнес-приложении вы хотите показывать разные изображения «цели» в зависимости от пола пользователя), создавать отдельные онбординги не нужно.

Вместо этого можно сделать некоторые экраны скрытыми по умолчанию и отображать их только в определённых сценариях.

Элементы онбординга

Элементы онбординга отображаются слева в том порядке, в котором они показываются. Нажмите Add в правом верхнем углу, чтобы добавить новый элемент.

Доступны следующие группы элементов:

Containers: Контейнеры позволяют настроить гибкую раскладку. Например, если вы хотите добавить текст в две колонки, добавьте Columns, а затем перетащите два текстовых блока в Columns на левой панели. Или, если вы добавляете карусель, нужно добавить изображения в элементы Media внутри неё.
Typography: Добавляйте предварительно отформатированные текстовые блоки и настраивайте их внешний вид по мере необходимости.
Media & Display: Помимо изображений и видео, можно добавлять анимированные графики, демонстрирующие ценность вашего приложения и мотивирующие пользователей.

Поддерживаемые форматы видео: MP4 и WebM. Максимальный размер медиафайла — 15 МБ.

Если вы хотите добавить неподдерживаемый анимированный элемент (например, Lottie), можно конвертировать его в видео (например, с помощью этого инструмента) и вставить как видео.
Quiz: Создавайте короткие опросы с текстовыми и графическими вариантами ответов, чтобы персонализировать онбординг и лучше узнать своих пользователей.
Inputs: Собирайте данные от пользователей.
Buttons: Кнопки позволяют пользователям переходить между экранами, закрывать онбординг или переходить к пейволу. Можно также добавлять глянцевые или анимированные кнопки, чтобы привлечь внимание пользователей и повысить конверсию из установки в покупку.
Loaders: Анимированные лоадеры удерживают внимание пользователей в процессе ожидания.
User engagement: Добавляйте отзывы, списки email-адресов пользователей и обратные отсчёты.

В рамках группы Media & Display можно также добавить пользовательский HTML-код, если встроенных возможностей кастомизации недостаточно.

Однако пользовательские HTML-элементы не предзагружаются и не кешируются, поэтому Raw HTML рекомендуется использовать только для небольших и лёгких элементов.

ID элемента и ID действия

Если вы хотите использовать кнопку для пользовательских действий, назначьте ей action ID и используйте его в исходном коде. Action ID позволяет одинаково обрабатывать разные кнопки с одним и тем же action ID.

Если вы хотите обрабатывать пользовательский ввод в конкретном поле (например, сохранять возраст или email), назначьте ему element ID и используйте его в исходном коде для связывания вопросов с ответами. Element ID можно использовать в онбординге только один раз.

Параметры кастомизации

В конструкторе доступны следующие параметры кастомизации:

Вкладка Styles: Настройте внешний вид элемента.
Вкладка Element: Задайте атрибуты элемента: видимость, действия при нажатии кнопок и другие свойства, не связанные с внешним видом элемента.
Вкладка Screen: Настройте общую конфигурацию экрана: заголовок или отображение счётчика экранов.

Копирование экранов и элементов

Если вы создали онбординг и хотите повторно использовать его части, или хотите внести небольшие изменения и запустить A/B-тесты, можно скопировать один или несколько экранов из одного онбординга в другой.

Чтобы скопировать экраны, откройте конструктор онбордингов и выполните одно из следующих действий:

Кликните правой кнопкой мыши по отдельному экрану и выберите Copy
Выберите нужный экран и нажмите Ctrl+C (Windows) или ⌘+C (Mac)

Также можно копировать отдельные элементы или текстовые блоки — как в рамках одного онбординга, так и между разными онбордингами.

Копирование экранов из web-to-app воронок

Если вы используете web-to-app воронки, созданные в FunnelFox, и хотите использовать экраны из воронок в онбордингах, это можно быстро сделать, скопировав экраны в конструкторе воронок и вставив их в конструктор онбордингов:

В конструкторе воронок FunnelFox кликните правой кнопкой мыши по экрану и выберите Copy, или выберите экран и нажмите Ctrl+C/⌘+C.
Откройте конструктор онбордингов.
Кликните правой кнопкой мыши по экрану, ниже которого хотите вставить скопированный экран, и выберите Paste, или выберите его и нажмите Ctrl+V/⌘+V. Скопированный экран будет вставлен ниже выбранного.