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

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

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

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

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

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

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

1. Настройте переиспользуемые стили

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

Подробные инструкции смотрите в разделе Стилизация элементов — Переиспользуемые стили.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Подробнее о переменных — в разделе Переменные.

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

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

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

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

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

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

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

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

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

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

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

1. Добавьте Horizontal Stack в верхней части и поместите внутрь кнопку 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. Добавьте ссылки в подвал. Нажмите + > Buttons > Links — строка содержит Restore Purchases, Terms of Use и Privacy Policy. Ссылка Restore уже настроена. Для Terms и Privacy выделите текст каждой ссылки в поле Content, нажмите на иконку ссылки в панели форматирования и вставьте 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 на каждом экране пути, указав пейвол в качестве назначения.

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

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