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

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

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

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

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

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

Анатомия

Карточка уведомлений — это гибкий компонент, который может включать в себя множество элементов. Имеет три основные версии:

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

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

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

Спецификации – карта HUN

значок выноски
Метки макета
Определения E, M, KL, P, Flex

Стандартный венгерский

ВЕНГИЯ с аватаркой

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

Сообщение HUN с несколькими сообщениями

Венгрия с большим изображением

Характеристики – Карта Центра уведомлений

значок выноски
Метки макета
Определения E, M, KL, P, Flex

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

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

Уведомление о сообщении с несколькими сообщениями

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

Спецификации – Карточка сгруппированных уведомлений

значок выноски
Метки макета
Определения E, M, KL, P, Flex

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

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

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

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

значок выноски
Макет
Поля, ключевые линии и отступы для экранов различных размеров.
значок выноски
Метки макета
Определения E, M, KL, P, Flex

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

карта Венгрии
Карточка Центра уведомлений
Карточка сгруппированных уведомлений (свернута)
Карточка сгруппированных уведомлений (расширенная)

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

карта Венгрии
Карточка Центра уведомлений
Карточка сгруппированных уведомлений (свернута)
Карточка сгруппированных уведомлений (расширенная)

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

карта Венгрии
Карточка Центра уведомлений
Карточка сгруппированных уведомлений (свернута)
Карточка сгруппированных уведомлений (расширенная)

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

Характеристики вертикального расстояния в этом разделе относятся только к картам HUN. Информацию о вертикальном расстоянии между карточками в Центре уведомлений см. в характеристиках Центра уведомлений .

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

карта Венгрии

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

карта Венгрии

Стили

значок выноски
Рекомендации по типографике
Ссылки на масштаб и сетку, типографские примеры и многое другое.
значок выноски
Рекомендации по цвету
Палитры, значения высоты и непрозрачности и многое другое.

Типография

Тип стиля Гарнитура Масса Размер (дп)
Тело 1 Робото Обычный 32
Тело 3 М Робото Середина 24
Тело 3 Робото Обычный 24

Цвет

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

Размеры

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

Примеры

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

Движение

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

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

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

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

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

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

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

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