TabBar: chega uma nova geração
Escrito por Lesia PIETRI na
Com a nova TabBar, enriquecemos a navegação das tuas apps com 3 novos layouts, mais opções de personalização, animações de seleção e uma abordagem multi-device pensada para cada ecrã.

Numa app mobile, a navegação não serve apenas para passar de uma secção a outra. Estrutura a experiência, cria referências visuais fortes e contribui diretamente para a perceção global do produto. Com o novo componente TabBar, abrimos uma nova etapa no design da navegação, com mais liberdade de design, mais flexibilidade na personalização e uma adaptação mais cuidada a cada dispositivo.
Três novos layouts para dar o tom

Esta nova geração de TabBar chega com três layouts disponíveis desde o lançamento: Bold TabBar, Minimal TabBar e Clean TabBar.
- Bold TabBar dá mais presença à navegação, com uma estrutura visual forte e assumida.
- Minimal TabBar propõe uma abordagem mais moderna e mais compacta.
- Clean TabBar oferece um equilíbrio elegante, com um acabamento depurado, versátil e fácil de integrar em universos gráficos muito variados.
Com estas três direções, a barra de navegação torna-se uma verdadeira alavanca de estilo. Pode alinhar-se de forma mais precisa com a identidade da app, quer se trate de um projeto editorial, de uma app de marca, de um serviço, de um universo lifestyle ou de uma aplicação de e-commerce.
Uma TabBar mais rica para personalizar
O novo componente não se resume a novos layouts. Inscreve-se na evolução contínua do Design System GoodBarber e amplia as possibilidades para personalizar a navegação. Fundos, formas, sombras, estrutura dos itens, estados selecionados, menu "More", variações consoante os dispositivos: cada dimensão foi pensada para oferecer mais precisão na renderização, mantendo a coerência visual da app. Esta nova TabBar ilustra plenamente a ambição do nosso Design System: dar mais liberdade de criação, sem nunca abdicar da qualidade de execução.
As animações de seleção acompanham esta evolução trazendo mais fluidez às interações, uma melhor leitura das mudanças de estado e uma sensação de interface ainda mais cuidada.
No iOS e em PWA, a nova TabBar também pode beneficiar dos efeitos Material Blur, que acrescentam profundidade e um toque ainda mais premium à renderização visual.
Uma navegação pensada para cada ecrã

Esta evolução reflete também uma abordagem multi-device mais afirmada. No mobile, a TabBar mantém a sua posição natural na parte inferior do ecrã. No desktop, torna-se vertical para aproveitar melhor o espaço disponível e inserir-se nos usos próprios das interfaces de ecrã grande.
Esta escolha prolonga a lógica mobile-first de GoodBarber afirmando ao mesmo tempo uma verdadeira qualidade de adaptação no desktop. Não se trata simplesmente de mostrar a mesma navegação em todo o lado, mas de propor uma experiência coerente com cada contexto de utilização.
Uma nova etapa para o design das apps na GoodBarber

Com este novo componente, GoodBarber amplia ainda mais as possibilidades oferecidas a quem quer criar uma app mobile com design premium, sem sair da simplicidade de produção própria do no-code.
Mais expressiva, mais personalizável, mais fluida e melhor pensada para cada ecrã, esta nova TabBar dá uma nova dimensão à navegação nas apps GoodBarber. Uma evolução que reforça tanto a qualidade percebida das interfaces como a liberdade criativa oferecida a designers, marcas, media e a todos os criadores de apps.
Design