Atominis dizainas: 10 priežasčių, kodėl turėtumėte jį naudoti

Atominis dizainas
(Vaizdo kreditas: Jim McCauley)

Jūs tikriausiai girdėjote apie „Atomic Design“, jei kurį laiką buvote „front end“ kūrėjų bendruomenėje. „Atomic Design“ yra chemijos įkvėpta metodika. Lygiai taip pat, kaip visa materija yra sudaryta iš atomų, kurie jungiasi ir sudaro molekules, kurios savo ruožtu sudaro sudėtingesnius organizmus, „Atomic Design“ apima svetainės suskaidymą į pagrindinius komponentus, o paskui - iš ten, kuriant svetainę.

„Atomic Design“ naudojimas turi daug privalumų; skaitykite toliau, kad sužinotumėte 10 priežasčių, kodėl tai palengvins jūsų gyvenimą.

Jei norite gauti bendrų patarimų, kaip kurti svetaines, peržiūrėkite mūsų įrašą, kaip sukurti tobulą svetainės išdėstymas , plius mūsų mėgstamiausias svetainių kūrėjai .



koks geriausias mechaninis pieštukas piešimui

01. Galite maišyti ir derinti komponentus

Skirstant komponentus į pagrindinius atomus, lengva suprasti, kurias vietos dalis galima pakartotinai naudoti ir kaip jas galima maišyti ir suderinti, kad susidarytų kitos molekulės ir net organizmai.

Atominis dizainas: elementai

Šiuos penkis pagrindinius elementus galima perkurti, kad būtų sukurtas puslapių diapazonas

Pavyzdžiui, tarkime, kad svetainėje yra tik penki atomai: mažas paveikslėlis, didelis vaizdas, pastraipa, sąrašo elementas ir nuoroda. Galite sukurti labai tinkamą tinklalapį, dubliuodami ir sujungdami šiuos atomus, kad gautumėte molekules.

02. Sukurti stiliaus vadovą yra paprasta

Jei svetainė yra sukurta vadovaujantis „Atomic Design“ principais, visi atomai ir molekulės, kurie yra sukurti iki svetainės sukūrimo, gali būti naudojami kaip pagrindinis stiliaus vadovas. Netgi svetainėms, kurios nebuvo sukurtos atominiu būdu, nėra sunku ekstrapoliuoti pagrindinius komponentus ir juos sujungti, kad būtų galima sukurti daugiau puslapių. Turėkite omenyje, kad visada geriausia sukurti svetainę atominiu būdu nuo pat pradžių, o ne bandyti vėliau įvesti svetainėje „Atomic Design“ principus.

03. Lengvai suprantamas maketas

Atominiu būdu sukurtos svetainės kodas paprastai yra daug lengviau skaitomas, nei sukurtas labiau tradiciniu būdu. Tai pasakytina ne tik apie kūrimo laiką, bet ir ateityje, kai į svetainę bus žiūrima atgal, kad būtų pateikta nuoroda ar nedideli patobulinimai.

Dėl dokumentų apie tai, kokie atomai ir kur naudojamos molekulės ir organizmai, lengva suprasti, ką reiškia kiekviena kodo dalis. Kitas to privalumas yra tas, kad taip lengviau paaiškinti kodo bazę naujam kūrėjui.

04. Kodas yra nuoseklesnis

Atominis dizainas: Rašto laboratorija

„Pattern Lab“ yra įrankių rinkinys, palengvinantis „Atomic Design“

Naudodami „Atomic Design“, naudodami iš anksto nustatytus atomus kuriate svetainės išdėstymą, nesunku suprasti, kurie komponentai naudojami skirtingoms svetainės dalims. Tai sumažina dublikato kodo rašymo tikimybę.

Pvz., Jei kas nors sukuria svetainę nenaudodamas „Atomic Design“ ir jiems reikia, tarkime, raudono mygtuko, jie turėtų peržiūrėti visą svetainę, norėdami rasti esamą. Jei tai egzistavo, jiems reikės nukopijuoti ir įklijuoti šį kodą į naują egzempliorių. Jei nebūtų raudonų mygtukų, jiems reikėtų sukurti naują. Tačiau naudojant „Atomic Design“ lengva grįžti į atomų sąrašą ir rasti būtent tą raudoną mygtuką.

Tai tampa daug lengvesniu procesu, kai įtraukiama „Pattern Lab“ biblioteka. Rašto laboratorija yra įrankių rinkinys, palengvinantis „Atomic Design“. Mūsų pavyzdyje tai suteiktų atomų paieškos juostą, kad būtų lengva ieškoti ir rasti būtent tą raudoną mygtuką.

05. Nesusitelkiama į tobulų pikselių dizainą

Kadangi „Atomic Design“ idėja yra naudoti atomus kaip statybinių elementų svetainių kūrimui, mažiau tikėtina, kad interneto kūrėjas sukurs daug atomų panašiam dalykui. Vietoj to, jie gali tiesiog peržiūrėti esamų atomų sąrašą ir pakoreguoti juos, jei reikia, sukurti naujus atomus.

Puikus to pavyzdys būtų pavadinimai svetainėje. Tarkime, kad kūrėjas turi juodai juose naudojamų svetainių pavadinimų sąrašą: pagrindinę antraštę, antrinę antraštę ir pastraipų pavadinimą. Jie kurį laiką nedirbo svetainėje ir turi grįžti į svetainę, kad pridėtų naują mėlyną pavadinimą. Jie galėtų pažvelgti į jau egzistuojančius pavadinimus ir pritaikyti vieną iš jų, kad gautų norimą rezultatą.

kaip žingsnis po žingsnio nupiešti tikrovišką vokiečių aviganį

06. Greitesnis prototipų kūrimas

Turėdami atomų sąrašą prieš pradedant kurti svetainę, galite greitai ir lengvai pasityčioti iš puslapių - tereikia išsirinkti ir sujungti reikiamus puslapio elementus. Tada maketą galima pritaikyti ir patobulinti galutinei svetainei.

07. Lengviau atnaujinti ir pašalinti svetainės dalis

Kadangi vienu metu keičiamas tik vienas atomas, molekulė ar organizmas, lengva užtikrinti, kad visi komponento atnaujinimai būtų perduodami visoms kitoms svetainės vietoms. Panašiai galima lengvai pašalinti nepageidaujamus komponentus.

08. Moduliškesnė failų struktūra

Nors „Atomic Design“ yra labai paplitęs kalbant apie žymėjimą (HTML), manau, kad šie metodai taip pat gali būti naudojami CSS, „JavaScript“ ar kitoms kalboms, naudojamoms kuriant svetainę, kad bendras kodas taptų moduliniu ir daugkartinio naudojimo.

Aš pats kuriu svetaines naudoju atominę CSS ir radau didelį šio požiūrio pranašumą. Tačiau manau, kad atėjus tokiems dalykams, kaip HTML komponentai, būtų prasminga atskirti atomui būdingą CSS ir „JavaScript“ į savo aplanką kartu su HTML, taigi, jei ką nors reikia atnaujinti ar ištrinti, jūs tiksliai žinote, kur eiti ir ką pasikeisti.

09. Mažiau komponentų

Jei kūrėjas turi sąrašą atomų, molekulių ir organizmų, pateiktų jiems prieš pradedant kurti svetainę, jie labiau linkę naudoti tai, kas jau yra, nei sukurti naujus komponentus mažoms variacijoms.

Jei dizainui reikalingas pavadinimas, kurio šrifto dydis yra 4,5em, tačiau iš atomų sąrašo jau egzistuoja 4em dydžio pavadinimas, greičiausiai kūrėjas pasirinks 4em, o ne sukurs visiškai naują pavadinimą. Dėl to apskritai bus naudojama mažiau atomų, todėl bus sukurta švaresnė ir lankstesnė svetainė.

10. Naršykite „Pattern Lab“

Atominis dizainas: Rašto laboratorija

pridėkite save prie paveikslėlių programos
„Pattern Lab“ yra statinių svetainių generatorius, taip pat iš „Brad Frost“

Tai tikrai nėra tiek „Atomic Design“ nauda, ​​bet ir puikus sukurtas įrankis Bradas Frostas (kuris sukūrė terminą „Atomic Design“) ir Deivas Olsenas padėti procesui. Iš esmės tai yra statinis svetainių generatorius, kuris šablonams naudoja ūsus, o interaktyvumui - „JavaScript“ žiūriklį. Jis sukurtas atsižvelgiant į pirmąjį mobiliųjų telefonų dizainą ir galimybes keisti puslapių dydį, pridėti komentarus prie svetainės skyrių ir kodo fragmentus.

Originali versija parašyta PHP, tačiau yra dvi „Node“ versijos: viena skirta gurkšnoti, kita - „Grunt“. Aš labai rekomenduoju susipešti apie demonstracinę versiją Rašto laboratorija svetainę, kad galėtumėte geriau suprasti, kaip ji veikia, ir apskritai „Atomic Design“.

Norite sužinoti daugiau? Perskaitykite originalų Brado Frosto įrašą apie Atominis dizainas .

Susiję straipsniai: