Ръководства за скициране

Ръководство за бързо стартиране на UX Power Tools

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

UX Power Tools е най-модерната система за проектиране на Sketch, правена някога. Това е като Bootstrap за дизайнери. Цялата упорита работа вече е свършена за вас, така че можете да се съсредоточите върху забавната част: всъщност дизайн.

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

Това ръководство за бърз старт има за цел да ви покаже основите на персонализирането и мащабирането на системата, за да съответства на вашата марка и да се впише в процеса на вашето проектиране.

Съдържание на Ръководството за бърз старт

1. Въведение: Само интро!
2. Настройка: Преди да отворите файла (ите)
3. Цветове: Персонализиране и добавяне на цветове
4. Типография: Промяна на цветовете на шрифта и шрифта
5. Символи: Въведение в символите
6. Икони: Размяна на икони и добавяне на нови
7. Полета: Персонализиране на полета за въвеждане
8. Бутони: Персонализиране на бутони
9. Други персонализации: Сенки, Scrims и други!
10. Резюме: Дишайте малко!
11. Помощ: Повече помощ + Персонализирани услуги

1. Въведение

Аз съм дизайнер на продукти на дигитална агенция на пълен работен ден и помагам да се въртя навсякъде от 12-20 дизайнерски системи и рамки годишно за нови клиентски проекти. Създадох UX Power Tools от необходимост, за да мога да бъда по-ефективен и това повиши производителността ми почти 10 пъти.

След като научите основите на системата и вземете нещата под пръстите си, ще проектирате по-точно, по-последователно и по-ефективно. Хиляди любители и професионални дизайнери по света в големи и малки компании използват UX Power Tools, за да ускорят работните си процеси.

Това Ръководство за бързо стартиране работи както за уеб системата, така и за мобилната система, така че трябва да я научите само веднъж!

Нека направим ittttttt!

23:28 EST - Тук проектираме UX Power Tools. Ляво, християнин. Точно, Джон (аз). Малко за сън, малко за бира и много маркери за бяла дъска. Не позволявайте на ризата NYC да ви заблуди. Ние живеем в Индианаполис, Индиана.

2. Настройка

Инсталирайте шрифта Open Sans

Тя е достъпна безплатно от Google, а също така идва заедно със самия пакет. Това е отбелязано в readme и Sketch ще ви уведоми също. В този момент ние просто заяждаме! Както и да е, можете да промените това по-късно, но е добре да се уверите, че е инсталирано да започне, за да не изхвърляте символите си.

Променете настройките си на Nudging

Системата е базирана на 8-пикселна решетка, така че можете да си спестите много главоболие, като промените настройките си на натискане от 10px на 8px.

...

Всичко инсталирано? Чудесен!

3. Цветове

Това е най-добрият начин да започнете, така че уместно наречихме страницата „Започнете тук“. Доста е трудно да объркате това, хора :)

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

Style Stacks ™

UX Power Tools използва малък трик за ефективност, наречен Style Stacks ™ (висящ патент), за да направи супер лесно да се актуализират групово много актуализации много стилови слоеве наведнъж. Онези цветови блокове, които виждате в артборда „Задайте цветове и шрифтове тук“, всъщност са купчини правоъгълници, всеки с различен стил на слоя, приложен към него. Това ни позволява бързо да актуализираме всички тези стилове на слоя едновременно. Удобен!

Как да персонализирате цветовете

Етап 1
Щракнете и плъзнете, за да изберете блока от цветове. Обичам да започвам с основния си цвят на марката, така че ще избера „Основен“. Не просто щракнете върху блока. В този стек има множество правоъгълници и трябва да ги изберете всички.

Заключих всички етикети, така че не е нужно да се притеснявате дали случайно изберете текста!

Стъпка 2
Вижте как инспекторът показва запълване, граници и вътрешни сенки? Това е така, защото в този стек стил има правоъгълници, които имат един или повече от тези атрибути. Изберете цвят и актуализирайте всяка от тези стойности на цвета. Обичам да отивам отдолу нагоре, защото този подбор на цветове може да попречи:

Няма да видите цвета на промяна, когато промените Вътрешните сенки и рамката, защото те се променят под най-горния правоъгълник. Но не се притеснявайте, те все още се променят!

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

Актуализация на скицата (31.08.2018 г.):
Актуализирането и синхронизирането на стилове е преместено в падащото меню за стил. Просто щракнете върху „Актуализиране на стила на слоя“, за да запазите промените в цвета си :)

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

Ей виж, нашия цвят! Стиловете на слоевете Palette / UI / Fill най-често се използват в цялата система, но също така ще видите, че стиловете на границите са актуализирани, ако отворите падащото меню на стиловете на слоя в инспектора. Тези стилове са полезни на страницата със символите. Ще стигнем до тях по-късно.

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

  • Основно: Вашият основен цвят на марката
  • Вторичен: Вашият вторичен цвят на марката (ако имате такъв)
  • Активен: Това използвам за отметки, радиостанции и други активни състояния. Склонен съм да използвам основния цвят на марката за това, но не е нужно.
  • Акцент 1: Вашият "успех" цвят
  • Акцент 2: Вашият „предупредителен“ цвят
  • Акцент 3: Вашият "грешка" цвят
  • Черен: Вашата база черна. Препоръчвам да използвате тонирано черно (вижте често задавани въпроси)
  • Бяло: Вашата основа бяла. Обикновено просто използвам #FFFFFF, но бежовото също е готино.

Често задавани въпроси

Защо не се актуализираха цветовете на текста ми, когато синхронизирах промените си в цвета?
Текстовите стилове и слоевете на слоевете са различни. Ние просто актуализираме стиловете на слоевете в тази стъпка. Не се притеснявайте, в следващия раздел ще стигнем до текстовите стилове.

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

Какво означава „Капка цвят за черно“?
Рядко използвам чисто черно (# 000000), когато проектирам. Вместо това обичам да използвам черно, което е оцветено към основния ми цвят на марката. Този правоъгълник за капка цвят е основният ви цвят с 80% чист правоъгълник върху него. Добре изходно място за оцветяване на черно оцветено.

Защо само 8 цвята?
Не го усложнявай. Аз препоръчвам използването на цвят много преднамерено в потребителския интерфейс, така че рядко има нужда от повече цветове от този. Това не е трудно правило, но ми работи! Чувствайте се свободни да добавите още. Което ни довежда удобно до ...

Как да добавите още цветове

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

  1. Плъзнете, за да изберете съществуващ цветен стек, както преди.
  2. Копирайте съдържанието на стека с Command + C.
  3. Поставете това копие на стека някъде върху цветното табло.
  4. Актуализирайте цветовете както преди, но все още не синхронизирайте.
  5. Групирайте този стек стил (това ще улесни преминаването през всички елементи в стека). Сега влезте в групата от стилове и изберете горния правоъгълник. Отидете до падащото меню на стилове на слоя в инспектора и превъртете до самата дъна. Изберете „Създаване на нов споделен стил“. Дайте му ново име.
  6. Повторете стъпка 5, докато не създадете нови стилове на слоеве за всеки правоъгълник в новата си група от стикове. Когато приключите, можете да го разгрупирате, така че да е лесно да ги плъзнете по-късно.
  7. Свършен! Ще създадем цветни символи за тях по-късно в раздел 5: Символи.
Вижте онова прекрасно синьо, което току-що добавих. Не забравяйте да копирате и поставите целия стик.

4. Типография

Типографията дава глас на приложението ви, така че в този раздел ще научите как да персонализирате шрифта.

Удобно е, че можем да направим всичко от една и съща страница („Започнете от тук“), където сме персонализирали нашите цветове:

Първо най-важното. Това не е грешка:

Точно както с нашите цветове, ние използваме стековете стилове, за да ни помогне бързо да променим няколко стила на текст наведнъж. Така че въпреки че изглежда, че променяте само 18 стила на черния текст, в определени случаи всъщност променяте 72 текстови стила от различни прозрачни страници и подравнения:

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

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

Как да персонализирате шрифта

Етап 1
Плъзнете, за да изберете целия текст на таблото „Start Here“:

Може да изостане за секунда, защото избирате толкова много слоеве. Няма проблем!

Стъпка 2
Изберете нов шрифт в панела за инспектори. Бъдете внимателни със стрелка през шрифтове в падащото меню. Ако срещнете шрифт, който няма смели вариации, тогава той ще се отърве от теглото на шрифта „Bold“ за стиловете на текста, завършващи на „… 2“, и няма да видите удебелен текст във целия текст на таблото. стилове, докато продължавате да стреляте през шрифтове.

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

Стъпка 3
Синхронизирайте промените си и сте готови! Ако сте го направили правилно, ще видите актуализацията на вашия шрифт в целия файл:

Актуализация на скицата (31.08.2018 г.):
Актуализирането и синхронизирането на стилове е преместено в падащото меню за стил. Просто щракнете върху „Актуализиране на стила на слоя“, за да запазите промените в цвета си :)

Често задавани въпроси

Какви са стиловете „… 2“ текст?
Те са смелата версия на своите колеги. Използваме число, така че да е отворено за всичко, което искате. Понякога за този стил се използват полу-смели, средни или черни.
Как мога бързо да променя стилите на смели текстове, за да бъда повече / по-малко удебелен?
В списъка със слоевете потърсете “2” (поставете интервал преди 2-те), изберете всички текстови слоеве и след това променете теглото на вашия шрифт в панела Inspector. Sync!
Какво е с тази конвенция за наименование „Малка, надпис, тяло…“?
Тези имена са само за припомняне. Това означава, че не е нужно да използвате „Body“ за текста на тялото. Когато изградихме системата, традиционните имена на размери „XS, S, M, L, XL, XXL“ бяха трудно запомнящи се, затова избрахме да им дадем имена. Чувствайте се свободни да ги промените, ако желаете!
Какво означава Normal, Secondary и Disabled в текстовите стилове?
Това са различни нюанси на цвета на този текст. Нормалното е 100% непрозрачно, Вторичното е 50% непрозрачно, а Disabled е 25% непрозрачно. Прозрачностите са предпочитани, защото ако ги използвате върху цвят, те ще бъдат оцветени към този цвят. Пример: 50% прозрачен бял текст на червен фон ще изглежда леко розов. Над синьо, ще бъде светлосиньо.
Актуализирах шрифта си и сега компонентите обвиват линии!
Не се притеснявайте! По-голямата част от компонентите в системата имат подравнени текстови символи, така че всичко, което трябва да направите, е да направите своя компонент малко по-широк. Щом текстът вече не се увива към нов ред, вашият компонент ще има дори подплънки от двете страни.
Актуализирах шрифта си и сега ТЕКСТНИТЕ СИМВОЛИ са опаковане на линии!
Това всъщност не нарушава нищо! Това е просто козметичен страничен ефект от някои шрифтове, които имат по-широко ядро. Не правете текстови символи по-широки. Ако това наистина ви притеснява, просто променете стойността на текстовия символ (и) на нещо по-кратко като "..." или "abc".
Актуализирах шрифта си и сега текстът не е вертикално центриран в символ (и)!
Трябваше да сме малко умни с начина, по който са създадени текстови символи (следващ раздел), така че актуализирането на шрифта да е възможно най-лесно и безболезнено. Понякога, когато актуализирате шрифта, текстовите слоеве в съпътстващите текстови символи ще се изместят нагоре или надолу във вътрешността на таблото за символи, изхвърляйки вертикалното подравняване. Просто приведете текста в центъра на таблото или символите и всичко трябва да се върне към нормалното.

Промяна на цветовете на текста

Етап 1
Плъзнете, за да изберете колона от стилове на текст, изберете вашия нов цвят:

Стъпка 2
Синхронизирайте промените си!

Стъпка 3
Продължете да правите това за всички останали колони от стилове на текст. Обикновено просто капка цвят от правоъгълници над всяка колона.

Стъпка 4
Свършен!

Символи

Всеки отделен слой в UX Power Tools е обвързан или със стил на слоя, с текст или със символ. Както в CSS, всичко е централизирано, така че ако някога се налага да правим актуализации в нашата система, е лесно да ги синхронизираме през целия ни дизайн.

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

Цялата система е изградена с помощта на ЧЕТИРИ категории символи:

1. Текстови символи
Скицата ви позволява да презаписвате текстовата стойност на символа, но няма да ви позволи да презаписвате текстови стилове, използвани в този символ. Така че текстовите символи са умно решение за това ограничение. Тъй като можем да отменяме и разменяме вложени символи, създадохме символи от всеки от нашите стилове на текст, за да ни позволим да променим стила на нашия текст. Пример: Искам да използвам тъмен текст върху бутон със светъл фон и светъл текст върху бутон с тъмен фон. Вложени текстови символи ни позволяват да направим това! Вижте ги в действие по-долу:
2. Символи за попълване и граница на цветовете (известни още като „Mixins“)
Отмяна на символите ще бъде най-добрият ви приятел в UX Power Tools, а символите за запълване / граница ще променят живота ви. Точно както текстовите символи ни позволяват да отменим стила на текст на символ, цветните символи ни позволяват да отменим запълване и граници. Всеки път, когато мислите, че използвате или създадете символ, който може да промени цвета си, най-добре е да използвате вложен цвят символ. Вижте ги в действие по-долу:
3. Символи на контейнера
Контейнерите дават елементи като бутони, значки и чипове по своята форма. Те са изградени с помощта на цветни символи, символи на държавата и маски. Променете формата на компонент или състоянието на текстово поле, като замените контейнера му. Вижте ги в действие по-долу:
Променете формата на бутон, като промените замяна на контейнера.Добавете състояние на задържане към поле, като промените контейнера на „Задръжте“.Показвайте други състояния на текстовото поле, като изберете типа контейнер „Граница“.
4. Символи на държавата
Символите на държавата ви помагат да добавите усещане за взаимодействие с компоненти като бутони, чипове и значки. Те винаги са вложени в друг символ върху цветово запълване, защото използват режими на смесване, за да изсветлят, потъмнят или десатурират цвета на компонента. Всеки компонент, използващ символ на контейнер, автоматично ще "наследи" състояния, тъй като са вложени вътре в самия контейнер символ. Забележка: Щатите са чисто козметични, за да покажат на разработчиците как трябва да изглежда състояние на задържане / натискане / фокусиране. Тъй като използваме режими на смесване, разработчиците няма да могат да използват Zeplin или InVision Inspect за тези състояния. Вместо това препоръчвам те да използват функции за изсветляване () и потъмняване () в LESS или Sass, за да постигнат тези резултати в код.

Често задавани въпроси

Как да добавя нови пълнежи, така че да са налични в падащото / ите?
Дублирайте една от дъските на Mixin / Fill на страницата Symbols, изберете нов цвят за правоъгълника, след което добавете стил на слоя за вашия нов цвят. Добавянето на стила на слоя не е задължително, но препоръчваме винаги да използвате стилове на слоевете, така че да е бързо да се актуализира по-късно, ако в крайна сметка го използвате на няколко места. Внимание: Не променяйте размера на тази платка. Той трябва да бъде с точно същия размер като всички други полета на Mixin / Fill, за да се появи в падащото меню на панела за инспектори.

Икони

Иконите вероятно са най-досадната част от комплекта, но в крайна сметка ще ви спестят много време в дългосрочен план. Използвайки тази техника, ние правим нашите маски за икони, след което поставяме символ Mixin / Fill върху нея.

Тъй като Sketch ни позволява да отменяме символите, можем да заменим цвета на тази икона с всеки цвят, който сме добавили като символ!

Как да разменяте икона

Смяната на икони е супер лесна с помощта на панела за отмяна в инспектора:

Можете да промените цвета му, като използвате падащото меню под иконата.

Как да добавите икона

  1. Дублирайте съществуваща икона, след което изтрийте слоя на маската.
  2. Поставете новата си икона и се уверете, че създавате един-единствен път. Можете да направите това с Layer → Combine → Union или Layer → Combine → Difference.
  3. Премахнете всички запълвания на пътя към иконата. Без пълнеж!
  4. Поставете пътеката на иконата си под слоя „Цвят“.
  5. Направете иконата маска (натиснете Control + Command + M).
  6. Свършен!

Често задавани въпроси

Това отнема завинаги.
Тя не е оптимизирана в началото, но ще спечелите цялото това време в дългосрочен план. Promise.
Има ли по-бърз начин?
Не че знам. Ако някой иска да направи набор от икони от маски, това със сигурност ще направи този процес много по-бърз!
Поддържа ли този метод на икони в Zeplin, InVision, [dev handoff tool]?
Обикновено изпращам на своя екип (и) за разработка действителния шрифт на иконата и / или SVG спрайт, така че не се притеснявам за това твърде много. Това каза, Zeplin върши чудесна работа при четене на цветни отмени и обикновено ви позволява да експортирате SVG файлове просто.
Моята икона не се показва в падащото меню на иконата!
Уверете се, че таблото за икони е със същия размер като всички други полета за икони. Ако не е, няма да се покаже.

Полетата

Полетата (или входовете ... каквото ви харесва) са съставени от две основни части: контейнер и малко текст. И контейнерът, и текстът са символи, така че лесно да ги преодолеем, за да отговарят на различни ситуации.

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

Персонализиране на полета

Ако искате да промените формата или стила на текстово поле, по-голямата част от работата трябва да се извърши върху символа (ите) на Mixin / контейнер / поле:

  • Без полета: Отстранете слоя „Border“.
  • Полета със сянка: Добавете сянка към слоя „Маска“.
  • Полетата на твърд ъгъл: Задайте радиуса на границата на символите Mixin / Border и маската Container / Field на нула.
  • Поле за проектиране на материали: Направете полета в твърди ъгли, след това променете слоя „Граница“ на Mixin / Border / Bottom-Active. Ще трябва да създадете друг символ на микса на долната граница за състоянието по подразбиране.

Често задавани въпроси

Каква е иконата „Resizer“?
Това е, когато се опитвате да представите текстова област. Чувствайте се свободни да изтриете това, ако не мислите, че ще ви трябва.
Мога ли да изтрия символа „Курсор“?
Сигурен! От време на време го намирам за полезно, но зависи от вас.

Бутони

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

Най-добрият трик за осигуряване на перфектно подплащане е 1px Nudge ™. Просто оразмерете бутона си до горе, докато текстът започне да се увива, след което го направете 1px по-широк:

Перфектно подплънки!

UX Power Tools също има центриран бутон, в случай че искате да го използвате в долната част на модален (или нещо подобно):

Персонализиране на бутони

Ако искате да промените формата или стила на бутон, по-голямата част от работата трябва да се извърши върху символа (ите) на Mixin / Button:

Ние свършихме по-голямата част от работата, за да ви дадем куп форми за бутони, от които да избирате, но ако искате вашата форма на бутон по подразбиране да е по-кръгла или по-твърда, сменете маската на Mixin / Button / Fill.

Често задавани въпроси

Как да добавя сянка към бутона си?
Изберете слой Mask в контейнер Mixin / Button на страницата Symbols и добавете сянка. Не забравяйте да направите всички контейнери с бутони.

Други персонализации

На страницата „Започнете от тук“ има съвет за „Настройка на други неща тук!“ Тук можете да коригирате неща като сенки и скриптове.

Персонализиране на твърди скриптове

Когато персонализирате цветовете си на страницата „Започнете от тук“, черните и цветни скриптове автоматично ще се променят за вас. Чувствайте се свободни да играете с нивото на прозрачност, докато намерите нещо, което харесвате. Поставям ги върху някои фонови изображения, за да ви помогнат да измерите четливостта.

Персонализиране на Gradient Scrim

Ще трябва да актуализирате градиента скрем на ръка. Точно така, ръчно изработен скрем. Харесва ми да наклонявам градиентна криза от 50% от основната ми черна, до 0% от основната ми черна.

Персонализиране на сенки

Има 6 нива на сенки, от които можете да избирате. От вас зависи да решите кога и къде искате да ги използвате, но Material Design има няколко страхотни идеи около използването на сенки, тъй като се отнася до „цифров материал“.

Винаги се застъпвам за използването на основния ви черен цвят за сенките ви вместо чисто черно: # 000000 (Вдъхнових се от статията на Ian Storm Taylor от 2012 г. Това ще даде на приложението ви по-меко усещане и сенките няма да изглеждат толкова сурови. Актуализиране на тях всичко наведнъж е бързо:

  1. Изберете основния си черен цвят и копирайте шестнадесетичната стойност.
  2. Маркирайте всички 6 от блоковете на сенките.
  3. Отворете инструмента за избор на цвят на сенките и го поставете в шестнадесетичната си стойност.
  4. Натиснете Enter.
  5. Синхронизирайте и готово!
Не трябваше да синхронизирам тук, защото вече използвах основния си черен цвят.

Обобщение

Поздравления за получаването на най-бързата система за дизайн, налична за Sketch! Знам, че всичко това изглежда доста завладяващо, но трябва само да направите толкова персонализиране, колкото искате. Честно казано, смятаме, че изглежда доста добре извън кутията. Разменете някои цветове и е добре да отидете.

Кой трябва да го използва?

  • UX дизайнери
  • UI дизайнери
  • Мениджъри на продукти (за по-прецизна телесна рамка)
  • Разработчици (които не искат да се забъркват с дизайн)
  • Предприемчиви изпълнителни директори (защото защо не?)

Все още нямате системата?

Посетете нашия сайт, за да прочетете повече за нашите две дизайнерски системи (уеб и мобилни), изтеглете демонстрация или вземете и двете от тях по-долу. Всяка система се предлага с безплатен хабитат от 70+ уникални типа диаграми (в тъмни и светли теми), така че следващият път, когато шефът поиска „секси табло като тези, които виждам на Dribbble“, няма да изтъркате очите си напълно от вашия глава

Все още имате нужда от помощ?

  • Кажете здрасти на имейл: hello@uxpower.tools
  • … Или Twitter
  • … Или Facebook
  • … Или LinkedIn

Искате ли система за дизайн по поръчка?

Ако всичко това изглежда твърде сложно или ако мигрирате от друго приложение (Illustrator, Photoshop, Axure, Adobe XD и др.), Нека да ви помогнем! Застреляйте ни имейл и ще помогнем на екипа ви да се активира и работи за нула време.