Временные правила UX для альтернативных платежных систем в приложениях

Обзор

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

Рекомендации по интерфейсу для экрана с информацией и экрана выбора платежной системы

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

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

Когда показывать

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

Когда показывать цену

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

Как показывать

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

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

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

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

Продолжить

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

Подробнее…

При нажатии кнопки "Подробнее" в браузере открывается статья Справочного центра Google.

Закрыть

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

  • нажатие за пределами контейнера нижнего экрана;
  • нажатие кнопки "Назад" в системе Android;

После того как пользователь нажмет "Продолжить" или закроет экран с информацией, он не должен появляться снова.

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

экран с информацией о пользователе

Технические требования

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

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

  1. Название
  2. Сообщение
  3. Кнопки
  4. Нижний экран
  5. Фоновая маска

Название

Текст Изменения способов оплаты
Шрифт Roboto (применить ко всем шрифтам)
Размер шрифта 18sp
Цвет шрифта #202124

Сообщение

Текст 1 В связи с недавними изменениями в законодательстве Южной Кореи у вас появилось больше вариантов оплаты покупок. От вашего выбора зависит:
  • Кто обеспечивает безопасность покупки, обрабатывает платеж и хранит платежные данные.
  • Кто предоставляет поддержку для покупки.
  • Какие формы оплаты вам будут доступны.
  • Какие преимущества вы получите от покупки.
Размер шрифта 14sp
Высота строки 20
Цвет шрифта #5F6368
Текст 2 Google обеспечивает безопасность покупок только через платежную систему Google Play. Подарочные карты Google Play, баллы Play Points, одобрение покупок и управление подписками доступны только при использовании платежной системы Google Play.
Размер шрифта 12sp
Высота строки 16
Цвет шрифта #5F6368

Кнопка 1

Текст Подробнее…
Выравнивание текста По центру
Размер шрифта 14sp
Насыщенность шрифта Средний
Цвет шрифта #01875F
Цвет фона #FFFFFF
Размеры Высота:36, ширина: масштабируется по размеру контейнера
Радиус закругления 4 dp
Контур 1 dp, #DADCE0
Ссылка Ссылки на справочную статью Google Play

Кнопка 2

Текст Продолжить
Выравнивание текста По центру
Размер шрифта 14sp
Насыщенность шрифта Средний
Цвет шрифта #FFFFFF
Цвет фона #01875F
Размеры Высота:36, ширина: масштабируется по размеру контейнера
Радиус закругления 4 dp
Ссылка Ссылка на экран выбора платежной системы

Нижний экран

Размеры Высота: переменная, ширина: 100 %
Радиус закругления 8dp, 8dp, 0, 0
Фон #FFFFFF
Внутренние поля Слева:24 dp, справа:24 dp, сверху:32 dp, снизу: 24 dp
Высота над уровнем моря 8 dp

Горизонтальная

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

Экран с вариантами оплаты в горизонтальном режиме

Нижний экран Ширина: не более 500 dp, внутренний отступ: 24 dp.
Название Как в вертикальном режиме
Сообщение Как в вертикальном режиме
Кнопки Высота:36, ширина: масштабируется по размеру контейнера

Экран выбора платежной системы

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

Когда показывать

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

Как показывать

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

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

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

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

экран выбора платежной системы, на котором все варианты представлены одинаково;

Технические требования

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

Графические объекты для Google Play и значки платежей доступны по ссылкам ниже.

Пример. В вертикальной ориентации нижний экран должен занимать 100 % ширины экрана.

Нижний экран, на котором показано расположение обязательных элементов

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

Название

Текст Выберите способ оплаты
Шрифт Roboto (применить ко всем шрифтам)
Размер шрифта 18sp
Цвет шрифта #202124

Описание

Текст Укажите, кто будет обеспечивать и обрабатывать ваш платеж, а также оказывать поддержку. Преимущества и доступные способы оплаты могут различаться.
Размер шрифта 14sp
Цвет шрифта #5F6368
Текстовая ссылка Подробнее…
Целевой URL Ссылка
Размер шрифта 14sp
Украшения Подчеркнутый
Цвет шрифта #5F6368

Кнопка для разработчиков

Требования к интерфейсу кнопки разработчика

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

кнопка дополнительных параметров для разработчика

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

  1. Максимальное количество значков способов оплаты
  2. Названия способов оплаты вместо значков
  3. Масштабирование по ширине экрана

  4. Ширина 360 dp
  5. Ширина 480 dp

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

Контур 1pt, #DADCE0
Радиус закругления 4 dp
Внутренние поля 16dp, 16dp, 16dp, 16dp,

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

Размеры Высота: 24 dp, ширина: переменная

Название

Текст {App Name}
Размер шрифта 14sp
Цвет шрифта #202124

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

Размеры 32 x 20 dp
Радиус закругления 2
Количество Максимум 5. Если доступно больше, показывать индикатор дополнительных способов.
Дополнительный индикатор + more (wraps to next line on narrow screens)
Размер шрифта 12sp
Цвет шрифта #5F6368

Кнопка Google Play

кнопка Google Play

  1. Значок
  2. Название
  3. Допустимые способы оплаты
  4. Дополнительный индикатор

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

Контур 1pt, #DADCE0
Радиус закругления 4 dp
Внутренние поля 16dp, 16dp, 16dp, 16dp,

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

Ресурс в виде изображения Призма Google Play
Размеры 24 x 24 dp

Название

Текст Google Play
Размер шрифта 14sp
Цвет шрифта #202124

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

Ресурс в виде изображения Ссылка
Дополнительный индикатор и другие
Размер шрифта 12sp
Цвет шрифта #5F6368

Горизонтальная

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

нижний экран в горизонтальном режиме

Нижний экран Ширина: не более 500 dp, внутренний отступ: 24 dp.
Название Как в вертикальном режиме
Сообщение Как в вертикальном режиме
Кнопки Как в вертикальном режиме