Это самый распространённый шаблон пейвола. Используйте его как отдельный экран или размещайте в конце многоэкранного флоу. Стандартный экран пейвола содержит заголовок, описание ценности, список функций, список продуктов, кнопку покупки и ссылки в футере для восстановления покупок, условий использования и политики конфиденциальности.

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

• Создайте продукты в дашборде Adapty.
• Подключите Adapty к App Store и Google Play.

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

Переиспользуемые стили позволяют применять одинаковую типографику и цвета на всех экранах в один клик. Каждый новый флоу поставляется с набором стандартных текстовых стилей (H1, Body, Button Label и т. д.) — настройте их под свой дизайн, прежде чем начнёте добавлять элементы. Добавьте цветовые стили для фирменных цветов, которые будете использовать на протяжении всего экрана.

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

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

1. На левой панели откройте панель Styles Styles.
2. На вкладке Text нажмите на существующий стиль, чтобы изменить шрифт, начертание, размер и цвет. Новые стили добавляйте только если стандартных не хватает.

3. На вкладке Colors нажмите Plus Create style и добавьте цвета, которые планируете использовать на экране повторно.

2. Настройте макет экрана

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

Полный список свойств экрана см. в разделе Экраны и слои — Настройки экрана.

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

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

4. В разделе Fill выберите тип фона — сплошной цвет, градиент или изображение. В этом примере используется Gradient Gradient с двумя цветовыми точками.

3. Добавьте кнопку закрытия

Кнопка закрытия скрывает пейвол. Пресет Close уже настроен — дополнительная настройка действия не требуется.

1. На канвасе нажмите +.
2. Выберите Buttons > Close.

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

H1 располагается рядом с кнопкой закрытия в верхней части экрана. Чтобы выровнять их по горизонтали, оберните оба элемента в горизонтальный стек.

Чтобы добавить заголовок:

1. Нажмите + > Text > H1.
2. Выберите H1, откройте вкладку Design на правой панели и отредактируйте текст в поле Content.

Чтобы сгруппировать заголовок с кнопкой закрытия:

1. На панели Layers нажмите на троеточие Context menu рядом со слоем кнопки закрытия и выберите Wrap > Wrap in Horizontal Stack.

2. Перетащите слой H1 в новый горизонтальный стек.

Чтобы выровнять оба элемента:

1. Измените размер кнопки закрытия и размер шрифта заголовка H1, чтобы они комфортно располагались на одной строке.
2. Выделив горизонтальный стек, настройте выравнивание и распределение в правой панели, чтобы элементы правильно выстроились.

5. Добавьте описание ценности

Короткая строка под заголовком объясняет пользователю, что он получит от подписки.

1. Нажмите + > Text > Body.
2. Выделив элемент body, отредактируйте текст в поле Content на вкладке Design.

6. Добавьте список возможностей

Список возможностей наглядно показывает, что откроется после оформления подписки. Каждая строка содержит иконку, заголовок функции и краткое описание.

Полный набор пресетов списков см. в разделе Элементы — List.

Чтобы добавить список возможностей:

1. Нажмите + > List и выберите пресет списка. Icon List — самый распространённый вариант для пейволов.
2. Выделите каждую строку и отредактируйте заголовок и описание в поле Content.
3. Чтобы добавить или удалить строки, выделите список и воспользуйтесь элементами управления строками на панели Layers.

7. Добавьте список продуктов

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

Подробнее об управлении продуктами — в разделе Настройка покупок.

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

1. Нажмите + > Products и выберите пресет макета. Vertical List — наиболее распространённый вариант.
2. Выберите каждую карточку продукта на холсте и укажите продукт в выпадающем списке на вкладке Design. В списке отображаются все продукты, настроенные в дашборде Adapty.
3. Чтобы изменить выбранный по умолчанию продукт, выберите нужную карточку и включите Set as default product на вкладке Design.
4. Чтобы настроить значок скидки, раскройте карточку продукта в панели Layers, выберите слой значка и отредактируйте его текст в поле Content. Скройте значок на остальных карточках, нажав на иконку глаза Show рядом с каждым слоем значка.

8. Добавьте кнопку покупки

Кнопка покупки запускает встроенную покупку для выбранного пользователем продукта. Переменная products.selectedProduct всегда указывает на текущий выбранный на экране продукт.

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

1. Нажмите + > Buttons и выберите пресет кнопки.
2. Выделите кнопку и откройте вкладку Interactions на правой панели.
3. Нажмите Add trigger > On tap, затем нажмите Add action.
4. Установите Action в значение Purchase, а Product — в products.selectedProduct.

9. Добавьте ссылки в футер

Футер содержит ссылки на условия использования и политику конфиденциальности (обязательные требования сторов), а также кнопку восстановления предыдущих покупок.

Чтобы добавить ссылки в футер:

1. Нажмите + > Buttons > Links. Это добавит строку с кнопками Restore Purchases, Terms of Use и Privacy Policy.
2. Выберите ссылку Terms of Use. На вкладке Interactions уже привязано действие Open URL — вставьте URL ваших условий использования в поле URL.
3. Повторите то же самое для ссылки Privacy Policy, указав URL вашей политики конфиденциальности.
4. Оставьте ссылку Restore Purchases без изменений — её действие уже настроено заранее.

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

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