10 порад по прототипированию в Sketch



Так як Sketch був створений спеціально для роботи над мобільними і веб-інтерфейсами, не дивно що він став одним з найшвидших і гнучких інструментів для прототипування. Ці 10 порад зроблять його ще більш потужним засобом.

1. Зрозумійте навіщо і для кого ви робите прототип
Окей, цей пункт не має нічого спільного зі Sketch, але це неймовірно важлива частина всього процесу прототипування, тому ми просто зобов'язані включити його.

Прототипування є серцем всього ітеративного дизайн-процесу. Воно знижує ризики та рівень невизначеності, а також дозволяє зберегти час і гроші, які були б витрачені на розробку неперевірених рішень. Гарний прототип дає вам можливість перевірити припущення, виявити і усунути проблеми юзабіліті, описати взаємодію і багато іншого.

Як зробити гарний прототип? Це залежить від того, навіщо і для кого ви його робите. Прототип, створений для тестування концепції повинен використовувати трохи інші елементи, ніж прототип, який пояснює анімацію розробникам. Ваші цілі і люди, для яких ви створюєте прототип визначають його зовнішній вигляд, а також його точність і функціонал.

2. Робіть начерки перш ніж переходити до Sketch
Sketch — дивовижний інструмент. Але начерк на папері може допомогти швидко визначити вимоги і різні стани для запропонованої вами концепції. Збудовані екран за екраном швидкі начерки з прямокутників, гуртків і стрілок можуть допомогти побачити всю картину цілком і організувати ваші артборды в Sketch. Однак не сподівайтеся, що це пояснить що-небудь хоч комусь, крім вас.

image
Начерк прототипу мобільного додатку до відкриття Sketch

3. Використовуйте символи для всіх повторюваних елементів
Ваш прототип може містити безліч артбордов з купою повторюваних елементів: одні і ті ж хедеры, футеры, кнопки, списки і т. д. Зміна розташування і стилів елементів практично неминучі, особливо на ранніх стадіях прототипування, що означає тонну стомлюючої і нудної роботи, якщо тільки ви не використовуєте символи.
Давайте припустимо, що ви хочете змінити колір фону хедера і розмір кнопки. Якщо ви зберегли їх як символи, то потрібно внести зміни лише в одну з копій, усі інші зміняться автоматично. Або ще крутіше — ви можете виключити текст з елемента, тоді після зміни кольору кнопки з написом «Почати» у синій колір, кнопка «Увійти» теж стане синьою без зміни копії.

Щоб створити символ, просто виділіть шар або групу та виберіть Layer > Create Symbol. Одного разу створивши символ, ви можете швидко додати його в ваш дизайн за допомогою кнопки Insert.

image
Оновлення та використання символів між сторінками і артбордами: Використання символів у Sketch

4. Створюйте артборды і елементи інтерфейсу легко і швидко
Функція Make Grid дозволяє вам швидко створити і розподілити елементи артборду. Вона особливо эффективноа в парі з символами. Ви можете створити одне відображення з декількома символами (фон, хедер, футер, кнопки і т. д.) і скопіювати його стільки разів, скільки вам потрібно.

image
Створення елементів і артбордов з використанням функції Make Grid

5. Генерує контент в один клік
Плагін Generator Content for Sketch Тимура Карпєєва дозволяє наповнити ваш дизайн випадковими даними в один клік. Це можуть бути фотографії та імена людей, фон, геолокаційні дані або просто випадковий текст. Цей плагін отримує дані і графіку від популярних сервісів: Unsplash, uiFaces, uinames і Mockaroo. Потрібні випадкові фінансові дані? Тоді вам підійде плагін Тайлера Волфа sketchFinDataGen

image
Генерація даних на льоту з використанням плагіна Generator Content for Sketch

6. Використовуйте перекриває шар для імітації більш реалістичного взаємодії
Один із способів поліпшити ваш прототип — додати перекриває шар. Повідомлення, спливаючі вікна або попередній перегляд зображень часто можуть використовувати перекриває шар, щоб сфокусувати на собі увагу. Ви можете зробити це, експортувавши один з артбордов як .png-зображення безпосередньо в інший артборд просто перетягнувши його. Після чого налаштувати заливку фону, налаштування змішування і прозорість, щоб домогтися потрібного ефекту.

image
Створення перекриває шару для більш детального і реалістичного прототипу

7. Додавайте клавіатуру на всі екрани, де необхідний введення тексту
Орієнтований на користувача дизайн веде продукт до успіху, а позбавлення від зайвих кроків робить ваших користувачів більш щасливими. Занадто часто користувачеві мобільного додатка доводиться натискати на поля введення (такі як адресу електронної пошти або форма логіну), щоб викликати клавіатуру. Замість цього переконайтеся, що клавіатура буде показана відразу ж як тільки екран завантажиться.

image
Позбавлення від зайвих кроків, навіть такої дрібниці, як натискання на поле для введення логіна, дійсно покращує взаємодію з користувачем

8. Організовуйте ваші екрани за допомогою сторінок в Sketch
Дуже просто перетворити в хаос всі ваші артборды і шари. На щастя, Sketch підтримує многостраничность, що дозволяє впорядкувати всі ваші матеріали при цьому зберігаючи їх в одному .sketch-файлі. Ми зазвичай використовуємо сторінки для поділу прототипів, сринфлоу, концептів, вайрфреймов і матеріалів для App Store.

image
Використання сторінок для організації прототипів і скринфлоу

9. Створюйте інтерактивний прототип прямо з вихідного файлу
У випадку якщо ви ще не чули — InVision підтримує Sketch і вміє синхронізуватися з ним. Досить завантажити ваш вихідний файл на сайт або полегшити собі життя, використовуючи InVision Sync або синхронізацію Dropbox. З двома останніми варіантами оновлення прототипу стає не складніше його збереження.

10. Використовуйте набори елементів інтерфейсу і ресурси інших дизайнерів
Ви можете отримати безліч як платних, так і безкоштовних наборів елементів інтерфейсу, таких як TETHR і TERACY на сайті Sketch App Sources. Використання напрацювань інших дизайнерів може стати відмінним способом поліпшити ваш робочий процес і навчитися новим технікам прототипування.

Джерело: Хабрахабр

0 коментарів

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