En introduksjon til atomdesign for webdesignere / UI / UX

modularitet, gjenbruk, og skalerbarhet er ikke bare kodende konsepter, men du kan også gjøre bruk av dem til å lage bedre optimaliserte design systemer. Atomisk design er en ny metode for bygge effektive brukergrensesnitt fra bunnen opp, bruker en kjemi analogi.

I stedet for å designe samlinger av nettsider, atomdesign begynner med de enkleste UI-komponentene som kalles atomer (knapper, menyelementer, etc.), og bygger hele brukergrensesnittet opp via fire faser: molekyler, organismer, maler, og sider.

Boken

Metoden ble opprettet av designer Brad Frost med sikte på “utforming vellykkede UI design systemer”. Atomisk design var utgitt som en bok at du kan lese online gratis, eller bestille som en paperback ($ 20.00) eller en ebook ($ 10.00) så vel.

Atomisk design nærmer seg brukergrensesnittdesign fra et friskt nytt perspektiv som forhåpentligvis vil rist opp webdesign landskapet en liten bit. Denne artikkelen har til hensikt å gi intro inn i denne metoden, men boken går mye nærmere i forklaringen, så les den hvis du kan, det er verdt det.

Atometisk designhierarki

Atomisk design er i utgangspunktet a mental modell som gjør designere tenker på nettsider som en hierarki av gjenbrukbare komponenter. Hierarkiet av atomdesign er bygd opp av fem faser; hvert trinn er laget av en gruppe komponenter fra foregående trinn. De fem stadiene legger til en klar og logisk grensesnitt design system. De er som følger:

1. Atomer

Akkurat som i kjemi, atomer er de minste byggesteinene det kan ikke videre dekomponeres. Derfor er atomer det grunnleggende HTML-elementer, som knapper, etiketter og inntastingsfelter, det Gi de minste enhetene av en nettside.

Selvfølgelig, Ikke alle HTML-elementene er atomer, for eksempel snittelementer (

, etc.) er ikke (kan ikke være) de minste enhetene på en nettside.

Atomer er ikke bare HTML-elementene, men også deres tilhørende stiler: skrifter, farger, dimensjoner og andre CSS-stilregler. Med Brads egne ord, atomer “demonstrere alle dine grunnleggende stiler med et blikk”.

Atomer - Eksempel

Her er et eksempel fra vår hjemmeside. Overskriftene for anbefalte innlegg kan skyldes en type atom; de bruker samme HTML og CSS-kode og kan være lett fremtredende fra resten av innholdet.

Merk at Hongkiat.com ikke var designet med atomdesign i tankene, her brukes den bare for demonstrasjonsformål.

Essensen av atomdesign er å utform brukergrensesnittet fra bunnen opp med disse fem trinnene, Ikke å identifisere atomkonstruksjonskomponentene etterpå.

2. Molekyler

EN molekyl er formet av en gruppe av atomer. Molekyler utgjør neste trinn i atomdesignhierarkiet. Tenk på enklere brukergrensesnittelementer som allerede er laget av mer enn ett HTML-element, for eksempel et søkeskjema eller et anbefalt innlegg i sidefeltet.

Å være organisert i et molekyl gir en hensikt til hvert atom. I en større gruppe (molekyl) må atomer støtte og utfylling hverandre må de jobbe godt sammen for å skape en brukbar design.

For eksempel må tittelen (ett atom) få større vekt (større skrifttyper, mer vekt osv.) enn forfatterens navn (et annet atom) i den anbefalte postblokken. På denne måten er de to atomer “betydde” til jobbe som et lag for å få det beste resultatet.

Molekyler - Eksempel

Ved hjelp av vårt tidligere eksempel kan du se at i Hongkiats sidefelt kan en blokk med anbefalt innlegg sees som et molekyl. Et anbefalt innleggsmolekyl er bygget opp av tre atomer: et miniatyrbilde, en tittel og en forfatters navnatom.

3. Organer

Organismene er sammensatt av en gruppe av molekyler, atomer (og noen ganger andre organismer). I webdesign er organismer mer komplekse brukergrensesnitt som representerer definitive seksjoner av siden, for eksempel en topptekst, en bunntekst eller et sidebjelke.

Organismer kan enten bestå av forskjellige typer molekyler, for eksempel kan en sidebar bestå av en søkefelt og forskjellige typer widgets, eller av det samme molekylet gjentas flere ganger, for eksempel en håndfull relaterte innleggsblokker under hverandre. Og det kan være kombinasjonen av disse to.

Organer - Eksempel

På Hongkiats nettsted kan sidebaret være en organisme. Den består av a søkelinje (en type molekyl, vises kun én gang) og flere anbefalte innlegg (en annen type molekyl, vises mange ganger).

Sidebarorganismen kan imidlertid også ses som sammensetningen av a molekyl (søkefeltet) og en annen organisme (den anbefalte innleggsmodulen med flere anbefalte innlegg). Atomisk design er en fleksibel modell, Reglene er ikke veldig strenge, så i dette tilfellet kan vi definere samme byggeblokk både som et molekyl og en organisme.

4. Maler

Den neste fasen i atomdesignhierarkiet er maler. Som du kan se, er dette når atomdesign slutter å bruke kjemi analogi. Brad avstår fra terminologien på dette punktet som han mener det er mindre forståelig for kunder og andre interessenter, og det er i hovedsak de to siste stadiene (maler og sider) som designere må selge.

maler er bygd opp av organismer. De er objekter på sidenivå men uten det endelige innholdet. Formålet med maler er å representere strukturen av det underliggende innholdet.

Maler viser hvordan forskjellige atomer, molekyler, organismer “fungere sammen i sammenheng med et oppsett”. De representerer i utgangspunktet skjelett av en side.

Maler - Eksempel

For eksempel, tenk på a Hjemmeside mal med plassholderbilder og lorem ipsum tekstblokker.

Nedenfor kan du se et eksempel fra Atomic Design-boken. Det er startsiden mal av TimeInc magazine. Atomer, molekyler og organismer er alt på deres sted, men bare med skjematisk innhold.

5. Sider

sider representerer den siste fasen av atomdesignhierarkiet. Sider er “spesifikke forekomster av maler”. I sidefasen får maler befolket med ekte innhold (kopi, mikroskopi, bilder, videoer, etc.), akkurat som de vil vises i den virkelige brukergrensesnittet.

Sider tillater designere å se hvordan siste brukeropplevelse vil se ut til, til teste designen med ekte brukere, og til måle hvor godt det utfører i form av brukervennlighet, konvertering, tilgjengelighet og andre beregninger.

Sider og malvarianter

Det andre målet med sidetrinnet er å lage malvariasjoner mulig. Vi snakker om malvarianter når den underliggende mal er den samme men befolkningen innholdet er (litt) annerledes. Hvis du for eksempel vil vise annerledes innhold til forskjellige brukergrupper (for eksempel for besøkende versus innloggede brukere), eller når en overskrift er mye lengre enn de andre.

Bruke malvariasjoner er avgjørende hvis vi ønsker å skape konsistent og motstandsdyktig brukergrensesnitt. Mindre komponenter (atomer, molekyler, organismer) må fungerer godt i forskjellige scenarier.

For eksempel, en knapp må se klikkbar med uansett omgivende elementer rundt. Hvis det ikke ser ut til å fungere i en viss variasjon, må du redesignere knappatomet til det passer alle brukstilfeller.

Sider - Eksempel

Nedenfor kan du se sidesteden i den forrige TimeInc-startsiden mal. Ser annerledes ut? Dette er bare en malvariasjon, selv om. For å ha et effektivt brukergrensesnitt, må designteamet tenke hardt om Hva kan endres på det virkelige nettstedet. Deretter må de teste designet for den malvarianteringen (side) også.