14 рад по використанню Sketch і InVision в роботі дизайнера

image
Инвижн дозволяє дизайнеру продемонструвати замовнику прототип дизайну програми, зробивши його інтерактивним. Крім того, завдяки Инвижн, можна організувати злагоджену роботу всередині команди, між дизайнером, менеджером проекту, верстальником і програмістами, незалежно від платформи (mac os, Windows, Linux). Пропоную вашій увазі зручні сценарії використання зв'язки Sketch + InVision.
Поради щодо підготовки прототипів Sketch
1. Встановіть набір плагінів «Craft»
Craft — це чудовий набір плагінів, створений компанією InVison LABS. Нас цікавить плагін Sync, яка дозволяє прямо з редактора Скетч завантажувати артборды в Инвижн. Для цього спочатку потрібно створити проект на сайті Инвижн, вказавши тип інтерфейсу (додаток для десктопа, планшета, телефону або годин).
image
Після цього повертаємося в Скетч, вибираємо створений проект зі списку, можна вивантажувати дизайн. Артборды вивантажуються або все відразу, або тільки вибрані, що буває дуже до речі, коли їх багато.
image
Крім того, дизайн можна вивантажувати у дозволах @1x або @2x. Завдяки цьому, ваш прототип буде чудово виглядати на пристроях з ретина-дисплеями.
image
2. Один розділ — одна сторінка
Якщо проект великий і припускає велику кількість артбордов, то краще, для кожного великого розділу створювати окрему сторінку в Скетчі. Тоді зручно вивантажувати відразу всі екрани одного розділу, не завантажуючи артборды інших розділів.
image
3. Модальні вікна на окремих артбордах
Инвижн дозволяє показувати модальні вікна «перекриваючи» контент. Раніше, для того щоб показати модальне вікно, копіювався артборд з контентом, зверху малювався напівпрозорий оверлей, зверху якого створювалося саме модальне вікно. Тепер, зайвих рухів тіла можна не робити. Створіть модальний на окремому артборде. Положення вікна, ступінь прозорості і колір накладання можна буде вказати в Инвижн.
image
Зверніть увагу, що якщо у вікна є тінь, то вона повинна бути всередині артборда, інакше вона «обріже» і не буде видно.
Важливо в Скетчі відразу правильно називати артборды, т. к. в Инвижн екрани отримають таке ж ім'я. А якщо арборд перейменувати після синхронізації, то в Инвижн створяться 2 однакових екрану з різними іменами, один з яких доведеться видаляти вручну.
На мій погляд, це бага. Сподіваюся, незабаром її виправлять, але поки цей момент треба мати на увазі.
4. Стану елементів
Якщо ви розробляєте інтерфейс для десктопа, то для випадаючих списків, і інших елементів інтерфейсу потрібно зобразити стан «hover» (наведення вказівника). Для цього, так само як і з модальними вікнами, на окремому артборде зобразіть список в розкритому вигляді і завантажте в Инвижн. У вас створиться окремий екран з цим списком.
image
Далі, створюємо область над заголовком списку, при наведення на який буде відображатися розгорнуте меню, вибираємо «Screen as overlay» і екран зі списком в розкритому стані. Для того щоб всі розміщувалася рівне, вибираємо «Position — Top Left», «Transition — Fade in» і вказуємо координати, які можна підглянути у Скетчі в панелі Position.
image
5. Статусбар малювати не потрібно
В дизайні додатків для мобільних і планшетів не зображайте Статусбар, але залиште для нього місце. Справа в тому, що Инвижн покаже свій статусбар при перегляді через браузер. Ви зможете вибрати оформлення статусбара з 2 варіантів: темний і світлий.
image
6. Готує іконки і графіку для експорту
Завдяки нещодавнім нововведенням в Инвижн з'явився Inspect Mode, через який верстальники і програмісти можуть дивитися опис будь-яких елементів, а так само експортувати їх. Які елементи будуть доступні для експорту з Инвижн, та їх розміри, визначає дизайнер в редакторі Скетч. Просто виберіть елемент, вкажіть формати і розміри для експорту. Тепер цей елемент можна завантажити у зазначених форматах прямо з Инвижн.
image
Забули налаштувати експорт для будь-якого об'єкта? Не біда. Йдемо в Скетч, налаштовуємо експорт елемента і синхронізуємо артборд через плагін «Craft Sync». Готово, об'єкт можна експортувати з Инвижн.
Поради по роботі в InVision
Инвижн досить демократичні цінової політики. Для того, щоб ознайомитися з функціоналом, платити нічого не потрібно, створення одного прототипу — безкоштовно. Якщо ви фрілансер, який одночасно веде не більше трьох проектів, то вам підійде «Стартовий» тариф, за 15 доларів в місяць. На цьому тарифі можна створювати до 3 активних прототипів. Причому, скільки прототипів у вас в архіві — не важливо, головне, щоб активних було не більше трьох. Я використовую тариф «Professional» за 25 доларів в місяць. Він дозволяє створювати необмежену кількість проектів. Більш дорогі плани потрібні для компаній, у яких над прототипами працює більше одного дизайнера.
image
Як я писав вище, Инвижн дозволяє розробникам з під Windows верстати макети або додатки, створені у Скетчі. Погодьтеся, $25 на місяць сильно дешевше, ніж купити всій команді Маки :-)
7. Створюйте іконку програми
Для прототипів мобільних додатків в Инвижн можна додати іконку. Для цього натисніть на «Плюс» біля назви проекту та виберіть вашу іконку. Вона буде відображатися при перегляді в браузері, а так само якщо встановити додаток на мобільний (про це в наступному раді).
image
8. «Встановлюйте програми на iOs
Якщо скопіювати посилання на проект «Public share link» і вставити у браузері Сафарі на мобільному, то в ньому відкриється ваш додаток. Натисніть на іконку «Поділитися» в браузері і виберіть «На екран „Додому“». Тепер у вас на робочому столі мобільного з'явилася іконка додатку, а саме додаток можна подивитися без адресного рядка браузера. Роботи — мінімум, замовник — в захваті, він може переміщатися між екранами на своїй мобілці.
image
9. Створюйте хедер і футер у додатках
Часто контент займає більше одного екрана, і при його перегляді необхідно закріпити хедер і футер. Для цього в режимі «Build Mode» пересуньте повзунки «Fixed Header» і «Fixed Footer». Тепер контент промотувати між ними.
image
Поки в Инвижн немає можливості закріплювати сайдбар ліворуч або праворуч в прототипі, що буває дуже корисно в десктопних інтерфейсах. Сподіваюся цю фічу теж коли-небудь додадуть.
10. Використовуйте шаблони (templates) для навігації
Довгий час я не звертав уваги на цю мега-корисну можливість і для кожного екрану за новою створював «клікабельні» області. Насправді, для наскрізних меню (тих, що є на всіх сторінках сайту) потрібно «клікабельні» області додавати в «Шаблони». Створюємо область, вибираємо куди веде клік по ній і додаємо до шаблона, наприклад, «Sidebar».
image
В одному шаблоні може бути будь-яка кількість «клікабельних» областей. Тепер для того щоб встановити області з шаблону на новому екрані, просто вибираємо потрібний шаблон.
image
11. Inspect Mode
Раніше я згадував про це нововведення Инвижн, але воно гідно окремого пункту. Неможливість відкрити файл у Віндоус до недавнього часу було великою проблемою для дизайнерів, змушує використовувати Фотошоп замість Скетчу. Для передачі файлів використовувалися різні сервіси, наприклад Avocode або плагін Marketch. Також, нещодавно з'явилося безкоштовне рішення від хлопців з Icons8, що дозволяє відкривати Скетч-файли з-під Віндовс, за що їм окреме спасибі!
Як варіант вирішення проблеми підійде Inspect Mode Инвижн. Він надає такий же функціонал як і перераховані рішення.
image
Для того щоб він працював правильно — використовуйте плагін Craft Sync для вивантаження екранів. Додавайте розробників до проекту і вони отримають доступ до цього режиму.
image
Причому, розроблювачу достатньо мати безкоштовний обліковий запис, щоб отримати доступ у режимі Inspect Mode до будь-якого кількість ваших прототипів.
12. Створюйте коментарі і тури
Коли проектів і екранів багато, багато часу йде на з'ясування в якому саме екрані користувача потрібно внести правки. Ця проблема легко вирішується, якщо надати замовнику доступ до коментарям. Він клацає в потрібному місці, і створює текстовий коментар. Повідомлення про нього впаде вам на пошту і буде доступно в Инвижн у вкладці «Comments». На коментар можна написати відповідь, або уточнююче питання, а чи можна виконати завдання і позначити коментар як виконаний (Mark as resolved).
image
Буває, потрібно зробити не повноцінний інтерфейс, а оглядовий тур по ньому. Для цього в Инвижн є функціонал створення турів. Він працює за принципом коментарів. Ви створюєте одну або кілька точок на екрані з текстовим описом. Точки послідовно «проведуть» користувача по екранах, за допомогою кнопок «Prev» та «Next». Приклад маленької презентації.
13. Зберігайте історію версій
Якщо у вашої комнади немає необхідності в Inspect Mode і досить завантаження екранів у вигляді картинок, то є можливість використовувати сховище версій в Инвижн. Для цього завантажуйте макети за допомогою програми «Desktop Sync App», а не плагіна «Craft Sync». Вся історія змін вашого макету з можливістю завантажити попередні версії буде доступна в розділі «Assets». Ось коротке відео про це функціоналі.

Дуже шкода, що історія версій не створюється при вивантаженні даних плагіном «Craft Sync». Сподіваюся, і ця фіча коли-небудь запрацює.
14. Презентуйте дизайн онлайн (LiveShare)
Хороший дизайнер повинен вміти не тільки створювати якісний інтерфейс майбутнього продукту, але і грамотно презентувати його. Дуже важливо обґрунтувати і донести до замовника свої ідеї та рішення. Звичайно, краще це робити при зустрічі в затишному конференц-залі, але така можливість є не завжди. У таких випадках дуже корисний інтерфейс «LiveShare», дозволяє в режимі реального часу показувати екрани, переміщатися між ними, обговорюючи побачене. Ось як це працює:

Скетч і Инвижн дозволяють створювати, обговорювати і покращувати користувальницькі інтерфейси. Безперечно, в Инвижн є доопрацювати, але вже сьогодні це відмінний продукт для презентації ваших дизайн-рішень. А якщо врахувати, що над Инвижн постійно ведеться осмислена робота і регулярно впроваджуються відмінні рішення, то варто спробувати його в своїй роботі!
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.