En introduktion till atomdesign för webbdesigners / UI / UX

modularitet, återanvändbarhet, och skalbarhet är inte bara kodande begrepp men du kan också använda dem för att skapa bättre optimerade designsystem. Atomisk design är en ny metod för bygga effektiva användargränssnitt från botten uppåt, använder en kemieanalog.

Istället för att designa samlingar av webbsidor, atomdesign börjar med de enklaste användargränssnittskomponenterna som heter atomer (knappar, menyalternativ, etc.), och bygger hela användargränssnittet upp via fyra steg: molekyler, organismer, mallar, och sidor.

Boken

Metoden skapades av designer Brad Frost med syftet med “utforma framgångsrika UI-designsystem”. Atomisk design var släpptes som en bok att du kan läsa online gratis eller beställa som en paperback ($ 20.00) eller en ebook ($ 10.00) också.

Atomic design närmar sig användargränssnitt design från ett nytt nytt perspektiv som förhoppningsvis kommer skaka upp webbdesign landskapet lite grann. Denna artikel avser att ge intro in i denna metodik men boken går in i förklaringen mycket mycket längre, så läs det om du kan, det är värt det.

Atomisk designhierarki

Atomisk design är i grunden a mental modell som gör att designers tänker på webbsidor som en hierarkin för återanvändbara komponenter. Hierarkin för atomdesign är uppbyggd av fem steg; varje steg är gjord av en grupp av komponenter från det föregående steget. De fem etapperna lägger till en tydlig och logisk gränssnittsdesignsystem. De är som följer:

1. Atomer

Precis som i kemi, atomer är de minsta byggstenarna som kan inte brytas ner ytterligare. Därför är atomer de grundläggande HTML-element, som knappar, etiketter och inmatningsfält, det ge de minsta enheterna av en webbsida.

, etc.) är inte (kan inte vara) de minsta enheterna på en webbsida.

Atomer är inte bara HTML-elementen men också deras tillhörande stilar: teckensnitt, färger, dimensioner och andra CSS-stilregler. Med Brads egna ord, atomer “visa alla dina grundläggande stilar på ett ögonkast”.

Atomer - Exempel

Här är ett exempel från vår hemsida. Rubrikerna för rekommenderade inlägg kan bero på en typ av atom; de använder samma HTML- och CSS-kod och kan vara lätt distinkt från resten av innehållet.

Observera att Hongkiat.com inte var utformat med atomdesign i åtanke, här används den bara för demonstrationsändamål.

Kärnan i atomdesign är att konstruera användargränssnittet från botten upp med dessa fem steg, att inte identifiera atomkomponenterna efteråt.

2. Molekyler

en molekyl är formad av en grupp av atomer. Molekylerna utgör nästa steg i atomdesignhierarkin. Tänk på enklare användargränssnitt som redan finns gjord av mer än en HTML-element, till exempel en sökformulär eller ett rekommenderat inlägg i sidofältet.

Att vara organiserad i en molekyl ger ett syfte till varje atom. I en större grupp (molekyl) måste atomer stöd och komplement varandra måste de jobba bra tillsammans för att skapa en användbar design.

Till exempel måste titeln (en atom) få större vikt (större teckensnitt, mer vikt etc.) än författarens namn (annan atom) i rekommenderat postblock. På så sätt är de två atomer “betydde” till jobba som ett team för att få det bästa resultatet.

Molekyler - Exempel

Med vårt tidigare exempel kan du se att i Hongkats sidofält kan ett block av rekommenderat inlägg ses som en molekyl. En rekommenderad postmolekyl är byggt upp av tre atomer: en miniatyrbild, en titel och en författares namnatom.

3. Organismer

Organismer består av a grupp av molekyler, atomer (och ibland andra organismer). I webbdesign är organismer mer komplexa UI-komponenter som representerar definitiva sektioner av sidan, till exempel en rubrik, en sidfot eller ett sidofält.

Organismer kan antingen bestå av olika typer av molekyler, till exempel kan en sidofält bestå av en sökfält och olika typer av widgets eller av samma molekyl upprepades flera gånger, till exempel en handfull relaterade postblock under varandra. Och det kan vara kombinationen av dessa två.

Organism - Exempel

På Hongkiats hemsida kan sidofältet vara en organism. Den består av a sökruta (en typ av molekyl, visas endast en gång) och flera rekommenderade inlägg (en annan typ av molekyl, som visas många gånger).

Sidebärgorganismen kan emellertid också ses som sammansättningen av a molekyl (sökfältet) och en annan organism (rekommenderad inläggs widget med flera rekommenderade inlägg). Atomisk design är en flexibel modell, Reglerna är inte så strikta, så i det här fallet kan vi definiera samma byggsten både som en molekyl och en organism.

4. Mallar

Nästa steg i atomdesignhierarkin är mallar. Som du kan se är det här när atomdesign slutar använda kemi analogi. Brad avstår från terminologin vid denna punkt som han tycker är det mindre förståeligt för kunder och andra intressenter, och det är i huvudsak de två sista stegen (mallar och sidor) som designers behöver sälja.

mallar är uppbyggda av organismer. Dom är objekt på sidnivå men utan det slutliga innehållet. Syftet med mallar är att representerar strukturen av det underliggande innehållet.

Mallar visar hur olika atomer, molekyler, organismer “fungerar tillsammans i samband med en layout”. De representerar i grunden skelett på en sida.

Mallar - Exempel

Tänk exempel på a hemsida mall med platshållare bilder och lorem ipsum text block.

Nedan kan du se ett exempel från Atomic Design boken. Det är tidsschemat för TimeInc-tidningen. Atomer, molekyler och organismer är alla på deras plats men endast med schematiskt innehåll.

5. Sidor

sidor representerar den sista etappen av atomdesignhierarkin. Sidor är “specifika fall av mallar”. I sidosteget får mallar befolkade med riktigt innehåll (kopia, mikroskopi, bilder, videor etc.), precis som de kommer att visas i den verkliga användargränssnittet.

Sidor tillåter designers att se hur slutlig användarupplevelse kommer att se ut, till testa konstruktionen med riktiga användare, och till mäta hur bra den utför vad gäller användbarhet, omvandling, tillgänglighet och andra mätvärden.

Sidor och mallvariationer

Det andra målet med sidstadiet är att göra mallvariationer möjlig. Vi pratar om mallvariationer när den underliggande mallen är densamma men befolkningen innehållet är (något) annorlunda. Om du till exempel vill visa annorlunda innehåll för olika användargrupper (t.ex. för besökare kontra inloggade användare), eller när en rubrik är mycket längre än de andra.

Att använda mallvariationer är avgörande om vi vill skapa konsekvent och fjädrande användargränssnitt. Mindre komponenter (atomer, molekyler, organismer) måste fungerar bra i olika scenarier.

Till exempel måste en knapp klickas med oavsett omgivande element runt. Om det inte verkar fungera i en viss variation, måste du omforma knappatomen tills den passar alla användningsfall.

Sidor - Exempel

Nedan kan du se sidosteget i den tidigare TimeInc-startsidan. Ser annorlunda ut, va? Det här är bara en mallvariation, fastän. För att ha ett effektivt användargränssnitt måste designteamet tänka hårt vad som kan förändras på den verkliga platsen. Då måste de testa designen för den mallvariationen (sidan) också.