4 правила роботи в Sketch над великими проектами

image
Поява редактора Sketch сильно полегшило роботу дизайнерів. Артборды, Символи, Стилі, велика кількість плагінів і інтуїтивно зрозумілий інтерфейс — все це зробило нас трохи щасливішими. В цій статті спробую навести правила і прийоми, які виробив при роботі над проектами, адже важливі не тільки інструменти, але і правильне їх використання.
Правило №1: Створювати символи
Елементи, які повторюються частіше 2-х разів на артборде потрібно переводити в символи. Якщо знадобилося внести які-небудь виправлення зовнішнього вигляду символу, міняємо його на сторінці «Symbols», і редагування застосується автоматично на всіх артбордах проекту.
image
Передумови символів були і в Photoshop, в якому можна було імпортувати посилання на інший файл psd, і при його зміні в одному місці, він змінювався у всіх файлах. Можна навіть керувати його відображенням за допомогою Layer Comp. Але у Sketch подібна робота виведено на новий рівень.
Для впорядкування символів в меню «Symbols» за групами та підгрупами, використовуються слеші — «/». Наприклад, назва артбордов елементів форми повинні починатися з «Form / element_title». Тоді вони згрупуються у розділі «Form». Якщо артборд назвати «Form / Input / element_title» він буде розміщений у підгрупі «Input» групи «Form». Рівень вкладеності необмежений.
image
Варіант угруповання в меню «Symbols»
Нікому не потрібен набір елементів-близнюків. Адже, найчастіше, зовнішній вигляд об'єктів однаковий, а контент відрізняється. Редагування контенту символу проводиться на панелі «Overrides». У ній можна легко редагувати текстові шари.
image
Зверніть увагу, у панелі «Overrides» у текстових заголовків полів правильні назви і порядок. Для цього в символі впорядковуємо шари зверху вниз і називаємо їх не контекстно, а функціонально. Тобто заголовок инпута в символі повинен бути не «Ім'я», а «Label» і стояти в самому верху.
В останніх версіях Скетчу, крім редагування текстових шарів, можна замінювати вкладені символи. Тут потрібно пам'ятати 2 моменти: символ може містити вкладені символи. Вкладені символи можна замінювати з панелі «Overrides», якщо у них однаковий розмір.
Приклад використання — навігаційна панель:
Для відображення активного пункту меню, редагуємо видимість вкладеного символу Active.
image
Як варіант, можна створити 2 символу одного розміру «Active» і «Default» і міняти їх, щоб перефарбовувати активний пункт меню.
image
Чого зараз, на мій погляд, не вистачає в Скетчі — можливості змінювати колір в текстових шарів. Тобто для того, щоб перефарбувати напис, потрібно створити для неї символ де вона чорна, і символ де напис червона, тільки після цього перемикати їх між собою. Набагато зручніше було б відразу вказувати колір тексту.
Якщо всередині символу є об'єкт залитий растрової картинкою (наприклад, автарка), то його теж можна з легкістю редагувати.
image
Правда, і тут мені не вистачає однієї системи, а саме, скопіювати растрову заливку з панелі «Overrides» і вставити в інший символ.
А ще символи, як і групи, можна робити «гумовими». У Скетчі є можливість прописати правила, за якими символ розтягується або стискається, і як при цьому повинен вести себе контент всередині. Ось 3-х хвилинне відео як це працює, від творців Sketch. Воно англійською, але там все зрозуміло.

Завдяки описаній у цьому відео можливості, в Скетчі можна робити універсальні набори елементів UI, що просто необхідно для великих проектів. Докладніше про це в наступному правилі.
Правило №2: Підтримувати сторінку з UI guide
Якщо проект припускає велику кількість розділів, форм, текстових блоків, створюється окрема сторінка, на якій збираються всі елементи. Сторінка називається «UI» і складається з 4-х артбордов:
1. Елементи форм та їх станів
image
2. Текстові стилі документа
image
3. Елементи інтерфейсу
image
4. Іконки
image
За логікою, тут повинні бути всі кольори, які використовуються в макетах, але я додаю їх в панель Document Colors, яку можу експортувати та імпортувати в інші скетч-файли, завдяки плагіну Sketch Palettes
На жаль, так і не зміг змусити себе користуватися стилями для текстів та об'єктів, т. к. їх не можна впорядкувати в меню. Як тільки стилів стає більше 10-ти, в них просто неможливо орієнтуватися. Якби розробники дали можливість впорядковувати стилі по групам (як це зроблено для символів), можливо, це було б зручно.
image
В даний час, якщо мені потрібно вставити який-небудь елемент, який вже використовувався в макеті, я відкриваю сторінку «UI» і копіюю його звідти, щоб не шукати серед безлічі артбордов. Якщо елемент не створено «UI», значить його потрібно створити і обов'язково додати на сторінку «UI».
На закінчення цього правила, повинен згадати плагін «Library», з пакету «Craft», який деякі з описаних рухів робить автоматично (збирає стилі тексту, використовувані шрифти і кольори на окремій сторінці). Але і з ним у мене не склалося. Крафт чорт-ті як впорядковує текстові стилі і зливає все в одну купу. Зручніше, коли я вручну створюю бібліотеку стилів і елементів, куди не потрапить нічого зайвого і все впорядковано за моїми правилами.
Правило №3: Правильно називати верстви і групи. Дотримуватися ієрархію
Це правило стосується не тільки користувачів Скетчу, але і працівників Фотошопа. З нашими макетами доводиться працювати верстальникам, і чим зрозуміліше вони для них будуть, тим швидше картинка стане відмінним сайтом або додатком. Для цього потрібно завжди зрозуміло називати шари, логічно групувати їх і дотримуватися послідовності зверху вниз. Тобто шапка повинна бути в самому верху, контент посередині, футер внизу і т. д.
image
та й самому дизайнеру, коли шарів стало дуже багато, зручніше в них орієнтуватися, якщо вони зрозуміло названі. Для швидкого пошуку шару у Скетчу є вбудований функціонал. Для того, щоб знайти стрілку в макеті, яку я завжди називаю arrow, достатньо написати в пошуку «arr» та Скетч покаже всі верстви і групи в імені яких є ці символи.
image
Є зручний плагін з набагато більшим функціоналом, ніж у вбудованого пошуку — Runner. Він теж може шукати шари по імені, але ще і запускати команди з меню, створювати і вставляти символи, застосовувати стилі.
image
Якщо для анимирования інтерфейсів ви використовуєте редактор Principle, то для нього також виключно важливо правильне найменування шарів і грамотне їх розподіл за групами. Але про це іншим разом.
Правило №4: Використовувати сітку. Вертикальний і горизонтальний ритми
До сіток приступаю після створення дизайн-макету сторінки. Вони призначені для упорядкування всіх елементів на артборде. Завдяки сітці створюються вертикальний і горизонтальний ритми макета. Дизайн стає упорядкованим і систематизованим. Тобто спочатку всі розробляється «на око», а в самому кінці вбудовується в сіткову систему.
У Скетчі за налаштування сітки відповідають пункти «Grid Settings...» і «Layout Settings...». Для зручності, є гарячі клавіші, які покажуть чи приховають сітку. Control + G — показати або приховати сітку, Control + L — показує або приховує лэйаут.
image
Останнім часом використовую 8-ми піксельну сітку. Детальніше про неї написано тут.
Якщо коротко, то просто використовуйте розміри кратні 8-ми пикселів. Для блоків, відступів, міжрядкових інтервалів, іконок і інших елементів інтерфейсу. Коли всі елементи підпорядковані правилом кратності 8-ми, ви отримаєте візуально логічний і послідовний інтерфейс.
Для того, щоб з восьмипиксельной сіткою стало зручніше працювати в Скетчі, є плагін nudg.it. Він дозволяє встановити, на скільки пікселів буде зміщуватися об'єкт при натисненні Shift + Arrow. Якщо вам зручніше працювати з сіткою в 5 пікселів, як чудовим Charmerstudio або геніальним Area 17, то nudg.it легко налаштувати і на пятипиксельный крок.
Підсумок:
Завдяки вищеописаним нескладним правилам і прийомам, підвищується продуктивність роботи зі Скетч. Причому, не тільки дизайнера, але і верстальника, якому макет дістанеться. Хороший дизайн починається з порядку в макетах.
P. S. Напевно, я забув згадати про якісь важливі правила. Буду разів почути їх від шановного ком'юніті в коментарях.
Джерело: Хабрахабр

0 коментарів

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