Korištenje biblioteka skica za izgradnju boljeg dizajnerskog sustava UI - 2. dio

Izgradite fleksibilan sustav Avatara sa svojstvima čestica (primitiva) i poništavanjem simbola Sketch

Ako vam prvi dio predstavlja uvod u izgradnju „primitivnih“ Biblioteka koje ćete koristiti u sustavu dizajniranja sučelja, ovaj se članak usredotočuje na korištenje simbola pohranjenih u tim bibliotekama za izgradnju vrlo fleksibilne komponente razine Atoma.

Za one koji su novi u tim pojmovima, pojam primitivi koristi se za opis subatomskih svojstava; „čestice“ na najnižoj razini iz kojih se sastoji sve ostalo u nekom sustavu. Ove ideje dubinski su istražene u radu Dan Edena o Subatomic Design Systemima.

"Umjesto stvaranja ograničenog i golemog skupa UI elemenata, sustav definirate u smislu svojstava čestica, ograničavajući raspoložive stilove, ali otvarajući potencijalno neograničene načine kreativnosti za stvarne dijelove korisničkog sučelja" - Daniel Eden, dizajner @ Facebook ,
Subatomski dizajn vizualiziran

Koncept 'čestica' možemo upotrijebiti da bismo bolje razumjeli Knjižnice stvorene u prvom članku. Budući da postupak uključuje prepoznavanje ili izdvajanje osnovnih svojstava iz našeg rada i njihovo pohranjivanje u Knjižnice radi ponovne upotrebe.

Ali zašto to učiniti? Namjera nam je uputiti se na ove čestice prilikom izrade komada korisničkog sučelja. Kako će naše komponente dijeliti svojstva, oni će ostati dosljedni, ali dovoljno fleksibilni da omoguće kreativnost u njihovoj izradi.

Pojedini dijelovi korisničkog sučelja na koje ćemo se ovdje usredotočiti obično su poznati kao Atomi. Atomi su najmanje prepoznatljive komponente u sustavu preuzete iz modela Atomic Design Brada Frosta koji će vam vjerojatno biti poznati.

Kako se Atomic Design široko shvaća, možemo ga koristiti kao glavni vodič za sastavne sastavnice, posuđujući koncept 'čestica' iz Subatomic Dizajna da bismo objasnili svojstva koja sastavljaju Atom.

Tumačenje izgleda atomskog dizajna i subatomskog dizajna

Dijagram iznad pokazuje gdje se nalazimo na skali složenosti korisničkog sučelja. U ovoj se fazi prvenstveno bavimo subatomskim svojstvima i kako ih možemo upotrijebiti za izgradnju atoma.

Spremanjem ovih svojstava (čestica po subatomskom dizajnu) u zbirku Simboli i poništavanje simbola u knjižnicama skica, možemo izgraditi visoko fleksibilan sustav korisničkih sučelja niske razine (Atoms per Atomic Design). S ovim komponentama brze prototipske složene strukture s minimalnim kognitivnim opterećenjem.

Prije nego što prijeđemo na praktične stvari, evo nekoliko razloga zbog kojih biste mogli razmotriti pristup 'datotečnom korisničkom sučelju s jednim datotekama' u korist razbijanja vašeg UI sustava na više datoteka. I kako Biblioteke skica mogu vaš sustav dizajniranja sučelja prebaciti na novu razinu.

Kako Biblioteke poboljšavaju naše sustave dizajna

U osnovi, Knjižnice pomažu u smanjenju složenosti i nedosljednosti u našem radu te povećavaju prenosivost i ponovnu uporabu korisničkih sučelja.

Drugim riječima, Knjižnice nam pomažu u stvaranju korisnog posla koje dugoročno služi našim potrebama. Nathan Curtis, kao dizajner sustava dizajnerskih sustava, smatra:

„Usredotočenost na dostavu stilskih vodiča kao vrhunac nije kriva priča. Sustav nije projekt s ciljem, to je priča o podrijetlu živog i razvijajućeg se proizvoda koji će poslužiti drugim proizvodima. "- Nathan Curtis

Prednosti upotrebe Biblioteka za stvaranje sustava koji traju:

  • Organizirani, održivi projekti: Više datoteka, manje pokretnih dijelova po datoteci. Sinkroniziraj promjene iz jednog izvora istine.
  • Smanjeni dizajnerski dug i suvišnost: Nema više slomljenih simbola i nedosljednosti dok ćete graditi dijelove pomoću zajedničkih svojstava pohranjenih u „primitivnim“ Bibliotekama.
  • Prilagodljiv, fleksibilan sustav: Izvršite promjene, sinkronizirajte ažuriranja i razvijajte svoj sustav s razmjernom lakoćom. Poništavanje simbola omogućava manje simbola i fleksibilnih komponenti.
  • Prijenosna imovina dizajna: Knjižnice su neovisne datoteke i mogu se koristiti u više Sketch datoteka i ponovno koristiti u drugim projektima.

Tamo gdje ste se možda u prošlosti borili s održavanjem sustava, Knjižnice skica pomažu vam u izgradnji laganih sustava koji se lakše upravljaju kako vaš proizvod raste i razvija se.

Ažurirajte biblioteku palete boja i dobiti trenutni pristup novoj opciji poništavanja u drugim datotekama.

Organiziranjem simbola u više datoteka knjižnice, možemo umetati simbole iz jedne datoteke u drugu i čuvati ih tako složenim i malim dimenzijama. S bibliotekama naša imovina postaje prenosiva i ažuriranja se lakše sinkroniziraju kroz čitave projekte.

To znači da neće biti suvišnih dizajnerskih dizajnera nakon primopredaje razvojnih programera, nema više borbe za ažurnost svojih dizajna i općenito slobodnog vremena sa Sketchom.

Pa kako možete usvojiti takav pristup UI dizajnerskim sustavima s knjižnicama?

Upotreba biblioteka za UI sustav dizajna

Teorija po strani, izgradnja dizajnerskih sustava s Bibliotekama prilično je jednostavna. Pregled na visokoj razini mogao bi izgledati ovako:

  1. Ponovno definirajte ponavljajuća svojstva koja se nalaze u vašim dizajnom.
  2. Spremite svojstva kao simbole u niz datoteka knjižnice.
  3. Upotrijebite Knjižnice za izgradnju komponenti koje se mogu prepoznati.
  4. Koristite komponente za brze izrade prototipova

Prva dva dijela gore pokrivam u prvom članku. Treći dio je mjesto na koje ćemo se ovdje fokusirati. Hajdemo sada s tim.

Bazni simboli potrebni za stvaranje fleksibilne komponente Avatar s poništenjima simbola

Izgradnja Atoma pomoću biblioteka Sketch

Sada smo svi upoznati s Atomskim dizajnom, dobro razumijemo kako možemo koristiti primitivna svojstva ili svojstva čestica za izgradnju Atoma. Tada u budućim slučajevima Atomi grade molekule, Molekule za izgradnju organizama itd.

Dok sam dijelio svoj postupak izrade gumba, proučit ćemo izgradnju fleksibilne Avatar komponente, još jednog Atoma niske razine. Kasnije ćemo ovaj Avatar upotrijebiti unutar komponente kartice. Očekujte pročitati o tome u budućem članku.

S obzirom na neku metodologiju sustava dizajna, počet ćemo s identificiranjem svojstava potrebnih za izgradnju komponente.

Korak 1: Revizirajte svoj rad

Nazovite to kako vam se sviđa, Brad mraz ovo naziva interventnim popisom, ali „Revizija“ je lijepa i kratka, pa idemo s tim za sada.

Popis sučelja je sveobuhvatna zbirka bitova i komada koji čine vaše sučelje. - Brad Frost

Međutim odlučite li to učiniti - bilo da koristite proračunsku tablicu, u Evernoteu, na papiru - samo to učinite. Cjelovit prikaz cijelog proizvoda pomoći će vam da identificirate obrasce i odnose između različitih komponenata korisničkog sučelja.

U našem slučaju to znači potencijalne slučajeve ponovne upotrebe među svojstvima, koje možemo ukloniti iz dizajna i pohraniti u Knjižnice.

Tijekom revizije rada na AIN sustavu dizajna, shvatio sam da su mnogi dizajnerski obrasci u proizvodu napravljeni od varijabli nekoliko vrsta svojstava: boja, ikona, oblik, obrub, tekst.

Primitivna svojstva (boja, ikona, oblik, obrub, tekst) dijele različite komponente

Teoretski, to je značilo da mogu izgraditi većinu bilo koje komponente (uključujući Avatare) koristeći varijable tih 5 primitivnih svojstava. To je postalo dobro polazište za razmatranje što pohraniti u primitivne Biblioteke.

Dodavanje knjižnica koje nedostaju

Ako pročitate prvi dio, znat ćete da sam već sagradio Knjižnice za 2 od 5 primitivnih svojstava koja se koriste u mom sustavu: boje i ikone.

Od tada sam stvorio Knjižnice za oblik i obrub, koje sadrže sve primjerke tih svojstava koja se koriste u mojim dizajnovima.

Sve instance obruba i oblika pohranjene u bibliotečkoj datoteci za maksimalnu ponovnu upotrebu i prenosivost

U ovom trenutku možda razmišljate; zašto ne biste koristili slojeve slojeva?

Novo za Sketch 51 (trenutno u beta verziji): i stilovi teksta i slojevi sloja definirani u bibliotekama bit će dostupni u svim dokumentima, baš kao što su simboli. Ovo je golemo ažuriranje i pomoći će nam da riješimo nedosljednosti u svim stilovima koje trenutno moramo stvoriti za svaku knjižnicu.

Međutim, stilovi slojeva još uvijek ne održavaju oblik, što znači da nemamo način kontrolirati polumjer obruba pri korištenju slojeva slojeva.

Iz tog sam razloga izabrao da odustanem od slojeva slojeva, umjesto da stvorim Simbole za sve instance oblika, spremajući ih u Biblioteke koje se mogu koristiti u čitavom sustavu.

Time bih mogao smanjiti broj jedinstvenih simbola stvorenih na razini komponente i umanjiti složenost svake komponente.

Rukovanje tekstom na razini komponente

Tipografija u Sketch-u, kao što ćete znati, nije laka zvijer za ukrotiti. Iz tog razloga odlučio sam se protiv stvaranja biblioteke teksta. Umjesto toga, obrađujem sve instance teksta na osnovi "po komponenti", što znači da će svaki potreban tekst biti u istoj datoteci kao i sama komponenta.

Ovo nije velika stvar ako svoj tekst postavite pomoću modularne ljestvice ili stvorite zajedničke stilove teksta s dodatkom Tekst stilova kako biste izbjegli nedosljednosti. Ali imajte na umu da vam neće trebati dodatak Sketch 51.

4 primitivne Libaries koje se koriste kao svojstva čestica za sve komponente u UI dizajnerskom sustavu

Sada imam 4 primitivne Biblioteke koje mogu koristiti za izradu komponenti. Budući da će se većina komponenti referirati na ove Biblioteke, datoteke komponenti postat će manje, manje složene i jednostavnije za upravljanje. Komponente će sadržavati samo vrlo malo jedinstvenih simbola, izvornih za njihovu datoteku.

Manje jedinstvenih dijelova znači da komponente ostaju ultra lagane. Koristeći trgovinu Symbols u svojim knjižnicama, sada mogu upotrijebiti Overrides za izgradnju vrlo fleksibilnih komponenti.

Ostavimo za sada ove 4 bibliotečke datoteke Njima ćemo se obratiti kasnije kad dođe vrijeme za sastavljanje komponente.

Korak 2: Identificirajte komponente varijable

Prije nego što izgradite svoju komponentu, nastojte prepoznati zahtjeve određene komponente. Drugim riječima, koji su jedinstveni atributi koji sadrže komponentu?

Za AIN sustav dizajna ima smisla izgraditi 2 stila Avatara, kako bi se razlikovale dvije različite korisničke vrste u proizvodu:

  • Ljudi - u obliku slike profila.
  • Projekti - u obliku logotipa tvrtke.

Kako bi se ove dvije korisničke vrste primjetno razlikovale, odluka o dizajnu donesena je za korištenje 2 vizualno različita stila: okrugli za korisnike i četvrtasti za tvrtke.

Svojstva pohranjena u Simboli organizirani u četiri primitivne bibliotečke datoteke

Sljedeća je varijabla koja je trebalo razmotriti je li korisnik prenio sliku ili ne. To je značilo da ćemo morati stvoriti 2 komponentna stanja, jedno sa slikom i jedno bez slike, za okrugle i kvadratne stilove.

Odlučili smo se pridržavati inicijala korisnika za slučajeve kad slika nije prenesena. To bi značilo da se tekst također mora uzeti u obzir za oba stila.

2 Stil komponenata: samo s inicijalama i sa slikom

Posljednja varijabla koju je trebalo uzeti u obzir bila je veličina Avatara. Bilo je poteško doći točno nakon što smo znali sve moguće slučajeve uporabe. Zahtijevalo je fino podešavanje nakon što smo započeli koristiti sustav, no ljestvica veličine je ostala vjerna mreži od 8pt, koju smo koristili za sve komponente i razmak u završnom sustavu. Ako ste novi u mreži od 8pt, to znači da su sve razmaknice više od 8, što vam pomaže da osigurate dosljedan ritam u svom radu.

Veličine komponenti temeljene na mreži od 8pt za kontinuirani ritam između svih komponenti i izgleda stranice

Ok, to je puno za pamćenje! Raščlanimo ove zahtjeve za komponente kako bi bili upravljiviji i jasan smo smjer.

Razbijanje zahtjeva

Avatari će morati imati stanja za poništavanje za:

  • Okruglo: (polumjer od 99 px) za korisničke avatare
  • Kvadrat: (polumjer 4px) za avatare logotipa tvrtke
  • Sa slikom: za kada je korisnik prenese
  • Sa inicijalima i pozadinom u boji: jer kada korisnik ne prenese sliku
  • 5 veličina: xl, l, m, s i xs

Korak 3: Identificirajte slučajeve ponovne upotrebe

Sada znamo zahtjeve za komponentu, vratimo se na te 4 primitivne Knjižnice. Koju se od postojećih Biblioteka možemo koristiti za izgradnju komponente Avatar?

Kao što je utvrđeno u mojoj reviziji, Avatare u sustavu sastoji se od 5 primitivnih svojstava:

Boja, oblik, obrub, tekst i slika

3 od kojih mogu koristiti Knjižnice koje smo napravili:

Boja, oblik i obrub

Tekst i u ovom slučaju slika su specifična za komponentu Avatar, što znači da ih je malo za ponovnu upotrebu drugdje u mom sustavu. Stoga ima smisla postupati s tim specifičnostima izravno unutar datoteke Sketch Avatar.

4. korak: izgradite komponentu avatar

Sada znamo zahtjeve, vrijeme je za stvaranje nove datoteke Sketch i izrade naše komponente. U svom slučaju nazvao sam datoteku AIN-avatara, gdje je AIN - prefiks naziva projekta. Korisno ako odlučite stvoriti više od jednog sustava.

Odatle sam ažurirao strukturu svoje mape s ravnog sustava na organiziranje Biblioteka po načelima Atomskog dizajna. Ovaj korak nije presudan, ali može vam pomoći da razmislite o dijelovima vašeg sustava prema redoslijedu složenosti.

Razumijevanje složenosti knjižnice ažuriranjem sustava mapa

Metoda pomoću Sažetak za kontrolu verzija

Ako Sažetak koristite za praćenje revizija i promjena, postavljene datoteke pomalo se razlikuju. Svoju datoteku želite stvoriti iz sažetka: Dodajte datoteku> Stvori datoteku skice kao biblioteku. Tako ćete spriječiti da naiđete na probleme u kojima Apstrakt ne prepozna simbole koje ste prethodno napravili.

Stvaranje nove biblioteke od Sažetak
Savjeti za sažetak: Otvorite datoteke iz sažetka pomoću gumba 'Uredi u skici', a ne iz skice. To će osigurati da promjene koje izvršite u vašim datotekama prati Sažetak.

Napravite poništavanja simbola za slike avatar

Unutar svoje nove datoteke stvorio sam 5 ploča umjetnina, u mojoj veličini xl (120px x 120px), dajući mi 5 mogućnosti poništavanja koje mogu upotrijebiti za slike korisničkih profila.

Pamtivši oblik slika mojih korisničkih profila, nazvao sam te Artboards avatar / image / rounded / 1 (1 do 5) i stvorio krug od 120 px kako bih ispunio svaku ploču s Artboardsima. Zatim sam svaki oblik pretvorio u masku: ctrl + klik na sloj, a zatim odaberite Mask.

Koristio sam UI Faces Sketch Plugin za automatsko generiranje svojih 5 slika. Naravno, ovdje ne morate lijepiti 5 slika, možete stvoriti onoliko poništavanja korisničkih slika koliko vam je potrebno. Kad to učinite, pretvorite svaku ploču u simbol.

Automatsko generiranje slika profila pomoću UI lica

Odavde sam stvorio još 5 Artboards-a, opet u svojoj veličini xl za poništavanje logotipa tvrtke. Ja imenujem ove Artboards avatar / image / 4px / 1 (od 1 do 5). Dalje sam dodao sloj oblika s polumjerom 4px, promijenio ispunu u boji i za svaku dodao različitu mogućnost logotipa. U mom slučaju koristio sam logotipe drugih proizvoda, ali možete koristiti ono što Logos ili grafiku želite.

Ne zaboravite pretvoriti nove Artboards u simbole nakon što završite.

Poništavanje simbola za logotipe tvrtki

Sjajno! Sada imam ukupno 10 novih simbola koje mogu upotrijebiti kao poništavanja za slike korisničkih profila i logotipe tvrtke.

Izradite glavni simbol za svaku veličinu komponente

Izgradnja glavne komponente je gdje se događa prava prava magija knjižnice. Ovdje ćemo iskoristiti naše Knjižnice obruba, oblika i boja od ranije. Ja to nazivam „glavnom“ komponentom jer ovo je komponenta Avatar koju ćemo ugraditi u dizajne pri izgradnji većih komponenti i dizajnerskih sastava.

Komponente Master Avatar u 5 veličina

Za izradu glavnih komponenti napravio sam još 5 ploča ploča, u 5 različitih veličina određenih pomoću mrežnog sustava od 8pt:

  • xl: 120 px
  • l: 96 px
  • m: 80 px
  • s: 64px
  • xs: 40px

Dodavanje poništavanja simbola iz knjižnica

Sada moramo umetnuti našu biblioteku oblika. Učinite to za svaku od 5 veličina ploče: umetnite> AIN oblici> oblik / polumjer> zaobljeni. To će nam omogućiti promjenu oblika Avatar-a iz okruglog u kvadratni za logotipe tvrtke.

Dodavanje knjižnice oblika u glavnu komponentu kako bi se omogućilo poništavanje oblika

Kako je moja Biblioteka boja ugniježđena unutar moje knjižnice oblika, jednim kamenom se ubijaju dvije ptice. Sada imamo kontrolu nad našim oblikom i bojom Avatar u obliku poništavanja simbola.

Provjerite nalazi li se sloj oblika pri dnu i preimenovali ste oblik sloja radi čistog imenovanja u svojim mogućnostima Override.

A sada učinimo isto za granicu. Naša će granica biti korisna kad Avatar sadrži sliku koja se sukobljava s bojom pozadine spremnika. Umetnite obrub za svaku veličinu ploče sada: umetnite> AIN-granice> obrub / polumjer> zaobljeni> bijeli.

Dodavanje granične knjižnice za neobavezne obrube

Nakon što postavite graničnu knjižnicu i ona odgovara obliku, provjerite je li novi sloj na vrhu sloja sloja i preimenovali ste sloj u obrub. Opet, ovo će vašu ploču Overrides održati čistom i lakom za čitanje.

Dodavanje slike Override Symbol glavnoj komponenti

Sada umetnimo te poništavanja slika koje smo stvorili ranije. Ako vam naknadno dodijelite imena Artboards, slijedeći istu konvenciju o imenovanju, trebali biste biti u mogućnosti nadjačati svoju sliku s bilo kojom od pet opcija koje smo prethodno napravili: Umetanje> Simboli> avatar> slika> zaokruženo> 1

Umetanje slike Nadjačaj iz unutarnjih simbola. To nam omogućuje promjenu slike profila i logotipa tvrtke

Obavezno to učinite za svaku veličinu. Opet preimenujte novi sloj u sliku da biste dobili čista poništena imena. Sloj vaše slike trebao bi stajati iznad vašeg sloja oblika.

Dodavanje teksta za inicijale korisnika

Posljednja faza je dodavanje teksta koji se koristi za pisanje inicijala imena našeg korisnika ili tvrtke. Inicijale se u komponenti prikazuju samo ako korisnik ne preda sliku, kako za slike korisničkog profila, tako i za logotip tvrtke.

Kao što je već spomenuto, možete kreirati stilove teksta na temelju svoje ljestvice tipografije ili upotrijebiti dodatak Textstyl.es da biste sinkronizirali dijeljene stilove teksta iz druge datoteke skice u datoteku komponente komponente Avatar.

* Dijeljeni stilovi teksta postat će izvorna značajka programa Sketch pod nazivom "Bibliotečni stilovi" u Sketch 51.

Koristeći ljestvicu tipa koja se koristi u mom dizajnerskom sustavu, odabrao sam 3 veličine fonta: 20px, 16px, 14px koje odgovaraju svim veličinama 5 komponenti.

Napravio sam novi sloj teksta za svaku veličinu simbola, stavljajući ga ispod sloja slike. Tekst će biti skriven od pogleda kad god se odabere slika.

Dodavanje tekstnog sloja radi omogućavanja korisničkih inicijala

Poravnanje sam postavio na auto, centrirao tekst i popravio ga na sredinu. Nisam stvorio stilove teksta zbog promjenjive visine retka i nedostatka ponovne upotrebe. Nakon što završite, ne zaboravite novi naziv preimenovati u tekst.

Korak 5: pomoću poništavanja komponenti

Sada biste trebali imati fleksibilnu komponentu Avatar, izgrađenu koristeći najmanji broj mogućih jedinstvenih simbola.

Kako biste testirali svoju novu komponentu i njene Poništavanja, umetnite glavni simbol u veličini po vašem izboru: Umetni> Simbol> Avatar> xlarge

Korištenje komponente Avatar i prevladavajući stilovi korisničkih slika

Ako ste odabrali simbol, u prozoru Inspektor s desne strane vidjet ćete sve moguće poništavanja, uključujući i one iz vaših vanjskih Biblioteka.

Prevladavajući oblik i slika za prikaz avatar logotipa tvrtke

Kako bih imao smisla za sve svoje mogućnosti Override, napravio sam stranicu pod nazivom Avatars na kojoj čuvam vizualni prikaz svih mogućih primjera Avatara korištenih u mom dizajnu.

Vizualna referenca mogućih stanja avatar

Sada bi trebali imati kompletnu komponentu Avatar pohranjenu u knjižnici koja se može ugniježditi u drugim datotekama Sketch-a. Pogledati ćemo kako to funkcionira kad napravimo komponentu kartice u sljedećem članku.

Dalje dalje

Na nekoliko je načina možete poboljšati svoj tijek rada odavde. Počet ću s nekoliko osnove i pustiti vas da trčite s njom odatle. Možda možete imati posebne zahtjeve za svoj projekt, koje ja nisam računao.

Korištenje programa Sketch Runner za poboljšanje brzine i učinkovitosti

Sketch runner je dragocjen alat kada je u pitanju uporaba vaših simbola i biblioteka. Umetnite svoje komponente s cmd + ', a zatim započnite s upisivanjem imena vašeg simbola. Ovo će postati najbrži način za izradu makete koristeći svoje komponente kada započnete pamtiti sva različita imena komponenti.

Verzija i suradnja u bibliotekama pomoću Sažetak

Ranije sam se dotaknuo korištenja Apstrakcije za verziju vašeg rada.

Kada pratite tijek rada temeljen na komponentama koristeći više Biblioteka, Sažetak će vam pomoći da ostanete na vrhu svih datoteka dok vaš sustav raste ili ako radite kao dio tima.

Napomena: Dodajte datoteke u Sažetak od početka. Tako ćete spriječiti da češljate kroz datoteke ažuriranje simbola kako bi ih Sažetak mogao pratiti. To sam morao učiniti, i nije bilo jako zabavno!

Dijeljenje biblioteka s vašim timom putem Sketch Clouda (od Sketch 49+)

Sketch 49 je objavio izdanje Sketch Clouda. Sada je moguće dijeljenje i suradnja s vašim Bibliotekama i suradnja s drugim dizajnerima, tako da nema potrebe za Dropboxom ili Google diskom. Osobno radim kao samostalni dizajn na dizajnerskim sustavima koje sam stvorio, tako da nisam koristio Sketch Cloud, ali bio bih zainteresiran za saslušanje od svakog tko ga ima.

Završavati

U ovom smo članku pogledali kako prihvaćanje principa iz Atomskog i Subatomskog Dizajna može nam pomoći da bolje razumijemo kako izgraditi visoko fleksibilne komponente na razini Atoma koristeći Sketch Libraries i Poništavanje simbola.

Izgradnjom komponenti prvenstveno pomoću simbola iz knjižnica možemo smanjiti višak i dizajnirati dug. Iako poništavanje simbola omogućava nam maksimalnu fleksibilnost u našim komponentama. Pohranjivanje naših komponenti u Biblioteke čini datoteke laganim, što naš sustav čini lakšim za održavanje i manje muke za ažuriranje.

Te će komponente postati sastavni dio našeg dizajnerskog sustava temeljenog na korisničkom sučelju, jer ih koristimo kao gradivne dijelove za brži prototip protokola većih dijelova korisničkog sučelja i manje nedosljednosti.

U sljedećem ćemo dijelu pregledati korištenje komponenti razine Atoma - Avatara ugrađenih ovdje zajedno s gumbima - za izradu složenijih komponentnih obrazaca, poput kartica. Ove veće komponente možete kategorizirati kao Molekule, prema Atomskom dizajnu, ali naravno, to je potpuno vaš poziv.

Ako vam je ovaj članak koristan, molimo vas da ga napišete kako bi i drugi koji bi mogli imati koristi od njegovog čitanja lakše pronašli.

Hvala na čitanju!

Resursi

  • Subatomski sustavi dizajna Daniel Eden
  • Održavanje dizajnerskih sustava Brada Frosta
  • Will Fanguy, sveobuhvatni vodič za sustave dizajna
  • Knjižice skica: Harry Cresswell gradi bolji sustav gumba
  • Biblioteke skica: Kako djeluju i lude stvari koje s njima može raditi Jon Moore.
  • Atomski dizajn: Stvorite sustave dizajna, a ne govori stranice Brad Frost
  • Ovladavanje tekstualnim sustavom u zajedničkim stilovima Bunin Dmitriy
  • Izvoz stilova teksta s Textstyl.es
  • Stil biblioteke Sync dodatak za sinkronizaciju dijeljenih stilova iz knjižnice u dok

Ja sam Harry Cresswell Suosnivač sam indtl.com i radim kao UX / UI dizajner u Angel Investment Network. Izrađujem tipove za svoje slobodne večeri i šaljem bilten o dizajnu i tipografiji.

Pronađite me na Twitteru ako želite pozdraviti.