Uvod v atomsko oblikovanje za spletne oblikovalce

Atomi niso le elementi HTML, ampak tudi tudi pripadajoči slogi: pisave, barve, dimenzije in druga pravila za stil CSS. Z Bradovimi lastnimi besedami, atomi “na prvi pogled prikažite vse svoje osnovne sloge”.

Atomi - Primer

Tukaj je primer iz naše spletne strani. Naslovi priporočenih objav lahko upoštevajo eno vrsto atoma; uporabljajo isto kodo HTML in CSS in lahko enostavno razlikovati od ostale vsebine.

Upoštevajte, da Hongkiat.com ni bil zasnovan z mislijo na atomsko oblikovanje, tukaj se uporablja samo za predstavitvene namene.

Bistvo atomske zasnove je, da oblikovati UI od spodaj navzgor s temi petimi stopnjami, da kasneje ne opredeli elementov atomske zasnove.

2. Molekule

A molekula nastane s skupino atomov. Molekule predstavljajo naslednjo stopnjo hierarhije oblikovanja atomov. Razmislite o enostavnejših elementih uporabniškega vmesnika, ki so že izdelani iz več kot enega elementa HTML, kot je iskalni obrazec ali priporočena objava v stranski vrstici.

Biti organiziran v molekulo daje namen na vsak atom. V večji skupini (molekuli) morajo atomi podporo in dopolnitev drug drugega, morajo dobro delati skupaj za oblikovanje uporabne oblike.

Na primer, naslov (en atom) mora biti dobite večji poudarek (večja pisava, večja teža itd.) kot ime avtorja (drug atom) v priporočenem poštnem bloku. Tako sta dva atoma “pomeni” do delo v ekipi za najboljši rezultat.

Molekule - Primer

Na podlagi našega prejšnjega primera lahko vidite, da je v stranski vrstici Hongkiata en blok priporočene objave mogoče videti kot molekulo. Priporočena post molekule je zgrajena iz treh atomov: sličica, naslov in atom imena avtorja.

3. Organizmi

Organizmi so sestavljeni iz a skupina molekul, atomov (in včasih drugi organizmi). V spletnem oblikovanju so organizmi kompleksnejše komponente UI ki predstavljajo dokončnih oddelkov strani, na primer glavo, nogo ali stransko vrstico.

Organizmi so lahko sestavljeni iz različne vrste molekul, na primer stranska vrstica lahko vsebuje iskalno vrstico in različne vrste pripomočkov ali ista molekula se je večkrat ponovila, na primer peščica sorodnih gradnikov. In to je lahko kombinacija teh dveh.

Organizmi - Primer

Na Hongkiatovi spletni strani je lahko stranska vrstica organizem. Sestavlja ga a iskalno vrstico (ena vrsta molekule, prikazana samo enkrat) in več priporočenih objav (druga vrsta molekule, prikazana večkrat).

Vendar se lahko organizem v stranski vrstici vidi tudi kot sestava a molekula (vrstica za iskanje) in drug organizem (priporočeni pripomoček za objavo z več priporočenimi objavami). Atomsko oblikovanje je prilagodljiv model, pravila niso zelo stroga, zato lahko v tem primeru definiramo isti gradbeni blok kot molekulo in organizem.

4. Predloge

Naslednja stopnja hierarhije načrtovanja atomov je predloge. Kot lahko vidite, to je atomsko oblikovanje preneha uporabljati analogijo kemije. Brad se na tej točki izogiba terminologiji, saj misli, da je manj razumljivo za stranke in druge zainteresirane strani, in v bistvu sta zadnji dve fazi (predloge in strani), ki jih morajo oblikovalci prodati.

Predloge so sestavljeni iz organizmov. So objekti na ravni strani ampak brez končne vsebine. Namen predlog je to predstavljajo strukturo osnovne vsebine.

Predloge prikazujejo, kako so različni atomi, molekule, organizmi “delujejo skupaj v okviru postavitve”. V bistvu predstavljajo okostje strani.

Predloge - Primer

Za primer razmislite o a domača stran predloge s slikami ograd in lorem ipsum besedilnimi bloki.

Spodaj si lahko ogledate primer iz knjige Atomic Design. To je predlogo za domačo stran časopisa TimeInc. Atomi, molekule in organizmi so vsi na svojem mestu, vendar samo s shematično vsebino.

5. Strani

Strani predstavljajo zadnjo stopnjo hierarhije oblikovanja atomov. Strani so “določenih primerih predlog”. V fazi strani so predloge dobljene poseljena z resnično vsebino (kopiranje, mikrokopiranje, slike, videoposnetki itd.), tako kot se bodo pojavili v pravem uporabniškem vmesniku.

Strani omogočajo oblikovalcem, da vidijo, kako končno uporabniško izkušnjo bo izgledal, do preizkusite zasnovo z dejanskimi uporabniki in do izmerite, kako dobro deluje v smislu uporabnosti, pretvorbe, dostopnosti in drugih meritev.

Različice strani in predloge

Drugi cilj faze strani je narediti različice predloge mogoče. Govorimo o variacijah predloge, ko je osnova Predloga je enaka ampak naselitev vsebina je (nekoliko) drugačna. Če želite na primer prikazati drugačno vsebino različnim skupinam uporabnikov (npr. Za obiskovalce v primerjavi z prijavljenimi uporabniki) ali če je en naslov veliko daljši od drugih.

Uporaba različic predlog je ključnega pomena, če želimo ustvariti dosledna in prožna uporabniških vmesnikov. Manjše sestavine (atomi, molekule, organizmi) morajo biti dobro delujejo v različnih scenarijih.

Na primer, gumb mora biti videti s klikom ne glede na okoliške elemente. Če v določeni različici ni videti izvedljivo, morate atom preoblikovati do nje ustreza vsem primerom uporabe.

Strani - Primer

Spodaj si lahko ogledate stopnjo strani prejšnje predloge domače strani TimeInc. Izgleda drugače, kaj? To je samo ena različica predloge, čeprav. Da bi imeli učinkovit uporabniški vmesnik, mora oblikovalska ekipa resno razmišljati kaj se lahko spremeni v realnem mestu. Potem morajo preizkusiti tudi zasnovo te različice predloge (stran).