Dizajnerski sustavi + skica - Kako započeti pripremu biblioteke komponenata korisničkog sučelja

Konačno, Design Systems postao je industrijski standard. Zbog toga je ključno znati kako ih pripremiti za naše projekte. Ako ste poput mene i svoje digitalne dizajne uglavnom kreirate na Sketch-u, ova Priča sadrži gomilu savjeta za pripremu tamo korisničkih sučelja za svoj dizajn sustav.

Bilješka:
Volim da stvari budu jasne. Kao kreator UXMisfit.com, moj prioritet je pomoći dizajnerima nadahnjujući ih malo drugačijim pogledom na UX i pripremanjem alata za uštedu vremena.

UXMisfit setovi alata uglavnom su pripremljeni za program Sketch. Možete ih pronaći za efikasnu pripremu korisničkih tokova ili za bolju kvalitetu ikona aplikacija.

Možda ćete pronaći i Design System Kit - naziva se Prime. Sadrži više nego što bi moderni UI Design System za Sketch trebao imati. Osim stotina prilagodljivih elemenata, uključuje sustav ilustracija, web sučelje, grafikone i vektorske predloške glavnih uređaja.

Bez obzira na Prime Design System Kit Kit, svi savjeti spomenuti u priči djeluju čak i ako odlučite pripremiti UI Components samostalno.

U početku je vladao kaos ...

Nije važno da li pripremate komponente za Design System na početku novog proizvoda ili se odlučite uključiti ga u postojeći projekt star nekoliko godina. Uvijek je izazovna odluka ako je donesete prvi put jer morate uvjeriti druge ljude (ne samo dizajnere) u ideju stvaranja sustava. Razmotrimo kako možete druge ljude učiniti entuzijastičnijima u pogledu Sustava dizajna:

Poslovni ljudi i uprava - mogu se bojati vremena i troškova stvaranja nečeg velikog od temelja (naravno, postoje načini da se ubrza proces). Očito, početni troškovi mogu biti visoki, ali morate ih uvjeriti da će u budućnosti cijena stvaranja novih komponenti biti mnogo niža, implementacija će biti brža, a kvaliteta proizvoda ... puno bolja.

Programeri - zahvaljujući dizajnerskom sustavu oni će moći pripremiti komponente ranije i koristiti njihove instance na više stranica. Održavanje dosljednosti dizajna bit će mnogo lakše. Programeri neće morati razmišljati treba li ovaj plavi gumb imati podebljano slovo fonta ili sjenu - oni će samo koristiti pravu komponentu (Primarni gumb).

QA - Pokažite testerima da će dobiti jedini izvor istine. Zahvaljujući tome neće biti sumnje ako se nešto učini kako treba.

U redu, ako je vaš tim spreman, uzmemo šalicu kave i pokrenemo Sketch!

Imate postojeći projekt? Napravite svoj inventar.

Ako niste pripremili nekakav Dizajnerski sustav ili vlastiti UI Kit za vaš trenutni projekt, prvi korak je da provjerite sve postojeće elemente. Vjerojatno ćete naći više primjera elemenata koji se malo razlikuju, ali to ćete morati popraviti.

Ako koristite postojeći Design System Kit, odmah ćete dobiti popis gotovo svih elemenata koje bi knjižnica vaših komponenti trebala imati. Štoviše, oni su već kategorizirani kao simboli. Možete prilagoditi postojeće elemente da odgovaraju onima iz vašeg rješenja i trebali biste ga moći brzo koristiti.

Ako odlučite stvoriti biblioteku od nule, dobro je prvo pripremiti popis ili proračunsku tablicu. To će pomoći uspostaviti pravu strukturu. Razvijanje prave arhitekture dokumenata možda je teško, ali vrijedi to učiniti kako biste ubrzali kasniji rad.

Ali ... Knjižnice skica nisu sustavi dizajna?

Ovo možda zvuči ne tako očito, ali točno je. Slažem se s Bradom Frostom. Vaše biblioteke skica nisu sustav dizajna, ali to se i sjećaju: oni su njegov temeljni dio.

Mnoštvo knjižnica je početna varnica Design Systems. Postoje i metode pripreme živih sustava iz njih, ali o njima ćemo govoriti u sljedećim poglavljima.

Sustavi dizajna mnogo su više od komponenata korisničkog sučelja. Oni bi također trebali uključivati ​​smjernice pokreta, načela strategije sadržaja i stila copywritinga i konačno žive implementirane komponente - spremne za upotrebu na određenoj platformi.

Na kraju, sve to započinje s komponentama izrađenim u alatu za dizajn poput Sketch-a. Imajte na umu da setovi nisu sami Design Systems, ali ove su knjižnice tu da vam pomognu u izgradnji sustava.

Gradnja biblioteke komponenata korisničkog sučelja za sustav dizajna

Pogledajmo kako pripremiti komponente za svoj sustav od sitnih čestica do velikih organizama i obrazaca. Atomic Design filozofija je vrlo korisna kada pripremate knjižnicu koja bi se trebala često koristiti i proširiti.

čestice

Kada govorimo o atomskom dizajnu. Prije nego što skočite na stvaranje osnovnih komponenti korisničkog sučelja, potrebno je uspostaviti čestice.

boje

Dobro je započeti s bojama, jer svaka marka ima svoju paletu. Ne zaboravite uspostaviti dobru konvenciju o imenovanju. Dobro je usmjeriti koji ton je primarni ili sekundarni, a oni za elemente uspjeha, upozorenja ili pogreške. Ne dopustite da vaš sustav uključuje samo „plavu“ ili „ljubičastu“, presudno je jer svaka boja ima svoje značenje. Pravilno imenovanje omogućit će vašem timu da prepozna svrhu namjene boje.

Savjet: Da biste optimizirali prilagodbu stilova ispunjavanja i obruba. Izradite sloj oblika sa zajedničkim stilom koji sadrži samo ispunu, a zatim kreirajte potpuno isti položaj i veličinu koja uključuje samo Dijeljeni stil s obrubom. Ispunite i obrub treba imati istu boju. Ako dodate i slojeve oblika sa stilovima koji se razlikuju samo neprozirnošću u blizini ili na istom položaju, stil ćete moći vrlo brzo ažurirati. Morate samo odabrati slojeve oblika, ažurirati dva parametra (ispuniti i obrubiti na desnoj bočnoj ploči skice) i ažurirati zajedničke stilove.

Postavljanje boja u programu Prime Design System Kit

Gradijenti i slojevi

Neki kažu da su gradijenti nove boje. Ako pregledavate Dribbble ili Behance, primijetit ćete da ih mnogi snimci uključuju. Zbog toga bi vaša Biblioteka sustava dizajna trebala biti pripremljena za projekt.

Ista je situacija i sa prekrivanjima. Ton i neprozirnost trebaju se definirati u sustavu kako bi se osigurala konzistentnost.

Srećom, iz Sketch 52+ nema potrebe za pripremom posebnih umetničkih ploča za boje, gradijente itd. Sve je u poništavanju stilova i simbola dijeljenog sloja.

Tipografija

Dobar tipografski sustav bitan je dio svakog UI okvira koji je dio šireg dizajnerskog sustava. Kad sam stvarao Kit, priprema ovog elementa trajala je ogromno vrijeme. Ako se odlučite za izradu svoje tipografije ne zaboravite uključiti barem sljedeće stilove:

  • Crno
  • bijela
  • siva
  • Primarno (s osnovnom bojom vašeg sustava)

Bilo bi lijepo imati i:

  • Uspjeh
  • Upozorenje
  • greška

Ove će vam varijante boja pomoći da osigurate dovoljno fleksibilnosti i dosljednosti u svom kasnijem radu.

A sada, zavirimo u mjerilu i veličinu. Postoji nekoliko načina na koje možete odrediti ovo svojstvo duž sustava tipografije. Odlučio sam nadahnuti one koje su uključili Prime Apple i proširio se modernim trendom interneta (ogromni naslovi itd.). Zahvaljujući ovom čvrstom temelju, možda ste sigurni da će sustav raditi i da će tipografija imati dobru čitljivost na mobilnim i stolnim računalima.

Ako želite imati skapu tipografije ispravne veličine, https://type-scale.com će vam biti korisna. Jednostavno odaberite Base Size, Scale Type i postavite uzorak fonta te se poigrajte oko postavki.

Kad ćete definirati sve svoje veličine dodajte barem obične i podebljane mogućnosti. Zatim duplicirajte sve stavke dva puta. Poravnajte ih udesno, u sredini i ulijevo. Sada stvorite tekst teksta za svaku opciju.

Da bi se osigurala najbolja upotrebljivost tipografije koristite sljedeći način imenovanja:

[Ime veličine] / [Poravnanje] / [Boja] / [Stil]

Ako u vašem sustavu imate više familija fontova:

[Ime veličine] / [Obitelj fonta] / [Poravnanje] / [Boja] / [Stil]

Na primjer:

Naslov / Centar / crna / Bold

Naslov / SF Pro / Centar / Primarno / Lijevo

Sustave tipografije možete podijeliti i u zasebne datoteke i napraviti ih zajedničkim bibliotekama.

Savjet: za optimizaciju prilagodbe tipografije. Stavite sve elemente (iz jednobojnih postavki) u jedan stupac. Poravnajte slojeve koji sadrže različite stilove poravnanja (lijevo, centar, desno) jedan preko drugog. Zahvaljujući tome dobit ćete jedan stupac s tipografijom. Ovo će vam omogućiti da promijenite slovo slova ili njegov stil odabirom grupe i ažuriranjem zajedno. Mnogo je brži i praktičniji od pripreme parametara za svako poravnanje zasebno.

Postavljanje tipografije u sustavu Prime Design System Kit

Mreže i izgleda

Priprema mrežnog sustava ne samo da će osigurati konzistentnost, već će i ubrzati vaš kasniji rad. Vaša mreža trebala bi biti univerzalna - popularan izbor je postavljanje mreže s 8 točaka. Na taj ćete način osigurati dobro korištenje vašeg sučelja na radnoj površini, tabletu i mobilnom uređaju.

Savjet: Da biste ubrzali radno podešavanje, veliko pomicanje (Shift + Arrow) u Sketchu do veličine vaše mreže (na primjer, 8 piksela). To će vaš rad učiniti mnogo bržim.

Komponente atomskog sučelja

Prije nego što skočite pravo u specifičnu kreaciju simbola. Odvojite malo vremena za popis svih potrebnih komponenata korisničkog sučelja. Ovaj je popis možda prilično dugačak, ali pomoći će vam da isplanirate strukturu UI okvira.

Očito je da će sustav atomskog dizajna uključivati ​​komponente poput gumba, ulaza / tekstualnih polja, ikona, potvrdnih okvira, sklopki i radio tipki, ali postoje i elementi koji nisu toliko očiti kada prvi put pomislite na sustav poput chata mjehurići, čips ili komponente ocjenjivanja.

Čak i vaše atomske komponente mogu imati neke simbole čestica u sebi. Na primjer, vaš gumb može sadržavati sljedeće simbole: Ikona, Sjena, Oblik, Stanje komponente ili čak Tekst (ako odlučite pripremiti zasebne simbole za njih).

Ti atomi neće biti samo primjeri kontrola sučelja u vašim budućim projektima, već će pomoći i u stvaranju složenijih onih u vašoj knjižici Sketch.

Savjet: Što vrijedi spomenuti, budući da Sketch 52 ne morate pripremiti posebne maske za boje vaših gumba ili ikona. Dijeljeni stilovi brinu o tome s značajkom Override simbola. To znači manje simbola i transparentniji i elegantniji tijek rada.

Molekule i organizmi

Dakle, stvorili ste sve atomske elemente. Sada ih možete kombinirati u molekule.

To znači da se vaši osnovni podaci za unos, gumb i ikonu mogu kombinirati u složeniju komponentu - komponenta kartice kartice teksta za tekst može se stvoriti iz stilova oblika ili slike, prekrivanja, ikona, gumba ili teksta.

Korištenje skupa osnovnih elemenata u simbolima i slojevima sa Shared Styles omogućava vam izgradnju sustava koji se vrlo brzo ažurira.

Atomski dizajn savršen je za sustave dizajna

UI Kit

Dizajn atoma naziva složene skupove unaprijed definiranih atoma, molekula i organizama kao Predlošci. Ovo su veliki dijelovi (poput odjeljaka web stranice) vašeg rješenja koji se mogu koristiti više puta.

Predloge je dobro dizajnirati s obzirom na njihovu svrhu. Ako ih napravite previše generičkim, oni mogu uzrokovati elemente koji se ne uklapaju u posebne slučajeve.

Prime uključuje sljedeće kategorije za predloške:

  • Junak
  • Značajke proizvoda
  • galerije
  • trgovina
  • Narudžba
  • cijena
  • Vijesti / Blog
  • Kontakt
  • Svjedočanstva
  • Račun
  • kontrolna ploča
  • Oko
  • Podnožje
  • Ostalo (za 404 i uskoro stranicu).

Kada stvorite svoj vlastiti UI Framework, ohrabrujem vas da pripremite ove velike predloške s najmanje ovim kategorijama.

Nedostaju elementi mnogih dizajnerskih sustava

Mnogi dizajneri smatraju Kit dizajnerskog sustava za Sketch kao knjižnicu UI Controls. Ali dizajnerski sustavi su puno više; Skica se također može koristiti u mnoge druge svrhe digitalnog dizajna.

Prilikom stvaranja Kit shvatio sam da Biblioteke trebaju sadržavati i grafikone i vektorske uređaje (u obrisu, ravni i realistični stil). Koriste se toliko često u suvremenim web stranicama i rješenjima da im je potrebna dosljedna zastupljenost u sustavu.

Štoviše, danas su web stranice i aplikacije prepune lijepih ilustracija. Zbog toga sam i ja uključio prilagodljivi sustav ilustracije koji sadrži komponente za brzo sastavljanje i oblikovanje.

Uzorak ilustracije napravljen u roku od 5 minuta u programu Prime

Ako ste odlučili dizajnirati vlastiti skup knjižnica za Design Systems, razmislite o tome da im dodate te elemente.

Suradnja tima

Dizajnerski sustavi su izvor istine za članove tima. To znači da bi vaše Biblioteke skica trebalo pripremiti za upotrebu svim dizajnerima koji su uključeni u projekt. Najlakši način dijeljenja datoteka sa svojim timom je njihovo učitavanje u oblak Sketch

Dok pripremate UI Framework kao knjižnica, imajte na umu da osigurate dosljedno i pravilno imenovanje. Izgradnja logične i jasne strukture pomoći će vašim kolegama da otkriju sve mogućnosti kompleta.

Razdvajanje datoteka

Nadalje, trebali biste razmotriti izradu nekih dijelova Sketch UI Design System kao zasebnih datoteka. Osim osnovne biblioteke, možda biste trebali pripremiti datoteku za skup ikona, komplet za ilustraciju, predloške uređaja ili grafikone.

Kada razdvojiti te stvari? Trebao bi to smisliti kad je jasno da postoji veliki skup određenih elemenata (poput ikona) ili ih samo neki dizajneri iz vašeg tima stvaraju (ovo se može primijeniti na ilustracije), a ostalo je samo korištenje njihovih kreacija.

Kontrolirajte povijest svojih knjižnica

Bolji način za upravljanje datotekama Sketch Library s timom je korištenje rješenja kontrole verzije poput Sažetak. Zahvaljujući tome moći ćete pregledati povijest promjena u knjižnici, pregledati izmjene svojih suigrača, komentirati ih i dopustiti ih dodavanju u master (glavna verzija knjižnice).

Sustav dizajna živog dizajna iz Skice

Neki alati poput InVision Design System Manager omogućuju vam izradu dizajnerske dokumentacije i izvor istine ne samo za dizajnere, već i programere, stručnjake za osiguranje kvalitete i ostale članove tima.

Korištenje Invision DSM-a je jednostavno, ovdje možete pronaći brzi uvod. Možete brzo sastaviti dizajnersku dokumentaciju sustava, upravljati inačicama i korisničkim dozvolama za pregled ili uređivanje sustava.

Ovaj alat čini vašu knjižicu Sketch stvarnim sustavom dizajna.

Konačno: Prekinite konzistenciju - ako je potrebno

Iako je konzistentna strategija temeljna, morate imati na umu da kao UX dizajner morate pripremiti rješenje koje na zadovoljavajući način rješava potrebe korisnika i ispunjavati poslovne zahtjeve. Zbog toga morate biti spremni slomiti svoj dosljedni sustav dizajna ako za to postoji veća svrha.

"Morate otkriti ono što ste naučili."
- Gospodaru Yoda

Ako postoji slučaj kada taj određeni element jednostavno ne radi, morate ga potvrditi. Ako će testovi pokazati da će narušavanje konzistentnosti korisničkog sučelja učiniti korisnike sretnijima, razmislite o izmjeni. Sjetite se samo zabilježiti ove „iznimke“ u sustavu, tako da će ostali znati da to nije bila greška, već strateška odluka.

Sumirati

Sketch je pravi alat za izgradnju komponenata korisničkog sučelja dizajnerskog sustava. To je alat koji sadrži više značajki poput simbola, sloja i stilova teksta s poništenim sposobnostima što radni tijek čini vrlo jednostavnim. Zahvaljujući bibliotečkoj filozofiji možete brzo dijeliti svoje datoteke, a s dodatnim dodacima možete je brzo pretvoriti u prave Dizajnerske sustave.

Ako planirate započeti s izgradnjom dizajnerskog sustava ili organiziranjem UI knjižnice - nemojte gubiti vrijeme stvarajući sve ispočetka. Slobodno koristite paket Prime - Design System.

Da biste olakšali, postoji poklon Koristite MEDIUM10 kôd ponude da biste dobili 10% popusta.

Ako ste uživali u Priči, ne zaboravite .

Možda će vas zanimati i Sketch Plugins koji pomažu u održavanju UI Design System:

Hvala na čitanju, sretno s vašim dizajnerskim sustavom!