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

Создание гибкого файла 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, иначе они будут отображаться поверх экранов.

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

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

Полное руководство по дизайну iOS 9 в Sketch

iOS сильно выросла в течение последних лет. С ее iOS 9 апгрейдом, Apple представил новый системный шрифт под названием San Francisco, 3D Touch и многозадачность на iPad. В Xcode вы найдете Stack Views, фантастический инструмент для более адаптивных макетов, гораздо проще Auto Layout.

Самое подробное руководство по дизайну в Sketch

Работая со Sketch последние три года, я освоил ряд ключевых техник, которые значительно улучшили мой рабочий процесс. Так как я, помимо рисования, также обожаю прототипировать и кодить, мне нужен инструмент для быстрого выполнения дизайн-проектов и легкой генерации исходников. Sketch вместе с его плагинами и другие инструменты для прототипирования полностью справляются с этой задачей. Часть 1 Часть 3 Часть 4

Серия уроков Sketch (часть1 из 5): Настройка Sketch

Первое что нам следует изучить, это настройка Sketch. Если вы только начали создавать дизайны для веб и являетесь новичком в Sketch или Photoshop, или вы просто разработчик, желающий включить UI-дизайн в свой репертуар, эти простые уроки по настройке идеально подойдут для быстрого ознакомления с работой Sketch. Часть 2 Часть 3 Часть 4 Часть 5