eCommerce
Sistemas de assinatura
Chatbot
Cursos Online
Agendamento online
Guia de viagem
Eventos
Criadores de Conteúdo
Entrega local e coleta na loja
Jornais
Rádio
Escolas e Universidades
Espiritualidade
Organizações
Restaurante
Mercearia
Crie seu app sob medida
Comunicação dos Funcionários
APP BUILDER SEM CÓDIGO
TECNOLOGIA
POR QUE GOODBARBER?
Design
RECURSOS DO PRODUTO
TÓPICOS
REVENDEDOR DE APPS
DESCOBRIRItem: o elemento que desenha cada separador da sua app
Numa app GoodBarber, cada separador da barra de navegação assenta num mesmo elemento: o Item, que pode reunir um ícone, um rótulo e um indicador. Concebemo-lo para desenhar as nossas TabBar de hoje e de amanhã. Está agora documentado no Design System da GoodBarber.
Os seus conteúdos estão cuidados, as suas cores escolhidas. Falta a barra de navegação, por onde os seus utilizadores passam de uma secção para outra e que pesa muito na impressão que a sua app deixa. Cada um dos seus separadores assenta num elemento concebido como uma peça de construção: o Item. Na nova geração de TabBar, é ele que dá a cada navegação o seu carácter.
Um ícone, um rótulo, um indicador
Num Item, cada elemento tem o seu papel. O ícone representa a secção, o rótulo mostra o seu nome e o indicador, opcional, assinala o separador ativo. Cada um mostra-se ou oculta-se separadamente, o que dá três composições: ícone e rótulo, só ícone, só rótulo.
É o que separa a Minimal TabBar, toda em ícones, da Clean TabBar, toda em texto: o mesmo elemento, composto de outra forma.
17 propriedades para as TabBar de hoje e de amanhã
Para conceber uma TabBar, os designers da GoodBarber dispõem de 17 propriedades: 8 para o Item, 6 para o seu ícone e 3 para o seu rótulo. A superfície do Item aceita uma cor sólida, um gradiente ou um efeito de desfocagem, um contorno, uma sombra, cantos retos ou arredondados. A sua disposição define o tamanho, a orientação, a margem interior, que delimita a zona tátil, e o espaçamento que deixa os seus elementos respirar.
Esta riqueza não lhe pede que ajuste tudo. Serve-nos para compor layouts de TabBar completos, alinhados com os códigos atuais do design de apps: a Bold, a Minimal e a Clean TabBar são os três primeiros. Quando esses códigos evoluírem, novos layouts nascerão do mesmo elemento, sem partir do zero. Assim podemos propor-lhe TabBar sempre atuais.
No seu back office, escolhe a sua TabBar e depois ajusta-a à sua identidade: tamanho dos separadores, arredondamento dos cantos, cores, tipo de letra dos rótulos, forma de assinalar o separador ativo. Os seus próprios ícones podem até conviver com os do sistema.
Como o Item assinala o separador ativo
Um Item tem dois estados: predefinido e selecionado. Para distinguir o separador ativo, dispõe de quatro meios, isolados ou combinados: a cor, o fundo, o contorno e o indicador. Este último só aparece no separador selecionado, em três formas: um ponto (Dot), um pequeno traço (Tiny) ou uma linha (Line).
Cada forma tem o seu próprio movimento. O ponto e a linha encolhem no separador anterior e crescem no novo; o pequeno traço desliza de um para o outro. Quando a seleção passa pelo fundo, como na Bold TabBar, é o fundo colorido que se desloca. Transições curtas, que tornam cada mudança legível sem exageros.
O mesmo Item, do mobile ao desktop
O Item adapta a orientação, a margem interior e o espaçamento a cada ecrã: mobile, tablet e desktop. Na parte inferior de um telemóvel, o ícone fica por cima do rótulo. Em desktop, a TabBar torna-se uma barra lateral e o Item pode passar para a horizontal para lá caber. Configura a sua navegação uma única vez: cada ecrã recebe a versão que lhe convém.
O Item em resumo
- 3 elementos: um ícone, um rótulo, um indicador (opcional).
- 3 composições: ícone e rótulo, só ícone, só rótulo.
- 17 propriedades de conceção: 8 para o Item, 6 para o seu ícone, 3 para o seu rótulo.
- 2 estados: predefinido e selecionado.
- 4 formas de assinalar o separador ativo: a cor, o fundo, o contorno, o indicador.
- 3 indicadores, cada um com a sua animação: Dot, Tiny, Line.
- 3 ecrãs: mobile, tablet, desktop.
O Item entra no Design System
Depois da TabBar, o Item tem a sua página no Design System da GoodBarber, e chega em família. Com o Item Icon, o Item Label e o Item Indicator, abre uma nova categoria: os UI Elements, as peças de base dos nossos componentes, cada uma dedicada a um único papel.
Para descobrir o Item em pormenor, visite a sua página do Design System. E para o ver em ação, escolha a sua TabBar na secção Menu do seu back office. Ainda não tem uma app GoodBarber? Crie a sua.
