Най-добрите практики за скициране на символи (сега, когато вложените отмени са нещо)

В Tradeshift започваме да поддържаме централен документ на Sketch с всички наши символи. За да бъде добавен към този документ, трябва да има символ с определено качество. Всеки, който проектира за нас (и потенциално нашите партньори), ще се възползва от този документ, така че не искаме да разпространяваме нищо, освен най-солидните символи.

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

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

Създайте най-основния компонент, който можете

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

Вложени символи правят това малко по-нюансирано дело, но използвайте здравия си разум и ще създадете мощни, поддържани символи.

Бъдете умни за разделянето на символите нагоре и комбинирането им за лесна манипулация

Именуване на вашите символи

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

Скицата автоматично организира символите в папки, когато поставите / в името:

Зависимостите на полето за въвеждане се отстраняват в / в / папката

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

бутон / първична-Задържането на курсора
бутон / първична-инвалиди
в / вход / област / активен

Обозначавайте вложени зависимости от символи

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

Организираните символи улесняват живота ви

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

Именуване на вашите слоеве

Дайте на самите слоеве подходящи и последователни имена. Фоновете винаги трябва да се наричат ​​фон, а не да се смесват например с bg. Ако отделите символа, той трябва да остане подреден и самостоятелен обект.

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

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

Йерархия на слоевете

Поставете по правило всеки редактируем текст отгоре на вашите групи. След това, когато натиснете връщане два пъти, за да разширите група, веднага редактирате текст!

Символите ще бъдат използвани повторно, отделени и ремиксирани - те трябва да бъдат наистина добре организирани, така че всеки бързо да разбере какво се случва, когато погледне под капака.

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

Използване на вложени символи в панела за отмяна

Символи със същите размери ще бъдат налични в панела за отмяна като опция за подмяна. Това е особено полезно за иконите:

всички тези икони имат едни и същи измерения

Той е наистина мощен и за промяна на състояния:

Използвайки вложени символи, можете да създадете супер гъвкави контроли, имитиращи техните възможни състояния във всяка UI библиотека, която бихте могли да използвате (като нашата библиотека с компоненти на потребителския интерфейс в Tradeshift)

Всички те са един и същ символ:

Същият символ с наложени различни отмени

Бронеустойчиво оразмеряване

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

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

Проверете размера на Cheat Sheet на Peter Nowell

Разни съвети

Текстът трябва да бъде фиксиран

Текстът трябва да бъде фиксиран и подравнен правилно, така че когато преоразмерите символа, той да поддържа правилно позицията и подложката си. Текстът трябва да има свойство за преоразмеряване на „Resize Object“. Това нарушава корекцията на размера на задния слой, но така или иначе никога не мога да накарам това да работи надеждно.

Текстът на заместителя е възможност за подсилване на най-добрите практики

Например текстовото съдържание на нашия заместител (не името на слоя) е „НАМЕР НА ДЕЙСТВИЕ“ като пасивно напомняне за това, как трябва да се изрази микрокопията на бутон.

Проектирайте най-малката версия на символ

По-лесно е да проектирате около разтягащи се символи, отколкото да ги компресирате.

Подмяна на символи

Скицата ще замени един символ с друг и компресира / разтяга символа, за да се впише в същите размери. Ако замените символите с несъответстващи размери, можете да използвате десния бутон на мишката-> Задаване на оригинален размер, за да го поправите.

Използвайте alt + enter, за да вмъкнете прекъсване на ред върху вложени текстови обекти

Многоредова поддръжка за текст, бум!

Заключете вложени символи, за да не се показват в панела за отмяна

Заключвайки вложени символи на оригиналната табла за символи, те вече не се показват като надпис в инспектора. Благодаря на Мат Хили!

Символите трябва да се обясняват самостоятелно

Въпреки това не боли да предоставите някои предимства на по-сложните - особено ако екипът ви не е толкова запознат с тях.

Примерни файлове

В коментарите ме помолих за пример. Това все още не е нещо, което мога да раздавам, но UX Power Tools свършиха чудесна работа! Виж това.

Оставете коментар или @Lloyd в Twitter с всякакви отзиви или идеи за v3.

Ние също се наемаме в Tradeshift!