Como configurar o estilo global do seu aplicativo

Hoje vamos falar sobre uma ferramenta ultra poderosa para o design de seu aplicativo, o menu Estilo Global.

O Estilo Global permite que você gerencie o design geral de seu aplicativo a partir de um único menu.
As cores, fontes e efeitos escolhidos neste menu são aplicados a cada seção do aplicativo.
No entanto, tenha cuidado! Cada alteração feita neste menu será aplicada a TODAS as seções do seu aplicativo.

Vamos ver como fica.
Click no menu Meu app > Design> Design Geral
E clico em “Estilo Global”.

A primeira coisa a fazer é escolher um esquema de cores.
Um esquema de cores é uma combinação de cores que combinam harmoniosamente. O “Estilo Global” oferece uma biblioteca de temas de cores.
Para escolher a partir da biblioteca, clico em “Editar”.
Como você pode ver, temos várias escolhas.
Se eu quiser modificar meu tema atual, clico em “Editar” e, na parte inferior da página, clico em “Criar um tema de cor”.

Só preciso de selecionar as minhas cores;
Agora a parte da tipografia.
Existe uma hierarquia para a exibição de texto no aplicativo.
São usados 8 níveis para exibir títulos, subtítulos e textos de parágrafos.
Agora defino o tamanho da fonte.
A fonte de cada nível.
Dependendo das fontes escolhidas, também posso escolher a opção.

Vamos passar para os botões.
Para as seções do seu aplicativo que solicitam aos usuários a execução de ações, vou selecionar a forma dos botões que desejo aplicar.

Posso visualizar o resultado clicando aqui.

Existem vários níveis de hierarquia em relação aos botões em seu aplicativo. O design dos botões depende da cor do tema do app, para respeitar a harmonia, várias variações são propostas para cada tema.
Aqui estão os diferentes tipos de design para cada nível de hierarquia:
- Nível 1: fundo do botão colorido, sem contorno.
- Nível 2: fundo do botão transparente, contorno colorido e texto.
- Nível 3: fundo do botão transparente, sem contorno.

Em seguida, os efeitos de foco nas imagens (presentes apenas na área de trabalho do PWA)
E, finalmente, os elementos adicionais, como o ícone de retroceder que aparece no cabeçalho durante a navegação no aplicativo. Você também pode definir este ícone ao projetar seu cabeçalho.
Aqui eu aplico minhas modificações.

Não se esqueça de que essas mudanças irão sobrepor-se a todo o design atual de sua loja, incluindo os seus menus suspensos!

Acho que meu aplicativo é perfeito assim! E você?
Vejo vocês em breve para um novo tutorial!