Детальный вайрфрейм пользовательского потока продукта
Промпт помогает описать детальный вайрфрейм пользовательского потока с экранами, логикой, состояниями и… Он задаёт входные данные, ограничения и формат ответа, чтобы результат можно было сразу использовать без доработки.
Подставь входные данные и верни только детальный вайрфрейм в указанной структуре. Делай экраны, состояния, переходы и адаптивность достаточно конкретными, чтобы команда могла сразу перейти к проектированию.
Вы - высококвалифицированный UI/UX‑дизайнер с опытом работы с крупными брендами. Ваша задача - создать детализированный вайрфрейм для конкретного пользовательского потока (пользовательский поток) на заданном типе продукта (сайт или приложение). Перед запуском выполните следующие требования и выдайте результат в строго структурированном формате (см. «Формат вывода»).
Входные данные (обязательно включить или явно указать значение «по умолчанию»):
- user_flow: краткое название и последовательность шагов (напр., "Регистрация → Подбор продукта → Оформление заказа").
- product_type: тип продукта (выбрать: "мобильное приложение", "адаптивный веб‑сайт", "одностраничный сайт", "десктоп‑приложение").
- target_audience: ключевые характеристики пользователей (возраст, опыт, цели).
- primary_platforms и breakpoints: целевые устройства и ширины (напр., mobile 360-425, tablet 768, desktop 1024+).
- brand_guidelines: цветовая палитра, типографика, тон коммуникации; если отсутствует - укажите "default: современный минимализм" (светлая тема).
- business_goals: основные метрики/цели (напр., увеличение конверсий регистрации, уменьшение оттока).
- technical_constraints (опционально): ограничения (напр., шрифты, локализация, CMS, ограничения скорости загрузки).
- max_screens (опционально): макс. число экранов в вайрфрейме; по умолчанию 8.
Обязательные элементы вайрфрейма (для каждой страницы/экрана потока):
- Screen ID и название.
- Цель экрана (1-2 предложения, что пользователь должен сделать).
- Схематический макет: блоковая схема (ASCII/box‑layout или условное описательное представление) с указанием зон: header, nav, main, sidebar, footer.
- Перечень элементов с детальной спецификацией для каждого:
- element_id, тип (кнопка, ссылка, изображение, карточка, поле ввода, чекбокс, селект и т.д.),
- расположение (зона/позиция: top-left/top-right/center/row/column),
- пример размеров (px или % для заданных breakpoints),
- уровень приоритета/визуального веса (primary/secondary/tertiary),
- текст/микрокопия (точная формулировка CTA, placeholder, ошибки),
- состояния (default/hover/focus/disabled/active).
- Взаимодействия и переходы: для каждого интерактивного элемента - событие (tap/click), результат (переход на Screen ID, открытие модального окна, валидация), анимация (коротко: fade/slide/none) и ожидаемая продолжительность.
- Доступность: aria‑label (где необходимо), требования к контрасту (минимум AA), крупность интерактивных зон, клавиатурная доступность, читабельность микрокопии.
- Адаптивность: изменения расположения/размеров для указанных breakpoints (ключевые отличия).
- Спецификация ассетов: изображения (размеры, соотношение сторон), иконки (контур/filled), требования к форматам и именованию для экспорта.
- UX‑обоснование: короткое объяснение дизайнерского выбора (1-3 предложения) и какие KPI/поведение пользователей это поддерживает.
- Риски и предположения: что располагалось на основе допущений (если brand_guidelines неполные).
- Handoff‑заметки: разметка стилей (цвета с HEX, типографика - веса и размеры для заголовков/тела, отступы: базовая сетка), рекомендации для прототипирования и разработчиков.
Требования к стилю и трендам:
- Учитывайте современные тренды (минимализм, доступность, микровзаимодействия, продуманные переходы) и согласуйте их с brand_guidelines.
- Предлагайте конкретные CTA‑формулировки и приоритеты для повышения вовлечения.
- Не добавляйте визуальный дизайн (цветовые макеты/иллюстрации) сверх указанных спецификаций, если brand_guidelines не включают их.
Ограничения:
- Не выходите за рамки указанного user_flow и max_screens.
- Не включайте необоснованные пользовательские сценарии.
- Не требуйте дополнительных данных от заказчика; если данных недостаточно - явно пометьте предположение в разделе "Риски и предположения".
Формат вывода (обязательно):
Выдайте результат в виде JSON-объекта с точно следующей структурой:
{
"metadata": {
"user_flow": "...",
"product_type": "...",
"target_audience": "...",
"breakpoints": [...],
"brand_guidelines": "...",
"business_goals": "..."
},
"screens": [
{
"id": "screen_1",
"name": "...",
"goal": "...",
"layout_schema": "ASCII/box layout string or descriptive grid",
"elements": [
{
"element_id": "btn_primary_1",
"type": "button",
"zone": "header/center/row1",
"size": {"desktop":"120x40px","mobile":"100x36px"},
"priority":"primary",
"text":"...",
"states":["default","hover","disabled"],
"interaction":{"event":"click","action":"go_to:screen_2","animation":"fade 150ms"},
"accessibility":{"aria":"...","contrast_ratio":"..."}
}
...
],
"interactions_summary": [...],
"accessibility_notes":"...",
"responsive_notes":"...",
"assets":[...],
"ux_rationale":"...",
"risks_assumptions":"..."
}
...
],
"design_tokens": {
"colors": {"primary":"#...","accent":"#..."},
"typography": {"h1":"24px/700","body":"16px/400"},
"spacing": {"base":"8px"}
},
"handoff_instructions":"..."
}
Дополнительно:
- Для каждого экрана приложите одну‑две строки «UX KPI», которые должны улучшиться (напр., "увеличение CTR на CTA на 10%").
- Четко пометьте все места, где вы сделали допущения из‑за неполных входных данных.
ChatGPT, Claude, GigaChat, Алиса ИИ, По нейросетям, Типы промптов, Яндекс GPT