Card de notificação

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

O design desses cartões para o Android Automotive OS tem como objetivo minimizar a distração para os motoristas. Há três versões básicas dos cards:

  • Card de notificação de alerta (HUN, na sigla em inglês):usado para uma notificação que aparece brevemente na tela atual
  • Card da Central de notificações:usado para notificações listadas na Central de notificações.
  • Card de notificações agrupadas:combina vários cards da Central de notificações em um só.

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


Anatomia

O card de notificação é um componente flexível que pode incluir vários elementos. Ele tem três versões principais:

  • Card HUN: essa versão é mais ampla do que o card da Central de Notificações e aparece na parte superior da tela atual até ser dispensada.
  • Card da Central de notificações:essa versão é mais restrita do que o card HUN e aparece em uma lista vertical com outros cards desse tipo na Central de notificações.
  • Card de notificação agrupada: essa versão do card da Central de notificações combina várias notificações relacionadas em um card, com controles de expansão para mostrar as notificações individuais.

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

Aqui estão as versões da HUN e da Central de Notificações do mesmo card, com os seguintes elementos:
1. Cabeçalho
2. Conteúdo (com e sem visualização de mensagem opcional, que pode ser ocultada quando o carro estiver dirigindo)
3. Ações
4. Ícone grande
É mostrado aqui um card de notificação agrupadas nas versões recolhida e expandida, com os seguintes elementos:
1. Cabeçalho
2. Conteúdo
3. Ação de abrir/fechar
4. Indicador de abrir/fechar

Especificações: cartão HUN

HUN padrão

HUN com avatar

Enviar mensagem para HUN com visualização

Enviar mensagem HUN com várias mensagens

HUN com imagem grande


Especificações: card da Central de notificações

Notificação padrão

Notificação de mensagem com visualização

Notificação com várias mensagens

Notificação de ação única


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

Notificação agrupada: fechada

Notificação agrupada: aberta


Dimensionamento de layouts

Esses layouts de referência mostram como adaptar notificações para acomodar telas de várias larguras e alturas. As categorias de largura e altura são definidas na seção Layout. Todos os valores de pixel estão em pixels renderizados, antes de ocorrer qualquer diminuição ou aumento de amostragem.

Telas de largura padrão

Card HUN
Card da central de notificações
Card de notificação agrupada (recolhido)
Card de notificação agrupada (expandido)

Telas amplas

Card HUN
Card da central de notificações
Card de notificação agrupada (recolhido)
Card de notificação agrupada (expandido)

Telas muito largas e superlargas

Card HUN
Card da central de notificações
Card de notificação agrupada (recolhido)
Card de notificação agrupada (expandido)

Espaçamento vertical das notificações em telas de várias alturas

As especificações de espaçamento vertical nesta seção são apenas para cartões HUN. Para saber mais sobre o espaçamento vertical de cards na Central de notificações, consulte as especificações da Central de notificações.

Telas curtas

Cartão HUN

Telas altas e com altura padrão

Cartão HUN

Estilos

Tipografia

Estilo de fonte Fonte Peso Tamanho (dp)
Texto 1 Roboto Normal 32
Corpo 3 M Roboto Médio 24
Texto 3 Roboto Normal 24

Cor

Elemento Cor(modo diurno) Cor (modo noturno)
Tipo principal / ícones Branco Branco @ 88%
Tipo secundário Branco @ 72% Branco a 60%
Ícone secundário Sotaque de terceiros Sotaque de terceiros
Linha do cabelo divisória Branco 22% Branco 12%
Plano de fundo do card Cinza 868 Cinza 900
Gradiente scrim Preto 100% a 0% Preto 100% a 20%

Tamanho

Elemento Tamanho (dp)
Ícone principal 44
Ícone secundário 36
Avatar médio 76
Raio dos cantos arredondados (R2) 8

Exemplos

Cards HUN: chamada, mensagem, alerta de carro e navegação
Cards da Central de notificações: chamadas, mensagens e avisos de carro
Cards de notificação agrupada: mensagens, expandidas e recolhidas - dia
Cards de notificação agrupadas: mensagens, expandidas e recolhidas - noite

Movimento

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

  • Movimento de chegada da HUN
  • Movimento de deslizar para dispensar uma notificação
  • Movimentos de expansão e recolhimento da notificação agrupada

Chegada da HUN

O movimento de uma HUN deslizando de cima para baixo na tela ajuda os usuários a notar a chegada. Ela também dá uma dica sobre como acessar notificações com o gesto de deslizar para baixo se a Central de notificações estiver implementada como uma aba suspensa

Deslizar para dispensar

O movimento de arrastar quando um usuário desliza para os lados em uma notificação dá uma confirmação visual de que ela está sendo dispensada. Em seguida, o movimento para cima da próxima notificação vai preencher o buraco na lista

Abrir e fechar a notificação agrupada

Expandir o card de notificação agrupada para baixo proporciona uma transição suave do estado recolhido para o expandido