Cartão de notificação

Os cartões de notificação comunicam pequenas quantidades de informações oportunas do sistema ou de um aplicativo.

O design desses cartões para o sistema operacional Android Automotive visa minimizar a distração dos motoristas. Os cartões estão disponíveis em três versões básicas:

  • Cartão de notificação Heads-up (HUN): Usado para uma notificação que aparece brevemente sobre a tela atual.
  • Cartão da Central de Notificações: Usado para notificações listadas na Central de Notificações.
  • Cartão de notificação agrupada: Combina vários cartões da Central de Notificações em um único cartão.

Dentro dessas versões, os designs também podem variar ligeiramente dependendo da categoria da mensagem. Por exemplo, as notificações de chamadas têm botões e ícones diferentes das notificações de navegação.

Anatomia

O cartão de notificação é um componente flexível que pode incluir diversos elementos. Ele possui três versões principais:

  • Cartão HUN: Esta versão é mais larga que o cartão da Central de Notificações e aparece sobre a tela atual até ser fechada.
  • Cartão da Central de Notificações: Esta versão é mais estreita que o cartão HUN e aparece junto com outros cartões semelhantes na Central de Notificações, em uma lista vertical.
  • Cartão de notificações agrupadas: Esta versão do cartão da Central de Notificações combina várias notificações relacionadas em um único cartão, com controles para expandir e exibir as notificações individuais.

As variantes dessas versões por tipo de mensagem são mostradas em Estilos .

Apresentamos aqui as versões HUN e da Central de Notificações do mesmo cartão de notificação, contendo os seguintes elementos:
1. Cabeçalho
2. Conteúdo (com e sem pré-visualização opcional da mensagem, que pode ser ocultada quando o carro estiver em movimento)
3. Ações
4. Ícone grande


Apresentamos aqui um cartão de notificação agrupada em suas versões recolhida e expandida, contendo os seguintes elementos:
1. Cabeçalho
2. Conteúdo
3. Ação de expandir/recolher
4. Indicador de expansão/recolhimento

Especificações – Cartão HUN

HUN padrão

HUN com avatar

Mensagem HUN com pré-visualização

Mensagem HUN com várias mensagens

HUN de imagem grande

Especificações – Cartão da Central de Notificações

Notificação padrão

Notificação de mensagem com pré-visualização

Notificação de mensagem com várias mensagens

Notificação de ação única

Especificações – Cartão de notificação agrupada

Notificação agrupada – Recolhida

Notificação agrupada – Expandida

Dimensionamento de layouts

Esses layouts de referência mostram como adaptar as notificações para telas de diferentes larguras e alturas. Observe que todos os valores de pixel estão em pixels renderizados, antes de qualquer redução ou aumento de resolução.

ícone de chamada
Layout
Margens, linhas de contorno e espaçamento interno para vários tamanhos de tela.

Telas de largura padrão

Cartão HUN.


Cartão do Centro de Notificações.

Cartão de notificação agrupada (recolhido).

Cartão de notificação agrupada (expandido).

Telas amplas

Cartão HUN.


Cartão do Centro de Notificações.

Cartão de notificação agrupada (recolhido).

Cartão de notificação agrupada (expandido).

Telas extralargas e superlargas

Cartão HUN.


Cartão do Centro de Notificações.

Cartão de notificação agrupada (recolhido).

Cartão de notificação agrupada (expandido).

Espaçamento vertical de notificações em telas de diferentes alturas.

As especificações de espaçamento vertical nesta seção são válidas apenas para cartões HUN.

Telas curtas

Cartão HUN.

Telas altas e de altura padrão

Cartão HUN.

Estilos

Tipografia

Estilo de digitação Tipo de letra Peso Tamanho (dp)
Corpo 1 Robô Regular 32
Corpo 3 M Robô Médio 24
Corpo 3 Robô Regular 24

Cor

Elemento Cor (modo diurno) Cor (modo noturno)
Tipo principal / ícones Branco Branco @ 88%
Tipo secundário Branco @ 72% Branco @ 60%
Ícone secundário sotaque de terceiros sotaque de terceiros
Linha divisória do cabelo Brancos 22% Branco 12%
Fundo do cartão Cinza 868 Cinza 900
Tela de gradiente Preto 100% - 0% Preto 100% - 20%

Tamanhos

Elemento Tamanho (dp)
Ícone principal 44
Ícone secundário 36
Avatar médio 76
Raio do canto arredondado (R2) 8

Exemplos

Cartões HUN: Chamada, Mensagem, Alerta do veículo e Navegação.
Cartões da Central de Notificações: Chamada, Mensagem e Aviso do Carro.
Cartões de notificação agrupados: Mensagens, expandidas e recolhidas - dia.
Cartões de notificação agrupados: Mensagens, expandidas e recolhidas - noite.

Movimento

Os seguintes movimentos são uma parte importante da experiência de notificação:

  • movimento de chegada HUN
  • Deslize o dedo para descartar uma notificação.
  • Movimentos de expansão e recolhimento de notificações agrupadas

chegada HUN

O movimento de um ícone de notificação (HUN) deslizando de cima para baixo na tela ajuda os usuários a perceberem sua chegada e também fornece uma dica sobre como acessar as notificações deslizando o dedo para baixo, caso a Central de Notificações seja implementada como uma barra de notificações suspensa.

Deslize para descartar

O movimento de arrastar, quando um usuário desliza o dedo lateralmente sobre uma notificação, fornece uma confirmação visual de que ela está sendo descartada; em seguida, o movimento para cima da próxima notificação preenche o espaço vazio na lista.

Expandir e recolher notificações agrupadas

Ter um cartão de notificação agrupado que se estende para baixo proporciona uma transição suave do estado recolhido para o expandido.