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

Обзор

Эти рекомендации предназначены для разработчиков, участвующих в нашей программе , позволяющей предлагать пользователям в Европейской экономической зоне (ЕЭЗ) альтернативную платежную систему Google Play без выбора пользователя. Разработчики, чьи пользователи находятся в ЕЭЗ и которые участвуют в пилотном проекте по выбору пользователей и предлагают альтернативную систему выставления счетов наряду с платежной системой Google Play, должны использовать рекомендации по пользовательскому интерфейсу в отношении выставления счетов по выбору пользователей . Эти рекомендации по UX направлены на обеспечение единообразия пользовательского опыта, требуя от разработчиков отображать информационный экран каждому пользователю при первом совершении покупки. Сообщения, обращенные к пользователю, и спецификации пользовательского интерфейса для информационного экрана должны быть реализованы в соответствии со следующими рекомендациями.

Приложение для разработчиков

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

Выберите язык

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

  • Показать все языки
  • Выберите язык
  • болгарский
  • каталанский
  • хорватский
  • чешский
  • датский
  • Голландский
  • Английский
  • эстонский
  • финский
  • Французский
  • немецкий
  • Греческий
  • венгерский
  • исландский
  • итальянский
  • латышский
  • литовский
  • норвежский
  • Польский
  • Португальский (бразильский)
  • Португальский (европейский)
  • румынский
  • словацкий
  • словенский
  • испанский
  • Шведский

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

Информационный экран помогает пользователям понять влияние изменения.

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

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

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

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

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

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

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

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

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

Понятно

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

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

Нажатие кнопки «Подробнее» запускает статью Справочного центра Google в веб-браузере.

Увольнять

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

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

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

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

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

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

  1. Заголовок
  2. Текст 1
  3. Текст 2
  4. Кнопки
  5. Нижний лист
  6. Фоновая сетка

Заголовок

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

Текст 1

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

Текст Выберите язык
Размер шрифта 14сп
Высота строки 20
Цвет шрифта #5F6368

Текст 2

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

Текст Выберите язык
Размер шрифта 12сп
Высота строки 16
Цвет шрифта #5F6368

Кнопка 1

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

Кнопка 2

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

Нижний лист

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

Пейзаж

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

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

Дополнительную информацию о программе ЕЭЗ для альтернативного выставления счетов без выбора пользователя и часто задаваемые вопросы можно найти в нашем Справочном центре .