Как да направите страхотни телени рамки в Sketch

(Тази публикация беше първоначално публикувана на alexanderskogberg.com)

През последните години Sketch се издигна до един от най-добрите редактори за векторна графика сред дизайнерите. Използвам го няколко пъти седмично на работа и го обичам! Ето моите съвети за създаване на страхотни телени рамки в Sketch.

Когато започнах да работя като ИТ консултант през 2011 г., моите колеги дизайнери използваха различни редактори за векторна графика. Днес почти всеки от тях използва изключително Sketch.

Ако правите телени рамки, създаването на ръководство за стил или рисуване на илюстрации е идеалният инструмент! Той е популярен, не е претоварен с функции и струва много по-малко от редактори като Photoshop.

Ето моите най-добри съвети при изработката на телени рамки в Sketch.

Организирайте екраните си със Страници и Дъски

Тъй като вашите телени рамки растат, поддържането на всички екрани организирани е от съществено значение за поддържането на ефективност. Следователно, трябва да използвате Страници и Artboards.

Създайте страница за всеки набор от свързани екрани

В Sketch, Page предлага ново празно платно. Няма причина да поставяте всичките си екрани на една и съща страница. Вместо това създайте страница за всеки набор от свързани екрани на приложението или уебсайта, за които правите телени рамки.

Ако правех телени рамки за уебсайт, където купувате плюшени животни, бих създал следните страници:

  • Работно пространство (работна маса за създаване на каквото ви трябва)
  • Активи (за лога, снимки и т.н.)
  • Текстови стилове (само за моите текстови стилове)
  • Символи (създадени автоматично от Sketch)
  • Начална страница (за най-новите оферти и новини)
  • Страница с категории (за различни категории плюшени животни)
  • Страница на продукта (за конкретно пълнено животно)
  • Страница за плащане (за въвеждане на адрес и информация за плащане)
  • Страница за потвърждение (за потвърждаване на покупката)
Списъкът на страниците. В дъното са посочени дънните платки за избраната страница.

На страница създайте по една Artboard за всеки вариант на екрана

Тъй като на всеки екран вероятно има няколко варианта, препоръчвам да създадете по една Artboard за всеки от тях. Всички създадени от вас Artboards автоматично се поставят на избраната страница.

Когато създавате нов Artboard, можете да зададете неговата ширина и височина по ваше желание, но Sketch предлага и предварително зададени настройки, базирани на популярни устройства и резолюции на екрана.

Какъв вариант на екрана е, зависи от вас. Обикновено правя варианти за различни размери на екрана и за да покажа как дизайнът на взаимодействието трябва да работи подробно.

За страницата за пазаруване на уебсайта за пълнени животни, бих създал Artboards за следните варианти на екрана:

  • Няма въведена адрес или информация за плащане (за малки и големи екрани)
  • Правилно въведен адрес и информация за плащане (за малки и големи екрани)
  • Неправилно въведена информация за адрес и плащане (за малки и големи екрани)
Artboards за избраната страница се поставят върху основното платно.

Когато става въпрос за именуване на Artboards, препоръчвам да използвате модела за имена номер-номер-модификатор-размер.jpg. Използвайки този модел, по-вероятно е членовете на вашия екип да могат да идентифицират съдържанието на изнесен Artboard, без да се налага да го отварят.

Ето няколко примера:

  • касата-01-подразбиране-small.jpg
  • касата-02-доставка-търсене на адрес-small.jpg
  • касата-03-правилното плащане-информационно-small.jpg
  • касата-04-неправилно плащане-информационно-small.jpg
Съвет: Уверете се, че експортираната Artboard е идентифицирана по нейното име. Име като чек-03-правилно-плащане-информация-малък.jpg е страхотно, име като screen21.jpg е ужасно.

Използвайте текстови стилове

Ще използвате текст до известна степен във вашите телени рамки и когато трябва да коригирате размера на шрифта или да промените изцяло шрифта, това е огромна загуба на време и енергия, за да го направите на всеки екран.

За щастие, Sketch предлага възможност за запазване и повторно използване на вашите решения за дизайн, използвайки текстови стилове. След като текстовият стил е запазен, той може да бъде приложен към нови части от текста. Ако промените текстов стил, той ще се отрази на всички части текст, използвайки този стил на текст.

Всеки път, когато започна да работя върху нов проект, създавам текстови стилове за общи части от текст като:

  • H1 заглавие
  • H2 заглавие
  • H3 заглавие
  • Основен текст
  • Мета текст (за дати, часови отметки, съвети за въвеждане и т.н.)
  • Етикети за въвеждане (за полета за въвеждане и групи от радио бутони и квадратчета)
Винаги поставям текстовите си стилове на собствена страница, така че да ги виждам наведнъж.

Създайте конвенция за именуване

Точно както уеб разработчиците (да се надяваме) да имат набор от правила за именуване на техните CSS класове, вие трябва да създадете конвенция за именуване на страници, дъски, символи и текстови стилове, които ще използвате.

Добре е да използвате същото (или много подобно) споразумение за именуване, което разработчиците използват. Ако споделяте вашите телени рамки с помощта на инструменти като Zeplin, ще има по-малко объркване и второ гадаене, ако всички използвате едни и същи имена за едни и същи компоненти.

Например, ако вашият екип за разработка е определил CSS класа за оформяне на основните бутони на уебсайта „бутон първичен“, трябва да използвате това име, вместо нещо като „призив за действие“.

Съвет: Представете си, че създавате конвенция за именуване за някой друг, а не само за себе си. Попитайте някой друг дали вашата терминология има смисъл.

Ако търсите пример от реалния живот на конвенция за именуване, погледнете ръководството за Trello CSS или BEM.

Овладейте силата на символите

Символите е може би най-добрата функция в Sketch. Като текстови стилове, но за всички комбинации от форми и части от текст. Той е мощен и ще ви спести много време в дългосрочен план.

Съвет: Запазете лога и икони като символи.

Например, да кажем, че създавате поле за въвеждане с етикет и подсказка и искате да го използвате повторно на повече екрани. Съхранявайки тези три елемента като един символ, той вече се съхранява във вашата библиотека и може да се използва по всяко време.

Ако вашият символ съдържа текст, можете да замените частите от текста за всички екземпляри на този символ. Промяната на текста (а не неговия дизайн) няма да засегне останалите случаи.

Символ на поле за въвеждане с етикет, подсказка и текст за въвеждане. Частите от текста могат да бъдат отменени за всеки случай на този символ. Съвет: Въведете черно интервал, за да „скриете“ текстовия низ.

Ако по-късно редактирате този символ, промените ще засегнат всички негови инстанции.

Наименувайте вашите символи с наклонени черти

Тъй като вероятно ще създадете много символи, трябва да поставите наклонени черти (/) в техните имена, за да ги организирате добре.

Когато поставите наклонена черта в имена на Symbols, Sketch автоматично ще създаде подгрупи от тях, като улеснява намирането на тези, които търсите.

Препоръчвам да използвате тези два модела на именуване:

  1. категория / вид / състояние
  2. категория / тип / вариант състояние
Съвет: Придържайте се към максимум две наклонени черти, така че да имате само дълбочина от три слоя (което е работило най-добре за мен досега).

Ето няколко примера за именувани символи въз основа на тези два модела:

  • бутон / първичен / по подразбиране
  • бутон / първичен / инвалиди
  • бутон / вторични / по подразбиране
  • бутон / вторични / инвалиди
  • входно / nolabel / по подразбиране
  • вход / етикет / по подразбиране
  • вход / етикет / с увреждания
  • входно / labelandhint / по подразбиране
  • входно / labelandhint / инвалиди
Подпапките Sketch създава, когато поставите наклонени черти (/) в имената на създадените от вас символи.

Създайте библиотека от общи символи

Скицата предлага общи форми като правоъгълници, кръгове, триъгълници и стрелки. Не е необходимо да ги преначертавате, но трябва да ги използвате за създаване на общи компоненти на интерфейса като бутони, полета за въвеждане, избор на дата и модални прозорци.

Например, винаги създавам символи на общи компоненти в различни състояния като:

  • Основни бутони (по подразбиране и деактивирани)
  • Вторични бутони (по подразбиране и деактивирани)
  • Отметки с текстови етикети (отметнати и не маркирани)
  • Радио бутони с текстови етикети (маркирани и не са отметени)
  • Разширяеми блокове (разширени и не разширени)
  • Полета за въвеждане с етикет (по подразбиране и забранено)
  • Полета за въвеждане с етикет и подсказка за въвеждане (по подразбиране и забранено)

Има много готови компоненти на интерфейса, които можете да изтеглите и използвате безплатно, но бих препоръчал да създадете своя собствена библиотека. Ще научите повече за използването на Sketch и ще получите по-малко неизползвани символи.

Скицата на страницата със символи се създава автоматично, когато започнете да създавате и запазвате символи.

Направете вашите символи отзивчиви

Когато правите телени рамки днес, вероятно ще трябва да създадете различни варианти на вашите екрани за различни размери на екрана. Един вариант за малки екрани, един за големи екрани и може би един за средни екрани.

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

За щастие, Sketch се справя отлично с това! За всеки елемент, включен в символ, можете да настроите как ще се държи, когато символът е разтегнат, като използвате контрола в колоната със свойствата вдясно.

Ето някои от настройките, които можете да направите за избран елемент в символ:

Ще се разтегне във всяка посока.Ще запази размера си, но се движи със същите пропорции към страните, към върха и отдолу.Прикован до върха. Ще разтегне ширината си, но запази същата височина.Прикачен към горния ляв ъгъл. Ще запази размера си.

Представяне на телените рамки

Когато представяте вашите телени рамки на разработчиците във вашия екип, имате няколко възможности.

Някои разработчици предпочитат да гледат директно файла на Sketch, други предпочитат вашите екрани да бъдат експортирани към изображения, а някои предпочитат инструменти за създаване на прототипи за кликване, като InVision.

Съвет: Отнасяйте се към разработчиците във вашия екип като към потребителите. Сервирайте им вашите телени рамки по начина, по който предпочитат.

Ако InVision ви звучи интересно, моля, прочетете моя прототип на пост като професионалист с inVision.

Не използвайте слоеве във вашите Sketch файлове

Въз основа на моя опит в работата с разработчици, не бива да използвате слоеве на екраните си в Sketch. Мисля, че този начин на работа беше норма, когато Photoshop царува върховно.

Повечето разработчици, с които съм работил, намират за досадно да се крият и показват много (често с лошо име) слоеве, за да научат как екрана изглежда и се държи. Вместо това, просто използвайте повече Artboards за представяне на различните варианти на екрана.

Допълнителна информация

Вече са написани много страхотни статии за използването на Sketch. Ето моите фаворити:

  • Чувствителен дизайн в скица - Част 1 от Емин Инанк Улу
  • Разгръщане на пълния потенциал на символите в скица от Хавиер „Симон“ Куело
  • Най-добрите практики за скициране на символи (сега, когато вложените отмени са нещо) от Lloyd Humphreys

Има ли нещо, което мислите, че трябва да добавя, премахвам или променя в тази публикация? Уведомете ме в секцията за коментари.

О, между другото! Ако този тип телени рамки е прекалено много за вашия проект, моля, прочетете новата ми публикация „Как хартиената рамка ще ви направи по-добър дизайнер“.

/ Алекс