Concentre-se na experiência do sistema, no app e em outros recursos para projetar sua experiência de referência em modo retrato.
O design de referência do modo retrato é ancorado pela tela inicial e inclui estes elementos persistentes da interface do sistema:
Tela inicial
A tela inicial apresenta um ponto de partida com tudo incluído para motoristas, com todos os controles facilmente acessíveis. Ela atende às necessidades da maioria dos motoristas para que se concentrem na estrada, em vez de alternar entre apps.
Sem sair dessa tela, o motorista pode acessar:
- A barra de status na parte superior, com controles rápidos e um seletor de perfil
- Camada de base no corpo da tela, normalmente executando um app de navegação
- Barras de navegação de controle e sistema na parte inferior
![Visualização da tela inicial](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/home-screen.png?authuser=19&hl=pt-br)
![](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/home-screen.png?authuser=19&hl=pt-br)
Barra de controle
A barra de controle hospeda controles para mídia (vídeo e música), podcasts, Bluetooth, rádio e chamadas ativas.
Em apps de mídia e smartphone, a barra de controle fica acima da barra de navegação na metade inferior da tela. Os controles mudam de mídia para chamada telefônica ativa quando o usuário aceita uma chamada recebida.
Controles de mídia
Com os controles de mídia, é possível tocar, pausar, voltar e avançar. Eles também permitem que o usuário marque favoritos e acesse outros controles personalizados, se houver.
![Controles de mídia padrão](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/media-controls-1.png?authuser=19&hl=pt-br)
![](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/media-controls-1.png?authuser=19&hl=pt-br)
![Controles de mídia expandidos](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/media-controls-2.png?authuser=19&hl=pt-br)
![](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/media-controls-2.png?authuser=19&hl=pt-br)
Controles ativos de ligação telefônica
Os controles do smartphone oferecem a capacidade de desativar o som do alto-falante, alternar para Bluetooth e cancelar uma chamada.
Barra de status
A barra de status aparece na parte de cima da tela e hospeda o seletor de perfil, controles rápidos e informações de horário e clima.
- Controles rápidos:
- Bluetooth: status do Bluetooth
- Conectividade: Wi-Fi, rede móvel e ponto de acesso
- Tela de brilho: permite ao usuário ajustar o nível de brilho da tela.
- Relógio: exibição digital da hora atual.
- Informações meteorológicas: mostra a temperatura externa.
- Seletor de perfil: mostra o perfil do usuário em uso e permite que o usuário selecione um perfil diferente, se necessário.
Os elementos da barra de status aparecem na mesma ordem para carros com volante esquerdo e direito.
Os usuários podem ativar e desativar a exibição do clima nas Configurações.
Para conferir as práticas recomendadas e orientações sobre como personalizar a barra de status, consulte Práticas recomendadas da barra de status.
Controles rápidos
Os controles rápidos na barra de status oferecem acesso fácil ao Bluetooth, a conectividade e o brilho da tela.
![Controles de Bluetooth](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/quick-controls-1.png?authuser=19&hl=pt-br)
![](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/quick-controls-1.png?authuser=19&hl=pt-br)
![Controles de conectividade](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/quick-controls-2.png?authuser=19&hl=pt-br)
![](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/quick-controls-2.png?authuser=19&hl=pt-br)
![Configurações de exibição](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/quick-controls-3.png?authuser=19&hl=pt-br)
![](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/quick-controls-3.png?authuser=19&hl=pt-br)
Seletor de perfil
O seletor de perfil na barra de status permite a seleção rápida de perfis e acesso às configurações de perfil com um atalho.
![Seletor de perfil com o menu de perfil](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/profile-selector.png?authuser=19&hl=pt-br)
![](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/profile-selector.png?authuser=19&hl=pt-br)
Práticas recomendadas da barra de status
Práticas recomendadas para desenvolvedores de apps:
- Use a transparência para evitar cobrir o conteúdo do app: se o app estiver posicionado parcialmente atrás da barra de status, e não totalmente abaixo dela, os desenvolvedores de apps precisarão deixar a barra de status transparente.
- Aplique cores de maneira estratégica: se o app estiver totalmente abaixo da barra de status, os desenvolvedores precisarão escolher uma cor para ela.
Barra de navegação do sistema
A barra de navegação do sistema hospeda controles para o Acesso rápido aos apps, o assistente digital, a Central de notificações e os controles de conforto.
A barra de navegação do sistema fica na parte de baixo da tela e mostra os controles abaixo:
- Temperatura da cabine: temperatura do carro
- Acesso rápido aos apps: apps disponíveis para o motorista.
- Assistente digital: acesso ao assistente digital escolhido, como o Google Assistente
- Central de notificações: acesso à Central de notificações.
- Climat: acesso aos sistemas de climatização no veículo
Para saber como personalizar a barra de navegação do sistema, consulte Personalização da barra de navegação do sistema.
Acesso rápido aos apps
O Acesso rápido aos apps é mostrado no espaço principal do app, em uma visualização em grade padrão da tela de início. Os aplicativos são ordenados de A a Z. Os usuários podem reordenar os apps com base na preferência.
![Acesso rápido aos apps](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/app-launcher.png?authuser=19&hl=pt-br)
![](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/app-launcher.png?authuser=19&hl=pt-br)
Assistente digital
Quando tocada, essa affordance invoca o assistente digital ativo no momento para comunicação por voz.
Central de notificações
A Central de notificações leva o usuário a todas as mensagens de notificação salvas, lidas e não lidas.
![Central de notificações](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/notification-center.png?authuser=19&hl=pt-br)
![](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/notification-center.png?authuser=19&hl=pt-br)
Controle de temperatura
Com o ícone de controle de temperatura, é fácil acessar os sistemas de controle de temperatura do carro.
![Mais controles de temperatura](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/climate-controls.png?authuser=19&hl=pt-br)
![](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/climate-controls.png?authuser=19&hl=pt-br)
Mais recursos
Outros recursos do design de referência no modo retrato que se aplicam à experiência do sistema e do app incluem a camada de voz e os temas.
Camada de voz
A camada de voz é transparente e fica acima de todas as camadas e das barras de navegação de controle e do sistema.
Ele pode executar qualquer tipo de assistente digital integrado ao sistema, como o Google Assistente.
Temas
Dois temas estão disponíveis para uso com base na iluminação.
![Tema escuro](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/dark-theme.png?authuser=19&hl=pt-br)
![](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/dark-theme.png?authuser=19&hl=pt-br)
![Tema claro](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/light-theme.png?authuser=19&hl=pt-br)
![](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/light-theme.png?authuser=19&hl=pt-br)
Use o tema escuro durante a noite ou com pouca luz para reduzir o reflexo. Saiba mais sobre a capacidade de visualização à noite.
Use o tema claro para ajudar motoristas e passageiros a ver as telas do carro sob luz direta. A navegação do sistema pode ficar preta para se misturar com o hardware.