Artigos sobre: Design do aplicativo

Personalizar layout



Na Fabapp é possível personalizar o menu de diferentes formas, definindo o que é exibido e como é exibido, além de ativar recursos extras à tela de menu.

O menu do aplicativo é a tela que aparece logo depois a Imagem de Abertura. Basicamente o ele é a principal interface visual do app. Nele estará visível todas as funcionalidades do aplicativo ou aquela definida como aba principal.

Personalização do layout do menu

Ao entrar no editor do app na plataforma da Fabapp, acesse o "Editor visual" localizado no menu superior;

No menu lateral, selecione a opção "Personalizar layout";

Perceba que será possível editar a Exibição do layout do menu clicando em "Exibição";

Clicando em Recursos, ative opções extras ao menu do app.

Veja na imagem abaixo.



Exibição

Nessa parte, você poderá:

Definir se deseja um cabeçalho no app ou não, selecionando a opção "Exibir cabeçalho".


Perceba que o cabeçalho oferece o menu hamburger na esquerda (aqueles 3 risquinhos), onde é possível adentrar a parte de perfil do usuário, políticas e visualizar todas as abas do app. Ainda não há opção desse menu ser no rodapé do app.



Escolher o "Modo de exibição" das abas do app em gride (1), lista (2) ou aba principal (3);




Definir questões de Design como: opacidade do fundo da aba, quantidade de colunas, espaçamento entre os ícones, exibição das abas;




Há como definir se deseja "Exibir os ícones das abas" (dessa forma o app fica apenas com o fundo da aba evidente). Essa é uma boa opção para inserir imagens personalizadas nos botões do aplcativo;


Perceba que ao exibir os ícones, mais opções aparecerão. A partir delas defina o "Formato do ícone" e o "Tamanho dos ícones do app";



Veja que é possível utilizar o modo padrão ou Modo Avançado para definir o tamanho dos ícones das abas:



Em "Estilo de texto" defina se deseja "Exibir texto nas abas" ou não;




Em "Tamanho das letras das abas" defina qual o tamanho mais se adéqua ao app em questão. Perceba que há a opção de "Definição Padrão" e "Modo Avançado";




Recursos

Nessa parte será possível:

Ativar a opção de Carrossel de imagens na home do app;


Inserir a possibilidade de "Busca no app".




Se preferir, veja o vídeo abaixo:

Atualizado em: 11/12/2023