Módulo
08
·
Aula
10
·
Layout & Padrões de UI
Navegação
Aprenda a projetar componentes de navegação que guiem os usuários com clareza e eficiência, explorando diferentes tipos de menus, estados visuais e hierarquias para criar experiências consistentes e intuitivas.
Nesta aula, exploramos os principais componentes de navegação usados em interfaces e como eles ajudam o usuário a navegar, encontrar informações e executar ações com eficiência. Foram discutidas diferentes abordagens, exemplos práticos e boas práticas para aplicação.
Pontos principais da aula:
Objetivo da navegação:
Facilitar a jornada do usuário do ponto A ao ponto B, evitando que ele se perca.
Prover caminhos claros para recuperação caso o usuário saia de sua rota.
Tipos de navegação:
Barra de navegação inferior (mobile): Com até 5 itens, organiza funções principais do app.
Navegação lateral (web e apps): Menu que permanece fixo e organiza seções de maneira hierárquica.
Navegação superior (websites): Organiza acessos a páginas principais, com possibilidade de indicar links externos.
Hierarquia de navegação: Idealmente, limite-se a 3 níveis para evitar confusão.
Ações em botões:
Botões de ação (CTA) devem ter destaque e design único, diferenciando-os de menus de navegação.
Estados de navegação:
Default: Estado inicial do item.
Hover: Quando o cursor passa sobre o item.
Press: Quando o botão é clicado.
Active: Indica o item ou página atual.
Disabled: Indica itens desativados (evitar uso sem explicação clara).
Boas práticas:
Priorizar clareza e previsibilidade na navegação.
Indicar mudanças significativas, como links externos ou novas páginas.
Ajustar a navegação ao contexto, como esconder menus em páginas de checkout.
Links extras
Construído com 🤍 pelo
©
2024
DesignCraft