Modelo espacial

Esta introdução ao modelo de app de música descreve os principais elementos, as funções básicas que eles fornecem e a arquitetura que os mantém juntos.

Nas seções seguintes, fornecemos descrições mais detalhadas de como cada elemento funciona. Para acessar um guia, consulte a visão geral desta seção.


Anatomia

O modelo de mídia inclui o seguinte:

  • Barra de apps: tem a navegação principal dos apps e os controles de apps (para pesquisa e configurações no app) e inclui um ícone do app.
  • Espaço de conteúdo navegável: exibe o conteúdo em uma visualização em grade (mostrada aqui) ou em lista.
  • Controles de reprodução: a barra de controle minimizada mostrada aqui inclui metadados básicos de mídia e controles de mídia, além de fornecer acesso a uma sobreposição de reprodução com mais controles.
1. Barra de apps com as guias de navegação principais e os controles do app
2. Espaço de conteúdo navegável
3. Controles de mídia (mostrados aqui na barra de controle minimizada)

Este layout de exemplo mostra apenas uma organização possível desses elementos. Por exemplo, os fabricantes de automóveis podem decidir empilhar os controles principais de navegação e de apps em vez de mantê-los em uma única barra horizontal, dependendo das dimensões da tela. A hierarquia de navegação é descrita em mais detalhes nas seções a seguir.


Navegação principal

A navegação principal na barra de apps consiste em guias expostas (exceto em casos raros em que a tela é muito pequena).

Este exemplo mostra uma organização típica de guias:

Os usuários podem selecionar guias na barra de apps, como "Início" e "Playlists", para acessar essas visualizações de nível superior do conteúdo de mídia.
Selecionar uma guia na barra de apps substitui a visualização atual por outra visualização de nível superior do app.

Controles de apps

Os controles de apps (mostrados no canto superior direito no exemplo abaixo) ocupam a parte da barra de apps que não é usada para branding ou navegação principal. Elas dão acesso às funções de pesquisa e configurações no app de mídia atual.

A seleção de um controle de app abre uma sobreposição. Por exemplo, a affordance de configurações mostrada aqui abre uma sobreposição que exibe a interface de configurações. Quando os usuários fecham a sobreposição, eles retornam ao local anterior no app.

Selecionar a funcionalidade "Configurações" na barra de apps abre uma sobreposição que permite aos usuários acessar as configurações do app.
Quando um controle de app é selecionado, ele abre uma sobreposição sobre o conteúdo navegável, e a barra de apps muda para o cabeçalho de um app.

Espaço de conteúdo navegável

Dentro do espaço de conteúdo navegável, os usuários podem rolar pelo conteúdo e navegar pelo z-space até itens individuais, pelos níveis consecutivos de hierarquia.

Como navegar por vários níveis aumenta a carga cognitiva do motorista, o Google recomenda manter a arquitetura da informação relativamente simples, com o mínimo de níveis possível.

O nível superior do conteúdo navegável permite que os usuários escolham em uma grade (como mostrado aqui) ou em uma lista.
Fazer uma seleção de conteúdo navegável mostra mais detalhes para um próximo nível.

Controles de mídia

Os controles de mídia em apps de mídia podem aparecer de duas formas, dependendo das circunstâncias:

  • Barra de controle minimizada (disponível nas visualizações)
  • Visualização de reprodução (sobreposição com barra de controle total)

Essas duas formas se alternam na parte inferior da tela no exemplo animado a seguir.

Barra de controle minimizada

A barra de controle minimizado flutua no nível mais alto do espaço navegável, acima do conteúdo. Ele fornece informações sobre o que está sendo reproduzido, juntamente com affordances básicas para o controle do usuário.

Quando o conteúdo começa a ser reproduzido, a barra de controle minimizada permanece disponível enquanto o usuário navega pelo conteúdo de mídia. Ela persiste até que um novo app de mídia seja selecionado ou até que o usuário toque na barra de controle minimizada para exibir a visualização de reprodução.

Visualização de reprodução

A barra de controle total está disponível somente na visualização de reprodução e também flutua acima do conteúdo. Além das affordances disponíveis na barra de controle minimizada, a barra de controle completa pode fornecer controles mais abrangentes definidos por cada app de mídia.

Quando você seleciona a barra de controle minimizada em qualquer lugar fora das áreas de toque dos controles, ela se expande em uma sobreposição de reprodução em tela cheia (a visualização de reprodução), como mostrado aqui.
A sobreposição de visualização de reprodução fica na parte superior do espaço de conteúdo navegável, e a barra de controle minimizada é substituída pela barra de controle completa, com controles adicionais.