Карточка уведомлений

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

Дизайн этих карточек для Android Automotive OS призван свести к минимуму отвлекающие факторы для водителей. Карточки выпускаются в трех основных версиях:

  • Уведомление-ввод (HUN): используется для кратковременного появления уведомления на текущем экране.
  • Карточка Центра уведомлений: используется для уведомлений, размещенных в Центре уведомлений.
  • Групповое уведомление: объединяет несколько уведомлений Центра уведомлений в одном документе.

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

Анатомия

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

  • Карточка HUN: Эта версия шире, чем карточка Центра уведомлений, и отображается поверх текущего экрана до тех пор, пока не будет закрыта.
  • Карточка Центра уведомлений: Эта версия уже, чем карточка HUN, и отображается вместе с другими подобными карточками в Центре уведомлений в вертикальном списке.
  • Группированная карточка уведомлений: Эта версия карточки Центра уведомлений объединяет несколько связанных уведомлений в одну карточку, с элементами управления для развертывания, позволяющими отображать отдельные уведомления.

Варианты этих версий в зависимости от типа сообщения показаны в разделе «Стили» .

Здесь представлены версии одной и той же карточки уведомления для системы HUN и Центра уведомлений, содержащие следующие элементы:
1. Заголовок
2. Содержание (с возможностью предварительного просмотра сообщения, которое можно скрыть во время движения автомобиля)
3. Действия
4. Большая иконка


Здесь представлена ​​сгруппированная карточка уведомления в свернутом и развернутом виде, содержащая следующие элементы:
1. Заголовок
2. Содержание
3. Действие «Развернуть/свернуть».
4. Индикатор развертывания/свертывания

Технические характеристики – карта HUN

Стандартный ВУН

Гун с аватаром

Отправьте сообщение HUN с предварительным просмотром.

Отправьте сообщение HUN с несколькими сообщениями.

Крупноформатное изображение HUN

Технические характеристики – Карточка центра уведомлений

Стандартное уведомление

Уведомление о сообщении с предварительным просмотром

Уведомление о сообщении, содержащее несколько сообщений.

Уведомление об одном действии

Технические характеристики – Групповая карточка уведомлений

Группированное уведомление – Свернутое

Групповое уведомление – Расширенное

Масштабирование макетов

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

значок выноски
Макет
Поля, линии отступов и отступы для различных размеров экрана.

Экраны стандартной ширины

Карта HUN.


Карточка Центра уведомлений.

Групповая карточка уведомления (свернута).

Групповое уведомление (расширенное).

Широкоэкранные

Карта HUN.


Карточка Центра уведомлений.

Групповая карточка уведомления (свернута).

Групповое уведомление (расширенное).

Сверхширокие и суперширокие экраны

Карта HUN.


Карточка Центра уведомлений.

Групповая карточка уведомления (свернута).

Групповое уведомление (расширенное).

Вертикальное расстояние между уведомлениями на экранах различной высоты

Технические характеристики вертикального расстояния, указанные в этом разделе, относятся только к картам HUN.

Короткие экраны

Карта HUN.

Высокие и стандартные по высоте экраны

Карта HUN.

Стили

Типография

Стиль шрифта Шрифт Масса Размер (dp)
Тело 1 Робото Обычный 32
Тело 3 М Робото Середина 24
Тело 3 Робото Обычный 24

Цвет

Элемент Цвет (дневной режим) Цвет (ночной режим)
Основной тип / значки Белый Белый @ 88%
Вторичный тип Белый @ 72% Белый @ 60%
Вторичный значок Акцент третьей стороны Акцент третьей стороны
Разделительная линия волос Белые 22% Белые 12%
Фон открытки Серый 868 Серый 900
Градиентная сетка Черный 100% - 0% Черный 100% - 20%

Размер

Элемент Размер (dp)
Основной значок 44
Вторичный значок 36
Средний аватар 76
Радиус скругления углов (R2) 8

Примеры

Карты HUN: Звонок, Сообщение, Предупреждение в автомобиле и Навигация.
Карточки центра уведомлений: звонок, сообщение и предупреждение об автомобиле.
Группированные карточки уведомлений: Сообщения, развернутые и свернутые — день.
Группированные карточки уведомлений: Сообщения, развернутые и свернутые — ночь.

Движение

Следующие действия являются важной частью процесса получения уведомлений:

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

прибытие в Венгию

Движение значка HUN, сползающего сверху экрана, помогает пользователям заметить его появление, а также подсказывает, как получить доступ к уведомлениям с помощью свайпа вниз, если Центр уведомлений реализован в виде выпадающей панели.

Проведите пальцем, чтобы закрыть

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

Групповые уведомления: развернуть и свернуть

Растягивание карточки группового уведомления вниз обеспечивает плавный переход из свернутого состояния в развернутое.