---
title: "Дизайн онбординга"
description: "Создавайте осмысленные онбординги."
---

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

## Экраны онбординга \{#onboarding-screens\}

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

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

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

Вместо этого можно [скрыть некоторые экраны по умолчанию и показывать их только в определённых сценариях](onboarding-user-engagement).
:::

## Элементы онбординга \{#onboarding-elements\}

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

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

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

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

  Если вы хотите добавить неподдерживаемый анимированный элемент (например, Lottie), можно конвертировать его в видео (например, с помощью [этого инструмента](https://www.lottielab.com/lottie/lottie-to-video)) и вставить как видео.
- **Quiz**: Создавайте короткие опросы с текстовыми и графическими вариантами ответов, чтобы персонализировать онбординг и лучше узнать своих пользователей.
- **Inputs**: Собирайте данные от пользователей.
- **Buttons**: Кнопки позволяют пользователям переходить между экранами, закрывать онбординг или переходить на пейвол. Также можно добавлять глянцевые или анимированные кнопки, чтобы привлечь внимание пользователя и конвертировать установку в покупку.
- **Loaders**: Анимированные загрузчики удерживают внимание пользователей в процессе ожидания.
- **User engagement**: Добавляйте отзывы, списки email пользователей и обратный отсчёт.

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

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

  
  <img src="/assets/shared/img/design-onboarding4.png"
  style={{
  border: '1px solid #727272', /* border width and color */
  width: '700px', /* image width */
  display: 'block', /* for alignment */
  margin: '0 auto' /* center alignment */
  }}
  />
  

### ID элемента и ID действия \{#element-id-and-action-id\}

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

  
  <img src="/assets/shared/img/ios-events-1.webp"
  style={{
  border: '1px solid #727272', /* border width and color */
  width: '700px', /* image width */
  display: 'block', /* for alignment */
  margin: '0 auto' /* center alignment */
  }}
  />
  

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

  
  <img src="/assets/shared/img/design-onboarding5.png"
  style={{
  border: '1px solid #727272', /* border width and color */
  width: '700px', /* image width */
  display: 'block', /* for alignment */
  margin: '0 auto' /* center alignment */
  }}
  />
  

## Параметры кастомизации \{#customization-options\}

В конструкторе доступны следующие параметры кастомизации:
- Вкладка **Styles**: настройка внешнего вида элемента.
  
  <img src="/assets/shared/img/design-onboarding1.png"
  style={{
  border: '1px solid #727272', /* border width and color */
  width: '700px', /* image width */
  display: 'block', /* for alignment */
  margin: '0 auto' /* center alignment */
  }}
  />
  
- Вкладка **Element**: настройка атрибутов элемента, таких как видимость, действия при нажатии кнопок и другие свойства, не связанные с внешним видом.
  
  <img src="/assets/shared/img/design-onboarding2.png"
  style={{
  border: '1px solid #727272', /* border width and color */
  width: '700px', /* image width */
  display: 'block', /* for alignment */
  margin: '0 auto' /* center alignment */
  }}
  />
  
- Вкладка **Screen**: общая конфигурация экрана, например заголовок или отображение счётчика экранов.
  
  <img src="/assets/shared/img/design-onboarding3.png"
  style={{
  border: '1px solid #727272', /* border width and color */
  width: '700px', /* image width */
  display: 'block', /* for alignment */
  margin: '0 auto' /* center alignment */
  }}
  />
  

## Копирование экранов и элементов \{#copy-screens-and-elements\}

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

Чтобы скопировать экраны, откройте конструктор онбординга и выполните одно из действий:
- Кликните правой кнопкой мыши по нужному экрану и выберите **Copy**
- Выделите нужный экран и нажмите `Ctrl+C` (Windows) или `⌘+C` (Mac)

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

## Копирование экранов из web-to-app воронок \{#copy-screens-from-web-to-app-funnels\}

Если вы используете web-to-app воронки, созданные в [FunnelFox](https://funnelfox.com/), и хотите использовать экраны из воронок в онбордингах, это можно сделать быстро — скопировав экраны в конструкторе воронок и вставив их в конструкторе онбординга:

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

  
  <img src="/assets/shared/img/funnel-to-onboarding.gif"
  style={{
  border: '1px solid #727272', /* border width and color */
  width: '700px', /* image width */
  display: 'block', /* for alignment */
  margin: '0 auto' /* center alignment */
  }}
  />