Úvod do atómového dizajnu pre web dizajnérov

Atómy nie sú len prvky HTML, ale aj ich príslušné štýly: fonty, farby, rozmery a ďalšie pravidlá štýlu CSS. S Bradovými vlastnými slovami, atómy “demonštrovať všetky svoje základné štýly na prvý pohľad”.

Atómy - Príklad

Tu je príklad z našich webových stránok. Nadpisy odporúčaných príspevkov môžu byť účtované jeden typ atómu; používajú rovnaký kód HTML a CSS a môže byť ľahko rozlíšiť od zvyšku obsahu.

Berte na vedomie, že Hongkiat.com nebol navrhnutý s atómovým dizajnom na mysli, tu sa používa len na demonštračné účely.

Podstatou atómového dizajnu je navrhnite používateľské rozhranie zdola nahor pomocou týchto piatich etáp, neskôr identifikovať komponenty pre atómovú konštrukciu.

2. Molekuly

molekula je tvorený skupinou atómov. Molekuly predstavujú ďalšiu fázu hierarchie atómovej konštrukcie. Premýšľajte o jednoduchších prvkoch používateľského rozhrania, ktoré už máte z viac ako jedného prvku HTML, ako je vyhľadávací formulár alebo odporúčaný príspevok v bočnom paneli.

Byť organizovaný do molekuly dáva účel na každý atóm. Vo väčšej skupine (molekula), atómy musia podporu a doplnenie navzájom, musia dobre spolupracovať aby sa vytvoril použiteľný dizajn.

Napríklad, titul (jeden atóm) musí získať väčší dôraz (väčšie písma, väčšia váha atď.) ako je meno autora (ďalší atóm) v odporúčanom bloku. Týmto spôsobom sú dva atómy “znamenalo” na pracovať ako tím na dosiahnutie najlepšieho výsledku.

Molekuly - Príklad

Pomocou nášho predchádzajúceho príkladu môžete vidieť, že na bočnom paneli Hongkiatu sa jeden blok doporučeného príspevku môže vnímať ako molekula. Odporúčaná post-molekula je vytvorený z troch atómov: miniatúra, názov a atómový názov autora.

3. Organizmy

Organizmy sú zložené z a skupina molekúl, atómy (a niekedy iné organizmy). Vo webovom dizajne sú organizmy zložitejších používateľských komponentov ktoré predstavujú konečné časti ako je hlavička, päta alebo postranná lišta.

Organizmy môžu byť buď zložené rôznych typov molekúl, napríklad postranný panel môže pozostávať z vyhľadávacieho panela a iného typu widgetov alebo z rovnaká molekula sa niekoľkokrát opakovala, napríklad niekoľko súvisiacich blokov stĺpcov pod sebou. A môže to byť kombinácia týchto dvoch.

Organizmy - príklad

Na webovej stránke spoločnosti Hongkiat by bočný panel mohol byť organizmom. Je zložený z a vyhľadávacieho panela (jeden typ molekuly, zobrazený len raz) a niekoľko odporúčaných miest (iný typ molekuly, zobrazený mnohokrát).

Avšak, organizmus bočného panela možno tiež vnímať ako zloženie a molekula (vyhľadávací panel) a iným organizmom (odporúčaný príspevkový widget s niekoľkými odporúčanými príspevkami). Atómový dizajn je a flexibilný model, pravidlá nie sú veľmi prísne, takže v tomto prípade môžeme definovať rovnaký stavebný blok ako molekulu, ako aj organizmus.

4. Šablóny

Nasledujúca etapa v hierarchii atómového dizajnu je šablóny. Ako môžete vidieť, je to vtedy, keď atómový dizajn prestane používať analógiu chémie. Brad sa v tejto chvíli zdrží z terminológie, ako si myslí, že je to menej zrozumiteľné pre klientov a iné zainteresované strany, a to je v podstate dve posledné etapy (šablóny a stránky), ktoré musia dizajnéri predávať.

šablóny sú vytvorené z organizmov. Oni sú objektov na úrovni stránky ale bez konečného obsahu. Účelom šablón je predstavujú štruktúru základného obsahu.

Šablóny zobrazujú, ako rôzne atómy, molekuly, organizmy “fungujú spoločne v kontexte rozloženia”. V podstate reprezentujú kostra stránky.

Šablóny - Príklad

Napríklad, premýšľajte o šablóna domovskej stránky s obrázkami zástupných znakov a textovými blokmi lorem ipsum.

Nižšie uvidíte príklad z knihy Atómový dizajn. Ide o šablónu domovskej stránky časopisu TimeInc. Atómy, molekuly a organizmy sú všetko na svojom mieste len s schematickým obsahom.

5. Stránky

stránky predstavujú poslednú fázu hierarchie atómového dizajnu. Stránky sú “špecifické príklady šablón”. Vo fáze stránky získajú šablóny nabitý skutočným obsahom (kopírovanie, mikroskop, obrázky, videá atď.), tak ako sa objavia v skutočnom používateľskom rozhraní.

Stránky umožňujú projektantom vidieť, ako zážitok pre konečného používateľa bude vyzerať ako otestujte dizajn s reálnymi používateľmi a ako dobre funguje z hľadiska použiteľnosti, konverzie, prístupnosti a ďalších metrík.

Variácie stránok a šablón

Ďalším cieľom fázy stránky je urobiť variácie šablóny je to možné. Hovoríme o variantoch šablón, keď je základná šablóna je rovnaká ale populácie obsah je (mierne) odlišný. Ak napríklad chcete zobraziť odlišný obsah rôznym skupinám používateľov (napr. Pre návštevníkov versus prihlásených používateľov) alebo ak je jeden nadpis oveľa dlhší ako ostatné.

Použitie variácií šablón je kľúčové, ak chceme vytvoriť konzistentné a odolné používateľské rozhrania. Menšie zložky (atómy, molekuly, organizmy) musia fungovať dobre v rôznych scenároch.

Napríklad, tlačidlo musí vyzerať kliknutím bez ohľadu na okolité prvky. Ak sa v určitej variácii nevyjadruje žiadna akcia, musíte prepracovať atómu tlačidla, kým nebude vhodné pre všetky prípady použitia.

Stránky - Príklad

Nižšie uvidíte fázu stránky predchádzajúcej šablóny domovskej stránky TimeInc. Vyzerá to úplne inak, hm? Toto je správne jedna zmena šablóny, hoci. Ak chcete mať efektívne používateľské rozhranie, dizajnérsky tím musí premýšľať čo sa môže zmeniť v skutočnej lokalite. Potom potrebujú otestovať dizajn tejto variácie šablóny (stránky).