O introducere în design atomic pentru designeri web

Atomii nu sunt pur și simplu elementele HTML, ci și stilurile lor de apartenență: fonturi, culori, dimensiuni și alte reguli de stil CSS. Cu cuvintele lui Brad, atomi “demonstrați toate stilurile de bază dintr-o privire”.

Atomi - Exemplu

Iată un exemplu de pe site-ul nostru. Titlurile posturilor recomandate pot fi considerate un tip de atom; ei folosesc același cod HTML și CSS și poate fi ușor de distins din restul conținutului.

Rețineți că Hongkiat.com nu a fost conceput pentru designul atomic, aici este folosit doar pentru scopuri demonstrative.

Esența designului atomic este proiectați UI-ul de jos în sus folosind aceste cinci etape, pentru a nu identifica ulterior componentele de design atomic.

2. Molecule

A moleculă este formata de un grup de atomi. Moleculele constituie următoarea etapă a ierarhiei de proiectare atomică. Gândiți-vă la elementele de UI mai simple care sunt deja realizat din mai multe elemente HTML, cum ar fi un formular de căutare sau un post recomandat în bara laterală.

Fiind organizată într-o moleculă dă un scop la fiecare atom. Într-un grup mai mare (moleculă), atomii trebuie sprijin și completare reciproc, trebuie lucrează bine împreună pentru a crea un design util.

De exemplu, titlul (un atom) trebuie obțineți mai mult accent (fonturi mai mari, greutate mai mare etc.) decât numele autorului (un alt atom) în blocul de post recomandat. În acest fel, cei doi atomi sunt “a însemnat” la lucrează ca o echipă pentru a obține cel mai bun rezultat.

Molecule - Exemplu

Folosind exemplul nostru anterior, puteți vedea că în bara laterală a lui Hongkiat, un bloc de post recomandat ar putea fi văzut ca o moleculă. O moleculă recomandată este format din trei atomi: o miniatură, un titlu și un atom al unui nume de autor.

3. Organisme

Organismele sunt compuse din: a grup de molecule, atomi (si cateodata alte organisme). În designul web, organismele sunt componente mai complexe ale UI care reprezintă secțiuni definitive a paginii, cum ar fi un antet, un subsol sau o bara laterală.

Organismele pot fi fie compuse din diferite tipuri de molecule, de exemplu, o bară laterală poate consta dintr-o bară de căutare și un fel de widget-uri diferite sau din aceeași moleculă repetată de mai multe ori, de exemplu o mână de blocuri de posturi conexe unul sub altul. Și, poate fi combinația acestor două.

Organisme - Exemplu

Pe site-ul Hongkiat, bara laterală ar putea fi un organism. Este compus din a bara de căutare (un tip de moleculă, afișat o singură dată) și mai multe posturi recomandate (un alt tip de moleculă, afișat de mai multe ori).

Cu toate acestea, organismul bara laterală poate fi de asemenea văzut ca și compoziția unui a moleculă (bara de căutare) și un alt organism (widget-ul recomandat post cu mai multe postări recomandate). Designul atomic este a model flexibil, regulile nu sunt foarte stricte, deci în acest caz putem defini același bloc de construcție atât ca o moleculă, cât și ca un organism.

4. Șabloane

Următoarea etapă a ierarhiei de proiectare atomică este template-uri. După cum puteți vedea, acesta este momentul în care designul atomic oprește folosind analogia chimiei. Brad se abține de la terminologie în acest moment, după cum crede că este mai puțin de înțeles pentru clienți și alte părți interesate și, în esență, cele două etape ulterioare (șabloane și pagini) pe care designerii trebuie să le vândă.

Template-uri sunt formate din organisme. Sunt obiecte la nivel de pagină dar fără conținutul final. Scopul template-urilor este de a reprezintă structura a conținutului de bază.

Șabloanele afișează modul în care diferă atomii, moleculele, organismele “funcționează împreună în contextul unui aspect”. Ele reprezintă în esență scheletul unei pagini.

Șabloane - Exemplu

Pentru un exemplu, gândiți-vă la a pagina de pornire șablon cu imagini de locus și blocuri de text lorem ipsum.

Mai jos, puteți vedea un exemplu din cartea Atomic Design. Acesta este șablonul de pagină de pornire al revistei TimeInc. Atomii, moleculele și organismele sunt toate la locul lor, dar numai cu conținut schematic.

5. Pagini

Pagini reprezintă ultima etapă a ierarhiei de proiectare atomică. Paginile sunt “exemple specifice de șabloane”. În faza paginii, șabloanele obțin populate cu conținut real (copie, microcopie, imagini, videoclipuri etc.), așa cum vor apărea în interfața reală.

Paginile permit designerilor să vadă cum experiența utilizatorului final va arata ca, pentru testați designul cu utilizatori reali, și la măsurați cât de bine funcționează în termeni de utilizare, conversie, accesibilitate și alte valori.

Pagini și variante de șablon

Celălalt scop al etapei de pagină este de a face variații de șablon posibil. Vorbim despre variante de șabloane atunci când elementele de bază șablon este același dar populația conținutul este (ușor) diferit. De exemplu, dacă doriți să afișați conținut diferit pentru diferite grupuri de utilizatori (de ex. Pentru vizitatori versus utilizatori conectați) sau când un titlu este mult mai lung decât ceilalți.

Utilizarea variantelor de șablon este crucială dacă vrem să creăm consistentă și rezistentă interfețe utilizator. Componentele mai mici (atomi, molecule, organisme) trebuie funcționează bine în diferite scenarii.

De exemplu, un buton trebuie să arate clicabil cu indiferent de elementele din jur. Dacă nu pare a fi acționabilă într-o anumită variație, trebuie să reproiectați atomul butonului până când acesta se află se potrivește cu toate cazurile de utilizare.

Pagini - Exemplu

Mai jos, puteți vedea faza de pagină a șablonului anterior al paginii de pornire TimeInc. Arată diferit, nu? Asta e doar o variație a șablonului, deşi. Pentru a avea un UI eficient, echipa de proiectare trebuie să se gândească mult ce se poate schimba în site-ul real. Apoi, ei trebuie să testeze designul pentru variația șablonului (pagina).