Временные рекомендации по пользовательскому интерфейсу для альтернативных систем биллинга в приложениях

Обзор

Для обеспечения единообразного пользовательского опыта и помощи пользователям в принятии обоснованного решения необходимо отображать информационный экран и отдельный экран выбора способа оплаты, если вы предлагаете альтернативную систему внутриигровых покупок, отличную от системы Google Play. Информационный экран должен отображаться пользователю только при первой покупке, а экран выбора способа оплаты — перед каждой покупкой. Сообщения, отображаемые пользователю, и спецификации пользовательского интерфейса для обоих экранов должны быть реализованы в соответствии со следующими рекомендациями.

Информация для пользователей

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

Когда отображать

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

Когда отображать цену

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

Как отобразить

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

Для получения дополнительной информации о проектировании и реализации модальных нижних листов обратитесь к Google Material Design.

Действия пользователя

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

Продолжать

Нажатие кнопки «Продолжить» закрывает информационный экран и открывает экран выбора способа оплаты.

Узнать больше

Нажатие кнопки «Узнать больше» открывает статью в Справочном центре Google в веб-браузере.

Увольнять

Если пользователи хотят закрыть нижний экран и вернуться к основному экрану, они могут сделать это следующим образом:

• Постукивание по внешней стороне нижнего листа контейнера
• Нажмите кнопку «Назад» в системе Android.

Информационный экран не нужно отображать повторно после его закрытия или после того, как пользователь нажал кнопку «Продолжить».

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

Технические характеристики проекта

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

1. Заголовок
2. Сообщение
3. Кнопки
4. Нижний лист
5. Фоновый экран

Заголовок

Сообщение

Кнопка 1

Кнопка 2

Нижний лист

Пейзаж

В альбомной ориентации нижний лист шире, чем в портретной, но в остальном соответствует тем же конструктивным характеристикам и функциональности.

Экран выбора способа оплаты

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

Когда отображать

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

Как отобразить

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

Равное визуальное представление

Кнопки для дополнительной внутриигровой оплаты и для оплаты через Google Play должны быть представлены одинаково и корректно. Это включает, помимо прочего, одинаковые размеры кнопок, размер/стиль текста, области нажатия и размеры значков. Пожалуйста, не добавляйте дополнительный текст, изображения или изменения стиля, не указанные в данных рекомендациях.

Пример: Нажатие кнопки «Присоединиться сейчас» запускает экран выбора способа оплаты.

Технические характеристики проекта

Экран выбора способа оплаты состоит из четырех отдельных компонентов: заголовок, описание, кнопка разработчика и кнопка Google Play. Необходимо использовать все компоненты, содержащие точный текст и элементы пользовательского интерфейса, определенные в данных рекомендациях. Мы просим вас не добавлять дополнительный текст или изображения на этот экран, но вы можете добавлять дополнительный текст и изображения на другие экраны, принадлежащие вам.

Визуальные материалы для Google Play и значки оплаты доступны по ссылкам, приведенным ниже.

Пример: В портретном режиме нижний экран должен занимать 100% общей ширины экрана.

1. Заголовок
2. Описание
3. Кнопка разработчика
4. Кнопка Google Play
5. Нижний лист
6. Фоновый экран

Заголовок

Описание

Кнопка разработчика

1. значок приложения
2. Название приложения
3. значки способов оплаты

значки способов оплаты

1. Максимальное количество значков способов оплаты
2. Вместо значков — названия способов оплаты.

Масштабировать в соответствии с шириной экрана

3. ширина 360dp
4. ширина 480dp

Контейнер кнопок

значок приложения

Заголовок

Способы оплаты

Кнопка Google Play

1. Икона
2. Заголовок
3. Принимаемые способы оплаты
4. Дополнительный индикатор

Контейнер кнопок

значок приложения

Заголовок

Способы оплаты

Пейзаж

Пример: В альбомной ориентации нижний лист шире, чем в портретной, но в остальном соответствует тем же конструктивным требованиям и функциональности.