Использовать промпт
Добавьте своё задание
Добавьте контекст ниже. Он будет включён в промпт при копировании или скачивании.
Создайте исследование взаимодействия на HTML/CSS/JavaScript с явными начальным, активным и завершённым состояниями, а также удобочитаемым резервным вариантом для prefers-reduced-motion для [PROJECT] и [AUDIENCE]. Задача: обратная связь при перетаскивании.
Обязательные контент и структура
Покажите состояния захвата, допустимой цели, недопустимой цели и завершённого размещения.
Используйте [APPROVED_CONTENT] как источник названий, дат, числовых данных, утверждений и целевых страниц. Перечислите недостающие исходные данные, прежде чем что-либо заменять. Если нужна демонстрация, обозначьте её контент как вымышленный. Не придумывайте отзывы клиентов, рейтинги, логотипы партнёров или возможности продукта.
Направление дизайна
Используйте [BRAND_RULES] и уже выбранную в проекте дизайн-систему. Если система не задана, начните со следующего направления: белый и угольно-серый цвета с ярко-зелеными акцентами; четко обозначенные начальное, переходное и конечное состояния. Соблюдайте единообразие типографики, интервалов и цветовых ролей. Отдавайте приоритет задаче, а не декоративным элементам, и избегайте шаблонного набора несвязанных карточек.
Подготовка контента
Определите перетаскиваемые элементы, допустимые места назначения, недопустимые перемещения и операцию, выполняемую при отпускании. Предоставьте способ перемещения тех же элементов без перетаскивания.
Макет и поведение
Различайте состояния захвата, допустимой цели, недопустимой цели и завершённого размещения. Сохраняйте видимой идентичность элемента и при необходимости сообщайте его новую позицию текстом.
Проверка критериев приёмки для задачи
- Предоставьте альтернативный способ перемещения с клавиатуры и понятные уведомления о позиции.
- Переместите элемент с клавиатуры, отмените перетаскивание и попытайтесь отпустить его в недопустимом месте.
- Элемент должен оставаться доступным для восстановления, а обратная связь не должна зависеть только от изменения цвета.
Реализация и проверка
Оставьте текст редактируемым. Используйте семантическую структуру, понятные элементы управления, видимый фокус клавиатуры и подходящие состояния отсутствия данных и ошибок. Проверьте узкие и широкие макеты. Учитывайте настройку уменьшения движения. Сохраните существующие фреймворк и зависимости проекта; не заменяйте стек без предупреждения. Верните редактируемые файлы и опишите любое неполное поведение или неподдерживаемые исходные данные. Проверьте именно эту задачу, прежде чем предлагать дополнительные функции.
Сделайте всю информацию и действия доступными без анимации. Где уместно, предусмотрите приостановку или закрытие. Задокументируйте триггеры и переходы; не заменяйте фактический прогресс декоративным таймером.
Референс и цель воссоздания
Прикрепите файл reference.webp из пакета загрузки этого дизайн-промпта к самому промпту в OpenDesign. Создайте редактируемый результат с похожими композицией и иерархией; не вставляйте всё референсное изображение в качестве готового интерфейса. Если утверждённый контент проекта и правила бренда противоречат вымышленным примерам подписей, сохраняйте утверждённые материалы. Если изображение отсутствует или нечитаемо, запросите его, а не заявляйте о визуальном соответствии.
Композиция и контент референса
Используйте приложенный файл reference.webp как визуальный образец для обратной связи при перетаскивании. Перед разработкой определите основные области сверху вниз, их относительную ширину и высоту, выравнивание, интервалы, типографическую иерархию, цвета поверхностей, границы, изображения и повторяющиеся компоненты. Сохраните эти взаимосвязи, не заменяя их универсальным шаблоном. Обязательное содержание задачи: покажите состояния захвата, допустимой цели, недопустимой цели и завершённого размещения. При преобразовании изображения в редактируемые элементы следуйте этим указаниям по компоновке: различайте состояния захвата, допустимой цели, недопустимой цели и завершённого размещения. Сохраняйте видимой идентичность элемента и при необходимости сообщайте его новую позицию текстом.
Визуальное направление из примера проекта
Белый и угольно-серый цвета с ярко-зелеными акцентами; четко обозначенные начальное, переходное и конечное состояния.
Спецификация взаимодействия
Референс — статичная концепция: описанное ниже поведение необходимо реализовать, но изображение не доказывает, что оно уже работает. Скопируйте адаптированный промпт в свой рабочий проект. Начните с основной задачи: покажите состояния захвата, допустимой цели, недопустимой цели и завершённого размещения. Предоставьте альтернативный способ перемещения с клавиатуры и понятные уведомления о позиции. Для каждого видимого элемента управления укажите событие активации, изменяемое состояние и обратную связь; реализуйте локальные изменения с согласованным состоянием в связанных представлениях. Поиск и фильтры должны выдавать реальные результаты, элементы выбора — иметь явно выраженное активное состояние, а действия сохранения — при необходимости показывать состояния ожидания, успеха и ошибки. Не добавляйте несвязанные рабочие процессы. Используйте корректные ссылки для навигации, кнопки для действий и доступные названия для элементов управления со значками. Не создавайте впечатление, что серверная операция выполнена успешно, если изменилась только локальная демонстрация.
Визуальное сравнение и передача результата
- Сравните результат с прикреплённым изображением при совпадающих пропорциях. Перед проработкой декоративных деталей проверьте расположение основных областей, относительные размеры изображений, переносы строк, интервалы, типографическую иерархию, контраст, активные состояния и плотность контента.
- Затем протестируйте узкий макет, не сжимая текст для настольной версии до крошечных подписей.
- Храните логотипы, фотографии и значки как отдельные ресурсы, а все значимые подписи оставьте редактируемыми. Перечислите недоступные шрифты и ресурсы, а также намеренные отступления. Верните рабочие файлы вместе с кратким описанием реализованного поведения и оставшихся интеграций; не обещайте попиксельное совпадение только на основании промпта.
Скачать промпт и изображение
Содержит полный промпт и полноразмерное референсное изображение. Добавьте оба файла в OpenDesign, чтобы задать направление макета.
Как написать дизайн-промпт для обратной связи при перетаскивании
Используйте этот дизайн-промпт для обратной связи при перетаскивании, чтобы показать состояния захвата, допустимой цели, недопустимой цели и завершённого размещения.
Референс — концепция, созданная ИИ. Приведённые ниже инструкции описывают, что нужно создать и протестировать; изображение не демонстрирует работающее поведение.
Объясните место назначения до отпускания
Обратная связь при перетаскивании должна показывать, что можно переместить и куда это можно поместить.
Видимое место назначения и альтернативное управление с клавиатуры делают операцию понятной не только по движению указателя. Различайте состояния захвата, допустимой цели, недопустимой цели и завершённого размещения. Сохраняйте видимой идентичность элемента и при необходимости сообщайте его новую позицию текстом.
Из промпта
Различайте состояния захвата, допустимой цели, недопустимой цели и завершённого размещения.
Настройте под себя
Покажите для [ITEM] состояния захвата, допустимой цели, недопустимой цели и завершённого размещения. Добавьте доступный с клавиатуры элемент управления «Переместить» и сообщайте итоговую позицию.
Подготовьте содержимое обратной связи при перетаскивании
Активная панель различает допустимую область для фруктов и недопустимую область для овощей с помощью цвета и сообщений. Определите правила приёма и не зависящую от цвета обратную связь для каждой области сброса.
Определите перетаскиваемые элементы, допустимые места назначения, недопустимые перемещения и операцию, выполняемую при отпускании. Предоставьте способ перемещения тех же элементов без перетаскивания.
Из промпта
Покажите состояния захвата, допустимой цели, недопустимой цели и завершённого размещения.
Настройте под себя
Для [PROJECT] используйте [APPROVED_CONTENT] как источник содержимого для этой обратной связи при перетаскивании. Определите перетаскиваемые элементы, допустимые места назначения, недопустимые перемещения и операцию, выполняемую при отпускании. Предоставьте способ перемещения тех же элементов без перетаскивания. Определите недостающие исходные данные, прежде чем заменять их демонстрационным содержимым.
Попробуйте выполнить недопустимое перемещение
Нижняя панель явно описывает управление с клавиатуры и голосовую обратную связь о позиции. Реализуйте и протестируйте эти альтернативы: сама по себе иллюстрация перетаскивания не является доступным взаимодействием.
Элемент должен предсказуемо вернуться на место с указанием причины. Пользователи клавиатуры должны получать те же варианты размещения и сведения о завершении, что и пользователи указателя. Переместите элемент с клавиатуры, отмените перетаскивание и попытайтесь отпустить его в недопустимом месте. Элемент должен оставаться доступным для восстановления, а обратная связь не должна зависеть только от изменения цвета.
Из промпта
Предоставьте альтернативный способ перемещения с клавиатуры и понятные уведомления о позиции.
Настройте под себя
Проверьте обратную связь при перетаскивании на соответствие этому требованию: предоставьте альтернативный способ перемещения с клавиатуры и понятные уведомления о позиции. Переместите элемент с клавиатуры, отмените перетаскивание и попытайтесь отпустить его в недопустимом месте. Элемент должен оставаться доступным для восстановления, а обратная связь не должна зависеть только от изменения цвета. Сохраните утверждённое содержимое и измените только те части, которые не прошли эту проверку.
Проверьте результат работы над обратной связью при перетаскивании
Предпросмотр представляет собой статичную раскадровку. Он не демонстрирует работающую анимацию, измеренную производительность или доступность. Протестируйте реализованное взаимодействие и режим уменьшения движения.
- Переместите элемент с клавиатуры, отмените перетаскивание и попытайтесь отпустить его в недопустимом месте. Элемент должен оставаться доступным для восстановления, а обратная связь не должна зависеть только от изменения цвета.
Уточняющий промпт
Используйте это после получения первого результата. Так доработка будет сосредоточена на самой важной части задачи.
Улучшите текущую обратную связь при перетаскивании. Переместите элемент с клавиатуры, отмените перетаскивание и попытайтесь отпустить его в недопустимом месте. Элемент должен оставаться доступным для восстановления, а обратная связь не должна зависеть только от изменения цвета. Сохраните утверждённое содержимое и визуальное направление; измените только то, что необходимо для устранения этих проблем.
