Многоэкранный флоу в Flow Builder — это последовательность экранов, связанных навигационными действиями. Флоу может быть линейным или ветвиться в зависимости от действий пользователя на предыдущих экранах. В этом гайде разобран весь процесс от начала до конца: создание экранов, наполнение их контентом, настройка навигации и добавление условного ветвления — на примере четырёхэкранного онбординга.

В примере используется:

• Поле для ввода имени, которое превращает имя пользователя в переменную для персонализации.
• Квиз с одним вариантом ответа, от которого зависит, какой экран увидит пользователь следующим.
• Два разветвлённых пути с индивидуальным текстом для каждого сегмента аудитории.
• Пейвол как финальный экран.

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

Предпочитаете видеоформат? В этом туториале показан весь процесс от начала до конца:

Перед началом работы

• Создайте продукты в дашборде Adapty. В примере используются два — годовая и месячная подписка.
• Подключите Adapty к App Store и Google Play.

1. Настройте многоразовые стили

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

Подробные инструкции см. в разделе Стили и оформление — Многоразовые стили.

Для настройки стилей:

1. На левой панели откройте панель Styles .
2. На вкладке Colors нажмите Create style и добавьте цвета, которые будете переиспользовать. Для каждого цвета выберите значение в режиме Light, затем переключитесь на вкладку Dark и выберите значение для тёмного режима.

3. На вкладке Text нажмите на существующий стиль, чтобы отредактировать шрифт, начертание и размер, или нажмите Create style, чтобы добавить собственные пресеты.

2. Создайте экраны

Флоу — это последовательность экранов. Настройте первый экран с общей основой — макетом, фоном и безопасной зоной — а затем продублируйте его для остальных. Так все экраны будут иметь одну основу, и вам нужно будет настроить её только один раз.

Подробнее об управлении экранами читайте в Экраны и слои — Управление экранами.

Чтобы настроить экраны:

1. Нажмите на пустую область холста на первом экране, чтобы открыть настройки экрана.
2. В разделе System UI отключите Safe area, чтобы фоновые элементы и элементы у краёв экрана могли выходить за пределы безопасной зоны.
3. В разделе Fill выберите тип фона и настройте его — например, Image , который будет отображаться за каждым экраном флоу.
4. В разделе Layout задайте направление Vertical и выберите подходящее распределение элементов.

5. В разделе Screens левой панели нажмите меню с тремя точками на первом экране и выберите Duplicate. Повторяйте, пока не получите четыре экрана — второй путь ветвления мы добавим позже, дублируя первый.
6. Переименуйте каждый экран в соответствии с его ролью — в нашем примере: Welcome, Quiz, Rock path и Paywall.

3. Создайте экран-приветствие

Первый экран обычно задаёт общий тон — заголовок, список возможностей и призыв к действию, открывающий остальную часть флоу. В нашем примере это экран Welcome.

Нажмите на экран Welcome в панели Screens, затем добавьте элементы:

1. Добавьте главное изображение. Нажмите + > Media > Image, загрузите изображение и при необходимости настройте отступы.

2. Добавьте заголовок: нажмите + > Text, выберите стиль заголовка из сохранённых текстовых стилей и отредактируйте поле Content.

3. Добавьте список функций. Нажмите + > List > Icon Cards, затем отредактируйте иконку и подпись в каждой карточке.

4. Добавьте основную кнопку навигации внизу экрана. Действие для неё будет настроено на шаге навигации.

4. Создание экрана ввода и викторины

Второй экран собирает данные от пользователя. В нашем примере он запрашивает имя и один ответ на вопрос, который определяет, какой путь увидит пользователь дальше.

Подробнее о вводе данных и викторинах читайте в разделах Поля ввода и формы и Опросы и викторины.

Нажмите на экран Quiz на панели Screens, затем добавьте элементы. Каждая группа на экране — вступление, вопрос + поле ввода, вопрос + викторина — располагается в своём вертикальном контейнере, чтобы связанные элементы держались вместе визуально.

1. Добавьте заголовок и текст вступления. Нажмите + > Text > H1 для заголовка и + > Text > Body для основного текста.
2. Сгруппируйте вступление. Нажмите + > Layout > Vertical Container, перетащите новый контейнер в верхнюю часть дерева слоёв, затем перетащите H1 и body внутрь него.

3. Добавьте первый вопрос и поле ввода. Нажмите + > Text для подписи вопроса, затем + > Inputs > Text для поля ввода.
4. Укажите Element ID поля ввода на вкладке Design — в нашем примере это name. Это сделает значение доступным как переменную, на которую могут ссылаться другие экраны.

5. Сгруппируйте подпись и поле ввода в вертикальный контейнер так же, как в intro.
6. Добавьте второй вопрос и квиз. Нажмите + > Text для подписи, затем + > Quiz и выберите пресет макета, например Icon Options. Настройте варианты ответов — в нашем примере Rock и Hip hop.
7. Сгруппируйте подпись и квиз в вертикальный контейнер таким же образом.
8. Задайте ID вариантов ответов. Выберите каждый вариант квиза, откройте вкладку Interactions и задайте его Element ID. Эти ID используются в условной навигации далее.

9. Переключите квиз в режим одиночного выбора: кликните на пустое место холста, чтобы открыть Screen settings, прокрутите вниз до Selectable Groups, кликните на название группы квиза и установите тип Single choice.

10. Добавьте основную кнопку внизу — это кнопка «Далее», которая запускает ветвление.

5. Создайте первую ветку

Каждый экран ветки подстраивает контент под определённый сегмент аудитории. В нашем примере ветка Rock включает контент, связанный с роком: плейлисты, исполнителей и рекомендации.

Подробнее о переменных читайте в разделе Переменные.

Чтобы создать экран:

1. На панели Screens нажмите на экран Rock path.
2. Добавьте заголовок. Поставьте курсор в поле Content в том месте, где должна появиться персонализация, нажмите на иконку переменной и откройте вкладку Elements. Выберите экран, в котором находится поле ввода — в нашем примере Quiz — затем выберите переменную значения этого поля. В пикере она будет отображена как <elementId>.value — в нашем примере name.value. Во время выполнения заголовок будет обновляться в соответствии с тем, что ввёл пользователь.

3. Добавьте основной текст в виде дополнительных текстовых элементов, адаптированных под сегмент аудитории для этого пути.
4. Добавьте основную кнопку внизу.

6. Создайте второй вариант ветки

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

Чтобы продублировать и обновить:

1. На панели Screens выберите первый экран ветки и нажмите ⌘D / Ctrl+D, чтобы продублировать его. Копия появится в конце списка экранов.
2. Переименуйте копию — в нашем примере это Hip hop path — и перетащите её на нужное место в списке экранов, так чтобы она находилась рядом с экраном, который был продублирован.

3. Обновите основной текст для другого сегмента аудитории. Персонализированный заголовок продолжает работать — переменная переносится автоматически.

7. Создайте пейвол

Финальный экран — это пейвол, где пользователь может оформить подписку. Подробное описание механики пейвола смотрите в статье Создание базового экрана пейвола. Версия ниже — краткая выжимка.

Нажмите на экран Paywall в панели Screens, затем добавьте элементы:

1. Добавьте Horizontal Container вверху и поместите внутрь кнопку Close. Пресет Close уже преднастроен.
2. Добавьте главное изображение, заголовок (с той же переменной персонализации, что и на экранах пути) и подзаголовок в качестве вспомогательного текста.

3. Добавьте продукты: нажмите + > Products и выберите Vertical List. Назначьте каждой карточке продукт через выпадающий список во вкладке Design.
4. Нажмите на карточку продукта по умолчанию и включите Set as default product, чтобы он был выбран при загрузке экрана.

5. Добавьте кнопку покупки. Нажмите + > Buttons и выберите пресет. На вкладке Interactions нажмите Add trigger > On tap > Add action и установите Action в значение Purchase, а Product — в products.selectedProduct.

6. Добавьте на экран шаблон Button > Links. Он включает три ссылки в футере: Restore Purchases, Terms of Use и Privacy Policy. Ссылка «Восстановить» настроена заранее. Чтобы настроить остальные ссылки, выберите элемент кнопки, откройте вкладку Interactions и укажите цель для действия Open URL.

8. Настройка навигации между экранами

Экраны не связаны между собой автоматически. Используйте триггеры On tap и действия Navigate to, чтобы подключить основную кнопку каждого экрана к следующему экрану. Если экран ветвится в зависимости от ввода пользователя, вместо этого используется Conditional action.

Подробнее о навигации и условных действиях — в разделах Навигация и взаимодействие и Действия — Условные действия.

Чтобы настроить навигацию для примера флоу:

1. Статическая навигация с экрана вступления. Откройте экран Welcome, выберите основную кнопку и перейдите на вкладку Interactions. Нажмите Add trigger > On tap > Add action, установите Action в значение Navigate to и выберите следующий экран — в нашем примере это экран Quiz.

2. Условная навигация из квиза. Откройте экран Quiz, выберите кнопку Next и добавьте триггер On tap с действием Conditional action. Настройте правило IF/ELSE:
   • В пикере переменных откройте вкладку Elements, выберите экран Quiz и укажите quiz.selectedOptionId.
   • Используйте оператор Equals и сравните значение с ID одного из вариантов — в нашем примере это вариант Rock.
   • IF условие совпадает — выполните Navigate to и выберите первый экран пути.
   • ELSE — выполните Navigate to и выберите второй экран пути.

3. Статическая навигация с каждой ветки на пейвол. Повторите шаг 1 для каждого экрана ветки, указав пейвол в качестве назначения.

Следующие шаги

• Сохраните и опубликуйте флоу.
• Добавьте флоу в плейсмент, чтобы начать показывать его пользователям.
• Для флоу с таргетингом на конкретные аудитории (вместо ветвления внутри флоу) создайте сегменты аудиторий и назначьте разные флоу на странице плейсмента.