Sissejuhatus veebidisainerite Atomic Design'ile / UI / UX

Modulaarsus, korduvkasutatavus, ja mastaapsuse ei ole mitte ainult kodeerimiskontseptsioonid, vaid saate ka neid luua paremini optimeeritud disainisüsteemid. Aatomite disain on uus metoodika tõhusate kasutajaliideste loomine alt üles, keemia analoogia abil.

Veebilehtede kogumiku kujundamise asemel, aatomi disain algab lihtsaimast kasutajaliidese komponendist aatomid (nupud, menüüelemendid jne) ja ehitab kogu kasutajaliidese veel nelja etapi kaudu: molekulid, organismid, malle, ja lehekülgi.

Raamat

Metoodika on loonud disainer Brad Frost eesmärgiga “edukate kasutajaliidese disainisüsteemide loomine”. Aatomite disain oli vabastatakse raamatuna et saate tasuta võrgus lugeda või tellida ka paberkandjal ($ 20.00) või e-raamatuna ($ 10.00).

Aatomite disain läheneb kasutajaliidese kujundusele uuest uuest vaatenurgast, mis loodetavasti toimub raputage veebidisaini maastikku natukene. See artikkel kavatseb anna intro sellesse metoodikasse, kuid raamat läheb selgitamisse palju kaugemale, nii et lugege seda, kui saate, see on seda väärt.

Aatomite disaini hierarhia

Aatomite disain on põhimõtteliselt a vaimne mudel mis muudab disainerid veebilehtedeks a korduvkasutatavate komponentide hierarhia. Aatomite disaini hierarhia on üles ehitatud viis etappi; iga etapp on tehtud eelmise etapi komponentide rühmast. Need viis etappi on selge ja loogiline liidese disainisüsteem. Need on järgmised:

1. Aatomid

Nii nagu keemia, aatomid on kõige väiksemad ehituskivid ei saa enam laguneda. Seetõttu on aatomid põhilised HTML-elemendid, näiteks nupud, sildid ja sisestusväljad pakkuda kõige väiksemaid üksusi veebilehe.

Muidugi, mitte kõik HTML-elemendid on aatomid, näiteks sektsioonielemendid (

, jne) ei ole (ei saa olla) veebilehe väikseimad üksused.

Aatomid ei ole lihtsalt HTML-elemendid, vaid ka nende kuuluvus: fonte, värve, mõõtmeid ja muid CSS-stiili eeskirju. Bradi enda sõnadega, aatomitega “näidata kõiki oma põhilisi stiile lühidalt”.

Aatomid - näide

Siin on näide meie veebisaidilt. Soovitatavate postituste pealkirjad võivad kajastada üks aatomi tüüp; nad kasutavad sama HTML- ja CSS-kood ja võib olla kergesti eristatavad ülejäänud sisust.

Pange tähele, et Hongkiat.com ei ole mõeldud aatomi kujundusega, siin kasutatakse seda ainult tutvustamiseks.

Aatomite disaini olemus on kujundada kasutajaliides alt üles, kasutades neid viit etappi, mitte hiljem tuvastada aatomi disainikomponente.

2. Molekulid

A molekul on moodustatud aatomite rühma poolt. Molekulid moodustavad aatomi kujundamise hierarhia järgmise etapi. Mõtle lihtsamatele kasutajaliidese elementidele, mis on juba olemas valmistatud rohkem kui ühest HTML-elemendist, näiteks otsinguvorm või soovitatav postitus külgribal.

Olles organiseeritud molekuliks annab eesmärgi igale aatomile. Suuremas grupis (molekul) peavad aatomid olema toetust ja täiendust üksteist, peavad nad töötavad koos kasutatava disaini loomiseks.

Näiteks peab pealkiri (üks aatom) rohkem tähelepanu (suuremad fonte, rohkem kaalu jne) kui autori nimi (teine aatom) soovitatavas postitusblokis. Nii on kaks aatomit “tähendas” kuni töötada meeskonnana parima tulemuse saamiseks.

Molekulid - näide

Kasutades meie eelmist näidet, näete, et Hongkiat'i külgriba puhul võib ühe soovitatava postituse ploki pidada molekuliks. Soovitatav postimolekul on kolmest aatomist: pisipilt, pealkiri ja autori nimi aatom.

3. Organismid

Organismid koosnevad a molekulide rühm, aatomid (ja mõnikord muud organismid). Veebidisainis on organismid keerukamaid UI komponente mis esindavad lõplikud osad lehekülje, näiteks päise, jaluse või külgriba.

Organismid võivad koosneda kas erinevat tüüpi molekule, näiteks võib külgriba koosneda otsinguribast ja erinevat tüüpi vidinatest või sama molekuli korrati mitu korda, näiteks käputäis omavahel seotud postkasti. Ja see võib olla nende kahe kombinatsioon.

Organismid - näide

Hongkiat'i veebisaidil võib külgriba olla organism. See koosneb a otsinguriba (üks molekuli tüüp, kuvatakse ainult üks kord) ja mitu soovitatud ametikohta (teist tüüpi molekul, kuvatakse mitu korda).

Külgriba organismi võib siiski vaadelda kui a molekul (otsinguriba) ja teise organismi (soovitatav postitusplokk, millel on mitu soovitatud postitust). Aatomite disain on a paindlik mudel, reeglid ei ole väga ranged, nii et sel juhul saame määratleda sama ehitusploki nii molekulina kui ka organismina.

4. Mallid

Aatomi kujundamise hierarhia järgmine etapp on malle. Nagu näete, on see siis, kui aatomi disain lõpetab keemia analoogia. Brad hoidub siinkohal terminoloogiast, sest ta arvab, et see on vähem arusaadav klientidele ja teistele sidusrühmadele ning see on sisuliselt kaks viimast etappi (mallid ja leheküljed), mida disainerid peavad müüma.

Mallid on loodud organismidest. Nemad on lehekülje tasemel objektid aga ilma lõpliku sisuta. Mallide eesmärk on esindama struktuuri sisu.

Mallid näitavad, kuidas erinevad aatomid, molekulid, organismid “toimima koos paigutuse kontekstis”. Nad esindavad põhimõtteliselt lehekülje skelett.

Mallid - näide

Näiteks mõelge a kodulehekülje mall kohatäitjate ja lorem ipsum tekstiplokkidega.

Allpool on näide Atomic Design raamatust. See on ajakirja TimeInc kodulehe mall. Aatomid, molekulid ja organismid on kõik nende kohal, kuid ainult skemaatilise sisuga.

5. Leheküljed

Leheküljed esindavad aatomi kujundamise hierarhia viimast etappi. Leheküljed on “konkreetsete malle”. Lehekülje etapis saavad mallid tegelik sisu (kopeerimine, mikrokoopia, pildid, videod jne), nagu need ilmuvad reaalses kasutajaliideses.

Leheküljed võimaldavad disaineritel näha, kuidas lõppkasutaja kogemus näeb välja testida disaini reaalsete kasutajatega ja mõõta, kui hästi see toimib kasutatavuse, konversiooni, juurdepääsetavuse ja muude näitajate osas.

Lehekülgede & malli variandid

Lehekülje etapi teine eesmärk on teha malli variandid võimalik. Me räägime malli variatsioonidest, kui aluseks olevad mall on sama aga populatsioon sisu on (veidi) erinev. Näiteks, kui soovite erinevate kasutajarühmade jaoks näidata erinevat sisu (nt külastajatele ja sisselogitud kasutajatele) või kui üks pealkiri on palju pikem kui teised.

Mallide variantide kasutamine on ülioluline, kui soovime luua järjepidev ja vastupidav kasutajaliidesed. Väiksemad komponendid (aatomid, molekulid, organismid) peavad olema toimivad erinevates stsenaariumides hästi.

Näiteks peab nupp nägema klõpsatavaks olenemata ümbritsevatest elementidest. Kui see ei ole teatud variandi puhul otsitav, tuleb nupu aatom uuesti kujundada, kuni see muutub sobib kõigile kasutusjuhtudele.

Leheküljed - näide

Allpool on näha eelmise kellaaja alguslehe malli etapp. Paistab, kas? See on õige üks malli variant, küll. Tõhusa kasutajaliidese saamiseks peab disainirühm mõtlema mis võib muutuda tegelikus kohas. Siis peavad nad ka selle malli variandi (lehekülg) disaini katsetama.