Melhores práticas de design integradas ao Google

Aprenda como implementar a identidade única da sua marca em todo o sistema de infoentretenimento para uma experiência de condução coesa e otimizada.

Crie uma aparência e sensação coesas com elementos de design.

Os tokens de design são os blocos de construção fundamentais de todos os elementos da interface do usuário, permitindo que você gerencie a aparência da sua marca em todo o sistema sem alterações demoradas no código.

Tenha uma única fonte de verdade.

Os tokens são valores de design reutilizáveis ​​(como cores, fontes e dimensões) que substituem o código estático. Ao definir esses valores de token, você obtém controle total sobre o estilo principal do sistema e garante que a identidade da sua marca seja a única fonte de verdade em todos os aplicativos do sistema.

Padronizar as decisões de projeto em todo o sistema.

Os tokens aplicam valores personalizados dinamicamente em todo o sistema. Isso evita a necessidade de alterações profundas no código e garante que designers e engenheiros "falem a mesma língua", criando uma transição perfeita do design à implementação final.

Você pode personalizar a aparência dos ícones do aplicativo com tokens de design.

Personalize cores e temas.

A plataforma permite que você controle a estética geral, mantendo os padrões de segurança essenciais. Você pode personalizar o tema base e a paleta de cores por meio de sobreposições de recursos para refletir o estilo único da sua marca.

Otimizado para condução diurna e noturna

Durante o dia, o Modo Diurno (texto escuro sobre fundo claro) proporciona melhor visibilidade. Durante a noite, o Modo Noturno (texto claro sobre fundo escuro) proporciona melhor visibilidade.

Otimize a relação de contraste para facilitar a visualização.

Todos os elementos devem manter uma relação de contraste de cores mínima de 4,5:1 entre o texto, os ícones e o fundo, para garantir a legibilidade durante a condução.

Modo diurno.
Modo noturno.

Crie uma hierarquia visual clara entre os componentes.

É importante reduzir o tempo que os motoristas passam olhando para a tela. Para criar uma hierarquia visual que guie o olhar do motorista para onde ele precisa ir, você pode personalizar os cantos e as proporções dos componentes.

Use cantos arredondados para dar ênfase.

O Google utiliza formas e arredondamentos para comunicar importância. Cantos mais arredondados (raio maior) são usados ​​para ações e componentes principais, enquanto cantos menos arredondados (raio menor) são usados ​​para elementos de menor destaque.

O sistema fornece valores específicos de raio de canto (por exemplo, 0dp, 4dp, 8dp, 16dp, circular) que você pode escolher para ajustar o tamanho, a forma e as proporções dos botões dos modelos para que se adaptem aos displays do seu veículo.

Cantos arredondados no Google Maps.