Aplicativos de mídia

Embora os desenvolvedores de aplicativos forneçam o conteúdo principal, os ícones e as ações personalizadas para seus aplicativos de mídia, as montadoras têm a flexibilidade de personalizar a experiência visual geral. Isso garante que os aplicativos de mídia de terceiros pareçam uma parte nativa da experiência de entretenimento do veículo.

O que as montadoras podem personalizar

Configure a barra de aplicativos

A barra de aplicativos é o principal elemento de navegação e identidade visual para aplicativos de mídia em carros com o Google integrado. Ela fornece aos usuários contexto sobre sua localização no aplicativo e oferece acesso rápido a recursos essenciais, como pesquisa e navegação.

Você pode personalizar a barra de aplicativos para que ela combine com a marca do seu carro, usando tokens de design para modificar sua aparência, layout e funcionalidade.

Anatomia

A barra de aplicativos de mídia normalmente consiste nos seguintes elementos:

  • Ícone de navegação: Geralmente uma seta para voltar à tela anterior.
  • Identidade visual do aplicativo: o logotipo ou nome do seu aplicativo.
  • Abas: Links de navegação para categorias de nível superior, como "Navegar" ou "Pesquisar".
  • Ícones de ação: ações contextuais, como o ícone de pesquisa.

Personalize a aparência

Use tokens de design para garantir que a barra de aplicativos combine com o tema do sistema do seu carro. Os tokens permitem definir cores e tipografia que são atualizadas automaticamente em toda a interface do usuário.

  • Plano de fundo: Defina a cor de fundo e a opacidade da barra de aplicativos usando os tokens de superfície apropriados.
  • Tipografia: Utilize a fonte e a espessura da sua marca para o título do aplicativo e os rótulos das abas, mapeando-as para os tokens de tipografia do sistema.
  • Ícones: Certifique-se de que os ícones de navegação e ação usem tamanhos e cores consistentes para garantir a legibilidade durante a condução.

Configurações funcionais

Gerenciar guias

Você pode escolher quais guias aparecem na barra de aplicativos com base na estrutura do seu aplicativo. As configurações comuns incluem:

  • Navegação padrão: Abas para categorias como Listas de reprodução, Artistas e Álbuns.
  • Integração de pesquisa: Uma aba ou ícone de pesquisa dedicado na barra de aplicativos para acesso rápido à pesquisa por teclado ou voz.

Exibir a marca

Para manter uma aparência coesa, você pode decidir como o logotipo ou a marca do aplicativo será exibido na barra de aplicativos. Você pode escolher:

  • Exibir o logotipo: Coloque o logotipo do aplicativo ao lado do ícone de navegação.
  • Exibir o título: Use texto para o nome do aplicativo caso nenhum logotipo seja fornecido.

Visualizações de navegação de estilo

As visualizações de navegação permitem que os usuários explorem o conteúdo de mídia por meio de grades e listas. As montadoras podem personalizar essas visualizações para garantir que a experiência de mídia esteja alinhada com a identidade visual do veículo e o design de todo o sistema.

Personalização do cabeçalho

O cabeçalho de navegação fornece contexto sobre a localização atual do usuário na hierarquia de conteúdo. Você pode personalizar os seguintes aspectos do cabeçalho:

  • Posicionamento e estilo: Ajuste o posicionamento vertical e o design visual do cabeçalho, incluindo a altura e o tratamento do fundo.
  • Elementos do cabeçalho: Personalize componentes específicos, como o estilo do texto do título e a aparência dos ícones secundários.

Itens de grade e lista

O conteúdo multimídia é organizado em grades ou listas para ajudar os usuários a navegar com eficiência. Você pode personalizar esses layouts para melhorar a legibilidade e a visualização rápida:

  • Estilização de itens: personalize a aparência visual de itens individuais, incluindo o tamanho e a forma das miniaturas e a tipografia dos títulos e subtítulos.
  • Seleção de layout: escolha entre os formatos de grade ou lista com base no tipo de conteúdo que está sendo exibido (por exemplo, usar grades para capas de álbuns e listas para nomes de faixas).
  • Estados de foco: Define como os itens aparecem quando são selecionados ou destacados pelo usuário.

Layouts de reprodução de estilo

A tela de reprodução fornece aos usuários controles e metadados para a mídia que está sendo reproduzida. As montadoras podem personalizar a aparência dessa tela e da barra de controle minimizada para criar uma experiência coesa que esteja alinhada com a marca do veículo.

Anatomia da visualização de reprodução

A visualização de reprodução normalmente inclui os seguintes componentes:

  • Arte da capa do álbum: A representação visual da mídia atual.
  • Metadados: Informações como o título da faixa, o nome do artista e o título do álbum.
  • Controles de reprodução: ações essenciais como reproduzir, pausar, pular e reproduzir aleatoriamente.
  • Barra de progresso: Um indicador visual do progresso atual da faixa, geralmente incluindo um indicador de navegação.

Opções de personalização

Você pode usar tokens de design para modificar o estilo visual da experiência de reprodução.

Tela principal de reprodução

  • Plano de fundo e sobreposições: personalize a cor de fundo, os gradientes ou os níveis de opacidade para combinar com o tema do seu sistema.
  • Tipografia: Defina a fonte, o tamanho e a espessura para os títulos das faixas e informações do artista usando tokens de tipografia do sistema.
  • Estilo dos controles: personalize o formato, a cor e o estilo dos ícones dos botões de reprodução (por exemplo, reproduzir, pausar, próximo) para garantir que sejam consistentes com outros controles do sistema.
  • Barra de progresso: estilize a faixa e o indicador da barra de progresso usando cores específicas da marca.

Barra de controle minimizada (MCB)

A barra de controle minimizada permite que os usuários controlem a mídia enquanto navegam por outras partes do sistema. Você pode personalizá-la:

  • Posição e layout: Determine onde o MCB aparece na tela e como os elementos são organizados dentro dele.
  • Visibilidade dos elementos: escolha quais controles (como reproduzir/pausar ou pular) serão exibidos quando minimizados.
  • Estilo: Aplique cores consistentes e cantos arredondados para garantir que o MCB pareça uma parte nativa da interface do usuário do sistema.

A busca integrada ao aplicativo é um recurso essencial que permite aos usuários encontrar conteúdo rapidamente enquanto dirigem. Embora os desenvolvedores de aplicativos forneçam o conteúdo da busca, as montadoras são responsáveis ​​por projetar a interface de busca, incluindo o teclado e a apresentação dos resultados.

Design de teclado

A sobreposição de pesquisa utiliza diferentes configurações de teclado dependendo do estado de condução do veículo para garantir segurança e facilidade de uso.

  • Teclado padrão: Exibido quando o veículo está estacionado. Este é um teclado completo para entrada manual de texto.
  • Teclado otimizado para condução: Exibido quando o veículo está em movimento. Esta versão normalmente prioriza a entrada de voz e pode oferecer entrada manual simplificada ou sugestões para minimizar a distração do condutor.

As montadoras podem personalizar o estilo visual desses teclados — como formato das teclas, cor de fundo e tipografia — usando tokens de design do sistema para combinar com a identidade visual do veículo.

Assim que um usuário insere uma consulta, os resultados são exibidos em uma sobreposição. Você pode personalizar os seguintes aspectos dessa visualização:

  • Layout e espaçamento: Defina como os resultados da pesquisa são agrupados e quanto espaço é fornecido entre os itens para melhor legibilidade.
  • Aparência dos itens: personalize o estilo dos itens da lista nos resultados da pesquisa, incluindo estilos de fonte para títulos e subtítulos, e o tamanho das miniaturas associadas.
  • Estados vazios e de erro: Defina a aparência da sobreposição quando nenhum resultado for encontrado ou se ocorrer um erro de conexão.

Exibir a marca do aplicativo

Para criar uma experiência multimídia coesa em carros com o Google integrado, você pode personalizar a forma como a marca de aplicativos de terceiros é integrada à interface do usuário do sistema. Isso garante que, embora o usuário saiba qual aplicativo está usando, a apresentação visual permaneça consistente com o design geral do veículo.

Elementos da marca

Você pode personalizar o posicionamento e a integração dos seguintes elementos específicos do aplicativo:

  • Ícone do aplicativo: O principal identificador visual do serviço de mídia.
  • Cor de destaque: A cor específica da marca fornecida pelo desenvolvedor do aplicativo.
  • Nome do aplicativo: O nome do serviço de mídia em formato de texto.

Opções de personalização

Utilize tokens de design para definir como esses elementos de marca aparecem em diferentes telas de mídia.

Posicionamento e estilo dos ícones

Você tem flexibilidade em relação à forma como o ícone do aplicativo é exibido na interface de mídia:

  • Posicionamento: Determine onde o ícone do aplicativo aparece nas telas de conteúdo, como na barra de aplicativos ou na visualização de reprodução.
  • Dimensionamento e forma: Use tokens do sistema para definir o tamanho e o raio dos cantos do ícone, garantindo que ele corresponda a outros ícones do sistema.

Integre cores de destaque

As cores de destaque do aplicativo podem ser usadas para fornecer uma indicação sutil da marca do aplicativo sem sobrecarregar a interface do usuário do veículo:

  • Estilo adaptativo: você pode escolher como incorporar a cor de destaque do aplicativo em componentes da interface do usuário, como barras de progresso, indicadores de guias ativas ou botões.
  • Normalização de cores: Garanta que as cores fornecidas pelo aplicativo atendam aos requisitos de contraste para segurança e legibilidade, aplicando transformações de cores definidas pelo sistema.

Melhores práticas de design

  • Mantenha a harmonia do sistema: Garanta que a marca do aplicativo não distraia da tarefa principal de dirigir nem entre em conflito com o tema geral do sistema do veículo.
  • Priorize a legibilidade: Se estiver usando a cor de destaque de um aplicativo para texto ou ícones, certifique-se de que ela atenda às taxas de contraste necessárias em relação ao fundo escolhido.
  • Aplicação consistente: Aplique as regras de marca de forma consistente em todos os aplicativos de mídia de terceiros para proporcionar uma experiência de usuário previsível.
  • Utilize tokens do sistema: Sempre mapeie as personalizações de marca aos tokens de design fornecidos para manter a compatibilidade com futuras atualizações do sistema.