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.
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-anatomy-hun-std.png?authuser=7&hl=pt)
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
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-anatomy-grouped.png?authuser=7&hl=pt)
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
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-standard-hun.png?authuser=7&hl=pt)
HUN com avatar
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-standard-hunwavatar.png?authuser=7&hl=pt)
Enviar mensagem para HUN com visualização
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-hun-preview.png?authuser=7&hl=pt)
Enviar mensagem HUN com várias mensagens
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-hun-preview-multiple.png?authuser=7&hl=pt)
HUN com imagem grande
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-hun-largeimg.png?authuser=7&hl=pt)
Especificações: card da Central de notificações
Notificação padrão
![](https://developers.google.cn/cars/design/automotive-os/components/images/standard-notification-card-avatar.png?authuser=7&hl=pt)
Notificação de mensagem com visualização
![](https://developers.google.cn/cars/design/automotive-os/components/images/standard-notification-card-msg-preview.png?authuser=7&hl=pt)
Notificação com várias mensagens
![](https://developers.google.cn/cars/design/automotive-os/components/images/standard-notification-card-msg-preview-multi.png?authuser=7&hl=pt)
Notificação de ação única
![](https://developers.google.cn/cars/design/automotive-os/components/images/standard-notification-card-onebutton.png?authuser=7&hl=pt)
Especificações – Card de notificação agrupada
Notificação agrupada: fechada
![](https://developers.google.cn/cars/design/automotive-os/components/images/grpd-notifications-collapsed.png?authuser=7&hl=pt)
Notificação agrupada: aberta
![](https://developers.google.cn/cars/design/automotive-os/components/images/grpd-notifications-expanded.png?authuser=7&hl=pt)
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
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-hun-std.png?authuser=7&hl=pt)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-std-std.png?authuser=7&hl=pt)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-collapsed-std.png?authuser=7&hl=pt)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-std.png?authuser=7&hl=pt)
Telas amplas
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-hun-wide.png?authuser=7&hl=pt)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-std-wide.png?authuser=7&hl=pt)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-collapsed-wide.png?authuser=7&hl=pt)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-wide.png?authuser=7&hl=pt)
Telas muito largas e superlargas
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-hun-xwide.png?authuser=7&hl=pt)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-std-xwide.png?authuser=7&hl=pt)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-collapsed-xwide.png?authuser=7&hl=pt)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-xwide.png?authuser=7&hl=pt)
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
![](https://developers.google.cn/cars/design/automotive-os/components/images/notifications-hun-short.png?authuser=7&hl=pt)
Telas altas e com altura padrão
![](https://developers.google.cn/cars/design/automotive-os/components/images/notifications-hun-stdtall.png?authuser=7&hl=pt)
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
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-hun-examples.png?authuser=7&hl=pt)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-examples.png?authuser=7&hl=pt)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-group-examples-messages-day.png?authuser=7&hl=pt)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-group-examples-messages-night.png?authuser=7&hl=pt)
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
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-hud-auto-dismiss-new.gif?authuser=7&hl=pt)
Deslizar para dispensar
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-appear-dismiss-new.gif?authuser=7&hl=pt)
Abrir e fechar a notificação agrupada
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-expand-group-2.gif?authuser=7&hl=pt)