Scott
Дизайн-хэндовер готов, когда разработчику не приходится угадывать намерение автора. В одном рабочем файле свяжите цель пользователя, правила компонентов, состояния, ассеты и критерии приёмки — так макет становится понятным планом реализации.
Начните с прототипа в Pixso, который показывает критический путь, а решения, которые не видны на экране, зафиксируйте рядом с фреймом.
1. Определите задачу и границы
Опишите пользовательскую задачу, точку входа и результат, который считается успешным. Отдельно укажите, что не входит в эту итерацию. Такая рамка не позволит принять красивый макет за полную спецификацию всех исключений.
2. Зафиксируйте правила компонентов и вариантов
Для каждого переиспользуемого компонента укажите назначение, обязательные свойства, допустимые варианты и ограничения текста. Разделите значения по умолчанию и осознанный выбор. Добавьте состояния disabled, focus, selected и ограниченный доступ, чтобы разработчику не приходилось выводить поведение из внешнего вида.
3. Покажите состояния, адаптивность и доступность
Свяжите основной фрейм с загрузкой, пустым результатом, ошибкой, успехом и частичными данными. Опишите, что происходит при узком экране, переносе текста и навигации с клавиатуры. Используйте реалистичный контент: короткие заглушки часто скрывают переполнение и проблемы локализации.
4. Подготовьте ассеты, токены и экспорт
Рядом с фреймом укажите имя ассета, источник, назначение и формат экспорта. Для цвета, типографики, отступов и тени ссылайтесь на токены, а не дублируйте значения. Если нужен кроп, запасной вариант или версия для тёмной темы, запишите это как отдельное требование.
5. Добавьте доказательства приёмки и владельцев
Превратите открытые вопросы в заметки приёмки: условие проверки, ожидаемый результат и ответственный за согласование. Свяжите решение с конкретным фреймом или переходом прототипа. Предположение должно оставаться помеченным предположением, а не выглядеть как утверждённое требование.
| Элемент хэндовера | Что приложить | Кто проверяет |
|---|---|---|
| Задача и границы | Вход, результат, исключения | Продукт и дизайн |
| Поведение компонента | Свойства, варианты, состояния | Владелец дизайн-системы |
| Адаптивность и доступность | Ширины, фокус, лимиты текста, восстановление | Дизайн и разработка |
| Ассеты и токены | Источник, формат, токен, запасной вариант | Дизайн и frontend |
| Приёмка | Условие, результат, доказательство, согласующий | Владелец функции |
Сделайте хэндовер совместной проверкой
До начала разработки пройдите критический путь вместе с продуктом и инженерией. Сначала закройте самые рискованные неизвестные, а при изменении реализации обновите связанные решения и критерии.
