Передача дизайна и спецификации

Что это такое

Передача дизайна — упаковка замысла так, чтобы инженер собрал всё правильно с первого раза: состояния, крайние случаи, токены и поведение, записанные там, где сборщик будет смотреть. Спецификация и есть такая упаковка. Это не картинка счастливого пути с приделанным выбором цвета.

Почему это важно

Большинство провалов передачи невидимы, пока сборка не закончена, а винят за них инженера, которому о решении никто не сказал. Если состояние загрузки не нарисовали, оно превратится в спиннер не на месте; пустой список станет пустым пространством; длинное название сломает строку. За каждым таким случаем стоит пробел в спецификации, и каждый пробел — лишний круг. Однако хорошая передача убирает и встречу, где инженер спрашивает, что происходит при ошибке: ответ уже есть.

Ключевые идеи

Описывайте состояния, а не только экран

Для каждого компонента в потоке перечислите все состояния и то, что в них показывается, — иначе инженер придумает их сам.

Кнопка оформления заказа
  idle       подпись «Оформить заказ»
  pressed    подпись приглушена, элемент отключён
  loading    спиннер заменяет подпись, элемент отключён, повторная отправка невозможна
  error      подпись возвращается, сообщение над формой, ввод сохранён
  disabled   подпись «Оформить заказ», причина ниже: «Добавьте адрес доставки»

Ссылайтесь на токены, а не на сырые значения

Пишите colour.action.default, а не #1F6FEB. Тогда спецификация переживает ребрендинг, и у инженера есть имя, которое можно найти, а не число, которое можно скопировать.

Описывайте поведение, а не только вид

Что происходит при нажатии, что отключено, пока что-то в полёте, куда уходит фокус, что будет, если пользователь вернётся назад. Статичный файл всего этого передать не может.

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

Давайте настоящее содержимое и крайние случаи

Самое длинное название, пустой список, таблица на четыреста строк, пропавшее изображение. Включайте всё это как названные примеры, а не как совет.

Кладите туда, где идёт работа

Прикрепляйте спецификацию к тикету или к компоненту, а не кладите в отдельный документ, который никто не открывает. Спецификацию в одном клике от кода прочитают.

Практика

Напишите спецификацию для одного потока

Выберите один поток и опишите его: состояния каждого экрана, задействованные токены, поведение при каждом действии и крайние случаи содержимого.

Готово, когда: инженер может описать каждое состояние каждого элемента управления, не задав ни одного вопроса, и ни одна строка спецификации не содержит сырого шестнадцатеричного значения.

Проведите сборку по своей спецификации

Отдайте спецификацию тому, кто не проектировал этот экран, и попросите собрать один экран. Запишите каждый заданный вопрос.

Готово, когда: их вопросы добавлены в спецификацию, а второй сборщик не задаёт ни одного.

Частые ошибки

Только счастливый путь — состояния загрузки, пустоты и ошибки придумывает сборщик, и на каждом экране по-разному; исправить: перечислите каждое состояние явно.
Сырые значения вместо токенов — спецификация ломается при следующей теме или ребрендинге; исправить: ссылайтесь на семантические токены по имени.
Нет описания поведения — что происходит при нажатии, угадывают; исправить: опишите взаимодействие для каждого действия.
Только идеальное содержимое — настоящие названия и размеры списков ломают макет после сборки; исправить: включите самый длинный, пустой и большой случаи.
Спецификация в отдельном документе — её никогда не открывают; исправить: прикрепите её к тикету или странице компонента.

Что читать дальше

Дизайн-системы (03-design-ux/32-design-systems) — прочитайте это первым; спецификация в основном указывает внутрь системы.
API компонента и документация (03-design-ux/32-design-systems/02-component-api-and-documentation) — задокументированные состояния, на которые ссылается спецификация.
Дизайн-токены (03-design-ux/41-design-tokens) — именованные значения, которые спецификация цитирует вместо сырых чисел.
Вайрфрейминг (03-design-ux/27-wireframing) — структура страницы, которую спецификация детализирует.