Navigation Patternspor Owl-Listener

Navigation Patterns Skill.

Transforme uma hierarquia de informação em controles de navegação reconhecíveis e caminhos claros entre destinos.

Design de interação
Navegação

Revisão da fonte · Navigation PatternsSKILL.md

Tarefa Design de interação Produz • Um padrão de navegação recomendado, com justificativa baseada na tarefa. • Atribuições de navegação global, local, utilitária e contextual. • Requisitos para os estados ativo, hover, foco, desabilitado e de selo (badge). Antes de começar Requer uma hierarquia de informação e as prioridades de tarefas; nenhum pacote de componentes de navegação é fornecido.

Resumo editorial · fonte revisada em 2026-10-07 · não é um exemplo gerado

01 Funcionalidades

Escolha como os usuários se movem por um produto

Um guia de seleção de navegação que abrange padrões globais e locais, indicações de orientação, convenções de plataforma e design de estados.

Fluxo de trabalho baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

Navigation Patterns seleciona a interface que expõe a estrutura de um produto: abas móveis, barras laterais no desktop, navegação superior, breadcrumbs, links contextuais ou um drawer. Mantém distintas a navegação global, a local e a utilitária, para que destinos de níveis diferentes não disputem o mesmo controle.

A fonte enfatiza a orientação tanto quanto o deslocamento. O usuário precisa saber onde está, prever para onde um rótulo leva e encontrar o caminho de volta. Os estados ativos devem continuar reconhecíveis além da cor, e o padrão deve se adequar à plataforma e à frequência de uso, não apenas economizar espaço de tela.

Entregas esperadas

Um padrão de navegação recomendado, com justificativa baseada na tarefa.
Atribuições de navegação global, local, utilitária e contextual.
Requisitos para os estados ativo, hover, foco, desabilitado e de selo (badge).

Ver o briefing de exemplo

Do briefing à revisão

01
Leia a estrutura
Identifique os destinos principais, as seções aninhadas e os utilitários ocasionais a partir da arquitetura de informação existente.
02
Adeque o padrão ao contexto
Considere plataforma, número de destinos, profundidade da hierarquia e alcance no celular antes de escolher os controles.
03
Verifique a orientação
Especifique indicações de localização atual e teste rótulos e tarefas entre seções com usuários representativos.

02 Quando usar

Quando usar

Requer uma hierarquia de informação e as prioridades de tarefas; nenhum pacote de componentes de navegação é fornecido.

Bom encaixe

Escolher entre abas e drawersÚtil quando as opções de navegação têm trade-offs diferentes de visibilidade e alcance.
Estruturas de produto profundasAjuda a combinar breadcrumbs e navegação local sem misturar níveis da hierarquia.

Limites a verificar

Não substitui a arquitetura de informaçãoCategorias e rótulos pouco claros podem exigir reestruturação antes que qualquer controle funcione bem.
Sem prova automática de usabilidadeAs recomendações de padrão precisam de validação com testes de primeiro clique ou baseados em tarefas.

Traga estas informações

Hierarquia de destinosInforme as seções já definidas e suas relações de pai e filho.
Prioridades de usoIdentifique as tarefas frequentes, a movimentação entre seções e os destinos utilitários.
PlataformasDescreva as restrições de desktop e celular, as convenções e os requisitos de acessibilidade.

03 Decisões importantes

Decisões que importam

A visibilidade tem um custo
Esconder a navegação pode simplificar o layout, mas dificultar a descoberta de destinos importantes.
Estado além da cor
Peso da fonte, sublinhados ou indicadores podem tornar a localização atual perceptível sem depender apenas do matiz.

04 Exemplo de briefing

Experimente um briefing focado

O briefing de exemplo abaixo não foi testado. Confira a configuração da skill antes de usá-lo.

Revise a configuração

Use o caminho de instalação documentado no repositório e mantenha os arquivos complementares referenciados. Esta entrada descreve um método de design focado, não um aplicativo executável.

Arquivo-fonte original

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/navigation-patterns/SKILL.md

Requer uma hierarquia de informação e as prioridades de tarefas; nenhum pacote de componentes de navegação é fornecido.

Comece com uma entrega

Adapte o escopo, o material de origem e as restrições deste briefing antes de executar a skill.

Briefing de exemplo

Use navigation-patterns para um app de analytics para desktop com seis seções principais, pastas de relatórios aninhadas e acesso pelo celular. Compare uma barra lateral com navegação superior, separe os utilitários e especifique breadcrumbs e os estados ativo e de foco. Explique quais questões de arquitetura de informação precisam ser resolvidas antes da implementação.

Inspecione o resultado

Compare o resultado real com estes critérios observáveis.

Os níveis global e local não são misturados por acidente.
O destino atual é indicado por mais do que a cor.
As tarefas entre seções têm uma rota descobrível e um caminho de volta.

OpenDesign oferece um espaço de trabalho local de design para agentes de código. Esta listagem não significa que a skill esteja incluída no pacote nem que suas ferramentas externas, credenciais e dependências de software estejam incluídas.

Baixar OpenDesign Leia o guia de início rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixada da fonte vinculada abaixo. O comportamento e os requisitos upstream podem mudar.

Responsável pela fonte: Owl-Listener
Repositório: Owl-Listener/designer-skills
Arquivo da skill: interaction-design/skills/navigation-patterns/SKILL.md
Licença: MIT
Versão revisada: 2026-10-07 · 9a6930cf84a8

Resumo editorial da fonte

Um guia de seleção de navegação que abrange padrões globais e locais, indicações de orientação, convenções de plataforma e design de estados.

Resumo original de OpenDesign, com base na fonte vinculada. As estrelas do repositório são um sinal datado de popularidade, não de uso da skill nem uma nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

A navegação mobile deve sempre usar um drawer?

Não. A fonte favorece abas visíveis para um pequeno conjunto de destinos principais e trata os drawers como um trade-off de descobribilidade.

Quando os breadcrumbs são úteis?

Ajudam a explicar a localização e a ascendência em hierarquias de conteúdo mais profundas, muitas vezes junto com a navegação local.

Ela consegue corrigir nomes de seção desconhecidos?

Pode sinalizá-los e recomendar testes de rótulos, mas as categorias subjacentes podem exigir trabalho de arquitetura de informação.

OpenDesign

Abra espaço para a próxima iteração de design.

Mantenha seu briefing, o material de origem e o trabalho de design juntos em um espaço de trabalho local. Confira a configuração da própria skill antes de adicioná-la ao seu fluxo de trabalho.

Baixar OpenDesign Ver skills de design