Cores do app
As cores do app são fatores primordiais para obter melhor usabilidade, mais personalização e maior percepção de profissionalismo ao app.
Na plataforma Fabapp é possível escolher entre 12 combinações de cores para customizar o design do app ou utilizar cores personalizadas que podem estar de acordo com a identidade visual da marca, por exemplo.
Dicas sobre a escolha de cores do app
Cores e logo: é importante que as cores combinem com o logo da marca. Por exemplo, se o app é do "Restaurante da Barra" é importante que a logomarca do restaurante apareça no app e que as cores do app combinem com a logomarca;
Cada segmento é melhor representado por um grupo de cores: escolha cores que combinam com o segmento do negócio. Por exemplo, cores escuras, pretas, marrons e amareladas não combinam com o segmento de saúde. Para saber mais sobre a escolha das cores clique aqui;
Cuide do contraste entre os itens: personalize as cores de "Título" e "Itens de navegação" com opções que sejam contrastantes com as demais cores do app. Por exemplo, se o fundo do app é preto, não deixe Títulos e Itens de navegação em cinza. São cores muito parecidas e a visualização com certeza ficará prejudicada para o usuário.
Personalizando as cores do app
No painel editor da Fabapp há a possibilidade de editar as cores através de um menu seletor de cores ou através de um box para inserção de códigos hexadecimais de cores, RGB ou HSL (esses códigos geralmente são enviados por quem elaborou a logomarca).
É possível personalizar as cores dos principais itens do app. São eles: cabeçalho, títulos, fundo e itens de navegação. Abaixo veja a que se refere casa um, visualmente.
Cabeçalho: parte superior do app que pode conter o logo ou nome do app. Nele é localizado o menu hambúrguer e a ferramenta de Busca (se posicionada no cabeçalho do app)
Títulos: Nomes das abas da home e abas internas do app. Como imagem abaixo.
Fundo: fundo das abas da home do app e abas internas. Como imagem abaixo.
Itens de navegação: lupa, nome do app no cabeçalho, menu hambúrguer, linhas entre as abas no modo de exibição em lista. Como imagem abaixo.
Passo a passo para personalização das cores do app
Acesse o painel de Fabapp e vá para a opção "Editor Visual";
No menu esquerdo selecione "Cores do app";
Defina as cores do app através de combinações de cores pré definidas em "Temas", clicando sobre a combinação desejada;
Defina cores personalizadas em "Personalize as cores";
As alterações são salvas automaticamente mas, caso queira ter certeza do salvamento, clique em "Publicar" no canto superior direito do painel editor.
Definindo cores personalizadas
No campo "Personalize as cores" é possível inserir cores através do sistema hexadecimal de cores, RGB ou HSL através de um menu seletor de cores. Para isso:
Clique sobre o box colorido do item desejado;
Defina os tons aproximados através da linha horizontal colorida;
Utilize o menu seletor de cores, deslizando o mouse no quadro em degradê até a cor desejada;
Se desejar inserir o código da cor, defina nas setas o padrão a ser inserido: Hex (hexadecimal), RGB ou HSL;
Pressione "Enter" no teclado ou clique fora dos boxes para fixar a cor no app.
Também é possível utilizar o box lateral para digitação do hexadecimal da cor desejada. Para isso:
Clique no box em branco;
Limpe o código que está inserido;
Insira o código da cor desejada (não esqueça de inserir o # antes do código);
Pressione "Enter" no teclado ou clique fora dos boxes para fixar a cor no app.
Veja todos os casos citados na imagem abaixo.
Se preferir, veja o vídeo:
Na plataforma Fabapp é possível escolher entre 12 combinações de cores para customizar o design do app ou utilizar cores personalizadas que podem estar de acordo com a identidade visual da marca, por exemplo.
Dicas sobre a escolha de cores do app
Cores e logo: é importante que as cores combinem com o logo da marca. Por exemplo, se o app é do "Restaurante da Barra" é importante que a logomarca do restaurante apareça no app e que as cores do app combinem com a logomarca;
Cada segmento é melhor representado por um grupo de cores: escolha cores que combinam com o segmento do negócio. Por exemplo, cores escuras, pretas, marrons e amareladas não combinam com o segmento de saúde. Para saber mais sobre a escolha das cores clique aqui;
Cuide do contraste entre os itens: personalize as cores de "Título" e "Itens de navegação" com opções que sejam contrastantes com as demais cores do app. Por exemplo, se o fundo do app é preto, não deixe Títulos e Itens de navegação em cinza. São cores muito parecidas e a visualização com certeza ficará prejudicada para o usuário.
Personalizando as cores do app
No painel editor da Fabapp há a possibilidade de editar as cores através de um menu seletor de cores ou através de um box para inserção de códigos hexadecimais de cores, RGB ou HSL (esses códigos geralmente são enviados por quem elaborou a logomarca).
É possível personalizar as cores dos principais itens do app. São eles: cabeçalho, títulos, fundo e itens de navegação. Abaixo veja a que se refere casa um, visualmente.
Cabeçalho: parte superior do app que pode conter o logo ou nome do app. Nele é localizado o menu hambúrguer e a ferramenta de Busca (se posicionada no cabeçalho do app)
Títulos: Nomes das abas da home e abas internas do app. Como imagem abaixo.
Fundo: fundo das abas da home do app e abas internas. Como imagem abaixo.
Itens de navegação: lupa, nome do app no cabeçalho, menu hambúrguer, linhas entre as abas no modo de exibição em lista. Como imagem abaixo.
Passo a passo para personalização das cores do app
Acesse o painel de Fabapp e vá para a opção "Editor Visual";
No menu esquerdo selecione "Cores do app";
Defina as cores do app através de combinações de cores pré definidas em "Temas", clicando sobre a combinação desejada;
Defina cores personalizadas em "Personalize as cores";
As alterações são salvas automaticamente mas, caso queira ter certeza do salvamento, clique em "Publicar" no canto superior direito do painel editor.
Definindo cores personalizadas
No campo "Personalize as cores" é possível inserir cores através do sistema hexadecimal de cores, RGB ou HSL através de um menu seletor de cores. Para isso:
Clique sobre o box colorido do item desejado;
Defina os tons aproximados através da linha horizontal colorida;
Utilize o menu seletor de cores, deslizando o mouse no quadro em degradê até a cor desejada;
Se desejar inserir o código da cor, defina nas setas o padrão a ser inserido: Hex (hexadecimal), RGB ou HSL;
Pressione "Enter" no teclado ou clique fora dos boxes para fixar a cor no app.
Também é possível utilizar o box lateral para digitação do hexadecimal da cor desejada. Para isso:
Clique no box em branco;
Limpe o código que está inserido;
Insira o código da cor desejada (não esqueça de inserir o # antes do código);
Pressione "Enter" no teclado ou clique fora dos boxes para fixar a cor no app.
Veja todos os casos citados na imagem abaixo.
Se preferir, veja o vídeo:
Atualizado em: 09/12/2022