Está aqui:   Índice / Editando O Design / O Design Geral Do App

Estilo Global

O menu Estilo Global gerencia o design geral do seu aplicativo em um único menu.
Cores, fontes e efeitos escolhidos neste menu são aplicados a todas as seções do seu aplicativo.

AVISO! Muito importante: ao aplicar seu estilo global ao seu aplicativo, se você tiver feito algumas configurações de design em uma seção específica do seu aplicativo anteriormente, essas configurações serão perdidas e substituídas pelas novas definidas no Estilo global.
Todas as modificações feitas neste menu serão aplicadas a todas as seções do seu aplicativo.

Para configurar seu estilo global:
1. Vá para o menu de deslizamento esquerdo Meu App > Design > Design Geral
2. Clique em "Estilo Global" na coluna da direita.

Para modificar o design de uma seção específica, para uma personalização detalhada, leia esta ajuda online.

picture

1

Esquema de cores

Um esquema de cores * é um conjunto de cores que combinam bem. O Estilo Global oferece uma biblioteca de esquemas de cores.
1. Selecione um esquema de cores dentre os disponíveis
2. Para editar um tema de cores existente, leia o ponto 7

* Quando você escolhe um esquema de cores, as cores das quais ele é composto são aplicadas a diferentes elementos do seu aplicativo.
Depois que o esquema de cores for escolhido, ele será aplicado em todos os lugares do aplicativo.

picture

2

Tipografia

Existe uma hierarquia para exibir texto no aplicativo. 8 níveis são usados para exibir títulos, subtítulos e o texto em parágrafos:
1. Defina o tamanho do texto usando o cursor
O Estilo Global calcula automaticamente o tamanho de cada nível para respeitar essa hierarquia.
2. Selecione o tipo de letra para cada nível
Todos os tipos de letra da biblioteca de fontes do Google estão disponíveis, assim como as fontes nativas disponíveis por padrão nos dispositivos de seus usuários.
3. Para cada tipo de letra selecione seu peso

picture

3

Botões

Para páginas em seu aplicativo que solicitam que os usuários executem uma ação, existem três níveis de botões.
Cada nível corresponde a diferentes ações em diferentes Seções / Widgets da página principal.
A GoodBarber atribui automaticamente o nível certo ao botão, dependendo da ação e onde ele é exibido no aplicativo.

O design do botão de nível 1 será sempre preenchido.
O design do botão de nível 2 será sempre contornado.
O design do botão de nível 3 é apenas um link em formato de texto.

1. Defina a forma dos botões no menu Estilo Global.

Atenção:
- As cores do botão são baseadas no esquema de cores do aplicativo. Você pode alterar a cor de um botão específico, em cada seção - painel de design  ou configurações de widget .
- O nível do botão não pode ser alterado.

picture

4

Efeitos de deslocamento (apenas Desktop PWA)

1. Selecione os efeitos que aparecem ao passar o cursor sobre algo.
Eles são aplicados em imagens e links de hipertexto.

picture

5

1. Selecione o design aplicado aos seus separadores para as seções: Pesquisa, Perfil, Lista de Usuários e Cartão Fidelidade.

picture

6

Elementos adicionais

1. Selecione o ícone de menu exibido em todos os cabeçalhos de seu aplicativo
2. Selecione o botão Voltar exibido em todos os cabeçalhos de seu aplicativo

picture

7

Editar o esquema de cores

Crie até 3 temas de cores personalizadas
1. Clique em Editar acima do seu tema atual:

picture

2. Role para baixo até o final da página
3. Clique no botão verde "Criar um tema de cores".

picture

4. Edite o nome do seu tema personalizado clicando no lápis ao lado dele.
5. Defina as cores do seu tema personalizado por zona:
Zona de título
Essas cores serão aplicadas ao seu cabeçalho .
Cores principais
Essas cores serão aplicadas à parte principal de seus apps (título, texto e plano de fundo das suas páginas de artigos ou cor do texto em seu modo de navegação, por exemplo)
Cores secundárias
Essas cores serão aplicadas quando houver algumas bordas ou separadores para a cor esquerda, a cor à direita será aplicada como cor do widget de plano de fundo ou plano de fundo das guias, por exemplo.
App e Menu de fundo
Essas cores serão aplicadas ao seu app e à cor de fundo do menu
Botões
Essas cores serão aplicadas ao texto e à cor de fundo de seus botões.

picture

6. Clique em "Aplicar"* para aplicar o seu novo estilo global personalizado.

*Todas as modificações feitas neste menu serão aplicadas a todas as seções do seu aplicativo.
Tenha muito cuidado, ao aplicar o seu estilo global ao seu aplicativo, se você tiver feito algumas configurações de design numa determinada seção do aplicativo, essas configurações serão perdidas e serão substituídas pelas novas configurações do seu Estilo global personalizado.


8

Vídeo tutorial