Esta página explica como criar um fluxo para o Assistente de Configuração (SUW), criar uma narrativa e incluir etapas obrigatórias e opcionais.
Você pode personalizar as seguintes telas:
| Personalização limitada: Modal de conteúdo | Personalização necessária: modelos fornecidos pelo Google |
|---|---|
| Termos de Serviço do Google Login do Google Google Gemini Google Play | Tela de boas-vindas Seleção de idioma Conectividade e configuração de Wi-Fi Criação de perfil (nome do perfil) Tela de resumo Configuração do dispositivo Bluetooth Proteção de perfil (configuração de bloqueio de perfil) Telas de carregamento |
Personalize o modelo de conteúdo
O modal de conteúdo, ou componente de interface do usuário AppStyledView , abriga telas proprietárias do Google, incluindo o módulo de login do Google e o consentimento para os serviços do Google. Para ajudar o usuário a entender que está interagindo com o Google e não com a montadora, o componente modal oferece apenas personalização limitada.
Para alcançar uma integração coesa, você pode personalizar estes elementos:
Barra de navegação: Você pode optar por posicionar a barra de navegação na parte superior do modal ou na lateral. Além disso, você pode personalizar o ícone de navegação (imagem, tamanho, cor, posicionamento), o plano de fundo (imagem, opacidade, cor), a largura ou a altura (dependendo do posicionamento).
Configuração do modal: A largura da área de conteúdo deve ser superior a 1224 dp para que as telas do Google sejam renderizadas no formato paisagem. Além disso, você pode personalizar a largura, a altura, o posicionamento na tela, os cantos arredondados e o estilo da borda do modal. Recomenda-se uma sobreposição em tela cheia quando não for possível garantir margens suficientes ao redor do modal.
Fundo modal: Imagem ou cor, com transparência.
Exemplos de personalizações de modais de conteúdo
Você pode optar por usar um modelo fornecido pelo Google como parte do fluxo de configuração. Se decidir usar essa opção, você deve personalizar essas telas para evitar uma mistura de estilos de interface do usuário.
A seguir, apresentamos exemplos de personalizações do modal de conteúdo nas Figuras 3 e 4.
Personalize as telas fornecidas pelo Google
Você pode optar por usar um modelo fornecido pelo Google como parte do fluxo de configuração. Se decidir usar essa opção, você deve personalizar essas telas para evitar uma mistura de estilos de interface do usuário.
Visões imersivas versus não imersivas
Você tem duas opções para exibir o SuW:
Modo de visualização imersiva: Este modo oculta recursos não essenciais, como a barra de status e a interface do sistema. Use o modo de visualização imersiva para minimizar distrações.
Visualização não imersiva: Esta visualização permite que os usuários vejam recursos do sistema, como a barra de status. Use uma visualização não imersiva somente quando for essencial exibir a interface do usuário do sistema. Se optar por usar esta visualização, evite ações que possam interromper a experiência de configuração do usuário.
Personalize o layout da paisagem
Os elementos personalizáveis no modo paisagem são os seguintes:
Layout e plano de fundo
- Barra de navegação: A barra de navegação contém o botão Voltar. Você pode personalizar o layout e o plano de fundo da barra, bem como o ícone de navegação (imagem, tamanho, cor e posicionamento), o plano de fundo (imagem, opacidade e cor) e a largura.
- Barra de ação: A barra de ação é o contêiner ancorado na parte inferior da página que contém os botões de chamada para ação, que são transparentes por padrão. Você pode personalizar a altura e o espaçamento da barra, bem como a imagem, a opacidade e a cor do fundo.
- Layout da página: Proporção das colunas e margens da página.
- Fundo da página: Cor ou imagem de fundo.
Componentes
- Imagem principal: Imagem, tamanho e posicionamento.
- Menu suspenso: Fonte (família, tamanho, cor), ícones (imagem, tamanho, cor) e linha divisória.
- Botões: Fonte (família, tamanho, cor), fundo (imagem, opacidade, cor), tamanho do botão (largura, altura), posicionamento, espaçamento interno, cantos arredondados (estilo para ações primárias e secundárias, bem como estados diferenciados do botão).
- Cabeçalho da página: Fonte (família, tamanho e cor), posicionamento do título e subtítulo, textos e ícone da página (se deve incluir o ícone, e a imagem, tamanho e cor do ícone).
- Lista: Fonte (família, tamanho e cor), ícones (imagem, tamanho e cor; os ícones do Google não são personalizáveis), posicionamento, espaçamento interno, altura do item da lista e linha divisória. Para alterar essas configurações, é necessário entrar em contato com o Google.
Telas de carregamento
- Animação: (Indeterminado) ou uma imagem, tamanho, posicionamento.
- Características: Fonte (família, tamanho e cor), posicionamento e texto.
Exemplo de layout de paisagem personalizado
Uma forma possível de personalizar uma tela de boas-vindas ou de resumo é usar um modelo fornecido pelo Google.
Personalizar o modo retrato
A seguir, estão os elementos personalizáveis no modo retrato.
Layout e plano de fundo
- Barra de navegação: A barra de navegação contém o botão Voltar. Você pode personalizar o layout e o plano de fundo da barra, bem como o ícone de navegação (imagem, tamanho, cor e posicionamento), o plano de fundo (imagem, opacidade e cor) e a largura.
- Barra de ação: A barra de ação é o contêiner ancorado na parte inferior da página que contém os botões de chamada para ação, que são transparentes por padrão. Você pode personalizar a altura e o espaçamento da barra, bem como a imagem, a opacidade e a cor do fundo.
- Layout da página: Margens da página.
- Fundo da página: Cor ou imagem de fundo.
Componentes
- Imagem principal: Imagem, tamanho, posicionamento.
- Menu suspenso: Fonte (família, tamanho, cor), ícones (imagem, tamanho, cor), linha divisória.
- Botões: Fonte (família, tamanho, cor), fundo (imagem, opacidade, cor), tamanho do botão (largura, altura), posicionamento, espaçamento interno, cantos arredondados. Você deve diferenciar o estilo para ações primárias e secundárias, bem como para os diferentes estados do botão.
- Cabeçalho da página: Fonte (família, tamanho, cor), posicionamento do título e subtítulo, textos, ícone da página (se deve incluir o ícone, imagem do ícone, tamanho e cor).
- Lista: Fonte (família, tamanho e cor), ícones (imagem, tamanho e cor; os ícones do Google não são personalizáveis), posicionamento, espaçamento interno, altura do item da lista e linha divisória. Para alterar essas configurações, é necessário entrar em contato com o Google.
Telas de carregamento
- Animação: Animação (indeterminada) ou uma imagem, tamanho, posicionamento.
- Strings: Fonte (família, tamanho, cor), posicionamento, strings.
Exemplo de layout de retrato personalizado