Navigation Patternspor Owl-Listener

Navigation Patterns Skill.

Convierte una jerarquía de información en controles de navegación reconocibles y en rutas claras entre destinos.

Diseño de interacción
Navegación

Revisión de la fuente · Navigation PatternsSKILL.md

Tarea Diseño de interacción Produce • Un patrón de navegación recomendado con una justificación basada en tareas. • Asignaciones de navegación global, local, de utilidad y contextual. • Requisitos de los estados activo, de cursor encima (hover), de foco, deshabilitado y de insignia. Antes de empezar Necesita una jerarquía de información y prioridades de tareas; no se incluye ningún paquete de componentes de navegación.

Resumen editorial · fuente revisada 2026-10-07 · no es un ejemplo generado

01 Qué hace

Elige cómo se mueven los usuarios por un producto

Una guía de selección de navegación que abarca patrones globales y locales, indicaciones de orientación, convenciones de plataforma y diseño de estados.

Flujo de trabajo basado en la fuenteNo es una prueba de rendimiento de ejecución

El enfoque de trabajo

Navigation Patterns selecciona la interfaz que expone la estructura de un producto: pestañas móviles, barras laterales de escritorio, navegación superior, migas de pan, enlaces contextuales o un panel deslizable (drawer). Mantiene separadas la navegación global, la local y la de utilidad para que destinos de distintos niveles no compitan dentro del mismo control.

La fuente da tanta importancia a la orientación como al movimiento. El usuario necesita saber dónde está, prever adónde lleva una etiqueta y encontrar el camino de vuelta. Los estados activos deben seguir siendo reconocibles más allá del color, y el patrón debe ajustarse a la plataforma y a la frecuencia de uso, no solo ahorrar espacio en pantalla.

Entregables esperados

Un patrón de navegación recomendado con una justificación basada en tareas.
Asignaciones de navegación global, local, de utilidad y contextual.
Requisitos de los estados activo, de cursor encima (hover), de foco, deshabilitado y de insignia.

Ver el brief de ejemplo

Del brief a la revisión

01
Lee la estructura
Identifica los destinos principales, las secciones anidadas y las utilidades ocasionales a partir de la arquitectura de la información existente.
02
Ajusta el patrón al contexto
Considera la plataforma, el número de destinos, la profundidad de la jerarquía y el alcance en móvil antes de elegir los controles.
03
Comprueba la orientación
Especifica indicaciones de ubicación actual y prueba las etiquetas y las tareas entre secciones con usuarios representativos.

02 Cuándo usarlo

Cuándo usarla

Necesita una jerarquía de información y prioridades de tareas; no se incluye ningún paquete de componentes de navegación.

Buen encaje

Elegir entre pestañas y paneles deslizablesÚtil cuando las opciones de navegación tienen distintas ventajas e inconvenientes de visibilidad y alcance.
Estructuras de producto profundasAyuda a combinar migas de pan y navegación local sin mezclar niveles de jerarquía.

Límites que conviene revisar

No sustituye a la arquitectura de la informaciónSi las categorías y etiquetas no están claras, puede ser necesario reestructurar antes de que cualquier control funcione bien.
No demuestra la usabilidad automáticamenteLas recomendaciones de patrones requieren validación con pruebas de primer clic o basadas en tareas.

Aporta estos datos

Jerarquía de destinosProporciona las secciones establecidas y sus relaciones de padre e hijo.
Prioridades de usoIdentifica las tareas frecuentes, el movimiento entre secciones y los destinos de utilidad.
PlataformasDescribe las limitaciones, convenciones y requisitos de accesibilidad de escritorio y móvil.

03 Decisiones importantes

Decisiones que importan

La visibilidad tiene un coste
Ocultar la navegación puede simplificar el diseño, pero hace más difícil descubrir destinos importantes.
Estados más allá del color
El grosor, los subrayados o los indicadores pueden hacer perceptible la ubicación actual sin depender solo del tono.

04 Ejemplo de brief

Prueba un brief concreto

El brief de ejemplo siguiente no se ha probado. Revisa la configuración de la skill antes de usarlo.

Revisa la configuración

Usa la vía de instalación documentada del repositorio y conserva los archivos complementarios a los que se haga referencia. Esta entrada describe un método de diseño concreto, no una aplicación ejecutable.

Archivo fuente original

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

Necesita una jerarquía de información y prioridades de tareas; no se incluye ningún paquete de componentes de navegación.

Empieza con un solo entregable

Adapta el alcance, el material de origen y las restricciones de este brief antes de ejecutar la skill.

Brief de ejemplo

Usa navigation-patterns para una aplicación de analítica de escritorio con seis secciones principales, carpetas de informes anidadas y acceso desde móvil. Compara una barra lateral con navegación superior, separa las utilidades y especifica migas de pan y estados activo/foco. Explica qué cuestiones de arquitectura de la información deben resolverse antes de implementar.

Inspecciona el resultado

Comprueba el resultado real con estos criterios observables.

Los niveles global y local no se mezclan por accidente.
El destino actual se indica con algo más que el color.
Las tareas entre secciones tienen una ruta descubrible y un camino de vuelta.

OpenDesign ofrece un espacio de trabajo local de diseño para agentes de programación. Este listado no implica que la skill esté incluida ni que se incluyan sus herramientas externas, credenciales y dependencias de software.

Descargar OpenDesign Leer la guía de inicio rápido

05 Fuente y licencia

Fuente y licencia

Esta página describe la revisión fija de la fuente enlazada abajo. El comportamiento y los requisitos originales pueden cambiar.

Propietario de la fuente: Owl-Listener
Repositorio: Owl-Listener/designer-skills
Archivo de la skill: interaction-design/skills/navigation-patterns/SKILL.md
Licencia: MIT
Versión revisada: 2026-10-07 · 9a6930cf84a8

Resumen editorial de la fuente

Una guía de selección de navegación que abarca patrones globales y locales, indicaciones de orientación, convenciones de plataforma y diseño de estados.

Resumen original de OpenDesign, basado en la fuente enlazada. Las estrellas del repositorio son una señal de popularidad con fecha, no el uso de la skill ni una puntuación de calidad.

06 Preguntas antes de empezar

Preguntas antes de empezar

¿La navegación móvil debe usar siempre un panel deslizable?

No. La fuente prefiere pestañas visibles para un conjunto pequeño de destinos principales y considera los paneles deslizables un compromiso en cuanto a la facilidad de descubrimiento.

¿Cuándo son útiles las migas de pan?

Ayudan a explicar la ubicación y la ascendencia en jerarquías de contenido más profundas, a menudo junto con la navegación local.

¿Puede corregir nombres de sección poco familiares?

Puede señalarlos y recomendar pruebas de etiquetas, pero puede que las categorías subyacentes necesiten trabajo de arquitectura de la información.

OpenDesign

Deja espacio para la siguiente iteración de diseño.

Mantén tu brief, tu material de origen y tu trabajo de diseño juntos en un espacio de trabajo local. Revisa la configuración propia de la skill antes de añadirla a tu flujo de trabajo.

Descargar OpenDesign Explorar skills de diseño