Design Systems + Sketch - Ako začať pripravovať knižnicu komponentov používateľského rozhrania

Nakoniec sa Design Systems stal priemyselným štandardom. Preto je dôležité vedieť, ako ich pripraviť na naše projekty. Ak ste ako ja a svoje digitálne návrhy vytvárate väčšinou v aplikácii Sketch, tento príbeh obsahuje množstvo tipov na prípravu komponentov používateľského rozhrania pre váš návrhový systém.

Poznámka:
Rád udržím veci v poriadku. Ako tvorca webu UXMisfit.com je mojou prioritou pomáhať dizajnérom tým, že ich inšpiruje trochu odlišným pohľadom na UX a pripravuje nástroje, ktoré šetria čas.

Nástroje UXMisfit sú pripravené väčšinou pre aplikáciu Sketch. Nájdete ich na efektívnu prípravu tokov používateľov alebo na zabezpečenie lepšej kvality ikon aplikácií.

Môžete tiež nájsť súpravu Design System Kit - nazýva sa Prime. Obsahuje viac ako moderný systém dizajnov UI pre aplikáciu Sketch. Okrem stoviek prispôsobiteľných prvkov zahŕňa systém Ilustrácie, Web UI Kit, grafy a vektorové šablóny hlavných zariadení.

Bez ohľadu na súpravu Prime Design System Kit fungujú všetky tipy uvedené v príbehu, aj keď sa rozhodnete pripraviť komponenty používateľského rozhrania sami.

Na začiatku bol chaos…

Nezáleží na tom, či začnete pripravovať komponenty pre návrhový systém na začiatku nového produktu, alebo ak sa rozhodnete ho zahrnúť do existujúceho niekoľkoročného projektu. Ak sa rozhodnete prvýkrát, vždy je to náročné rozhodnutie, pretože musíte presvedčiť iných ľudí (nielen dizajnérov) o myšlienke vytvorenia systému. Zoberme si, ako môžete urobiť z rôznych systémov nadšencov dizajnérskych systémov:

Podnikatelia a manažment - môžu mať strach z času a nákladov na vytvorenie niečoho veľkého od základov (samozrejme existujú spôsoby, ako tento proces urýchliť). Počiatočné náklady môžu byť samozrejme vysoké, musíte ich však presvedčiť, že v budúcnosti bude cena výroby nových komponentov oveľa nižšia, implementácia bude rýchlejšia a kvalita produktu ... oveľa lepšia.

Vývojári - vďaka konštrukčnému systému budú môcť pripraviť komponenty skôr a svoje výskyty využiť na viacerých stránkach. Udržiavanie konzistencie dizajnu bude oveľa jednoduchšie. Vývojári nebudú musieť premýšľať, či by toto modré tlačidlo malo mať výrazný povrch písma alebo tieň - jednoducho použijú správnu súčasť (primárne tlačidlo).

QA - ukážte testerom, že dostanú jediný zdroj pravdy. Vďaka tomu niet pochýb o tom, či sa niečo urobí dobre.

OK, ak je váš tím pripravený, zoberme hrnček kávy a spustíme aplikáciu Sketch!

Máte už existujúci projekt? Vytvorte jeho súpis.

Ak ste pre svoj aktuálny projekt nepripravili nejaký druh dizajnového systému alebo svoj vlastný UI kit, prvým krokom je skontrolovať všetky existujúce prvky. Pravdepodobne nájdete niekoľko príkladov prvkov, ktoré sa trochu líšia, ale bude treba to opraviť.

Ak použijete existujúcu súpravu Design System, okamžite získate zoznam takmer všetkých prvkov, ktoré by mala mať vaša knižnica komponentov. A čo viac, už sú klasifikované ako symboly. Existujúce prvky môžete upraviť tak, aby sa zhodovali s prvkami vo vašom riešení, a mali by ste byť schopní ich rýchlo používať.

Ak sa rozhodnete vytvoriť knižnicu od nuly, je dobré najprv pripraviť zoznam alebo tabuľku. Pomôže to vytvoriť správnu štruktúru. Vytvorenie správnej architektúry dokumentov môže byť ťažké, ale stojí za to to urýchliť neskoršiu prácu.

Ale ... Knižnice skíc nie sú konštrukčné systémy?

To nemusí znieť tak zreteľne, ale je to správne. Súhlasím s Bradom Frostom. Vaše knižnice skíc nie sú dizajnovým systémom, ale pamätajú si na to: sú jeho základnou súčasťou.

Mnoho knižníc predstavuje počiatočné iskry dizajnérskych systémov. Existujú aj metódy na prípravu živých systémov z nich, ktoré sa však budú venovať ďalším kapitolám.

Dizajnové systémy sú oveľa viac ako komponenty používateľského rozhrania. Mali by tiež obsahovať usmernenia pre pohyb, zásady obsahovej stratégie a štýlu copywritingu a konečne živé implementované komponenty - pripravené na použitie na konkrétnej platforme.

Nakoniec to všetko začína komponentmi vytvorenými v nástroji pre návrh, ako je napríklad náčrt. Pamätajte, že súpravy nie sú konštrukčné systémy samotné, ale tieto knižnice sú tu, aby vám pomohli zostaviť systémy.

Budovanie knižnice komponentov používateľského rozhrania pre systém dizajnov

Pozrime sa, ako pripraviť komponenty pre váš systém od najmenších častíc po veľké organizmy a šablóny. Filozofia atómového dizajnu je veľmi užitočná, keď pripravujete knižnicu, ktorá by sa mala v budúcnosti často používať a rozširovať.

častice

Keď už hovoríme o atómovej konštrukcie. Než začnete tvoriť základné komponenty používateľského rozhrania, je potrebné vytvoriť častice.

farby

Je dobré začať s farbami, pretože každá značka má svoju vlastnú paletu. Nezabudnite ustanoviť konvenciu dobrého pomenovávania. Je dobré poukázať na to, ktorý tón je primárny alebo sekundárny a tón pre prvky úspechu, varovania alebo chyby. Nedovoľte, aby váš systém obsahoval iba „modrú“ alebo „fialovú“ farbu, je to nevyhnutné, pretože každá farba má svoj význam. Správne pomenovanie umožní vášmu tímu rozpoznať účel farby.

Tip: Na optimalizáciu prispôsobenia štýlu výplne a orámovania. Vytvorte vrstvu tvaru so zdieľaným štýlom, ktorá obsahuje iba výplň, potom vytvorte vrstvu v presne rovnakej polohe a veľkosti, ktorá obsahuje iba zdieľaný štýl s orámovaním. Výplň a okraj by mali mať rovnakú farbu. Ak tiež pridáte vrstvy tvarov so štýlmi, ktoré sa líšia iba podľa nepriehľadnosti v blízkosti alebo na tej istej pozícii, budete môcť výnimočne rýchlo aktualizovať štýl. Musíte len vybrať vrstvy tvarov, aktualizovať dva parametre (výplň a orámovanie v pravom bočnom paneli Skica) a aktualizovať zdieľané štýly.

Nastavenie farieb v súprave Prime Design System Kit

Prechody a prekrytia

Niektorí hovoria, že prechody sú nové farby. Ak prezeráte Dribbble alebo Behance, všimnete si, že ich obsahuje veľa záberov. Z tohto dôvodu by vaša knižnica systémov dizajnu mala mať pripravenú súpravu pre projekt.

Rovnaká situácia je v prípade prekrytí. V systéme by sa mal definovať tón a nepriehľadnosť, aby sa zabezpečila konzistentnosť.

Našťastie z aplikácie Sketch 52+ nie je potrebné pripravovať špeciálne kresliace plochy pre farby, prechody atď. Všetko je to v potlačeniach štýlov zdieľaných vrstiev a symbolov.

typografie

Dobrý typografický systém je nevyhnutnou súčasťou každého rozhrania UI, ktoré je súčasťou väčšieho konštrukčného systému. Keď som tvoril súpravu, príprava tohto prvku vyžadovala obrovské množstvo času. Ak sa rozhodnete vytvoriť typografiu, nezabudnite zahrnúť aspoň tieto štýly:

  • čierna
  • biely
  • šedá
  • Primárne (s primárnou farbou vášho systému)

Bolo by pekné mať tiež:

  • Úspech
  • Výstraha
  • Chyba

Tieto farebné varianty vám pomôžu zaistiť dostatočnú flexibilitu a konzistentnosť vašej neskoršej práce.

Teraz sa poďme ponoriť do rozsahu a veľkosti. Existuje niekoľko metód, ktoré môžete definovať túto vlastnosť v systéme typografie. Rozhodol som sa inšpirovať tie, medzi ktoré patrí spoločnosť Prime by Apple, a rozširujúce sa o moderný webový trend (obrovské tituly atď.). Vďaka tomuto silnému základu si môžete byť istí, že systém bude fungovať a typografia bude mať dobrú čitateľnosť na mobilných a stolných počítačoch.

Ak by ste chceli mať typografickú stupnici so správnou veľkosťou, môže byť pre vás https://type-scale.com užitočná. Stačí zvoliť základnú veľkosť, typ mierky a nastaviť vzorové písmo a prehrať sa okolo nastavení.

Keď definujete všetky svoje veľkosti, pridajte aspoň bežné a výrazné možnosti. Potom ich všetky položky duplikujte dvakrát. Zarovnajte ich doprava, na stred a doľava. Teraz vytvorte štýl textu pre každú možnosť.

Na zabezpečenie najlepšej použiteľnosti typografie používajte nasledujúcu konvenciu názvov:

[Size Name] / [Aligment] / [Color] / [Style]

Ak máte v systéme viac ako jednu rodinu písiem:

[Názov veľkosti] / [Rodina fontov] / [Zoradenie] / [Farba] ​​/ [Štýl]

Napríklad:

Názov / Center / Black / Bold

Názov / SF Pro / Center / Primárne / Doľava

Môžete tiež rozdeliť typografické systémy do samostatných súborov a vytvoriť z nich zdieľané knižnice.

IpTip: Optimalizácia prispôsobenia typografie. Umiestnite všetky prvky (z nastavenia jednej farby) do jedného stĺpca. Vyrovnajte vrstvy obsahujúce rôzne štýly zarovnania (vľavo, v strede, vpravo) nad sebou. Vďaka tomu získate jediný stĺpec s typografiou. To vám umožní zmeniť typ písma alebo jeho štýl výberom skupiny a ich aktualizáciou. Je to omnoho rýchlejšie a pohodlnejšie ako príprava parametrov pre každé zarovnanie osobitne.

Nastavenie typografie v súprave Prime Design System Kit

Mriežky a rozloženia

Príprava mriežkového systému zaistí nielen konzistentnosť, ale tiež urýchli vašu neskoršiu prácu. Vaša mriežka by mala byť univerzálna - obľúbenou voľbou je nastaviť 8-bodovú mriežku. Tým sa zabezpečí, že vaše používateľské rozhranie bude fungovať dobre na stolných počítačoch, tabletoch a mobilných zariadeniach.

IpTip: Ak chcete zrýchliť svoje pracovné nastavenie, veľké posuny (Shift + Šípka) v aplikácii Sketch na veľkosť mriežky (napríklad 8 pixelov). Vďaka tomu bude vaša práca oveľa rýchlejšia.

Atómové komponenty používateľského rozhrania

Než začnete skočiť priamo do vytvorenia konkrétneho symbolu. Nájdite si nejaký čas na vymenovanie všetkých potrebných komponentov používateľského rozhrania. Tento zoznam môže byť pomerne dlhý, ale pomôže vám naplánovať štruktúru vášho rozhrania UI.

Je zrejmé, že systém atómového dizajnu bude obsahovať komponenty, ako sú tlačidlá, vstupy / textové polia, ikony, začiarkavacie políčka, prepínače a prepínače, ale existujú aj prvky, ktoré nie sú až také zrejmé pri prvom uvažovaní o systéme, ako je napríklad chat bubliny, čipy alebo komponenty na hodnotenie.

Dokonca aj vaše atómové komponenty môžu mať vo vnútri nejaké častice. Tlačidlo môže napríklad obsahovať nasledujúce symboly: Ikona, Tieň, Tvar, Stav komponentu alebo dokonca Text (ak sa pre ne rozhodnete pripraviť samostatné symboly).

Tieto atómy nebudú iba príkladmi ovládacích prvkov používateľského rozhrania vo vašich budúcich projektoch, ale tiež pomôžu vytvoriť zložitejšie v knižnici skíc.

IpTip: Čo stojí za zmienku, od aplikácie Sketch 52 nemusíte pripravovať špeciálne masky na farby tlačidiel alebo ikon. Zdieľané štýly sa o to postarajú pomocou funkcie Prepísanie symbolov. To znamená menej symbolov a transparentnejšie a elegantnejšie pracovné postupy.

Molekuly a organizmy

Takže ste vytvorili všetky atómové prvky. Teraz ich môžete kombinovať do molekúl.

To znamená, že váš základný vstup, tlačidlo a ikona sa môžu skombinovať do zložitejšieho komponentu - karta pre vyhľadávanie textového poľa pre váš systém môže byť vytvorená z tvarov alebo obrázkov, prekrytia, ikon, tlačidiel alebo textových štýlov.

Použitím sady základných prvkov v symboloch a vrstvách so zdieľanými štýlmi môžete zostaviť systém, ktorý sa aktualizuje veľmi rýchlo.

Atómový dizajn je ideálny pre konštrukčné systémy

Súprava UI

Atómový dizajn nazýva komplexné sady preddefinovaných atómov, molekúl a organizmov ako šablóny. Jedná sa o veľké časti (napríklad časti webových stránok) vášho riešenia, ktoré sa môžu použiť viackrát.

Je dobré navrhovať šablóny s ohľadom na ich účel. Ak sú príliš všeobecné, môžu spôsobiť prvky, ktoré sa v konkrétnych prípadoch nehodia.

Prime obsahuje tieto kategórie pre šablóny:

  • hrdina
  • Vlastnosti produktu
  • galéria
  • obchod
  • objednať
  • stanovenie ceny
  • Novinky / Blog
  • Kontakt
  • Ohlasy
  • účet
  • prístrojová doska
  • o
  • zápätie
  • Iné (pre 404 a čoskoro na stránke).

Pri vytváraní vlastného rozhrania UI vám odporúčame pripraviť tieto veľké šablóny aspoň s týmito kategóriami.

Chýbajúce prvky mnohých konštrukčných systémov

Mnohí návrhári myslia na Design System Kit for Sketch ako na UI Controls Library. Dizajnové systémy sú však omnoho viac; Náčrt tiež môžete využiť na mnohé ďalšie účely digitálneho dizajnu.

Keď som tvoril súpravu, uvedomil som si, že knižnice by mali obsahovať aj grafy a vektorové zariadenia (v obryse, plochý a realistický štýl). Používajú sa tak často v moderných webových stránkach a riešeniach, ktoré potrebujú mať konzistentné zastúpenie v systéme.

A čo viac, v súčasnosti sú webové stránky a aplikácie plné krásnych ilustrácií. Preto som tiež zahrnul prispôsobiteľný ilustračný systém, ktorý obsahuje komponenty na ich rýchle zostavenie a úpravu.

Vzorová ilustrácia urobená do 5 minút v Prime

Ak ste sa rozhodli navrhnúť svoju vlastnú sadu knižníc pre Design Systems, zvážte pridanie týchto prvkov do nich.

Tímová spolupráca

Dizajnové systémy sú zdrojom pravdy pre členov tímu. To znamená, že vaše knižnice skíc by mali byť pripravené na použitie všetkými návrhármi zapojenými do projektu. Najjednoduchší spôsob, ako zdieľať súbory so svojím tímom, je nahrať ich do Sketch Cloudu

Pri príprave UI Framework ako knižnice nezabudnite zabezpečiť konzistentné a správne pomenovanie. Budovanie logickej a jasnej štruktúry pomôže vašim kolegom objaviť všetky možnosti súpravy.

Oddeľovanie súborov

A čo viac, mali by ste zvážiť vytvorenie niektorých častí systému dizajnov UI aplikácie Sketch ako samostatné súbory. Okrem základnej knižnice môžete zvážiť prípravu súboru pre sadu ikon, súpravu ilustrácií, šablóny zariadení alebo grafy.

Kedy tieto veci oddeliť? Mali by ste myslieť na to, keď to bude zrejmé, že existuje veľká sada konkrétnych prvkov (napríklad ikony) alebo ich vytvoria iba niektorí návrhári z vášho tímu (to sa môže týkať ilustrácií) a zvyšok len využíva svoje výtvory.

Ovládajte históriu svojich knižníc

Lepší spôsob, ako spravovať súbory Sketch Library v tíme, je použiť riešenie na riadenie verzií, napríklad Abstrakt. Vďaka tomu budete môcť prehľadávať históriu zmien v knižnici, skontrolovať modifikácie svojich spoluhráčov, komentovať ich a umožniť ich pridanie do hlavnej jednotky (hlavná verzia knižnice).

Budovanie systému bývania z náčrtu

Niektoré nástroje, ako napríklad InVision Design System Manager, vám umožňujú vytvárať dokumentáciu systému dizajnu a zdroj pravdy nielen pre dizajnérov, ale aj pre vývojárov, odborníkov na QA a ďalších členov tímu.

Používanie aplikácie Invision DSM je priame, tu nájdete rýchly úvod. Môžete rýchlo vytvárať dokumentáciu systému návrhu, spravovať verzie a užívateľské oprávnenia na prezeranie alebo úpravu systému.

Tento nástroj robí z vašej knižnice skíc skutočný dizajnový systém bývania.

Nakoniec: V prípade potreby prerušte konzistenciu

Aj keď je konzistentná stratégia zásadná, musíte pamätať na to, že ako návrhár UX musíte pripraviť riešenie, ktoré uspokojivo uspokojí potreby používateľov a splní obchodné požiadavky. Preto musíte byť pripravení prelomiť svoj konzistentný systém dizajnov, ak na to existuje vyšší účel.

"Musíte sa dozvedieť, čo ste sa naučili."
- Majster Yoda

Ak existuje prípad, keď tento konkrétny prvok jednoducho nefunguje, musíte ho potvrdiť. Ak testy ukážu, že narušenie konzistencie používateľského rozhrania spôsobí, že používatelia budú spokojnejší, zvážte zmenu. Nezabudnite si všimnúť tieto „výnimky“ v systéme, aby ostatní vedeli, že to nebola chyba, ale strategické rozhodnutie.

Zhrnutie

Skica je tým správnym nástrojom na vytváranie komponentov používateľského rozhrania Design System. Je to nástroj, ktorý obsahuje viacero funkcií, ako sú Symboly, Vrstvy a Štýly textu, s možnosťou potlačenia, čím je pracovný tok veľmi jednoduchý. Vďaka filozofii knižnice môžete rýchlo zdieľať svoje súbory a pomocou ďalších doplnkov ich môžete rýchlo zmeniť na skutočné systémy dizajnu.

Ak plánujete začať budovať Design System alebo organizovať svoju UI knižnicu - nestrácajte čas vytvorením všetkého od nuly. Neváhajte použiť súpravu Prime - Design System Kit.

Na uľahčenie poskytovania darčekov Použite kód ponuky MEDIUM10 a získajte zľavu 10%.

Ak ste si užili príbeh, nezabudnite to.

Tiež by vás mohlo zaujímať zásuvné moduly Sketch, ktoré pomáhajú udržiavať systém dizajnov UI:

Ďakujeme za prečítanie, veľa šťastia s vaším dizajnovým systémom!