UX-исследователь — практический курс
UX-исследователь — практический курс
Начните карьеру в области UX или структурируйте свои знания с помощью уникального на рынке курса по UX-исследованию
Узнать подробнее
Трехуровневый подход в дизайне с помощью Sketch

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

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

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

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

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

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

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

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

UX-исследователь
UX-исследователь
Станьте UX - исследователем - одним из самых востребованных специалистов в продуктовой команде
Забронировать место

Трехуровневый подход в дизайне с помощью 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, иначе они будут отображаться поверх экранов.

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

Total
0
Shares
Добавить комментарий

Ваш адрес email не будет опубликован.

Похожие статьи
Sketch + Craft: союз, созданный на цифровых небесах
Подробнее

Sketch + Craft: союз, созданный на цифровых небесах

В прошлом я был ярым поклонником парочки плагинов Sketch, которые сэкономили мне уйму времени при работе с живыми данными - Content Generator и Unsplash It. Но с Craft все эти возможности собраны в маленький, аккуратный и быстрый инструмент.
Урок по кривым Безье в Sketch. Cоздаем плавный сегментированный график в Sketch 3
Подробнее

Урок по кривым Безье в Sketch. Cоздаем плавный сегментированный график в Sketch 3

В этом уроке вы научитесь создавать простой линейный график в лучших традициях Google Material design. Нам понадобятся инструменты вектора, градиента и маски и мы создадим график в Sketch 3.
Copy & Paste Guides
Подробнее

Copy & Paste Guides – Плагин для копирования и вставки гайдов

Тех, кто больше любит пользоваться гайдами вместо опции лейаута в Sketch, может сильно раздражать замена гайдов для нескольких артбордов, особенно при работе с огромными документами. Вот почему мы создали плагин Copy & Paste Guides для легкого копирования, вставки или удаления гайдов с ваших артбордов в Sketch.

Еженедельная рассылка

Одно письмо с лучшими записями за неделю

Total
0
Share