En introduktion til atomdesign for webdesignere / UI / UX

modularitet, genbrugelighed, og skalerbarhed er ikke kun kodende begreber, men du kan også gøre brug af dem til at skabe bedre optimerede design systemer. Atomisk design er en ny metode til opbygge effektive brugergrænseflader fra bunden opad, ved hjælp af en kemi analogi.

I stedet for at designe samlinger af websider, Atomdesign begynder med de enkleste UI-komponenter, der kaldes atomer (knapper, menupunkter osv.) og bygger hele brugergrænsefladen op via fire faser: molekyler, organismer, skabeloner, og sider.

Bogen

Metoden blev skabt af designer Brad Frost med det formål at “udformning af vellykkede UI design systemer”. Atomisk design var udgivet som en bog at du kan læse online gratis eller bestille som en paperback ($ 20.00) eller en ebook ($ 10.00).

Atometisk design nærmer sig brugergrænsefladedesign fra et nyt nyt perspektiv, som forhåbentlig vil ryst webdesign landskabet en lille smule. Denne artikel har til hensigt at give en introduktion ind i denne metode, men bogen går meget længere ind i forklaringen, så læs den, hvis du kan, det er det værd.

Atometisk designhierarki

Atometisk design er i grunden a mentale model det gør designere til at tænke på websider som en hierarki af genanvendelige komponenter. Hierarkiet af atomdesign er bygget op af fem faser; hvert trin er lavet af en gruppe komponenter fra det foregående trin. De fem faser giver en klar og logisk opbygning interface design system. De er som følger:

1. Atomer

Ligesom i kemi, atomer er de mindste byggesten der kan ikke yderligere nedbrydes. Atomer er derfor de grundlæggende HTML elementer, f.eks. knapper, etiketter og indtastningsfelter, det give de mindste enheder af en webside.

, osv.) er ikke (kan ikke være) de mindste enheder af en webside.

Atomer er ikke blot HTML-elementerne, men også deres tilhørende stilarter: skrifttyper, farver, dimensioner og andre CSS-stilregler. Med Brads egne ord, atomer “demonstrere alle dine grundlæggende stilarter et øjeblik”.

Atomer - Eksempel

Her er et eksempel fra vores hjemmeside. Overskrifterne for anbefalede indlæg kan skyldes en type atom; de bruger samme HTML og CSS kode og kan være let adskilt fra resten af indholdet.

Bemærk at Hongkiat.com ikke var designet med atomdesign i tankerne, her bruges det kun til demonstrationsformål.

Essensen af atomdesign er at design brugergrænsefladen fra bunden op ved hjælp af disse fem trin, ikke at identificere atomkonstruktionskomponenterne bagefter.

2. Molekyler

EN molekyle er dannet af en gruppe af atomer. Molekyler udgør det næste trin i atomdesignhierarkiet. Tænk på enklere brugergrænseelementer, der allerede er lavet af mere end en HTML-element, f.eks. en søgeformular eller et anbefalet indlæg i sidebjælken.

At være organiseret i et molekyle giver et formål til hvert atom. I en større gruppe (molekyle) skal atomer støtte og komplement hinanden må de arbejde godt sammen for at skabe et brugbart design.

For eksempel skal titlen (et atom) få større vægt (større skrifttyper, mere vægt osv.) end forfatterens navn (et andet atom) i den anbefalede postblok. På denne måde er de to atomer “betød” til arbejde som et team for at få det bedste resultat.

Molekyler - Eksempel

Ved hjælp af vores tidligere eksempel kan du se, at i Hongkiats sidebjælke kan en blok af anbefalet indlæg ses som et molekyle. Et anbefalet postmolekyle er bygget op af tre atomer: en miniature, en titel og en forfatters navn atom.

3. Organismer

Organismer er sammensat af a gruppe af molekyler, atomer (og nogle gange andre organismer). I webdesign er organismer mere komplekse UI komponenter der repræsenterer endelige afsnit af siden, f.eks. et overskrift, en footer eller et sidebjælke.

Organismer kan enten bestå af forskellige typer af molekyler, for eksempel kan et sidebar bestå af en søgelinje og forskellige slags widgets eller af det samme molekyle gentages flere gange, for eksempel en håndfuld relaterede postblokke under hinanden. Og det kan være kombinationen af disse to.

Organismer - Eksempel

På Hongkiats hjemmeside kunne sidebar være en organisme. Den består af a søgelinje (en type molekyle, vises kun én gang) og flere anbefalede indlæg (en anden type molekyle, der vises mange gange).

Sidebarorganismen kan imidlertid også ses som sammensætningen af a molekyle (søgelinjen) og en anden organisme (den anbefalede post-widget med flere anbefalede indlæg). Atometisk design er a fleksibel model, Reglerne er ikke meget strenge, så i dette tilfælde kan vi definere samme byggesten både som et molekyle og en organisme.

4. Skabeloner

Den næste fase i atomdesignhierarkiet er skabeloner. Som du kan se, er dette når atomdesign stopper ved hjælp af kemi analogi. Brad afstår fra terminologien på dette tidspunkt, som han mener er det mindre forståelig for kunder og andre interessenter, og det er i det væsentlige de to sidste faser (skabeloner og sider), som designere skal sælge.

Skabeloner er opbygget af organismer. De er objekter på sideniveau men uden det endelige indhold. Formålet med skabeloner er at repræsenterer strukturen af det underliggende indhold.

Skabeloner viser, hvordan forskellige atomer, molekyler, organismer “fungere sammen i sammenhæng med et layout”. De repræsenterer i grunden skelet af en side.

Skabeloner - Eksempel

For et eksempel, tænk på a startside skabelon med pladsholderbilleder og lorem ipsum tekstblokke.

Nedenfor kan du se et eksempel fra Atomic Design-bogen. Det er hjemmesiden skabelonen af TimeInc magasinet. Atomer, molekyler og organismer er alle på deres sted, men kun med skematisk indhold.

5. Sider

sider repræsenterer det sidste trin i det atomiske design hierarki. Sider er “specifikke forekomster af skabeloner”. I sidefasen får skabeloner befolket med ægte indhold (kopi, mikroskopi, billeder, videoer osv.), ligesom de vises i den rigtige brugergrænseflade.

Sider giver designere mulighed for at se, hvordan endelig brugeroplevelse vil se ud til test designet med rigtige brugere og til måle hvor godt det udfører hvad angår brugervenlighed, konvertering, tilgængelighed og andre målinger.

Sider og skabelonvariationer

Det andet mål for sidestadiet er at lave skabelonvariationer muligt. Vi taler om skabelonvariationer, når de underliggende skabelonen er den samme men befolkningen indhold er (lidt) anderledes. Hvis du f.eks. Vil vise andet indhold til forskellige brugergrupper (for eksempel for besøgende versus indlogget brugere), eller når en overskrift er langt længere end de andre.

Brug af skabelonvariationer er afgørende, hvis vi ønsker at skabe konsekvent og elastisk brugergrænseflader. Mindre komponenter (atomer, molekyler, organismer) skal fungerer godt i forskellige scenarier.

For eksempel skal en knap se på klik med uanset omgivende elementer rundt. Hvis det ikke ser ud til at fungere i en bestemt variation, skal du omdøbe knapatomet til det passer til alle brugssager.

Sider - Eksempel

Nedenfor kan du se sidefasen på den tidligere TimeInc startside skabelon. Ser anderledes ud, huh? Dette er bare en skabelon variation, selvom. For at have en effektiv brugergrænseflade skal designteamet tænke hårdt på hvad der kan ændre sig i det virkelige websted. Derefter skal de teste designet for denne skabelonvariation (side) også.