Перейти к руководству
Navigation Patternsавтор Owl-Listener

Navigation Patterns Skill.

Превратите иерархию информации в узнаваемые элементы навигации и понятные пути между разделами.

  • Проектирование взаимодействия
  • Навигация
Обзор источника · Navigation PatternsSKILL.md
Задача Проектирование взаимодействия Результат • Рекомендуемый паттерн навигации с обоснованием, исходя из задач. • Распределение глобальной, локальной, служебной и контекстной навигации. • Требования к состояниям: активное, при наведении, фокус, отключённое и бейдж. Перед началом Нужны иерархия информации и приоритеты задач; пакет компонентов навигации не предоставляется.
Редакционное резюме · источник проверен 2026-10-07 · не сгенерированный пример

01 Возможности

Выберите, как пользователи перемещаются по продукту

Руководство по выбору навигации: глобальные и локальные паттерны, ориентирующие подсказки, платформенные соглашения и проектирование состояний.

Рабочий процесс на основе источникаНе тест выполнения

Рабочий подход

Navigation Patterns выбирает интерфейс, который раскрывает структуру продукта: мобильные вкладки, боковые панели на десктопе, верхнюю навигацию, «хлебные крошки», контекстные ссылки или выдвижное меню. Глобальная, локальная и служебная навигация остаются раздельными, чтобы разделы разных уровней не конкурировали в одном элементе.

Источник уделяет ориентации не меньше внимания, чем перемещению. Пользователю нужно знать, где он находится, предугадывать, куда ведёт подпись, и находить путь назад. Активные состояния должны быть заметны не только цветом, а паттерн должен соответствовать платформе и частоте использования, а не просто экономить место на экране.

Ожидаемые результаты

  • Рекомендуемый паттерн навигации с обоснованием, исходя из задач.
  • Распределение глобальной, локальной, служебной и контекстной навигации.
  • Требования к состояниям: активное, при наведении, фокус, отключённое и бейдж.
Посмотреть пример запроса

От запроса до проверки

  1. 01
    Изучите структуру

    Определите основные разделы, вложенные секции и редко используемые служебные функции по существующей информационной архитектуре.

  2. 02
    Подберите паттерн под контекст

    Перед выбором элементов учтите платформу, число разделов, глубину иерархии и досягаемость на мобильных устройствах.

  3. 03
    Проверьте ориентацию

    Опишите подсказки о текущем местоположении и проверьте подписи и задачи, затрагивающие несколько разделов, с типичными пользователями.

02 Когда использовать

Когда использовать

Нужны иерархия информации и приоритеты задач; пакет компонентов навигации не предоставляется.

Хорошо подходит

  • Выбор между вкладками и выдвижным менюПолезно, когда варианты навигации различаются по заметности и досягаемости.
  • Глубокие структуры продуктаПомогает сочетать «хлебные крошки» и локальную навигацию, не смешивая уровни иерархии.

Ограничения

  • Не заменяет ИАНеясные категории и подписи могут потребовать перестройки структуры, прежде чем любой элемент заработает хорошо.
  • Нет автоматического подтверждения удобстваРекомендации по паттернам нужно проверять тестами первого клика или задач.

Какие данные подготовить

  • Иерархия разделовПредоставьте утверждённые разделы и их отношения родитель — потомок.
  • Приоритеты использованияУкажите частые задачи, переходы между разделами и служебные разделы.
  • ПлатформыОпишите ограничения десктопа и мобильных устройств, соглашения и требования доступности.

03 Важные решения

Важные решения

  1. Видимость имеет цену

    Скрытая навигация может упростить макет, но затруднить поиск важных разделов.

  2. Состояние не только цветом

    Насыщенность шрифта, подчёркивание или индикаторы помогают заметить текущее местоположение, не полагаясь только на оттенок.

04 Пример задания

Попробуйте узкий запрос

Пример запроса ниже не тестировался. Перед использованием проверьте настройку навыка.

Проверьте настройку

Используйте описанный в репозитории способ установки и сохраните все упомянутые вспомогательные файлы. Эта запись описывает узкий метод проектирования, а не исполняемое приложение.

Исходный файл
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/navigation-patterns/SKILL.md

Нужны иерархия информации и приоритеты задач; пакет компонентов навигации не предоставляется.

Начните с одного результата

Перед запуском навыка адаптируйте объём, исходные материалы и ограничения в этом запросе.

Пример запроса
Используйте navigation-patterns для десктопного аналитического приложения с шестью основными разделами, вложенными папками отчётов и мобильным доступом. Сравните боковую панель с верхней навигацией, вынесите служебные функции отдельно и опишите «хлебные крошки» и активное состояние и состояние фокуса. Объясните, какие вопросы по ИА нужно решить до реализации.

Проверьте результат

Сравните фактический результат с этими наблюдаемыми критериями.

  • Глобальный и локальный уровни не смешаны случайно.
  • Текущий раздел обозначен не только цветом.
  • Для задач между разделами есть находимый маршрут и путь назад.

OpenDesign предоставляет локальное рабочее пространство для кодинг-агентов. Этот список не означает, что навык входит в комплект или что внешние инструменты, учётные данные и программные зависимости включены.

05 Источник и лицензия

Источник и лицензия

Эта страница описывает зафиксированную ревизию источника по ссылке ниже. Поведение и требования исходного проекта могут измениться.

Владелец источника
Owl-Listener
Репозиторий
Owl-Listener/designer-skills
Лицензия
MIT
Проверенная версия
2026-10-07 · 9a6930cf84a8
Редакционное резюме источника
Руководство по выбору навигации: глобальные и локальные паттерны, ориентирующие подсказки, платформенные соглашения и проектирование состояний.

Авторское резюме OpenDesign на основе указанного источника. Звёзды репозитория — датированный показатель популярности, а не использования навыка и не оценка качества.

06 Вопросы перед началом

Вопросы перед началом

Всегда ли в мобильной навигации нужно использовать выдвижное меню?

Нет. Источник отдаёт предпочтение видимым вкладкам для небольшого набора основных разделов и считает выдвижное меню компромиссом с точки зрения заметности.

Когда полезны «хлебные крошки»?

Они помогают показать местоположение и вложенность в глубоких иерархиях контента, часто вместе с локальной навигацией.

Может ли навык исправить непонятные названия разделов?

Он может указать на них и рекомендовать тестирование подписей, но для базовых категорий может потребоваться работа над информационной архитектурой.

OpenDesign

Оставьте место для следующей итерации дизайна.

Храните запрос, исходные материалы и дизайн-работу вместе в локальном рабочем пространстве. Перед добавлением навыка в рабочий процесс проверьте его собственную настройку.

Исходный файл
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/navigation-patterns/SKILL.md