Įvadas į interneto dizainerių atomų dizainą / UI / UX

Moduliarumas, pakartotinis naudojimas, ir mastelio yra ne tik kodavimo sąvokos, bet taip pat galite jas naudoti kuriant geriau optimizuotos projektavimo sistemos. Atominis dizainas yra nauja metodologija kurti veiksmingas UI iš apačios į viršų, naudojant chemijos analogiją.

Vietoj tinklalapių rinkinių, atominis dizainas prasideda paprasčiausiais UI komponentais, vadinamais atomai (mygtukai, meniu elementai ir pan.) ir sukuria visą UI per keturis etapus: molekulių, organizmai, šablonų, ir puslapius.

Knyga

Metodiką sukūrė dizaineris Brad Frost, kurio tikslas - “sėkmingų UI projektavimo sistemų kūrimas”. Atominis dizainas buvo išleista kaip knyga kad galite nemokamai skaityti internete arba užsisakyti kaip popierinį ($ 20.00) arba „ebook“ ($ 10.00).

Atominis dizainas orientuojasi į vartotojo sąsajos dizainą iš naujos, perspektyvios perspektyvos supurtykite interneto dizaino kraštovaizdį truputi. Šiame straipsnyje ketinama suteikti intro į šią metodiką, tačiau knygoje patenka daug aiškiau, todėl perskaitykite, jei galite, tai verta.

Atominės konstrukcijos hierarchija

Atominis dizainas iš esmės yra a psichikos modelis todėl dizaineriai galvoja apie tinklalapius kaip a pakartotinai naudojamų komponentų hierarchija. Atominio dizaino hierarchija yra sukurta penki etapai; kiekvienas etapas yra sudarytas iš ankstesnio etapo komponentų grupės. Šie penki etapai yra aiškūs ir logiški sąsajos projektavimo sistema. Jie yra tokie:

1. Atomai

Kaip ir chemijoje, atomai tai mažiausi statybiniai blokai negali būti toliau skaidoma. Todėl atomai yra pagrindiniai HTML elementai, pvz., mygtukai, etiketės ir įvesties laukai suteikti mažiausius vienetus tinklalapio.

Žinoma, ne visi HTML elementai yra atomai, pavyzdžiui, sekcijos elementai (

, ir tt) nėra (negali būti) mažiausi tinklalapio vienetai.

Atomai nėra tik HTML elementai, bet taip pat jų priklausomumo stilius: šriftai, spalvos, matmenys ir kitos CSS stiliaus taisyklės. Su Brado žodžiais, atomais “parodyti visus savo pagrindinius stilius”.

Atomai - pavyzdys

Štai mūsų svetainės pavyzdys. Galima nurodyti rekomenduojamų pranešimų antraštes vieno atomo tipo; jie naudoja tas pats HTML ir CSS kodas ir gali būti lengvai atskirti iš kito turinio.

Atkreipkite dėmesį, kad „Hongkiat.com“ nebuvo sukurtas atomo dizaino požiūriu, čia jis naudojamas tik demonstravimo tikslais.

Atominio dizaino esmė yra suprojektuokite UI iš apačios į viršų naudodami šiuos penkis etapus, vėliau atpažinti atomo dizaino komponentus.

2. Molekulės

A molekulės yra suformuotas atomų grupė. Molekulės sudaro kitą atominio dizaino hierarchijos etapą. Pagalvokite apie paprastesnius UI elementus, kurie jau yra pagaminti iš daugiau nei vieno HTML elemento, pvz., paieškos forma arba rekomenduojamas pranešimas šoninėje juostoje.

Būdama organizuota į molekulę suteikia tikslą prie kiekvieno atomo. Didesnėje grupėje (molekulėje) atomai turi būti parama ir papildymas viena kitai, jie privalo gerai dirbti kartu siekiant sukurti tinkamą dizainą.

Pavyzdžiui, pavadinimas (vienas atomas) turi būti daugiau dėmesio (didesni šriftai, daugiau svorio ir tt), nei autoriaus vardas (kitas atomas) rekomenduojamame pašto bloke. Tokiu būdu du atomai yra “reiškia” į dirbti komandoje gauti geriausią rezultatą.

Molekulės - pavyzdys

Naudodamiesi mūsų ankstesniu pavyzdžiu, galite pamatyti, kad Honkiatos šoninėje juostoje vienas rekomenduojamo įrašo blokas gali būti vertinamas kaip molekulė. Rekomenduojama post molekulė yra susideda iš trijų atomų: miniatiūra, pavadinimas ir autoriaus vardas.

3. Organai

Organizmai susideda iš a molekulių grupė, atomai (ir kartais kiti organizmai). Web dizainas yra organizmai sudėtingesni UI komponentai kurie atstovauja galutiniai skyriai puslapio, pvz., antraštės, poraštės arba šoninės juostos.

Organizmai gali būti sudaryti iš įvairių molekulių tipai, pavyzdžiui, šoninė juosta gali būti paieškos juosta ir skirtingų tipų valdikliai, arba ta pati molekulė kartojama kelis kartus, pvz., sauja keletas susijusių pašto blokų vienas po kito. Ir tai gali būti šių dviejų derinys.

Organizmai - pavyzdys

Honkiatos svetainėje šoninė juosta gali būti organizmas. Jis susideda iš a paieškos juosta (vienos molekulės tipas, rodomas tik vieną kartą) ir. \ t keletas rekomenduojamų pranešimų (kitos molekulės tipas, rodomas daug kartų).

Tačiau šoninės juostos organizmas taip pat gali būti laikomas a molekulės (paieškos juosta) ir kitu organizmu (rekomenduojamas pašto valdiklis su keliais rekomenduojamais įrašais). Atominis dizainas yra a lankstus modelis, taisyklės nėra labai griežtos, todėl šiuo atveju mes galime apibrėžti tą patį bloką ir kaip molekulę, ir organizmą.

4. Šablonai

Kitas atomo dizaino hierarchijos etapas šablonų. Kaip matote, tai yra tada, kai atominis dizainas nutraukia chemijos analogiją. Bradas šiuo metu nesilaiko terminologijos, nes jis mano, kad tai yra mažiau suprantama klientams ir kitoms suinteresuotosioms šalims, ir tai iš esmės yra du paskutiniai etapai (šablonai ir puslapiai), kuriuos dizaineriai turi parduoti.

Šablonai yra susikaupę organizmai. Jie yra puslapio lygio objektai bet be galutinio turinio. Šablonų tikslas yra atstovauti struktūrą pagrindinio turinio.

Šablonai rodo, kaip skirtingi atomai, molekulės, organizmai “funkciją kartu su išdėstymu”. Jie iš esmės atstovauja puslapio skeletas.

Šablonai - pavyzdys

Pavyzdžiui, pagalvokite apie pagrindinio puslapio šablonas su vietos žymeniu ir lorem ipsum teksto blokais.

Žemiau galite pamatyti Atomic Design knygos pavyzdį. Tai laikraščio „TimeInc“ pagrindinio puslapio šablonas. Atomai, molekulės ir organizmai yra visi jų vietoje, bet tik su schema.

5. Puslapiai

Puslapiai atstovauja paskutiniam atominio dizaino hierarchijos etapui. Puslapiai yra “konkrečių šablonų pavyzdžių”. Puslapio etape gaunami šablonai su tikrą turinį (kopija, mikropopija, vaizdai, vaizdo įrašai ir tt), kaip jie bus rodomi tikrajame vartotojo sąsajoje.

Puslapiai leidžia dizaineriams pamatyti, kaip galutinio vartotojo patirtį atrodys kaip išbandyti dizainą su tikrais naudotojais ir įvertinti, kaip gerai ji veikia naudojimosi, konversijos, prieinamumo ir kitų rodiklių požiūriu.

Puslapių ir šablonų variantai

Kitas puslapio etapo tikslas yra padaryti šablonų variantai įmanoma. Kalbame apie šablonų variantus, kai pagrindinė šablonas yra tas pats bet populiacija turinys yra (šiek tiek) skirtingas. Pavyzdžiui, jei norite rodyti skirtingą turinį skirtingoms vartotojų grupėms (pvz., Lankytojams, palyginti su prisijungusiais naudotojais), arba kai viena antraštė yra daug ilgesnė nei kiti.

Jei norite sukurti, labai svarbu naudoti šablonų variantus nuoseklus ir atsparus vartotojo sąsajos. Mažesni komponentai (atomai, molekulės, organizmai) turi būti tinkamai veikia įvairiuose scenarijuose.

Pavyzdžiui, mygtukas turi atrodyti paspaudžiamas bet kokie aplinkiniai elementai. Jei tam tikroje variacijoje ji neatrodo veiksma, reikia iš naujo keisti mygtuką, kol jis bus tinka visiems naudojimo atvejams.

Puslapiai - pavyzdys

Žemiau galite matyti ankstesnio „TimeInc“ pagrindinio puslapio šabloną. Atrodo kitaip? Tai teisinga vienas šablono variantas, nors. Norint turėti veiksmingą vartotojo sąsają, dizaino komanda turi galvoti apie tai kas gali pasikeisti realioje svetainėje. Tada jie taip pat turi išbandyti šio šablono varianto (puslapio) dizainą.