Visão geral
Essas diretrizes são destinadas a desenvolvedores que participam do nosso programa para oferecer aos usuários no Espaço Econômico Europeu (EEE) uma alternativa ao sistema de faturamento do Google Play sem escolha do usuário. Os desenvolvedores com usuários no EEE que participam do piloto da escolha de faturamento do usuário e oferecem um sistema alternativo junto com o já existente do Google Play precisam usar as diretrizes de UX de escolha de faturamento do usuário. Essas diretrizes de UX têm como objetivo manter uma experiência do usuário consistente, exigindo que os desenvolvedores mostrem uma tela de informações para cada usuário na primeira vez que ele iniciar uma compra. As mensagens voltadas para o usuário e as especificações da interface para a tela de informações precisam ser implementadas de acordo com as diretrizes abaixo.
App do desenvolvedor |
Tela de informações para usuários |
Selecionar idioma
Selecione o idioma dos usuários para conferir as strings de texto da IU correspondentes nas especificações de design abaixo.
- Mostrar todos os idiomas
- Selecione um idioma
- Búlgaro
- Catalão
- Croata
- Tcheco
- Dinamarquês
- Holandês
- Português
- Estoniano
- Finlandês
- Francês
- Alemão
- Grego
- Húngaro
- Islandês
- Italiano
- Letão
- Lituano
- Norueguês
- Polonês
- Português (Brasil)
- Português (Europa)
- Romeno
- Eslovaco
- Esloveno
- espanhol
- Sueco
Informações para os usuários
A tela de informações ajuda os usuários a entender o impacto da mudança.
Quando mostrar
A tela de informações precisa ser mostrada aos usuários no início da primeira compra. Essa mensagem não precisa ser mostrada nas compras seguintes feitas pelo mesmo usuário. Mostre a tela de informações logo após um usuário realizar uma ação explícita para iniciar uma compra.
Quando mostrar o preço
O preço de compra precisa estar visível de forma óbvia para os usuários antes que eles vejam a tela de informações.
Como mostrar
A tela de informações precisa ser mostrada em uma página inferior modal. Uma página inferior modal é parecida com uma caixa de diálogo modal que é animada de baixo para cima na tela e permanece fixada na parte de baixo. Ela é elevada acima de todos os elementos da IU na tela. A tela fica escurecida para indicar que não vai responder à interação do usuário.
Consulte o Google Material Design para mais informações sobre o design e a implementação (links em inglês) de páginas inferiores modais.
Ações do usuário
A página inferior precisa ser acionada quando um usuário toca em um botão ou outro elemento da IU no app que inicia uma compra. O usuário pode realizar três ações na tela de informações:
Entendi
Tocar no botão "Entendi" dispensa a tela de informações e inicia a próxima tela no fluxo de pagamento.
Saiba mais
Tocar no botão "Saiba mais" abre um artigo da Central de Ajuda do Google em um navegador da Web.
Dispensar
Caso o usuário queira dispensar a página inferior e retornar à tela implícita, ele pode fazer isso:
- tocando fora do contêiner da página inferior;
- tocando no botão "Voltar" do sistema Android.
A tela de informações não precisa ser mostrada novamente depois de ser dispensada ou após o usuário tocar em "Entendi".
Por exemplo, quando o usuário toca para comprar no app, o botão aciona a tela de informações.
Especificações de design
A tela de informações é dividida em três componentes: título, mensagem e botões. Os três componentes são obrigatórios. Eles precisam conter o texto exato e os elementos de IU definidos nestas diretrizes. Não inclua outros textos ou imagens nessa tela, mas você pode fazer isso em outras.
- Título
- Texto 1
- Texto 2
- Botões
- Página inferior
- Segundo plano scrim
Título
| Texto |
Selecionar idioma
|
| Fonte | Roboto (aplicada a todas as fontes) |
| Tamanho da fonte | 18 sp |
| Cor da fonte | #202124 |
Texto 1
Usado para destacar os principais pontos que são considerados informações essenciais.
| Texto |
Selecionar idioma
|
| Tamanho da fonte | 14 sp |
| Altura da linha | 20 |
| Cor da fonte | #5F6368 |
Texto 2
Usado para informações secundárias de menor prioridade.
| Texto |
Selecionar idioma
|
| Tamanho da fonte | 12 sp |
| Altura da linha | 16 |
| Cor da fonte | #5F6368 |
Botão 1
| Texto |
Selecionar idioma
|
| Alinhamento do texto | Centralizado |
| Tamanho da fonte | 14 sp |
| Espessura da fonte | Mídia |
| Cor da fonte | #01875F |
| Cor do segundo plano | #FFFFFF |
| Dimensões | Altura: 36; largura: escalonar para o contêiner |
| Raio dos cantos | 4 dp |
| Contorno | 1 dp, #DADCE0 |
| Vincular | Link para o artigo de ajuda do Google Play |
Botão 2
| Texto |
Selecionar idioma
|
| Alinhamento do texto | Centralizado |
| Tamanho da fonte | 14 sp |
| Espessura da fonte | Mídia |
| Cor da fonte | #FFFFFF |
| Cor do segundo plano | #01875F |
| Dimensões | Altura: 36; largura: escalonar para o contêiner |
| Raio dos cantos | 4 dp |
| Vincular | Links para a próxima tela no fluxo de pagamento |
Página inferior
| Dimensões | Altura: variável; Largura: 100% |
| Raio dos cantos | 8 dp, 8 dp, 0, 0 |
| Contexto | #FFFFFF |
| Padding interno | Esquerda: 24 dp; direita: 24 dp; em cima: 32 dp; em baixo: 24 dp |
| Elevação | 8 dp |
Paisagem
Na visualização do modo paisagem, a página inferior é mais larga que na visualização do modo retrato, mas segue as mesmas especificações de design e funcionalidade.
| Página inferior | Largura: máximo de 500 dp; padding interno: 24 dp |
| Título | O mesmo da visualização no modo retrato |
| A mensagem | O mesmo da visualização no modo retrato |
| Botões | Altura: 36; largura: escalonar para o contêiner |
Para mais detalhes sobre o programa do EEE para o faturamento alternativo sem escolha do usuário e as perguntas frequentes, acesse nossa Central de Ajuda.