Советы по использованию Sketch и InVision в работе дизайнера

Сегодня хочу поделиться с вами знаниями о приложении Sketch и InVision. Эти советы помогут вам выбрать для себя необходимый набор инструментов для работы с дизайном интерфейсов.

Приложение InVision дает возможность заказчику посмотреть как будет выглядеть будущий дизайн приложения. Также InVision позволяет организовать командную работу над проектом всех участников процесса: менеджера, программиста, верстальщика, дизайнера.
Предлагаю вашему вниманию наглядный пример взаимодействия Sketch + InVision.

Как подготовить прототип в Sketch

1. Устанавливаем набор плагинов «Craft»

Craft представляет собой набор плагинов компании InVison LABS. Хочу более подробно остановиться на плагине Sync, который позволяет загружать артборды из Sketch прямо в InVision. Для этого создаем проект на сайте Invision, указав тип интерфейса (приложение для десктопа, планшета, телефона или часов).

Craft

Далее переходим в Sketch, выбираем созданный проект в перечне и выгружаем дизайн.

Craft

Его можно выгружать в разрешении @1x так и «2x. Это обеспечит отличное отображение дизайна на устройствах с ретина-дисплеями.

cRAFT

2. Отдельная страница для каждого раздела

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

артборд

3. Создайте модальное окно на каждом артборде

InVision позволяет отображать модальные окна «перекрывая» контент. Раньше, чтобы показать модальное окно, необходимо было копировать артборд с контентом, сверху рисовался полупрозрачный оверлей, сверху которого создавалось модальное окно. Теперь все стало гораздо проще. Создавайте модальное окно непосредственно на артборде. Настройки слоя (положение, цвет, прозрачность оверлея) можно указать в InVision.

Инвижн

Обращаю ваше внимание, что если у окна есть тень, то она должна находиться внутри артборда. В противном случае она «обрежется» и не будет заметна.

В Sketch правильно указывайте названия артбордов, так как InVision отображает такое же название. Если же артборд переименовать после синхронизации, то Инвижн создает два идентичных экрана с различными именами, один из которых нужно будет удалить вручную.

4. Состояния элементов

При разработке интерфейса для десктопа, выпадающие списки и прочие элементы нужно изобразить состоянием «hover» (наведение курсором). Для этого, так же как и с модальными окнами, на отдельном артборде изобразите список в раскрытом виде, который далее загружается в InVision. При этом создается отдельный экран с таким списком.

Инвижн

На следующем этапе создаем область над заголовком списка, при наведении на который будет отображаться меню. Выбираем «Screen as overlay» и экран со списком в раскрытом виде. Чтобы все отобразилось красиво, выбираем «Position — Top Left», «Transition — Fade in» и указываем координаты, которые можно подсмотреть в Скетче в панели Position.

Инвижн

5. Не рисуем статусбар

При работе над дизайном приложений мобильных и планшетов не изображайте Статусбар, но выделите под него место. Инвижн покажет свой статусбар при просмотре через браузер. Есть возможность выбора его оформления: светлый или темный.

Статусбар

6. Готовим графику и иконки для экспорта

Совсем недавно в InVision появился Inspect Mode. Через него программисты и верстальщики смотрят описания элементов и экспортируют их. Вы как дизайнер сами определяете в Sketch , что именно будет отображаться при экспорте из Инвижн. Выбирайте нужные элементы, указывайте их размеры и форматы для экспорта. Теперь этот элемент можно скачать в указанных форматах прямо из Инвижн.

Инвижн

Если вы забыли настроить экспорт для конкретного элемента, просто перейдите в Sketch, настройте там экспорт элемента и синхронизируйте через плагин «Craft Sync».

Советы по работе в InVision

Ценовая политика Инвижн довольно демократична. Бесплатно они предлагают только создание одного прототипа и знакомство с функционалом. Фрилансерам, которые ведут не более трех проектов, подойдёт «Стартовый» тариф. Он обойдется за 15$ в месяц. Такой тариф позволяет создать не более трех прототипов. И не имеет значения, сколько у вас прототипов в архиве, активных должно быть три.

InVision

Существует тариф «Professional», который обойдется за 25$ в месяц. В нем доступно неограниченное число проектов.
Остальные тарифы подойдут исключительно для крупных компаний, где работает штат дизайнеров.

Инвижн позволяет разработчикам из под Windows верстать макеты или приложения, созданные в Скетче. 25$ в месяц это гораздо дешевле, чем купить всему штату Маки =)

7. Иконка приложения

Для прототипов мобильных приложений есть возможность добавлять иконку. Просто нажмите «Плюс» возле названия проекта и выберите иконку. Она будет отображаться при просмотре в браузере и так же,  если «установить» приложение на мобильный.

InVision

8. «Устанавливайте» приложения на iOs

Если скопировать ссылку на проект в «Public share link» и вставить в браузере Сафари на мобильном, то в нём откроется ваше приложение. Нажимаем на иконку «Поделиться» в браузере и выбираем «На экран «Домой»». После этого на вашем рабочем столе мобильного появится иконка приложения. При этом его можно просмотреть без адресной строки браузера.

InVision

9. Создаем футер и хедер в приложении

Очень часто весь контент не помещается на один экран, при его прокрутке нужно закрепить футер и хедер. В режиме «Build Mode» перетащите ползунки «Fixed Header» и «Fixed Footer». Теперь контент размещен между ними.

Build Mode

Пока в Инвижн нет такой возможности закреплять сайдбар слева или справа в прототипе.

10. Шаблоны для навигации

Чтобы не создавать для каждого экрана кликабельные области, их нужно добавлять в «Шаблоны». Создавайте область, выбирайте куда ведет клик по ней и добавьте в шаблон, например, «Sidebar».

Build Mode

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

11. Inspect Mode

Невозможность открыть файл на Windows — совсем недавно это было реальной проблемой для дизайнеров. Это обязывало их использовать Photoshop вместо Sketch. Для передачи файлов нужно было использовать различные плагины или сервисы, например Avocode или плагин Marketch. Но недавно появилось решение от ребят из Icons8, которое дает возможность открывать Скетч-файлы из-под Windows.

Как вариант решения проблемы подойдёт Inspect Mode в Инвижн. Он предоставляет такой же функционал как и перечисленные решения.

Inspect Mode

Для корректной работы плагина используйте плагин Craft Sync для выгрузки экранов. Добавляйте разработчиков к проекту и они получат доступ к этому режиму.

Inspect Mode

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

12. Предоставьте заказчику доступ к комментариям

Когда много проектов, а экранов в каждом из них еще больше, масса времени уходит на то, где именно нужно внести правки. Чтобы устранить эту проблему предоставьте заказчику доступ к комментариям. Он кликает в определенном месте и создает комментарий. Уведомление об этом приходит к вам на почту и будет доступно во вкладке «Comments» в Инвижн. Можно написать ответ на комментарий или выполнить правку, при этом отметить комментарий как выполненный.

Инвижин

13. Хранилище версий

Если у вас нет необходимости в Inspect Mode, и достаточно загрузки экранов в виде картинок, то есть возможность использовать хранилище версий в Инвижн. С помощью программы «Desktop Sync App» загрузите макеты, а не плагина «Craft Sync». Это даст возможность сохранить всю историю изменений в проекте, которые доступны в разделе «Assets».

История версий не создаётся при выгрузке данных плагином «Craft Sync», очень жаль.

14. Онлайн презентация дизайна

Вы должны не только уметь создавать крутые интерфейсы, а и хорошо их презентовать. Важно донести основную мысль и идею проекта до заказчика. Если нет возможности личной встречи, на помощь придет интерфейс «LiveShare», позволяющий в режиме реального времени показывать экраны, перемещаться между ними, обсуждая проект.

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

Обсуждение закрыто.