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