Перейти к руководству
User Flow Diagramавтор Owl-Listener

User Flow Diagram Skill.

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

  • Прототипирование
  • Пользовательские потоки
Обзор источника · User Flow DiagramSKILL.md
Задача Прототипирование Результат • Диаграмма потока для одной цели пользователя. • Подписанные решения, триггеры, фоновые операции и выходы. • Пути ошибок и восстановления рядом с успешным маршрутом. Перед началом Источник не требует какого-либо приложения для диаграмм; выбранный формат вывода должен сохранять понятную нотацию.
Редакционное резюме · источник проверен 2026-10-07 · не сгенерированный пример

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

Карта путей, решений и восстановления

Руководство по диаграммам потоков на уровне экранов: стандартные элементы, подписи триггеров, системные примечания и ветви восстановления.

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

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

User Flow Diagram описывает перемещение по продукту на уровне экранов и действий. Навык различает точки входа, экраны, решения, действия пользователя, фоновые процессы и конечные точки, чтобы диаграмма показывала и маршрут, и причину каждого перехода.

Источник рекомендует начать с основного успешного пути, а затем добавлять ветви, ошибки, восстановление и выходы. Такой порядок сохраняет читаемость потока и не оставляет сбои на потом. Также различаются линейный поток задачи, ветвящийся пользовательский поток и wire flow с миниатюрами экранов.

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

  • Диаграмма потока для одной цели пользователя.
  • Подписанные решения, триггеры, фоновые операции и выходы.
  • Пути ошибок и восстановления рядом с успешным маршрутом.
Смотреть пример задания

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

  1. 01
    Определите цель и вход

    Уточните, что считается завершением и откуда пользователь может начать.

  2. 02
    Нарисуйте основной маршрут

    Перед добавлением ветвей отметьте экраны и действия в единой нотации.

  3. 03
    Добавьте решения и восстановление

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

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

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

Источник не требует какого-либо приложения для диаграмм; выбранный формат вывода должен сохранять понятную нотацию.

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

  • Задачи на нескольких экранахПолезно, когда командам нужно согласовать, как пользователь достигает результата через несколько экранов.
  • Ветвящиеся процессыПомогает выявить разные маршруты, вызванные правами доступа, выбором или сбоями операций.

Ограничения

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

Что подготовить

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

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

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

  1. Стрелки объясняют поведение

    Подписанные соединители делают поток применимым на практике; линия без подписи скрывает триггер, нужный для реализации.

  2. Одна цель — лучше читаемость

    Разделение несвязанных целей не даёт одной диаграмме превратиться в нечитаемую карту всего продукта.

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

Попробуйте сфокусированное задание

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

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

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

Исходный файл
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/prototyping-testing/skills/user-flow-diagram/SKILL.md

Источник не требует какого-либо приложения для диаграмм; выбранный формат вывода должен сохранять понятную нотацию.

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

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

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

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

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

  • У каждой стрелки есть триггер или условие.
  • Завершение и ранние выходы показаны явно.
  • Как минимум для известных путей сбоя есть маршрут восстановления.

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

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

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

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

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

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

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

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

Что такое wire flow?

Это схема маршрута с миниатюрами вайрфреймов, позволяющая читать путь и примерную структуру экранов вместе.

Нужно ли охватывать весь продукт?

Источник рекомендует один поток на одну цель, чтобы ветви оставались понятными.

Чем он отличается от конечного автомата?

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

OpenDesign

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

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

Исходный файл
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/prototyping-testing/skills/user-flow-diagram/SKILL.md