🧭 Navegação mobile: 10 conceitos de barra inferior

Nível 1 · 🪷 Lotófagos · ⏱️ 5 min · Pré-requisitos: nenhum para assistir e anotar; o passo 4 (opcional) pede uma conta gratuita no Figma

📌 Pra que serve

O vídeo, de 10 segundos e sem fala, é uma vitrine de design do perfil Prozavlly. O título na tela é "10 Next-Gen Mobile Navigation Designs". Ele mostra conceitos de barra de navegação inferior para apps de celular, com animações de seleção. Serve de referência visual para quem desenha interfaces (UI/UX) e quer fugir da barra de abas comum.

Limite do material: não há fala, código nem arquivo Figma. A legenda cita Figma e Dribbble só como hashtags, sem mostrar ferramenta em uso. O vídeo só mostra o resultado visual. Não dá para ensinar a construir cada barra, e vou me ater ao que aparece nos quadros.

🛠️ Passo a passo

Os três quadros mostram uma grade com 12 células, numeradas de 01 a 10. Os números 04 e 08 aparecem duas vezes, e o nome "Glass Capsule Dock" aparece em três células, então há 10 nomes distintos. Cada barra tem 4 a 5 ícones, e o item selecionado muda de aparência. Use o vídeo como um catálogo de referência:

1. Assista aos quadros e anote os 10 nomes de estilo. Os nomes aparecem na tela, e as variações abaixo aparecem em células separadas:
- Liquid Floating Bar: uma mancha azul/roxa "líquida" envolve o item ativo (Home, Explore).
- Magnetic Dock: o item ativo (Chat) se destaca com um brilho circular.
- Glass Capsule Dock (três células): cápsula de vidro translúcido.
- A primeira tem o ativo em azul (Cart).
- A segunda é escura, com ícones claros (Home, Tasks, Cart, Search, Add).
- A terceira é clara, e o item ativo (Inbox) ganha uma bolha de destaque.
- Segmented Dynamic Bar: o ícone ativo (Chat) vira um balão de fala.
- Orbit Navigation: órbitas laranjas giram em volta do ícone ativo (Music).
- Wa
ve Indicator Nav: barra escura num quadro e, em outro, uma onda azul que percorre a barra (Fitness, Health).
- Cyber Neon Dock: fundo escuro com ícones em verde neon (Home, Trips, Add, Activity).
- Morphing Blob Nav: uma mancha rosa/roxa se move entre os itens (Fitness, Library, Map).
- Layered Card Navigation: o item ativo (Portfolio) sobe como um cartão em camadas.
- Minimal Luxury Dock: barra clara e sóbria, com destaque em tom vermelho/laranja (Explore).
2. Observe a transição entre quadros. O vídeo mostra o estado de seleção mudando. A mancha fluida se desloca, o brilho aparece e o item ativo sobe. A animação do indicador é o que diferencia cada conceito.
3. Escolha o estilo que combina com o seu app. Uma sugestão minha, que não vem do vídeo: o Minimal Luxury cai bem em apps sóbrios, o Cyber Neon em apps de jogos ou tecnologia, e o Liquid ou o Morphing Blob em apps mais lúdicos.
4. (Opcional) Reproduza no seu editor. Esse passo exige uma conta no Figma (existe plano gratuito) e noções básicas do editor. O vídeo não mostra como as barras foram feitas. Redesenhe a barra em frames de Figma, um para cada estado selecionado, e anime a troca com Smart Animate. Esse caminho é meu, não do vídeo.

💡 Dica: inspire-se no tipo de movimento, não copie o visual. Defina primeiro o estado ativo (cor, tamanho, forma) e depois como o indicador se desloca entre os itens. É essa transição que dá personalidade à barra.

🔗 Links e instalação

Fonte: https://www.instagram.com/reel/DcNLxSRz08-/
Figma: https://www.figma.com
Dribbble: https://dribbble.com

Não há comando de instalação: o material não traz nenhuma ferramenta instalável.