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

Пример 1 — Каждое состояние элемента отправки

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

Текущая передача: один скриншот
  подпись кнопки «Оформить заказ», синяя заливка, белый текст
  loading, error, disabled и success: не записано ничего

Решение

Кнопка «Оформить заказ»

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

Только токены: colour.action.default, colour.action.disabled,
colour.text.on-action, space.gap.control, radius.control.
Ни одно сырое шестнадцатеричное значение в спецификации не встречается.

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

Пример 2 — Поведение и крайние случаи

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

Открытые вопросы со сборки
  что происходит при нажатии и пока запрос в полёте
  куда уходит фокус, если заказ не удался
  что происходит, если пользователь нажмёт назад после оплаты
  самая длинная настоящая строка адреса
  в одном аккаунте 400 прошлых заказов; в новом — ни одного

Решение

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

Названные крайние случаи
  длинный адрес  «Кв. 3, 118 Мальборо-Корт, Бишопс-Стортфорд,
                  CM23 4QT» — переносится на две строки, без обрезки
  много заказов  список истории заказов на 400 строк, с постраничным выводом
  нет заказов    пустое состояние: «Заказов пока нет. Первый
                  появится здесь.»

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