Передача в макет — Примеры

Пример 1 — Контракт для страницы заказов

Ветвь «Ваши заказы» прошла тест находимости, и теперь ей нужен контракт, по которому дизайнер сможет разложить страницу. По дереву и частям ниже напишите её содержимое в порядке приоритета и её ссылки.

Дерево: Ваши заказы > (последние заказы, возвраты)
Существующая страница: заголовок, список заказов, одна ссылка «ещё»
Откуда попадают: поиск, меню аккаунта, письмо с подтверждением заказа

Решение

Страница-коллекция — Ваши заказы
1 Заголовок «Ваши заказы», совпадает с меткой навигации
2 Поиск или фильтр, потому что список может превысить 20 позиций
3 Список заказов, каждая строка ссылается на страницу детали заказа
4 Пустое состояние: что здесь появится и как сделать первый заказ
5 Ссылка вверх на главную аккаунта; вбок — на возвраты
6 Обратный путь: заказ, открытый из поиска, возвращает к результатам поиска

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

Пример 2 — Состояния, которые никто не рисует

Два типа страниц собираются разложить только из заполненного состояния, поэтому опишите макет для каждого состояния и сверьте заголовки с метками навигации.

Ваши заказы      пусто, 1 заказ, 20 заказов, 400 заказов, загрузка, ошибка
Деталь заказа    полный, возвращён, отменён, удалён, но всё ещё связан

Метки навигации:   Ваши заказы / Деталь заказа
Текущие заголовки: Мои заказы  / Детали заказа

Решение

Ваши заказы
пусто    «Заказов пока нет», как сделать заказ, одна строка-пример
1        строка плюс ссылка на родительскую категорию
20       список, без постраничности
400      поиск, фильтр и постраничность, а не один длинный скролл
загрузка скелетные строки; ошибка: сообщение и повторная попытка

Деталь заказа
полный   позиции, итог, статус доставки, ссылка назад на «Ваши заказы»
возвращён строка возврата и пересчитанный итог
отменён или удалён  баннер статуса, повторный заказ или ссылка на список

Сверка заголовков: «Ваши заказы» и «Деталь заказа» совпадают с метками
навигации; старые «Мои заказы» и «Детали заказа» убраны.

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