Johdatus Web-suunnittelijoiden Atomic Design -ohjelmaan / UI / UX

modulaarisuus, uudelleenkäytettävyys, ja skaalautuvuus eivät ole vain koodauskäsitteitä, mutta voit myös käyttää niitä luomaan parempi optimoidut suunnittelujärjestelmät. Atomisuunnittelu on uusi menetelmä tehokkaiden käyttöliittymien rakentaminen alhaalta ylöspäin, käyttäen kemian analogiaa.

Verkkosivujen kokoelmien suunnittelun sijaan, atomi suunnittelu alkaa yksinkertaisimmilla käyttöliittymäkomponenteilla, joita kutsutaan atomia (painikkeet, valikkokohdat jne.) ja rakentaa koko käyttöliittymän neljän muun vaiheen kautta: molekyylit, organismit, malleja, ja sivut.

Kirja

Menetelmän on luonut suunnittelija Brad Frost, jonka tavoitteena oli “menestyksekkäiden käyttöliittymien suunnittelujärjestelmien kehittäminen”. Atominen muotoilu oli julkaistiin kirjana että voit lukea verkossa ilmaiseksi tai tilata paperikorttina ($ 20.00) tai e-kirjana ($ 10.00).

Atomisuunnittelu lähestyy käyttöliittymäsuunnittelua uudesta uudesta näkökulmasta, joka toivottavasti tulee ravista web-design-maisemaa hieman. Tämän artikkelin tarkoituksena on anna intro tähän metodologiaan, mutta kirja menee paljon enemmän selitykseen, joten lue se, jos voit, se on sen arvoista.

Atomisuunnittelun hierarkia

Atomisuunnittelu on pohjimmiltaan a henkinen malli jonka ansiosta suunnittelijat ajattelevat verkkosivuja a uudelleenkäytettävien komponenttien hierarkia. Atomisuunnittelun hierarkia on rakennettu viisi vaihetta; jokainen vaihe on tehty edellisen vaiheen komponenttien ryhmästä. Viisi vaihetta lisätään selkeäksi ja loogiseksi käyttöliittymän suunnittelujärjestelmä. Ne ovat seuraavat:

1. Atomit

Aivan kuten kemiassa, atomia ovat pienimmät rakennuspalikat ei voi enää hajota. Siksi atomit ovat HTML-elementit, kuten painikkeet, tarrat ja syöttökentät tarjota pienimmät yksiköt Web-sivun.

Tietysti, kaikki HTML-elementit eivät ole atomeja, esimerkiksi leikkauselementit (

, jne.) eivät ole (eivät voi olla) pienimmät verkkosivun yksiköt.

Atomit eivät ole pelkästään HTML-elementtejä myös heidän omistustyyliään: fontit, värit, mitat ja muut CSS-tyylisäännöt. Bradin omat sanat, atomit “näyttää kaikki perusasiat yhdellä silmäyksellä”.

Atomit - Esimerkki

Tässä on esimerkki sivuiltamme. Suositeltujen viestien otsikot saattavat vastata yhden atomityypin; he käyttävät sama HTML- ja CSS-koodi ja voi olla helposti erotettavissa muusta sisällöstä.

Huomaa, että Hongkiat.comia ei ole suunniteltu atomisella suunnittelulla, vaan sitä käytetään vain esittelyä varten.

Atomisuunnittelun ydin on suunnittele käyttöliittymä alhaalta ylöspäin käyttämällä näitä viittä vaihetta, ei tunnista atomimuotoisia komponentteja myöhemmin.

2. Molekyylit

molekyyli muodostuu ryhmä atomeja. Molekyylit muodostavat atomin suunnittelun hierarkian seuraavan vaiheen. Ajattele yksinkertaisempia UI-elementtejä, jotka ovat jo olemassa on tehty useammasta kuin yhdestä HTML-elementistä, esimerkiksi hakulomake tai suositeltu viesti sivupalkissa.

Järjestetään molekyyliin antaa tarkoituksen jokaiseen atomiin. Isommassa ryhmässä (molekyyli) atomien täytyy tukea ja täydentää toisiaan, heidän täytyy toimivat hyvin yhdessä jotta voidaan luoda käyttökelpoinen muotoilu.

Esimerkiksi otsikon (yksi atomi) on oltava saada enemmän huomiota (isompia fontteja, enemmän painoa jne.) kuin tekijän nimi (toinen atomi) suositellussa postilohkossa. Tällä tavoin nämä kaksi atomia ovat “tarkoitti” että toimia tiiminä saadaksesi parhaan tuloksen.

Molekyylit - esimerkki

Käyttämällä edellistä esimerkkiäsi voit nähdä, että Hongkiatin sivupalkissa yksi suositeltua viestiä voidaan nähdä molekyylinä. Suositeltu postimolekyyli on kolme atomia: pikkukuva, otsikko ja tekijän nimi.

3. Organismit

Organismit koostuvat a ryhmä molekyylejä, atomeja (ja joskus muut organismit). Web-suunnittelussa organismit ovat monimutkaisempia UI-komponentteja jotka edustavat lopullisia osia sivun, kuten otsikon, alatunnisteen tai sivupalkin.

Organismit voidaan joko koostua erilaisia molekyylejä, esimerkiksi sivupalkki voi koostua hakupalkista ja erilaisista widgeteistä tai sama molekyyli toistettiin useita kertoja, esimerkiksi kourallinen toisiinsa liittyviä postilohkoja. Ja se voi olla näiden kahden yhdistelmä.

Organismit - Esimerkki

Hongkiatin verkkosivulla sivupalkki voisi olla organismi. Se koostuu a hakupalkki (yksi molekyylityyppi, näytetään vain kerran) ja useita suositeltuja viestejä (toinen molekyylityyppi, joka näkyy monta kertaa).

Sivupalkin organismia voidaan kuitenkin pitää myös a: n koostumuksena molekyyli (hakupalkki) ja toinen organismi (suositeltu postimainos, jossa on useita suositeltuja viestejä). Atomisuunnittelu on a joustava malli, Säännöt eivät ole kovin tiukkoja, joten tässä tapauksessa voimme määritellä saman rakennuslohkon sekä molekyylinä että organismina.

4. Mallit

Atomisuunnittelun hierarkian seuraava vaihe on malleja. Kuten näette, tämä on silloin, kun atomi design pysähtyy kemian analogian avulla. Brad pidättäytyy terminologiasta tässä vaiheessa, koska hän ajattelee sitä vähemmän ymmärrettävää asiakkaille ja muille sidosryhmille, ja se on olennaisesti kaksi viimeistä vaihetta (mallit ja sivut), jotka suunnittelijoiden on myytävä.

Mallit ovat organismeja. He ovat sivutason esineitä mutta ilman lopullista sisältöä. Mallien tarkoitus on edustavat rakennetta sisältöä.

Mallit näyttävät, miten erilaiset atomit, molekyylit, organismit “toimivat yhdessä ulkoasun yhteydessä”. Ne edustavat periaatteessa sivun luuranko.

Mallit - esimerkki

Ajatelkaa esimerkiksi a kotisivun malli paikanvaraajien kuvien ja lorem ipsum -tekstilohkojen kanssa.

Alla on esimerkki Atomic Design -kirjasta. Se on TimeInc-lehden kotisivu. Atomit, molekyylit ja organismit ovat kaikki paikkansa, mutta vain kaavamaisen sisällön kanssa.

5. Sivut

sivut edustavat atomisuunnittelun hierarkian viimeistä vaihetta. Sivut ovat “tiettyjä malleja”. Sivun vaiheessa mallit saadaan täynnä todellista sisältöä (kopio, mikroskooppi, kuvat, videot jne.), aivan kuten ne näkyvät todellisessa käyttöliittymässä.

Sivut antavat suunnittelijoille mahdollisuuden nähdä, miten lopullinen käyttäjäkokemus näyttää, testata suunnittelua todellisten käyttäjien kanssa mitata kuinka hyvin se toimii käytettävyyden, muuntamisen, saatavuuden ja muiden mittareiden osalta.

Sivut & mallin muunnelmat

Sivuvaiheen toinen tavoite on tehdä mallimuutokset mahdollista. Puhumme mallimuutoksista, kun taustalla on malli on sama mutta väestö sisältö on (hieman) erilainen. Jos esimerkiksi haluat näyttää eri sisällön eri käyttäjäryhmille (esim. Kävijöille ja kirjautuneille käyttäjille) tai kun yksi otsikko on paljon pidempi kuin muut.

Mallimuutosten käyttäminen on tärkeää, jos haluamme luoda johdonmukainen ja joustava käyttöliittymät. Pienemmät komponentit (atomit, molekyylit, organismit) on tehtävä toimivat hyvin eri skenaarioissa.

Esimerkiksi painikkeen täytyy näyttää napsautettavalta riippumatta ympäröivistä elementeistä. Jos se ei näytä toiminnalliselta tietyssä muunnelmassa, sinun täytyy suunnitella painiketta uudelleen, kunnes se on sopii kaikkiin käyttötapoihin.

Sivut - Esimerkki

Alla näet edellisen TimeInc-kotisivumallin sivuvaiheen. Näyttää erilaiselta, eikö? Tämä on vain yksi mallimuutos, vaikka. Tehokkaan käyttöliittymän saamiseksi suunnittelutiimi joutuu miettimään kovasti mikä voi muuttua oikeassa paikassa. Sitten heidän on myös testattava mallin muunnelman (sivu) suunnittelu.