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:

  1. 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.

  2. 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.

  3. Ações em botões:

    • Botões de ação (CTA) devem ter destaque e design único, diferenciando-os de menus de navegação.

  4. 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).

  5. 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

Fique por dentro!

Adicione o calendário do curso DesignCraft na sua agenda

Construído com 🤍 pelo

©

2024

DesignCraft

Concluir