Ievads tīmekļa dizaineru atomu dizainā / UI / UX

Modularitāte, atkārtota izmantošana, un mērogojamība ir ne tikai kodēšanas jēdzieni, bet arī jūs varat tos izmantot, lai izveidotu labāk optimizētas dizaina sistēmas. Atomu dizains ir jauna metodoloģija efektīvu UI veidošanu no apakšas uz augšu, izmantojot ķīmijas analoģiju.

Tā vietā, lai izstrādātu tīmekļa lapu kolekcijas, atomu dizains sākas ar vienkāršākajiem UI komponentiem atomiem (pogas, izvēlnes vienumi utt.) un izveido visu lietotāja interfeisu, izmantojot vēl četrus posmus: molekulām, organismiem, veidnes, un lapas.

Grāmata

Metodoloģiju izstrādāja dizainers Brads Frosts, kura mērķis bija “veiksmīgu UI dizaina sistēmu izstrāde”. Atomiskais dizains bija kā grāmata ka jūs varat bez maksas lasīt tiešsaistē vai arī pasūtīt kā papīru ($ 20.00) vai ebook ($ 10,00)).

Atomic dizains pieeju lietotāja interfeisa dizainu no svaigu jaunu perspektīvu, kas, cerams, būs sakratiet web dizaina ainavu nedaudz. Šis pants paredz dot intro šajā metodoloģijā, bet grāmata iet daudz skaidrāk, tāpēc lasiet, ja iespējams, tas ir tā vērts.

Atomu dizaina hierarhija

Atomu dizains būtībā ir a garīgo modeli kas padara dizainerus domāt par tīmekļa lapām kā a atkārtoti izmantojamo komponentu hierarhija. Atomu dizaina hierarhija ir veidota pieci posmi; katrs posms ir izgatavots no iepriekšējā posma komponentu grupas. Pieci posmi papildina skaidru un loģisku saskarnes dizaina sistēma. Tie ir šādi:

1. Atomi

Tāpat kā ķīmijā, atomiem ir mazākie celtniecības bloki nevar sadalīt tālāk. Tāpēc atomi ir pamata HTML elementi, piemēram, pogas, uzlīmes un ievades lauki nodrošināt mazākās vienības no tīmekļa lapas.

, uc) nav (nevar būt) mazākās tīmekļa lapas vienības.

Atomi nav vienkārši HTML elementi, bet arī viņu piederības stili: fonti, krāsas, izmēri un citi CSS stila noteikumi. Ar Brada paša vārdiem, atomiem “demonstrējiet visus jūsu pamata stilus”.

Atomi - piemērs

Lūk, mūsu tīmekļa vietnes piemērs. Ieteicamo amatu virsraksti var veidot informāciju viena veida atoms; viņi izmanto tas pats HTML un CSS kods un var būt viegli atšķirt no pārējā satura.

Ņemiet vērā, ka Hongkiat.com nav izstrādāts ar atomu dizainu, šeit tas tiek izmantots tikai demonstrācijas nolūkos.

Atomu dizaina būtība ir veidojiet UI no apakšas uz augšu, izmantojot šos piecus posmus, pēc tam nenorādīt atomu dizaina komponentus.

2. Molekulas

A molekulu veidojas atomu grupa. Molekulas veido nākamo posmu atomu dizaina hierarhijā. Padomā par vienkāršākiem UI elementiem, kas jau ir no vairākiem HTML elementiem, piemēram, meklēšanas veidlapu vai ieteicamo ziņu sānjoslā.

Tā ir organizēta molekulā dod mērķi uz katru atomu. Lielākā grupā (molekulā) atomiem ir jābūt atbalsts un papildinājums viena otrai, viņiem ir jābūt labi sadarboties lai izveidotu lietojamu dizainu.

Piemēram, nosaukumam (vienam atomam) ir jābūt iegūt lielāku uzsvaru (lielāki fonti, vairāk svara utt.) nekā autora vārds (cits atoms) ieteicamajā pasta blokā. Tādā veidā abi atomi ir “nozīmē” uz strādā kā komanda lai iegūtu vislabāko rezultātu.

Molekulas - piemērs

Izmantojot mūsu iepriekšējo piemēru, jūs varat redzēt, ka Honkiatas sānjoslā vienu ieteicamā amata bloku var uzskatīt par molekulu. Ieteicamā postmolekula ir izveidots no trim atomiem: sīktēls, nosaukums un autora vārda atoms.

3. Organismi

Organismi sastāv no a molekulu grupa, atomi (un dažreiz citi organismi). Web dizainā organismi ir sarežģītāki UI komponenti kas pārstāv galīgās sadaļas lapas, piemēram, galvenes, kājenes vai sānjoslas.

Organismus var veidot vai nu dažāda veida molekulas, piemēram, sānjosla var būt meklēšanas josla un dažāda veida logrīki vai viena un tā pati molekula atkārtota vairākas reizes, piemēram, daži saistītie pasta bloki viens otram. Un tas var būt šo divu kombinācija.

Organismi - piemērs

Hongkiat tīmekļa vietnē sānjosla varētu būt organisms. Tas sastāv no a meklēšanas josla (viena veida molekula, parādīta tikai vienu reizi) un. \ t vairākas ieteicamās ziņas (cita veida molekula, parādīta vairākas reizes).

Tomēr sānjoslas organismu var uzskatīt arī par a molekulu (meklēšanas josla) un citu organismu (ieteicamā ziņu widget ar vairākām ieteicamajām ziņām). Atomu dizains ir a elastīgs modelis, noteikumi nav ļoti stingri, tāpēc šajā gadījumā mēs varam definēt to pašu ēkas bloku gan kā molekulu, gan organismu.

4. Veidnes

Nākamais posms atomu dizaina hierarhijā ir veidnes. Kā redzat, tas ir tad, kad atomu dizains apstājas, izmantojot ķīmijas analoģiju. Brad atturas no terminoloģijas šajā brīdī, jo viņš domā, ka tas ir mazāk saprotams klientiem un citām ieinteresētajām personām, un tas būtībā ir divi pēdējie posmi (veidnes un lapas), kas dizaineriem ir jāpārdod.

Veidnes ir izveidojušies no organismiem. Viņi ir lapu līmeņa objekti bet bez galīgā satura. Veidņu mērķis ir pārstāvēt struktūru saturu.

Veidnes parāda, kā dažādie atomi, molekulas, organismi “darbojas kopā izkārtojuma kontekstā”. Tās pamatā pārstāv lapas skelets.

Veidnes - piemērs

Piemēram, domājiet par mājas lapas veidne ar vietas apzīmējumu attēliem un lorem ipsum teksta blokiem.

Zemāk jūs varat redzēt piemēru no Atomic Design grāmatas. Tas ir žurnāla TimeInc mājas lapas veidne. Atomi, molekulas un organismi ir visi savā vietā, bet tikai ar shematisku saturu.

5. Lapas

Lapas atomu dizaina hierarhijas pēdējais posms. Lapas ir “konkrētu veidņu gadījumu”. Lapas posmā tiek saņemtas veidnes ar reālu saturu (kopija, mikroskopija, attēli, video utt.), tāpat kā tie parādīsies reālajā lietotāja interfeisā.

Lapas ļauj dizaineriem redzēt, kā gala lietotāju pieredzi izskatīsies pārbaudīt dizainu ar reāliem lietotājiem un novērtēt, cik labi tas darbojas attiecībā uz lietojamību, konversiju, pieejamību un citiem rādītājiem.

Lapas un veidnes variācijas

Otrais lapas posma mērķis ir izdarīt veidnes variācijas iespējams. Mēs runājam par veidnes variācijām, kad pamatā ir veidne ir tāda pati bet populācija saturs ir (nedaudz) atšķirīgs. Piemēram, ja vēlaties parādīt atšķirīgu saturu dažādām lietotāju grupām (piemēram, apmeklētājiem salīdzinājumā ar reģistrētiem lietotājiem) vai ja viena virsraksts ir daudz ilgāks nekā citi.

Veidņu variantu izmantošana ir ļoti svarīga, ja mēs vēlamies izveidot konsekventi un elastīgi lietotāja saskarnes. Mazākām sastāvdaļām (atomiem, molekulām, organismiem) darbojas dažādos scenārijos.

Piemēram, pogai ir jāmeklē klikšķināms ar neatkarīgi no apkārtējiem elementiem. Ja noteiktā variantā tas nav izskatāms, jums ir nepieciešams pārveidot pogas atomu, līdz tas būs atbilst visiem lietošanas gadījumiem.

Lapas - piemērs

Zemāk jūs varat redzēt iepriekšējā TimeInc mājas lapas veidnes lapu. Izskatās citādi, vai ne? Tas ir taisnība viena veidnes variācija, tomēr. Lai būtu efektīvs lietotāja interfeiss, dizaina komandai ir jādomā par to kas var mainīties reālajā vietā. Tad viņiem ir jāpārbauda arī šīs veidnes varianta (lapas) dizains.