Bevezetés a webes tervezők atomi tervezésébe / UI / UX

A modularitás, újrahasználhatóság, és skálázhatóság nem csak kódolási fogalmak, hanem felhasználhatod őket is jobb optimalizált tervezési rendszerek. Atom design új módszer hatékony UI-k létrehozása az alulról felfelé, kémiai analógiával.

A weboldalak gyűjteményeinek tervezése helyett, az atomtervezés a legegyszerűbb UI komponensekkel kezdődik atomok (gombok, menüpontok stb.), és az egész felhasználói felületet négy további szakaszon keresztül építi fel: molekulák, szervezetek, sablonok, és oldalak.

A könyv

A módszertant Brad Frost tervezője hozta létre “sikeres UI tervezési rendszerek kidolgozása”. Atom design volt kiadott könyvként hogy ingyenesen olvashatsz online, vagy megrendelhetsz papírkötegként ($ 20.00) vagy ebookként ($ 10.00) is.

Az Atomic design a felhasználói felület tervezését egy új, újszerű perspektívából közelíti meg, amely remélhetőleg lesz rázza fel a web design táját kicsit. Ez a cikk célja adjon be egy bevezetőt ebben a módszertanban, de a könyv sokkal tovább megy a magyarázatba, így olvassa el, ha tudod, megéri.

Atomtervezési hierarchia

Az atomtervezés alapvetően a mentális modell ami a tervezőket a weblapok mint a újrafelhasználható összetevők hierarchiája. Az atomtervezés hierarchiája felépül öt szakaszban; minden egyes szakasz az előző szakaszból származó alkatrészcsoportból készül. Az öt szakasz világos és logikus interfész tervezési rendszer. Ezek a következők:

1. Atomok

Csakúgy, mint a kémia, atomok a legkisebb építőelemek nem bontható tovább. Ezért az atomok az alapvető HTML elemek, például gombok, címkék és beviteli mezők biztosítják a legkisebb egységeket egy weboldal megnyitása.

, stb.) nem (nem lehet) a weboldal legkisebb egységei.

Az atomok nem egyszerűen a HTML-elemek, hanem a hozzájuk tartozó stílusok is: betűtípusok, színek, méretek és egyéb CSS-stílus szabályok. Brad saját szavaival, atomjaival “bemutassa az összes alapvető stílusát egy pillantásra”.

Atomok - példa

Itt egy példa a honlapunkról. Az ajánlott bejegyzések főcímei figyelembe vehetők egy atomtípus; használják ugyanaz a HTML és CSS kód és lehet könnyen megkülönböztethető a többi tartalomból.

Ne feledje, hogy a Hongkiat.com-ot nem tervezték atomi tervezéssel, itt csak azt használják demonstrációs célokra.

Az atomterv lényege, hogy az öt fázis használatával tervezze meg a felhasználói felületet az alulról felfelé, az atomtervezés összetevőit nem kell később azonosítani.

2. Molekulák

A molekula alakult atomcsoportok által. A molekulák az atomtervezési hierarchia következő szakaszát képezik. Gondoljunk az egyszerűbb felhasználói felület elemekre, amelyek már léteznek több HTML elemből áll, például egy keresési űrlapot vagy egy ajánlott bejegyzést az oldalsávban.

Egy molekulába szervezve célt ad minden atomhoz. Egy nagyobb csoportban (molekula) az atomoknak kell támogatás és kiegészítés egymásnak jól működik együtt felhasználható kialakítás létrehozása érdekében.

Például a cím (egy atom) kell nagyobb hangsúlyt kap (nagyobb betűtípusok, több súly stb.), mint a szerző neve (egy másik atom) az ajánlott posztblokkban. Így vannak a két atom “jelentett” nak nek csapatként dolgozni a legjobb eredmény eléréséhez.

Molekulák - példa

Az előző példánk segítségével láthatjuk, hogy Hongkiat oldalsávjában az ajánlott bejegyzés egy blokkja molekulának tekinthető. Ajánlott posztmolekula három atomból áll: egy bélyegkép, egy cím és egy szerző neve.

3. Szervezetek

A szervezetek a molekulák, atomok csoportja (és néha más szervezetek). A web designban az organizmusok bonyolultabb UI komponensek amelyek képviselik végleges szakaszok oldal, például fejléc, lábléc vagy oldalsáv.

Az organizmusok akár a következőkből állhatnak különböző típusú molekulák, például egy oldalsáv tartalmazhat egy keresősávot és más típusú widgeteket, vagy a ugyanaz a molekula többször megismétlődött, például egy pár kapcsolódó postai blokk egymás alatt. És ez lehet a kettő kombinációja.

Organizmusok - példa

Hongkiat honlapján az oldalsáv egy szervezet lehet. Ez egy a kereső sáv (egy molekulatípus csak egyszer jelenik meg) és több ajánlott hozzászólás (más típusú molekula, sokszor megjelenítve).

Ugyanakkor az oldalsávú szervezet az a molekula (a keresősáv) és egy másik szervezet (az ajánlott postai widget több ajánlott hozzászólással). Atomtervezés a rugalmas modell, a szabályok nem túl szigorúak, így ebben az esetben azonos molekulaként és szervezetként azonosíthatjuk az építőelemet.

4. Sablonok

Az atomtervezési hierarchia következő lépése sablonok. Mint látható, ez az atomtervezés a kémia analógiájával leáll. Brad ebben a pillanatban tartózkodik a terminológiától, mivel azt hiszi kevésbé érthető az ügyfelek és más érdekelt felek számára, és lényegében az a két utolsó szakasz (sablonok és oldalak), amelyeket a tervezőknek el kell adniuk.

sablonok szervezetekből épülnek fel. Ők oldal szintű objektumok de a végleges tartalom nélkül. A sablonok célja képviselje a struktúrát az alapul szolgáló tartalom.

A sablonok megmutatják, hogy a különböző atomok, molekulák, szervezetek milyenek “egy elrendezés összefüggésében működnek együtt”. Alapvetően az egy oldal csontváza.

Sablonok - példa

Például gondolj egy kezdőlap sablon helyőrzővel és lorem ipsum szövegblokkokkal.

Az alábbiakban egy példát láthat az Atomic Design könyvből. Ez a TimeInc magazin kezdőlapsablonja. Atomok, molekulák és szervezetek mind helyükön vannak, de csak vázlatos tartalommal.

5. Oldalak

Oldalak az atomtervezési hierarchia utolsó szakasza. Az oldalak a “sablonok bizonyos példányai”. Az oldalfázisban a sablonok kerülnek valós tartalommal (másolás, mikroszkópia, képek, videók, stb.), ahogy azok a valós felhasználói felületen jelennek meg.

Az oldalak lehetővé teszik a tervezők számára, hogy lássák, hogyan végső felhasználói élmény úgy néz ki, mint tesztelje a tervet valós felhasználókkal és mérje, hogy mennyire jól működik a használhatóság, az átalakítás, a hozzáférhetőség és más mérőszámok szempontjából.

Oldalak és sablonváltozatok

Az oldalfázis másik célja az, hogy készítsen sablonváltozatok lehetséges. Az alapul szolgáló sablonváltozatokról beszélünk sablon de a népesség tartalma kissé eltérő. Például, ha különböző tartalmakat szeretne megjeleníteni a különböző felhasználói csoportok számára (például a látogatók és a bejelentkezett felhasználók között), vagy ha egy főcím sokkal hosszabb, mint a többiek.

A sablonváltozatok használata elengedhetetlen, ha létre akarunk hozni következetes és rugalmas felhasználói felületek. Kisebb összetevők (atomok, molekulák, szervezetek) kell különböző forgatókönyvekben jól működnek.

Például egy gombnak kattinthatónak kell lennie a környező elemek körül. Ha egy variációban nem kereshetőnek tűnik, újra kell terveznie a gombatomot addig, amíg meg nem jelenik minden felhasználási esetnek megfelel.

Oldalak - példa

Az alábbiakban az előző TimeInc kezdőlapsablon oldalfázisa látható. Másnak tűnik, mi? Ez igaz egy sablonváltozat, bár. Ahhoz, hogy hatékony felhasználói felület legyen, a tervező csapatnak keményen gondolkodnia kell mi változhat az igazi helyszínen. Ezután meg kell vizsgálniuk a sablonváltozat (oldal) kialakítását is.