Adobe XD — Примеры

Пример 1 — Одна нарисованная строка, размноженная в список

Вы раскладываете экран заказов в Adobe XD. Одна строка уже нарисована правильно, а списку нужно восемь строк с реальными значениями разной длины и одинаковой подачей статуса в каждой. Постройте готовый список. Опишите и шаги, которые к нему привели.

Одна строка, один артборд
[#10482]   [Bristol]   [£46.20]   [Доставлен]

Решение

Шаги в инструменте
1. Нарисуйте одну строку заказа: номер, город, сумма, значок статуса
2. Выделите строку и задайте repeat grid на восемь строк
3. Задайте отступ между строками один раз, на сетке, а не для каждой строки
4. Превратите значок статуса в символ с тремя состояниями
5. Подставьте реальные значения; значок остаётся одним компонентом

Самое длинное значение:  [#10482]  [Bournemouth]  [£1,046.20]  [Доставлен]
Самое короткое значение: [#7]      [Bath]         [£4.99]      [В обработке]

Копирование берёт на себя repeat grid, поэтому одно решение об отступе доходит до всех восьми строк, а символ значка сохраняет статус читаемым и одинаковым во всех экземплярах. Однако если вставлять строки вручную, список расходится уже через час, и любая последующая правка раскладки превращается в восемь отдельных изменений.

Пример 2 — Анимация одного перехода и заметка о том, что он не покрывает

Прототип должен показать, как строка сводки раскрывается в панель деталей. Заставьте переход работать в общей ссылке предпросмотра, а затем напишите заметку, которая уходит с прототипом к инженеру.

Артборд A: список заказов, одна строка выбрана
Артборд B: панель деталей заказа
Открытый вопрос: правильно ли читается переход от строки к деталям?

Решение

В инструменте
Назовите общий элемент «order-summary» на обоих артбордах
Поставьте переход между ними на auto-animate, 250 мс
Опубликуйте ссылку прототипа и посмотрите её на обычной скорости

Заметка, отправленная со ссылкой
покрывает:       сводку в детали для доставленного заказа
не покрывает:    пустой список, сбой загрузки, заказ без отслеживания
не спецификация: цвет и отступы берутся из библиотеки компонентов

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