Form Designавтор Owl-Listener

Form Design Skill.

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

UX
Рекомендации по дизайну

Скачать OpenDesign Открыть руководство по использованию

Обзор источника · Form DesignSKILL.md

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

Редакционное резюме · источник проверен 2026-10-07 · не сгенерированный пример

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

Form Design: сделайте ввод данных понятным

Определяет порядок полей, подписи, типы ввода, валидацию и исправление ошибок для целой формы.

Процесс на основе источникаНе результат тестирования выполнения

Как это работает

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

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

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

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

Посмотреть пример брифа

От брифа до проверки

01
Сократите и упорядочите поля
Определите необходимую информацию и сгруппируйте связанные вопросы в понятную последовательность чтения.
02
Опишите поведение ввода
Выберите поля ввода, постоянные подписи, вспомогательный текст и момент валидации.
03
Обработайте завершение и исправление
Определите сохранение данных, возврат назад, фокус на ошибках и проверку перед значимой отправкой.

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

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

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

Подходит для

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

Ограничения

Рост конверсии не гарантируетсяУлучшение завершения форм требует наблюдения и измерений.
Не все ошибки продуктаСтратегия сети и разрешений на уровне всего потока выходит за рамки одной формы.

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

Обязательные данныеПеречислите поля, форматы и причины, по которым они нужны.
Правила валидацииУкажите реальные ограничения клиента и сервера.
Контекст завершенияОбъясните последствия, использование на устройствах и возвращаются ли люди позже.

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

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

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

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

Попробуйте целевой бриф

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

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

Загрузите SKILL.md этой задачи из репозитория designer-skills в поддерживаемое место для навыков вашего агента. Файл записи не задаёт универсальной команды установки.

Исходный файл в репозитории

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

Укажите обязательные поля и реальные правила валидации. Результат — спецификация формы; реализация и тестирование с пользователями выполняются отдельно.

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

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

Пример брифа

Используйте form-design, чтобы переработать этот многошаговый бриф проекта. Уберите необоснованные поля, сгруппируйте связанные вопросы, определите постоянные подписи и валидацию при потере фокуса, сохраняйте ввод при возврате назад. Опишите доступную сводку ошибок со ссылками и итоговый шаг проверки.

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

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

У каждого поля есть постоянная программно связанная подпись.
Ошибки объясняют, как исправить, и связаны с полем.
При возврате назад введённые данные сохраняются.

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

Скачать OpenDesign Читать краткое руководство

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

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

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

Владелец источника: Owl-Listener
Репозиторий: Owl-Listener/designer-skills
Файл навыка: interaction-design/skills/form-design/SKILL.md
Лицензия: MIT
Проверенный снимок: 2026-10-07 · 9a6930cf84a8

Редакционное резюме источника

Определяет порядок полей, подписи, типы ввода, валидацию и исправление ошибок для целой формы.

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

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

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

Может ли текст-заполнитель заменить подпись?

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

Когда следует проводить валидацию полей?

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

Нужно ли многошаговой форме сохранять прогресс?

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

OpenDesign

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

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

Скачать OpenDesign Просмотреть навыки дизайна