Como customizar os principais ícones do seu app

Estilo do app

O "App style" define o design geral do seu app em um só lugar: cores, fontes, botões, campos de formulário e muito mais.

No menu "My App", clique em "App style".

As configurações têm duas partes: o essencial e, depois, as opções adicionais. Tudo aqui vale para todas as seções do app e substitui o design de cada seção.

Cores

Comece pelas cores.

Um tema de cores reúne cores que combinam bem. Escolha um na biblioteca… e a pré-visualização mostra o resultado.

A "Magic palette" te sugere um novo tema… a cada clique.

Depois, ajuste cada cor em detalhe: o cabeçalho, as cores principais, os fundos, o menu e os botões.

Clique em uma cor, digite um código ou escolha uma e clique em Choose.

O cabeçalho muda de cor.

Clique em Apply para usar essas cores em todo o app, ou em Cancel para manter as atuais. Aqui, mantemos as atuais.

Fontes

Em seguida, as fontes.

Um tema de fontes reúne três fontes que combinam bem. Você pode escolher um nesta lista.

O controle deslizante define o tamanho de todos os textos de uma vez, mantendo a hierarquia.

Todos os níveis de texto crescem juntos.

Seu app usa oito níveis de texto, do título principal ao texto normal. Para mudar a fonte de um nível, abra-o… e escolha uma fonte. As Google Fonts estão todas disponíveis, e o botão + adiciona uma fonte própria, se a licença permitir.

O título principal muda de fonte.

Em cada nível, você também define o peso, a altura da linha e o espaço entre letras.

De novo, clique em Apply para usar essas fontes, ou em Cancel para manter as suas.

Botões e campos de formulário

Agora, os botões.

Seu app usa três níveis de botão, escolhidos pela GoodBarber para cada ação: o nível 1 é preenchido, o nível 2 tem contorno e o nível 3 é um simples link de texto. As cores deles vêm do seu tema de cores.

Escolha o formato deles: Square, Rounded ou Round… e todos os botões do seu app ficam assim.

Em "Form fields", é igual: escolha o formato, o tamanho e a posição do título, acima do campo ou dentro dele.

Miniaturas e células

Em "Thumbnails and cells", defina o formato das imagens e dos cards das listas: Square, Rounded ou Round.

Aqui, os cantos ficam retos.

No computador, o app web também pode ter um efeito ao passar o mouse sobre uma imagem.

Espaçamento

Em Spacing, você define as margens ao redor do conteúdo, em pixels.

Com margens maiores, o conteúdo ganha mais espaço ao redor.

Animações e feedback tátil

Nos apps nativos iOS e Android, você também pode escolher como uma página abre a partir de uma lista, adicionar uma leve vibração ao toque e revelar elementos ao rolar.

Ícones

Em Icons, você escolhe os ícones padrão do seu app. Por exemplo, clique no ícone de favoritos… e escolha outro na biblioteca.

O novo ícone aparece em todos os artigos.

Fundo e separadores

Por fim, o fundo do seu app: uma cor ou uma imagem, e a cor dos separadores.

O fundo muda em todas as páginas.

Publicar

Para que seus usuários vejam as mudanças, publique a atualização do seu app pelo menu Publish.