Efni.
- 01. Þú getur blandað saman hlutum
- 02. Að búa til stílaleiðbeiningar er einfalt
- 03. Auðvelt að skilja skipulag
- 04. Kóði er stöðugri
- 05. Engin fókus á pixla fullkomna hönnun
- 06. Fljótari frumgerð
- 07. Auðveldara að uppfæra og fjarlægja hluta af síðunni
- 08. Meiri mátaskipulag
- 09. Færri íhlutir í heildina
- 10. Kannaðu mynsturstofu
Þú hefur líklega heyrt um Atomic Design ef þú hefur verið í framþróunarsamfélaginu um tíma. Atomic Design er aðferðafræði innblásin af efnafræði. Alveg eins og öll efni eru gerð úr atómum sem sameinast og mynda sameindir, sem síðan samanstanda af flóknari lífverum, felur Atomic Design í sér að brjóta vefsíðu niður í grunnþætti hennar og vinna síðan þaðan til að búa til síðu.
Margir kostir fylgja notkun Atomic Design; Lestu áfram til að uppgötva 10 ástæður fyrir því að það auðveldar þér lífið.
Ef þú vilt fá almenn ráð varðandi stofnun vefsíðna, sjáðu þá færsluna okkar um hvernig á að búa til hið fullkomna vefsíðuskipulag, auk uppáhalds vefsíðugerðarmanna okkar.
01. Þú getur blandað saman hlutum
Með því að brjóta íhluti niður í grunnatóm er auðvelt að sjá hvaða hluta svæðisins er hægt að endurnýta og hvernig hægt er að blanda þeim saman og passa saman til að mynda aðrar sameindir og jafnvel lífverur.
Við skulum til dæmis segja að vefsvæði innihaldi aðeins fimm atóm: litla mynd, stóra mynd, málsgrein, listaefni og tengil. Þú gætir búið til mjög nothæfa vefsíðu með því að afrita og sameina þessi atóm til að búa til sameindir.
02. Að búa til stílaleiðbeiningar er einfalt
Ef staður er búinn til samkvæmt meginatriðum Atomic Design frá upphafi geta öll frumeindir og sameindir sem verða til áður en vefurinn er byggður þjónað sem grunnstíll. Jafnvel fyrir síður sem ekki hafa verið byggðar í lotukerfinu er ekki erfitt að framreikna grunnþáttana og setja þá saman til að smíða fleiri síður. Hafðu í huga, þó að það sé alltaf best að búa til vefsíðu með lotukerfi frá upphafi, frekar en að reyna að kynna meginatriði Atomic Design fyrir síðuna síðar.
03. Auðvelt að skilja skipulag
Kóði atómhönnuðs vefsíðu er yfirleitt miklu auðveldara að lesa en sá sem skapast á hefðbundnari hátt. Þetta á ekki aðeins við um sköpunartímann, heldur í framtíðinni þegar verið er að líta á síðu til hliðsjónar eða til lítilla lagfæringa.
Vegna skjalanna um hvaða atóm sameindir og lífverur eru notaðar og hvar er auðvelt að sjá hvað hver hluti kóðans táknar. Annar bónus við þetta er að það gerir það auðveldara að útskýra merkjagrunninn fyrir nýjum verktaki.
04. Kóði er stöðugri
Með Atomic Design notarðu fyrirfram skilgreind atóm til að búa til lóðarútlitið, það er auðvelt að sjá hvaða íhlutir eru notaðir fyrir mismunandi hluta vefsins. Þetta dregur úr líkum á að skrifa afrit kóða.
Til dæmis, ef einhver býr til síðu án þess að nota Atomic Design og þeir þurfa, segjum, rauðan hnapp, þá þyrfti þeir að skoða alla síðuna til að reyna að finna núverandi. Ef þetta væri til þyrftu þeir að afrita og líma þann kóða í nýja dæmið. Ef engir rauðir hnappar væru til, þyrftu þeir að búa til nýjan. Með Atomic Design er hins vegar auðvelt að fara aftur í gegnum atómlistann og finna nákvæmlega rauða hnappinn.
Þetta verður miklu auðveldara ferli þegar mynsturbókasafnið á í hlut. Pattern Lab er safn tækja sem auðvelda Atomic Design.Í dæminu okkar myndi það veita leitarstiku fyrir atóm, sem gerir það auðvelt að leita að og finna nákvæmlega rauða hnappinn.
05. Engin fókus á pixla fullkomna hönnun
Þar sem hugmyndin á bak við Atomic Design er að nota atóm sem byggingareiningar fyrir sköpun vefsvæða er ólíklegra að vefhönnuður búi til mörg atóm fyrir svipaðan hlut. Í staðinn geta þeir einfaldlega flett listanum yfir þau atóm sem fyrir eru og lagfært þau til að búa til ný atóm ef þess er krafist.
Frábært dæmi um þetta væri fyrir titla á vefsíðu. Segjum að höfundur sé með lista yfir titla sem notaðir eru fyrir síðuna, allir svartir: aðalhaus, undirhaus og titill málsgreinar. Þeir hafa ekki unnið á síðunni í nokkurn tíma og þurfa að koma aftur á síðuna til að bæta við nýjum bláum titli. Þeir gætu skoðað titlana sem þegar eru til og sérsniðið einn þeirra til að fá þá niðurstöðu sem þeir óska eftir.
06. Fljótari frumgerð
Að hafa lista yfir frumeindir áður en vefsvæðisgerð hefst þýðir að þú getur spottað síður hratt og auðveldlega - allt sem þarf er að velja og sameina nauðsynlega þætti fyrir síðuna. Mockup er síðan hægt að aðlaga og betrumbæta fyrir lokasíðuna.
07. Auðveldara að uppfæra og fjarlægja hluta af síðunni
Þar sem aðeins einu atómi, sameind eða lífveru er breytt hverju sinni, er auðvelt að tryggja að allar uppfærslur á íhluti séu fluttar til allra annarra tilvika um síðuna. Á sama hátt er auðvelt að fjarlægja óæskilega hluti.
08. Meiri mátaskipulag
Þrátt fyrir að Atomic Design sé mjög útbreitt þegar kemur að markup (HTML), þá tel ég að þessar aðferðir geti einnig verið notaðar fyrir CSS, JavaScript eða önnur tungumál sem notuð eru til að búa til vefsíðu til að gera heildarkóðann mátari og endurnýtanlegan.
Sjálfur nota ég lotukerfis CSS fyrir vefsíður sem ég bý til og hef fundið mikinn ávinning fyrir þessa nálgun. Hins vegar tel ég að með því að koma hlutum eins og HTML hlutum væri skynsamlegt að aðgreina CSS og JavaScript sem eru sértækir fyrir atóm í eigin möppu ásamt HTML, þannig að ef eitthvað þarf að uppfæra eða eyða, þá veistu nákvæmlega hvert þú átt að fara og hvað breyta.
09. Færri íhlutir í heildina
Ef höfundur er með lista yfir frumeindir, sameindir og lífverur fyrir þeim áður en vefsvæðisgerð hefst, eru þeir líklegri til að nota það sem fyrir er en búa til nýja hluti fyrir lítil afbrigði.
Ef titill með leturstærð 4,5em er krafist fyrir hönnun en þegar er til 4em stærðarheiti frá atómlistanum, er líklegra að höfundur velji 4em en búinn til alveg nýjan titil. Þetta mun leiða til þess að færri frumeindir eru notaðar í heildina, sem gerir hreinni og grennri vefsíðu.
10. Kannaðu mynsturstofu
Þetta er í raun ekki svo mikill ávinningur af Atomic Design heldur frábært tæki búið til af Brad Frost (sem bjó til hugtakið Atomic Design) og Dave Olsen til að hjálpa til við ferlið. Það er í raun truflanir síða rafall sem notar yfirvaraskegg fyrir sniðmát og JavaScript áhorfandi fyrir gagnvirkni. Það er búið til með fyrstu hönnun farsíma í huga með möguleika á að breyta stærð síðna, bæta við athugasemdum við hluta vefsvæðisins og kóðabút.
Upprunalega útgáfan er skrifuð í PHP, en það eru tvær hnútútgáfur: ein fyrir gulp og hin fyrir Grunt. Ég mæli eindregið með því að klúðra kynningunni á síðunni Pattern Lab til að veita þér betri skilning á því hvernig hún virkar og Atomic Design almennt.
Viltu vita meira? Lestu upphaflega færslu Brad Frost um Atomic Design.
