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

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

Скачайте демо-файл

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

Для примера возьмем трех разных людей, которым нужно посмотреть мой дизайн музыкального плеера в разных форматах…

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

Дизайнеру нужно только увидеть экраны

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

Инженеру нужно увидеть связи между экранами и пути

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

А проект-менеджеру нужно демо для тестирования пользователями и демонстрации начальству

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

Дизайн

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

Трехуровневый подход в дизайне с помощью Sketch - 5
Это прототип нашего музыкального плеера.

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

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

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

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

Результат

Если экспортировать нижний артборд, я получу все артборды в одном большом файле, который хорошо поясняет связи между экранами и сценарий. (Рисунок 1)

Трехуровневый подход в дизайне с помощью Sketch - 7
Рисунок 1 — все экраны со стрелками, показывающими, как все работает

 

Если я прячу слои в верхнем артборде, я могу экспортировать версию с отключенными стрелками и пояснениями. (Рисунок 2).

Трехуровневый подход в дизайне с помощью Sketch - 8
Рисунок 2 — все экраны без стрелок

Каждый артборд представляет собой отдельный экран, поэтому я могу экспортировать его как Sketch-файл в Invision для создания кликабельного прототипа. (Рисунок 3)

Трехуровневый подход в дизайне с помощью Sketch - 9
Рисунок 3 —прототип  Invision

Также я могу экспортировать его как PDF, со всеми скринами в нужной последовательности.

Примечания

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

Спрячьте стрелки и пояснения перед экспортом в Invision, иначе они будут отображаться поверх экранов.

Это непросто объяснить, так что лучше ознакомьтесь с демо-файлом. Делитесь в комментариях своими идеями по решению подобных задач.