GoodBarber 4.5 - Gerenciando o design do seu aplicativo

Escrito por Rui Rio Torto na Terça-Feira 31 Julho 2018

Há algumas semanas, explicamos como gerenciar o conteúdo do seu app . Como você sabe, o design é a nossa vantagem competitiva, e é por isso que não poupamos quando o assunto é trazer a você um novo menu de design, onde você pode gerenciar todos os aspectos do design do seu aplicativo.

Aqui estão algumas opções de design que você pode gerenciar neste novo menu detalhado abaixo:

Personalize o título ou o logotipo do seu app

Este menu é inteiramente dedicado ao cabeçalho do seu app, que contém botões de ação e, claro, o título do seu aplicativo.

A primeira parte do menu diz respeito ao ícone Menu, que está presente no cabeçalho para que o usuário possa abrir o modo de navegação principal do aplicativo. Aqui você pode personalizar este ícone e escolher sua cor.

Então chega a hora de mostrar o título do seu aplicativo. Isso pode ser feito através de um texto simples, para o qual você pode escolher a fonte, tamanho e cor.
Você também pode optar por um logotipo e apenas importar a imagem de sua escolha no formato de 600 x 148 px. Uma vez que seu título tenha sido adicionado, você só precisa escolher se deseja que ele seja alinhado no centro ou à esquerda.
Você também encontrará a opção de personalizar o plano de fundo do seu cabeçalho; você tem algumas opções disponíveis:
- use uma cor
- use um gradiente de cor
- use as imagens de sua escolha, respeitando os tamanhos indicados para que apareçam perfeitamente em todos os tipos de tela

Para levar a personalização do seu cabeçalho um passo além, levando em consideração todos os detalhes da experiência do usuário do seu aplicativo, a próxima parte do menu permitirá que você adicione links ao seu cabeçalho que serão exibidos à direita do título. Selecione o destino do link, o ícone, a cor e voilà! No exemplo abaixo, decidimos adicionar um link ao perfil do usuário e à página de contato do aplicativo. O que é adicionado aqui pode variar dependendo do projeto. Não se esqueça de que, se desejar, você poderá ativar a opção "Exibir título do link", que mostrará o título do link ao lado do ícone na versão para tablet e computador do seu aplicativo.
Por fim, como no ícone Menu, você pode personalizar o ícone Voltar, que será exibido nas páginas mais profundas do seu aplicativo.

Crie o ícone e a tela inicial do seu aplicativo

Aqui é onde você vai criar os primeiros elementos que seus usuários verão.
Seja para o ícone ou tela inicial, você tem duas opções:

- Use o assistente de criação
- Importe suas próprias imagens
No exemplo abaixo, criamos o ícone do aplicativo com o assistente, e você verá que esse processo permite criar seus elementos com muita facilidade.
Para começar, vá até a visualização do ícone e modifique o texto dentro do ícone, bem como o título do aplicativo logo abaixo, que será exibido na tela de boas-vindas dos dispositivos de seus usuários.

Em seguida, no painel à direita, você tem a opção de modificar o design do ícone e escolher a fonte, a cor e os efeitos que serão aplicados ao texto do ícone. Finalmente, tudo o que resta a fazer é personalizar o plano de fundo do seu ícone, aplicando uma das seguintes opções:

- uma cor
- um gradiente de cor
- uma imagem importada de sua escolha respeitando o formato indicado

Para a tela inicial, decidimos mostrar a opção Personalizada, o que significa adicionar diretamente a imagem. Importar sua imagem é fácil - o painel à direita indica todos os tamanhos de imagem necessários para a exibição ideal da tela inicial em qualquer tela.

Gerencie o design das suas páginas

Agora vamos entrar na parte que é o equivalente ao menu Conteúdo que mostramos para você. Você encontrará a lista de todas as páginas do seu aplicativo, que você pode inserir para configurar cada opção de design.

No exemplo abaixo, decidimos mostrar a configuração de design de uma página de artigos. É possível criar várias partes das páginas dos artigos:

1) A lista de artigos
Aqui você pode escolher o template para apresentar sua lista de artigos. Defina as cores e fontes, bem como as informações que aparecem na lista (miniaturas, data de publicação, resumo do artigo, autor, etc).
Por fim, escolha a miniatura padrão a ser usada para seus artigos, seu formato e seu alinhamento.

2) Artigos
Como na lista de artigos, você pode escolher o modelo de exibição, as cores e as fontes. Você também pode personalizar a barra de ferramentas escolhendo exibir ou não as seguintes funcionalidades:
- Comentários
- Compartilhamento
- Tamanho da fonte
- Favoritos
- Ir para o próximo artigo
Você também tem a opção de editar o código HTML estruturando o modelo de página com as tags [TITLE], [DATE], [AUTHOR] e [CONTENT].

3) Categorias e comentários
Se você ativou a categorização de seus itens, poderá personalizar a maneira como seus usuários verão suas categorias aqui. Você só precisa selecionar os modelos de menu que você deseja usar e escolher as cores. Fácil!

Da mesma forma, você pode personalizar a maneira como a página de comentários aparece nesse menu.

Organize sua Home, gerencie o design global do seu aplicativo e escolha seu modo de navegação

Você também pode criar sua Página Inicial a partir deste novo menu de Design e organizar um nível extra de navegação. Todos os detalhes sobre a criação da página Home podem ser encontrados aqui .

O menu Design também contém o menu Estilo Global (que mencionamos há algumas semanas), que permite gerenciar o design geral do aplicativo e também criar e salvar seus próprios temas .

Por fim, não perca a oportunidade de configurar o modo de navegação do seu aplicativo, que mostramos aqui .