Bold TabBar: uma navegação mais presente, pensada para estruturar a interface
Escrito por Lesia PIETRI na
O Bold TabBar destina-se às apps que querem uma navegação visível, estruturante e totalmente integrada na sua identidade visual. Com o seu separador distinto, o seu elemento selecionado fortemente destacado e o seu menu "More" como prolongamento direto da tabBar, este layout confere um verdadeiro papel visual à navegação.

Entre os três layouts de lançamento da nova geração de TabBar, o Bold TabBar é o que assume de forma mais clara a sua presença na interface.
Aqui, a navegação não procura apagar-se. Enquadra o ecrã, estabelece uma hierarquia visual nítida e participa plenamente no estilo da app. Este layout é particularmente adaptado às apps ricas em conteúdo ou com uma forte identidade, onde a navegação deve ser visível, legível e envolvente.
Um elemento distinto para destacar um acesso importante

O Bold TabBar permite integrar um elemento distinto, ou seja, um acesso separado visualmente do resto da barra.
Esta lógica recorda a evolução recente das tab bars da Apple, onde certos acessos importantes, nomeadamente o Search, podem ser apresentados como um separador visualmente distinto para permanecerem imediatamente acessíveis e mais facilmente identificáveis.
No GoodBarber, este elemento distinto permite destacar uma secção importante, um ponto de entrada prioritário ou um acesso específico sem sobrecarregar a leitura da navegação principal. Visualmente, encontra o seu lugar na composição e reforça a ideia de uma TabBar mais expressiva.
Este é um ponto forte do layout: a navegação pode hierarquizar os seus acessos de forma muito mais clara, mantendo ao mesmo tempo a coerência.
Uma seleção fortemente destacada

O princípio do Bold TabBar é simples: o elemento selecionado é visto imediatamente.
Este destaque é conseguido através de um fundo sólido que sublinha claramente o separador ativo. O utilizador localiza de relance onde se encontra, enquanto a navegação ganha em impacto visual. Este tratamento funciona particularmente bem em interfaces que procuram uma hierarquia nítida e uma presença gráfica mais marcada.
O resultado é muito direto: a TabBar não se limita a alinhar ícones ou etiquetas. Estrutura a leitura do ecrã e dá mais peso ao estado ativo.
Um menu "More" que prolonga naturalmente a tabBar, em mobile e desktop

Outro contributo importante do layout: o menu "More". O menu "More" dá acesso às secções não visíveis na TabBar, preservando ao mesmo tempo uma navegação clara e equilibrada.
Aqui, não se assemelha a um painel genérico adicionado ao lado da navegação. Pelo contrário, adota os códigos visuais da barra e segue os seus parâmetros de design. Formas, estilo geral, nível de presença: o menu "More" permanece no mesmo linguagem visual da TabBar.
No desktop, esta lógica faz ainda mais sentido. A navegação torna-se vertical e o menu "More" estende-se na sua continuidade. O conjunto dá a impressão de um componente único, coerente e bem desenhado, em vez de um conjunto de elementos separados. Esta continuidade nota-se particularmente no momento de abertura do menu "More", com uma animação que acompanha naturalmente a retração da tabBar e prolonga o movimento do componente.
Efeitos e animações
O Bold TabBar não se baseia apenas na sua estrutura visual. Distingue-se também pela qualidade dos seus efeitos e animações.
Quando o elemento selecionado utiliza uma cor de fundo, a transição ganha em riqueza com uma animação de seleção muito fluida, que acompanha o deslocamento do estado ativo e reforça a legibilidade da navegação.
A isto acrescentam-se os efeitos hápticos, que conferem mais consistência às interações e contribuem para essa impressão de componente premium, reativo e cuidado.
Um layout pensado para as apps que querem assumir a sua navegação
O Bold TabBar destina-se às apps que querem fazer da navegação um elemento forte da sua interface.
Apps de marca, universos editoriais, projetos lifestyle, apps de eventos, certos contextos de e-commerce ou premium: em todos os casos onde a navegação deve participar ativamente na identidade do produto, este layout oferece uma resposta clara.
Mais presente, mais estruturante e mais expressivo, o Bold TabBar permite estabelecer uma estrutura visual sólida, valorizar melhor o estado ativo, integrar com naturalidade um separador distinto e prolongar a qualidade do componente até ao menu "More" e às animações.
Para as apps que querem uma navegação visível, coerente e bem desenhada, esta é uma base particularmente sólida.
Design