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

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

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

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

Предпочитаете видеоформат? Этот вводный туториал охватывает весь процесс от начала до конца:

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

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

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

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

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

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

1. На левой панели откройте панель Styles .
2. На вкладке Colors нажмите Create style и добавьте цвета, которые будете использовать повторно. Для каждого цвета выберите значение Light, переключитесь на вкладку Dark и выберите значение 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, затем добавьте элементы. Каждая группа на экране — вступление, вопрос + инпут, вопрос + квиз — находится в своём Vertical Container, чтобы связанные элементы визуально держались вместе.

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

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

5. Сгруппируйте подпись и поле ввода в вертикальный контейнер так же, как это сделано во вступлении.
6. Добавьте второй вопрос и квиз. Нажмите + > Text для подписи, затем + > Quiz и выберите пресет макета, например Icon Options. Настройте варианты ответов — в нашем примере Rock и Hip hop.
7. Сгруппируйте подпись и квиз в вертикальный контейнер аналогичным образом.
8. Задайте идентификаторы вариантов. Выберите каждый вариант квиза, откройте вкладку Interactions и укажите его Element 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 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 на каждом экране пути, указав пейвол в качестве места назначения.

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

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