Intro
O componente Menu é um elemento central em qualquer interface de usuário, fornecendo acesso rápido e intuitivo às principais funcionalidades da sua aplicação. Este documento detalha o funcionamento do Menu, desde sua estrutura básica até suas nuances e melhores práticas, garantindo uma implementação consistente e eficaz dentro do nosso Design System.
Anatomia do Menu
- Barra Principal: A barra horizontal fixa, com o fundo branco, que define o menu, geralmente posicionada no topo, abaixo do Header da tela.
- Itens de Menu: Cada item individual dentro da barra principal, com ícones de cores claras (branco), representando uma funcionalidade ou seção da aplicação.
- Submenus: Itens que abrem um menu mais detalhado, geralmente aninhados sob um item principal (acessados ao clicar na seta do menu).
- Aninhamento: A capacidade de criar submenus hierárquicos para organizar complexas funcionalidades.
2. Categorização do Menu: Navegando com Intuição
A categorização do menu é crucial para facilitar a localização de informações pelos usuários. Implementamos uma estrutura hierárquica, focada na experiência do usuário:
- Níveis:
- Nível 1 (Principais): Itens de alto nível que representam as principais áreas da aplicação (ex: Institucional, Serviços e Projetos, Informativos, Fale Conosco).
- Nível 2 (Submenus): Seções mais específicas dentro de cada item do Nível 1 (ex: dentro de Institucional – A Secretaria, Legislação, Etc).
- Categorías: Definimos categorías amplias para agrupar ítems relacionados.
- Consistência: Todas as categorias e níveis seguem uma estrutura padronizada para uma experiência de navegação consistente.
- Fluxo de Usuário: A categorização é baseada no fluxo de trabalho típico do usuário, facilitando a descoberta de funcionalidades.
3. Versões do Menu
Entendemos que diferentes plataformas exigem adaptações no menu. Oferecemos três versões principais:
- Web:
- Design: Barra horizontal fixa, com fundo azul escuro (#212121).
- Responsividade: Adaptável a diferentes tamanhos de tela, com ícones e textos ajustados para garantir legibilidade em dispositivos móveis.
- Interação: Hover e click para navegar.
- Mobile:
- Design: Menu “Hamburger” (ícone de três linhas horizontais) que, ao ser tocado, exibe o menu completo.
- Responsividade: Otimizado para telas menores, com ícones e textos reduzidos para facilitar o toque.
- Interação: Swipe para navegar.
- Desktop:
- Design: Barra horizontal fixa, semelhante à versão web.
- Interação: Clique para navegar.
4. Do’s and Don’ts do Menu
- O que fazer:
- Clareza: Utilize ícones e textos claros e concisos.
- Consistência: Siga as diretrizes de estilo e categorização do Design System.
- Acessibilidade: Garanta contraste adequado e textos alternativos para ícones.
- Responsividade: Adapte o menu para diferentes tamanhos de tela.
- Feedback Visual: Utilize estados (hover, selecionado) para indicar interatividade.
- O que não fazer:
- Excesso de Itens: Evite sobrecarregar o menu com muitos itens. Considere usar submenus para organizar informações.
- Ícones Ambíguos: Utilize ícones padronizados e reconhecíveis.
- Conteúdo Confuso: Seja conciso e direto na descrição dos itens.
- Negligenciar a acessibilidade: Garanta que o menu seja acessível para usuários com deficiência.
- Ignorar a Responsividade: Não crie um menu que não funcione bem em dispositivos móveis.