Úvod do atomového designu pro webové designéry / UI / UX

Modularita, použitelnosti, a škálovatelnost nejsou pouze kódovací koncepty, ale můžete je také využít k vytvoření lépe optimalizované konstrukční systémy. Atomový design je nová metodika pro budování efektivních uživatelských rozhraní zdola nahoru, použití analogie chemie.

Místo navrhování sbírek webových stránek, atomový design začíná nejjednoduššími komponentami uživatelského rozhraní atomy (tlačítka, položky menu, atd.) a sestavuje celé uživatelské rozhraní prostřednictvím dalších čtyř fází: molekul, organismů, šablon, a stránek.

Kniha

Metodiku vytvořil designér Brad Frost s cílem “vytváření úspěšných návrhových systémů UI”. Atomový design byl vydán jako kniha že můžete číst online zdarma, nebo objednat jako brožované ($ 20.00) nebo ebook ($ 10.00) stejně.

Atomový design přistupuje k návrhu uživatelského rozhraní z nové perspektivy, která snad bude setřást web design krajiny trochu. Tento článek má v úmyslu dát úvod do této metodiky, ale kniha jde do vysvětlení mnohem mnohem více, takže si ji přečtěte, pokud můžete, stojí to za to.

Atomová hierarchie návrhu

Atomový design je v podstatě a mentální model což činí designéry přemýšlet o webových stránkách jako hierarchii opakovaně použitelných komponent. Hierarchie atomového designu je tvořena pět etap; každá etapa je tvořena skupinou komponent z předchozí fáze. Těchto pět stupňů sčítá jasně a logicky systém návrhu rozhraní. Jsou následující:

1. Atomy

Stejně jako v chemii, atomy jsou nejmenší stavební bloky, které nelze dále rozložit. Atomy jsou proto základní elementy HTML, například tlačítka, štítky a vstupní pole nejmenší jednotky webové stránky.

Samozřejmě, ne všechny HTML elementy jsou atomy, například prvky dělení (

, apod.) nejsou (nemohou být) nejmenší jednotky webové stránky.

Atomy nejsou pouze prvky HTML, ale jejich styly: fonty, barvy, kóty a další pravidla stylu CSS. S Bradovými vlastními slovy, atomy “ukázat všechny své základní styly na první pohled”.

Atomy - příklad

Zde je příklad z našich webových stránek. Titulky doporučených příspěvků mohou být účtovány jeden typ atomu; používají stejný kód HTML a CSS a může být snadno rozlišitelné ze zbytku obsahu.

Všimněte si, že Hongkiat.com nebyl navržen s ohledem na atomový design, zde se používá pouze pro demonstrační účely.

Podstatou atomového designu je navrhnout uživatelské rozhraní od zdola nahoru pomocí těchto pěti fází, neidentifikovat následně atomové konstrukční součásti.

2. Molekuly

A molekula je tvořen skupinou atomů. Molekuly představují další fázi v hierarchii atomového designu. Přemýšlejte o jednodušších prvcích uživatelského rozhraní, které již jsou z více než jednoho HTML elementu, například vyhledávací formulář nebo doporučený příspěvek v postranním panelu.

Být organizován do molekuly dává účel na každý atom. Ve větší skupině (molekulách) musí atomy podporu a doplnění navzájem, musí dobře spolupracovat aby se vytvořil použitelný design.

Například název (jeden atom) musí získat větší důraz (větší fonty, větší váha atd.) než jméno autora (jiný atom) v doporučeném poštovním bloku. Tímto způsobem jsou oba atomy “znamenalo” na pracovat jako tým získat nejlepší výsledek.

Molekuly - příklad

S použitím našeho předchozího příkladu můžete vidět, že v postranním panelu Hongkiatu lze jeden blok doporučeného příspěvku považovat za molekulu. Doporučená post molekula je postavený ze tří atomů: miniatura, název a atom jména autora.

3. Organismy

Organismy se skládají z skupina molekul, atomů (a někdy jiné organismy). Ve web designu, organismy jsou složitější komponenty uživatelského rozhraní které představují definitivní sekce stránky, například záhlaví, zápatí nebo postranní panel.

Organismy mohou být buď tvořeny různých typů molekul, například postranní panel se může skládat z vyhledávacího panelu a různých druhů widgetů nebo z stejná molekula se několikrát opakovala, například několik souvisejících bloků příspěvků pod sebou. A může to být kombinace těchto dvou.

Organismy - příklad

Na webových stránkách Hongkiatu může být postranní panel organismus. Skládá se z vyhledávací panel (jeden typ molekuly, zobrazen pouze jednou) a několik doporučených příspěvků (jiný typ molekuly, zobrazený mnohokrát).

Nicméně, sidebar organismus může také být viděn jako složení molekula (vyhledávací panel) a jiného organismu (doporučený příspěvek widget s několika doporučenými příspěvky). Atomový design je flexibilní model, pravidla nejsou příliš přísná, takže v tomto případě můžeme definovat stejný stavební blok jako molekulu a organismus.

4. Šablony

Další fází v hierarchii atomového designu je šablon. Jak vidíte, jedná se o atomový design přestane používat analogii chemie. Brad se v této chvíli zdržuje terminologie, protože si myslí, že je to tak méně pochopitelné pro klienty a další zainteresované strany, a to je v podstatě dvě poslední fáze (šablony a stránky), které designéři potřebují prodat.

Šablony jsou tvořeny organismy. Oni jsou objektů na úrovni stránky ale bez konečného obsahu. Účelem šablon je představují strukturu obsahu.

Šablony zobrazují, jak různé atomy, molekuly, organismy “fungují společně v kontextu rozvržení”. V podstatě představují kostra stránky.

Šablony - Příklad

Například, přemýšlet o šablona domovské stránky s zástupnými obrazy a textovými bloky lorem ipsum.

Níže je uveden příklad z knihy Atomic Design. Je to šablona domovské stránky časopisu TimeInc. Atomy, molekuly a organismy jsou všechny na svém místě, ale pouze se schematickým obsahem.

5. Stránky

Stránky představují poslední fázi hierarchie atomového designu. Stránky jsou “specifických instancí šablon”. Ve fázi stránky se šablony dostanou naplněn skutečným obsahem (kopie, mikroskopie, obrázky, videa atd.), stejně jako se objeví v reálném uživatelském rozhraní.

Stránky umožňují konstruktérům, aby zjistili, jak zkušenosti uživatelů bude vypadat, do otestujte design se skutečnými uživateli a měří, jak dobře to provádí pokud jde o použitelnost, konverzi, dostupnost a další metriky.

Stránky a varianty šablon

Dalším cílem stránky je vytvořit variace šablon možný. Mluvíme o variantách šablony, když se podklad nachází Šablona je stejná ale osídlení obsah je (mírně) odlišný. Chcete-li například zobrazit různý obsah různým skupinám uživatelů (např. Pro návštěvníky versus přihlášené uživatele), nebo když je jeden nadpis mnohem delší než ostatní.

Pokud chceme vytvořit variace šablony, je rozhodující konzistentní a pružné uživatelských rozhraní. Menší složky (atomy, molekuly, organismy) musí fungují dobře v různých scénářích.

Tlačítko musí například klikat na tlačítko kolem okolních prvků. Pokud to nevypadá v určité variantě, je třeba přepracovat atom atomu až do té doby vyhovuje všem případům použití.

Stránky - Příklad

Níže můžete vidět fázi stránky předchozí šablony domovské stránky TimeInc. Vypadá to jinak, co? To je jen jednu variantu šablony, ačkoli. Abychom mohli mít efektivní uživatelské rozhraní, musí tým návrhářů tvrdě přemýšlet co se může změnit v reálném místě. Pak je třeba otestovat také návrh této varianty šablony (stránky).