Трехуровневый подход в дизайне с помощью Sketch

Создание гибкого файла Sketch под разнообразные требования широкой аудитории

Этот подход используется при создании Sketch-файла для показа работы в различном виде разным людям, с разными ожиданиями. Он оказался очень полезен для меня и моего метода работы, поэтому я решил поделиться им с вами, и возможно, развить этот подход новыми идеями. Скачайте демо-файл Для примера возьмем трех разных людей, которым нужно посмотреть мой дизайн музыкального плеера в разных форматах... Дизайнеру нужно только увидеть экраны Инженеру нужно увидеть связи между экранами и пути А проект-менеджеру нужно демо для тестирования пользователями и демонстрации начальству Один человек просто хочет увидеть все экраны. Другому нужно увидеть, как экраны связаны между собой, какой к какому подключается, третьему же нужен кликабельный прототип, и некоторые отдельные экраны в формате PDF.

Дизайн

Большой артборд

Это прототип нашего музыкального плеера.

Структура артборда

В артборде есть три уровня:

1. Внизу у нас контейнер, достаточно большой, чтобы вместить все артборды, составляющие приложение. Он содержит заголовок, контроль версий и релевантную информацию.
2. Далее у нас есть разные артборды, представляющие разные экраны.
3. Далее, в самом верху идет еще один артборд, такого же размера как и артборд-контейнер, в котором указаны стрелки сценария и пояснения, что происходит. Я помещаю все стрелки и текст в папку-контейнер, которую легко скрыть или отобразить при необходимости.

Результат

Если экспортировать нижний артборд, я получу все артборды в одном большом файле, который хорошо поясняет связи между экранами и сценарий. (Рисунок 1) [caption id="attachment_34510" align="alignnone" width="800"] Рисунок 1 — все экраны со стрелками, показывающими, как все работает[/caption] Если я прячу слои в верхнем артборде, я могу экспортировать версию с отключенными стрелками и пояснениями. (Рисунок 2). [caption id="attachment_34509" align="alignnone" width="800"] Рисунок 2 — все экраны без стрелок[/caption] Каждый артборд представляет собой отдельный экран, поэтому я могу экспортировать его как Sketch-файл в Invision для создания кликабельного прототипа. (Рисунок 3) [caption id="attachment_34511" align="alignnone" width="800"] Рисунок 3 —прототип  Invision[/caption] Также я могу экспортировать его как PDF, со всеми скринами в нужной последовательности.

Примечания

Я называю артборды 1a, 1b, 2a и т.д., чтобы было проще располагать их в Invision. Выберите Artboard Export -> Top to Bottom в Preferences, чтобы контролировать порядок, в котором артборды экпортируются в PDF. Спрячьте стрелки и пояснения перед экспортом в Invision, иначе они будут отображаться поверх экранов. Это непросто объяснить, так что лучше ознакомьтесь с демо-файлом. Делитесь в комментариях своими идеями по решению подобных задач.

Перевод статьи Stewart Curry