Design Systems + Sketch - Как да започнете подготовката на библиотеката за компоненти на потребителския интерфейс

И накрая, Design Systems се превърна в индустриален стандарт. Ето защо е изключително важно да знаем как да ги подготвим за нашите проекти. Ако сте като мен и създавате вашите цифрови дизайни най-вече в Sketch, тази история съдържа куп съвети, за да подготвите там компоненти на потребителския интерфейс за вашата система за проектиране.

Забележка:
Обичам да изяснявам нещата. Като създател на UXMisfit.com, моят приоритет е да помогна на дизайнерите, като ги вдъхновя с малко по-различен поглед върху UX и подготвяне на инструменти, спестяващи време.

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

Може да намерите и комплекта Design System Kit - той се нарича Prime. Той съдържа повече от модерната UI Design System за Sketch. С изключение на стотици персонализиращи се елементи, тя включва илюстрационна система, Web UI Kit, диаграми и векторни шаблони на основните устройства.

Независимо от Prime Design System Kit, всички съвети, споменати в историята, работят, дори ако решите да подготвите UI Components самостоятелно.

В началото имаше хаос ...

Няма значение дали започвате да подготвяте компоненти за Design System в началото на нов продукт или ако решите да го включите в съществуващия няколкогодишен проект. Винаги е предизвикателно решение, ако го вземете за първи път, защото трябва да убедите други хора (не само дизайнери) в идеята за създаване на система. Нека да разгледаме как можете да направите различни хора по-ентусиазирани от Design Systems:

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

Разработчици - благодарение на системата за проектиране те ще могат да подготвят компоненти по-рано и да използват техните копия на множество страници. Поддържането на консистенцията на дизайна ще бъде много по-лесно. Разработчиците няма да трябва да мислят дали този син бутон трябва да има смело шрифтово лице или сянка - те просто ще използват правилния компонент (Основен бутон).

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

Добре, ако вашият екип е готов, нека вземем чаша кафе и стартираме Sketch!

Имате ли съществуващ проект? Направете неговия инвентар.

Ако не сте подготвили някаква дизайнерска система или собствен UI Kit за текущия си проект, първата стъпка, която трябва да направите, е да проверите всички съществуващи елементи. Вероятно ще намерите множество екземпляри от елементи, които се различават малко, но това ще трябва да се поправи.

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

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

Но ... Библиотеките за скици не са системи за дизайн?

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

Много библиотеки са първоначалните искри на Design Systems. Има и методи за приготвяне на живи системи от тях, но това ще бъде разгледано в следващите глави.

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

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

Изграждане на библиотека за компоненти на потребителския интерфейс за система за проектиране

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

Частици

Говорейки за атомния дизайн. Преди да скочите в създаването на основните компоненти на потребителския интерфейс, е необходимо да се установят частици.

Цветове

Добре е да започнете с цветове, защото всяка марка има своя собствена палитра. Не забравяйте да установите добра конвенция за именуване. Добре е да посочите кой тон е първичен или вторичен и тези за елементи Успех, Предупреждение или Грешка. Не позволявайте на вашата система да включва само „синьо“ или „лилаво“, важно е, тъй като всеки цвят има своето значение. Правилното именуване ще позволи на вашия екип да разпознае целта на цвета.

Съвет: За да оптимизирате персонализирането на стила и границата. Създайте Shape Layer със споделен стил, съдържащ само запълване, след което създайте такъв в абсолютно същата позиция и размер, който включва само споделения стил с граница. Fill и Border трябва да имат същия цвят. Ако добавите и слоеве за форми със стилове, които се различават само с непрозрачност наблизо или в същото положение, ще можете да актуализирате стила изключително бързо. Просто ще трябва да изберете слоевете на формата, да актуализирате два параметъра (запълване и рамка в десния страничен панел на Sketch) и да актуализирате споделени стилове.

Цветна настройка в Prime Design System Kit

Градиенти и наслагвания

Някои казват, че градиентите са новите цветове. Ако разглеждате Dribbble или Behance, ще забележите, че много кадри ги включват. Ето защо вашата библиотека на системата за проектиране трябва да има подготвения комплект за проекта.

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

За щастие, от Sketch 52+ не е необходимо да се подготвят специални платки за цветове, градиенти и др. Всичко е в отменените стилове и символите на споделения слой.

книгопечатане

Системата за добра типография е съществена част от всяка UI Framework, която е част от по-голямата система за проектиране. Когато създавах Кита, подготовката на този елемент отне огромно време. Ако решите да създадете своя типография, не забравяйте да включите поне следните стилове:

  • черно
  • бял
  • сив
  • Основен (с Основен цвят на вашата система)

Би било хубаво да имате и:

  • успех
  • Внимание
  • грешка

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

Сега, нека се потопим в мащаба и размера. Има няколко метода, чрез които можете да определите това свойство по време на системата за типография. Реших да вдъхновя тези, включващи Prime от Apple и да се разширя с модерната уеб тенденция (огромни заглавия и т.н.). Благодарение на тази здрава основа може да сте сигурни, че системата ще работи и типографията ще има добра четимост на мобилни и настолни компютри.

Ако искате да имате правилно оразмерена типографска скала, можете да намерите https://type-scale.com полезна. Просто изберете Base Size, Scale Type и настройте примерен шрифт и играйте около настройките.

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

За да осигурите най-добрата използваемост на типографията, използвайте следното споразумение за именуване:

[Име на размер] / [Подравняване] / [Цвят] / [Стил]

Ако имате повече от едно семейство шрифтове във вашата система:

[Име на размер] / [Семейство на шрифтовете] / [Подравняване] / [Цвят] / [Стил]

Например:

Заглавие / Център / Черно / Bold

Заглавие / SF Pro / Център / Първично / Ляво

Можете също да разделите типографските системи на отделни файлове и да ги направите споделени библиотеки.

Съвет: За оптимизиране на персонализирането на типографията. Поставете всички елементи (от едноцветна настройка) в една колона. Подравнете слоевете, съдържащи различните стилове на подравняване (вляво, в центъра, вдясно) един върху друг. Благодарение на това ще получите единичната колона с типография. Това ще ви позволи да промените шрифта или неговия стил, като изберете групата и ги актуализирате заедно. Много по-бързо и удобно е от подготовката на параметрите за всяко подравняване поотделно.

Настройка на типография в Prime Design System Kit

Мрежи и оформления

Подготовката на мрежовата система не само ще осигури последователност, но и ще ускори по-късната ви работа. Вашата мрежа трябва да бъде универсална - популярният избор е да настроите 8-точкова решетка. Това ще гарантира, че потребителският ви интерфейс ще работи добре на Desktop, Tablet и Mobile.

IpСъвет: За да ускорите работната си настройка с голямо натискане (Shift + Arrow) в Sketch до размера на вашата мрежа (например 8 пиксела). Това ще направи работата ви много по-бърза.

Компоненти на атомния потребителски интерфейс

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

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

Дори вашите атомни компоненти могат да имат символи за частици вътре. Например, вашият бутон може да включва следните символи: Икона, Сянка, Форма, Състояние на компонента или дори Текст (ако решите да подготвите отделни символи за тях).

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

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

Молекули и организми

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

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

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

Атомният дизайн е перфектен за дизайнерските системи

UI Kit

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

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

Prime включва следните категории за шаблони:

  • герой
  • Характеристики на продукта
  • Галерии
  • търговия
  • Поръчка
  • Ценообразуване
  • Новини / Блог
  • контакт
  • Отзиви
  • Сметка
  • Табло
  • относно
  • Footer
  • Друго (за 404 и скорошна страница).

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

Липсващи елементи на много дизайнерски системи

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

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

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

Примерна илюстрация, направена в рамките на 5 минути в Prime

Ако сте решили да проектирате свой собствен набор от библиотеки за Design Systems, помислете дали да добавите тези елементи към тях.

Сътрудничество на екип

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

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

Разделяне на файлове

Нещо повече, трябва да помислите да направите някои части от Sketch UI Design System като отделни файлове. С изключение на основната библиотека, може да помислите да подготвите файл за набор от икони, комплект за илюстрация, шаблони на устройства или графики.

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

Контролирайте историята на вашите библиотеки

По-добрият начин за управление на файловете на Sketch Library с екипа е да използвате решение за контрол на версията като Abstract. Благодарение на това ще можете да преглеждате историята на промените в библиотеката, да преглеждате модификациите на вашите съотборници, да ги коментирате и да разрешавате да ги добавите в главния (основната версия на библиотеката).

Изграждане на жива система за проектиране от Sketch

Някои инструменти като InVision Design System Manager ви позволяват да изграждате дизайнерска системна документация и източник на истината не само за дизайнери, но и за разработчици, QA специалисти и други членове на екипа.

Използването на DSM Invision е лесно, тук можете да намерите бързо въведение. Можете бързо да изградите дизайнерска системна документация, да управлявате версии и потребителски разрешения за преглед или редактиране на системата.

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

И накрая: Разбийте консистенцията - ако е необходимо

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

"Трябва да отучите това, което сте научили."
- Господар Йода

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

Обобщаване

Sketch е правилният инструмент за изграждане на компоненти на потребителския интерфейс на Design System. Това е инструментът, който съдържа множество функции като символи, слоеве и текстови стилове с преобладаващи способности, което прави работния процес изключително лесен. Благодарение на философията на библиотеката можете бързо да споделяте вашите файлове и с допълнителни плъгини можете бързо да ги превърнете в истинските дизайнерски системи.

Ако смятате да започнете да изграждате Design System или да организирате вашата библиотека с потребителски интерфейс - не губете времето си, създавайки всичко от нулата. Чувствайте се свободни да използвате комплекта Prime - Design System.

За да улесните има подарък Използвайте кода на офертата MEDIUM10, за да получите 10% отстъпка.

Ако сте се насладили на историята, не забравяйте да .

Може да се интересувате от Sketch Plugins, които помагат за поддържане на UI Design System:

Благодаря за четенето, късмет с вашата система за проектиране!