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

По-добър начин да направите бутони в скица

Бутони като теб никога досега не сте ги виждали! Вероятно.

Тази статия е актуализирана за 2019 г.! Вижте новата техника и урок тук.

Забележка: Все още можете да следвате урока по-долу, но просто знайте, че това вече не е най-оптималният начин за изграждане на бутони в Sketch.

Изтеглете този демо файл, за да следвате, или проверете UX Power Tools, за да получите целия UI комплект, конструиран с всички видове интелигентни символи точно като този.

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

Старият път

Ето как изглеждаха символите на моите бутони преди около три месеца:

Вдигнете ръка, ако страницата ви със символи изглежда така ...

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

Цветове на бутоните
Първичен, вторичен, бял
Щатски щати
По подразбиране, задържане, натиснат, деактивиран

Строго погледнато това не е лошо. Но това ще е малко главоболие по пътя:

  • Ако искам да добавя зелен бутон, ще ми трябват три нови символа ... един за покриване на всяко състояние на бутона.
  • Ако искам бял бутон със син текст, ще ми трябват три нови символа.
  • Ако искам да се отърва от рамката на всичките си бутони, ще трябва да я актуализирам на всеки символ на бутона, който съм създал.
  • Десет символа само за един компонент? ... наистина? ... това необходимо ли е?

Нов път

Ще запазя театъра и просто ще ви покажа какво създаваме първо. Моят потребителски интерфейс вече няма символи с бутони 10+.

Сега ... само едно.

Колко самотно! Това ми напомня за онази тъжна сцена от Cast Away, където Том Ханкс е сам на своя сал. РИП Уилсън.

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

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

Структура на бутоните

В този символ има три вложени символа:

  • Текстът на бутона (важно): Използваме това, за да променим това, което казва бутона.
  • Иконата на бутона (не е толкова важна): Можем да включим това, ако бутонът е в състояние на зареждане.
  • Контейнерът с бутони (най-важният): Това ни дава формата, цвета и състоянието.
Тези три символа са на път да ви взривят ума.

Текстът на бутона

Писах за това малко преди в статията по-долу, но отново ще опиша нещата за потомство:

"Защо текстът е символ?", Попита тя категорично.

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

Като бързо напомняне, Sketch ви позволява да разменяте вложени символи навътре и навън, за да ви предпази от страховитото действие „Откъсване от символа“. Най-простият (и най-често срещаният) случай на използване е за иконите: Разменете празен символ за отметка за такъв, който е отметен. Лесна работа.

Ефективно правя точно същото, но с текст. Създадох 10 стила на текст в Sketch, след което използвах тези стилове на текст, за да създам уникален символ за всеки един.

Тези текстови стилове и цветове всъщност се връщат добре към централния ми стилов лист.
Златното правило за размяна на символи
Скицата ви позволява да разменяте символи с други символи, които са с абсолютно същия размер. Тоест, ако вашите табла за символи са дори 1px по-големи или по-малки един от друг, те НЯМА да се появят в падащото меню на вашия символ (вижте по-долу). Така че трябваше да се уверя, че всички мои полета с текстови символи по-горе са с еднаква височина и ширина.

Тъй като текстът на моя бутон е вложен символ, просто избирам един от другите си текстови символи от падащото меню на моя символ, ако някога искам текстът ми да е с различен цвят. КАК ЛЕСНО Е ТОВА ?!

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

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

Иконата на бутона

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

Системата мисли! Вероятно мисля, че съм прецакал, но все още мисли!

Основната идея около "главните символи" като този бутон е, че ефективно сте подреждате всички потенциални състояния на компонентите в един символ, след което включвате или изключвате вложени вградени символи в него в зависимост от състоянието, в което се опитвате покажете.

Слоят на символа на иконата в нашия символ на основния бутон е „заместител“, който представлява състоянието на зареждане на нашия бутон (вижте по-горе).

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

Гледайте колко лесно е:

С цялото си рекултивирано време за проектиране, препоръчвам да започнете страничен шум като UX Power Tools.

Ако устата ви е агапе се чудите как имам възможност да променя цвета на иконата си, вижте тази фантастична статия на Франческо Берточи:

Безмилостно откраднах техниката от пръстите му. Мерси човече!

Контейнерът с бутони

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

В зависимост от това колко фигури искате, можете да направите всякакви различни символи на контейнера. Ето някои, които създадох:

Все още чака бутоните за ромб, за да се хванат на

За щастие всеки от тези символи е функционално идентичен. Единствената разлика е как те са маскирани (в един перфектен свят бихме могли да имаме и символи на маска, но не винаги можем да получим всичко, което искаме, нали?)

Аз също използвам тези символи на контейнери за неща като хапчета / чипсове с много подбор, така че ми харесва да има на разположение няколко различни форми:

  • Твърд: 0px радиус на границата за остри ъгли
  • Мек заоблен: Обикновено радиус на границата 2px-10px за меки ъгли
  • Закръглена: 100% радиус на границата за хубава заоблена правоъгълна форма. Те са чудесни за чипове и маркери.
  • Закръглено отляво: Това е така, за да мога да сглобя бутони в група с бутони. Това служи като заоблен бутон в лявата част на групата.
  • Право закръглено: това е точно същото като горе, но само за дясната страна.

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

Изграждане на контейнер

Всеки контейнер е изграден с два вложени символа и маска:

  • Символ на държавата: Този контейнер е навит? Притиснати? Фокусирани?
  • Цветен символ: Какъв цвят е този контейнер?
  • Маска: Каква форма е този контейнер?

-членки

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

За нещо от рода на „Hover - фокусирано“, използвайте символа Hover и символа Focused заедно. По този начин актуализирате само два символа, вместо четири.

Ето как изглеждат при включване на символа на нашия бутон:

ДОКОСНИ ГО!

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

Говорейки за отмяна на символите ...
ProTip ™
Направете набори от символи (всички състояния, всички цветове, целия текст) малко по-различни ширини един от друг. Това ще гарантира, че те не се показват в символа ви отменя заедно падащото меню. Не искате случайно да изберете „Цвят / Червен“ за състоянието на бутона, когато искате да изберете „Състояние / Задръжте“.

Цветове

И накрая, цветният слой. Това е всъщност просто символ, направен от кутия с цвят на запълване. Очарователно:

Обичам да правя куп от тези символи в различни цветове:

Това са цветовете, които придават на моя бутон прекрасен оттенък. Няма какво друго да кажа!

резюме

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

Този пълен UI комплект се предлага на UX Power Tools

Още четене:

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

Следвайте UX Power Tools в Twitter
Последвай ме в Туйтър