Atomic Design — əsaslar, atomlar, molekullar və orqanizmlər UI-də
Atomic Design nədir — 2013-cü ildə Brad Frost tərəfindən təklif edilmiş, interfeys komponentləri iyerarxiyasını qurmaq üçün atom, molekul və orqanizm metaforasını götürən interfeys dizaynı metodologiyasını izah edirik. Səhifə yanaşmasından fərqli olaraq, burada interfeys ekranlarla deyil, ən kiçik təkrar istifadə olunan elementlərə (atomlara) bölünür və onlardan daha mürəkkəb strukturlar yığılır. Brad Frost (2016) məlumatına görə, bu metodologiya IBM, Airbnb və Google daxil olmaqla böyük şirkətlərin 67%-nin dizayn sistemlərində istifadə olunur.
Əsas məqamlar
- Atomic Design — UI komponentlərini beş səviyyəyə ayıran metodologiya: atomlar, molekullar, orqanizmlər, şablonlar və səhifələr.
- Atomlar — əsas HTML elementləri (düymə, giriş sahəsi, etiket); molekullar — atomların kombinasiyaları (etiketli giriş sahəsi); orqanizmlər — mürəkkəb bloklar (giriş forması).
- Metodologiya 2013-cü ildə Brad Frost tərəfindən təklif edilmiş və "Atomic Design" (2016) kitabında təsvir edilmişdir.
- Atomic Design müasir dizayn sistemlərinin əsasını təşkil edir: Material Design, Carbon (IBM), Lightning (Salesforce).
- Mobil inkişafda Atomic Design komponent freymvorkları — Jetpack Compose və SwiftUI ilə inteqrasiya olunur, burada fərdi komponentlər təbii olaraq atomları və molekulları təsvir edir.
Atomic Design nədir?
Atomic Design — hər bir UI elementinin beş səviyyədən birinə aid olduğu iyerarxik interfeys sistemlərinin yaradılması metodologiyası: atomlar (əsas elementlər), molekullar (atomların kombinasiyaları), orqanizmlər (mürəkkəb bloklar), şablonlar (səhifə çərçivələri) və səhifələr (məlumatları olan konkret ekranlar). Analogiya kimyadan götürülmüşdür: atomlar molekullara, molekullar orqanizmlərə, orqanizmlər şablonlara birləşir, şablonlar məzmunla doldurulur və səhifələrə çevrilir.
Metodologiya 2013-cü ildə veb-dizayner Brad Frost tərəfindən "səhifə düşüncəsi" probleminə cavab olaraq təklif edilmişdir — hər yeni ekran mövcud komponentlər nəzərə alınmadan sıfırdan hazırlanırdı. "Atomic Design" (2016) kitabında Frost metodologiyanın böyük şirkətlərin layihələrində tətbiqini təsvir edir: IBM, GE, Starbucks. Nielsen Norman Group (2022) məlumatına görə, Atomic Design hazır komponentlərin təkrar istifadəsi sayəsində yeni ekranların dizayn vaxtını 30–50% azaldır.
Atomic Design — texnologiyadan çox, UI təşkili fəlsəfəsidir. Müəyyən bir freymvorka bağlı deyil və həm vebdə (React, Vue), həm də mobil inkişafda (Jetpack Compose, SwiftUI) tətbiq olunur. IT Sectr-da biz müştərilərin dizayn sistemlərini qurmaq üçün Atomic Design-dan istifadə edirik: dizayn mərhələsində atomar komponentləri ayırırıq və onları Compose/SwiftUI kod komponentlərinə köçürürük.
Beş səviyyə: atomlar, molekullar, orqanizmlər, şablonlar, səhifələr
Atomic Design-in hər səviyyəsi öz vəzifəsini həll edir və ciddi məsuliyyət sahəsinə malikdir. Atomlar — interfeysin ən kiçik tikinti blokları, mənasını itirmədən daha da bölünə bilməz: düymə, mətn sahəsi, ikon, etiket, çekbox. Atomlar biznes məntiqini ehtiva etmir və kontekstdən asılı deyil. Onlar əsas vizual xüsusiyyətləri müəyyənləşdirir: rəng, ölçü, boşluqlar, tipoqrafika.
Molekullar — iki və daha çox atomun kombinasiyası, sadə funksional vahidlər yaradır. Etiket və xəta mesajı olan giriş sahəsi — molekul. Şəkil, ad və qiymət olan məhsul kartı — molekul. Molekullar əsas məntiqi ehtiva edə bilər (xətanı göstər/gizlət), lakin biznes proseslərini ehtiva etmir. Molekullar komponentlərin müxtəlif ekranlar arasında təkrar istifadə olunduğu ilk səviyyədir.
Orqanizmlər — tətbiqin konkret funksiyasını yerinə yetirən, molekul və atomlardan ibarət mürəkkəb interfeys blokları. Giriş forması (email sahəsi, şifrə sahəsi, göndərmə düyməsi, "şifrəni unutmusunuz" linki) — orqanizm. Loqo, axtarış və naviqasiya olan header — orqanizm. Orqanizmlər biznes məntiqini ehtiva edə və API-ə müraciət edə bilər, ancaq öz funksiyası çərçivəsində.
Şablonlar — orqanizmlərin ekranda yerləşməsini konkret məzmun olmadan müəyyən edən səhifə çərçivələri. Şablon şəbəkəni, sütunları, məzmun zonalarını təyin edir — kod səviyyəsində wireframe. Şablonlar məlumat ehtiva etmir, yalnız placeholder-lər. Onlar məzmunla doldurulmadan əvvəl səhifə strukturunu qiymətləndirməyə imkan verir.
Səhifələr — şablonun real məlumatlarla doldurulduğu tətbiqin konkret ekranları. Bu səviyyədə komponentlərin real məzmunla necə göründüyü yoxlanılır (uzun sətirlər, məlumat çatışmazlığı, xətalar). Səhifələr son istifadəçinin gördüyü yeganə səviyyədir. Səhifə səviyyəsində dəyişikliklər atomlara, molekullara və orqanizmlərə təsir etməməlidir — komponent dəyişdirilməlidirsə, dəyişiklik onun səviyyəsində edilir və səhifə onu avtomatik qəbul edir.
Atomic Design-in üstünlükləri və məhdudiyyətləri
Üstünlükləri Atomic Design interfeyslərin miqyaslanması zamanı özünü göstərir. Vahid komponent kitabxanası vizual ardıcıllığı təmin edir: düymə bütün ekranlarda eyni görünür, çünki bu eyni atomdur. Brad Frost (2016) məlumatına görə, Atomic Design tətbiq edən şirkətlər hazır molekul və orqanizmlərin təkrar istifadəsi sayəsində yeni ekranların hazırlanma vaxtını 30–50% azaldır.
| Xarakteristika | Atomic Design | Səhifə yanaşması |
|---|---|---|
| Komponentlərin təkrar istifadəsi | Yüksək (atomlar, molekullar, orqanizmlər) | Aşağı (hər ekran sıfırdan) |
| Vizual ardıcıllıq | Təmin olunur | Əl ilə nəzarət |
| Yeni ekranın yaradılma sürəti | Yüksək (hazır bloklardan yığılma) | Aşağı (dizayn + kod sıfırdan) |
| Tətbiq mürəkkəbliyi | Yüksək (komponent kataloqu lazımdır) | Aşağı (tanış model) |
| Test edilə bilənlik | Yüksək (hər atom təcrid olunub) | İnteqrasiya (bütün ekran birdən) |
Məhdudiyyətləri — Atomic Design tətbiqin vəziyyətini necə idarə edəcəyini təsvir etmir. Metodologiya yalnız "UI komponentlərini necə təşkil etmək" sualına cavab verir, lakin biznes məntiqinə, marşrutlaşdırmaya, məlumatlarla işə toxunmur. İkinci məhdudiyyət — sərhədlərin müəyyənləşdirilməsinin çətinliyi: molekul harada bitir və orqanizm harada başlayır? Praktikada sərhədlər qeyri-müəyyəndir və müxtəlif komandalar eyni komponenti fərqli təsnif edə bilər. Dizayn tokenlərində və komponent kataloqunda (Storybook, Jetpack Compose Preview) qaydaları müəyyənləşdirmək tövsiyə olunur.
Üçüncü məhdudiyyət — kiçik layihələr üçün həddindən artıq abstraksiya. Tətbiq 5 ekrandan ibarətdirsə, atom və molekul iyerarxiyası yaratmaq əlavə işdir. Atomic Design ekranların sayı 20-dən çox olduqda və komponentlər müxtəlif səhifələrdə təkrar istifadə edildikdə sərfəli olur.
Atomic Design vs Feature-Sliced Design
Atomic Design və Feature-Sliced Design (FSD) fərqli vəzifələri həll edir və birlikdə istifadə oluna bilər. Atomic Design UI komponentlərinin təşkili metodologiyası, FSD — biznes qatlarının və bütün tətbiqin təşkili metodologiyasıdır. Atomic Design "UI-ni təkrar istifadə olunan hissələrə necə bölmək" sualına, FSD — "kodu biznes funksiyaları ətrafında necə təşkil etmək" sualına cavab verir. Onlar rəqabət aparmır: features və entities qatları olan FSD strukturuna sahib olmaq və hər qatın daxilində UI komponentlərini təşkil etmək üçün Atomic Design-dan istifadə etmək olar.
| Meyar | Atomic Design | Feature-Sliced Design |
|---|---|---|
| Sahə | UI komponentləri | Tətbiq arxitekturası |
| Qruplaşdırma vahidi | Kimyəvi metafora (atom → molekul → orqanizm) | Biznes funksiyası (slic) |
| Asılılıqlar | Atomlardan səhifələrə (aşağıdan yuxarı) | App-dən shared-ə (yuxarıdan aşağı) |
| Məlumatlarla iş | Təsvir edilməyib | Model + api seqmentləri vasitəsilə |
| Miqyaslanma | Horizontal (daha çox komponent) | Vertikal (daha çox funksiya) |
Tipik birləşmə: FSD tətbiqin modul strukturunu (qatlar, slic-lər), Atomic Design — hər slic daxilində UI komponentlərinin daxili strukturunu müəyyənləşdirir. Məsələn, feature.auth slic-i Atomic Design qaydalarına uyğun yığılmış molekullar (LoginForm, PasswordInput) və orqanizmlər (AuthPage) ehtiva edir. Shared qatı bütün funksiyalarda təkrar istifadə olunan atomları (Button, Input, Label) ehtiva edir.
Mobil tətbiqlərdə Atomic Design: Compose və SwiftUI
Jetpack Compose və SwiftUI təbii olaraq komponent kompozisiyası vasitəsilə Atomic Design iyerarxiyasını dəstəkləyir. Atomlar Compose-da — əsas @Composable funksiyalar: AppButton, AppTextField, AppCheckbox. Hər funksiya fərdiləşdirmə parametrləri qəbul edir (rəng, ölçü, vəziyyət) və biznes məntiqini ehtiva etmir. Atomlar shared qatında təyin edilir və UI-kit kimi ixrac edilir.
Molekullar — bir neçə atomu birləşdirən @Composable funksiyalar: LabeledTextField (etiket + giriş sahəsi + xəta mesajı), ProductCard (şəkil + ad + qiymət). Molekullar əsas vəziyyət ehtiva edə bilər (sahənin düzgünlüyü), lakin API və ya ViewModel-ə müraciət etmir. Onlar müxtəlif orqanizmlərdə təkrar istifadə olunur.
Orqanizmlər — funksiya səviyyəli @Composable funksiyalar: LoginForm (email üçün LabeledTextField + şifrə üçün LabeledTextField + göndərmə AppButton + bərpa linki). Orqanizmlər Intent funksiyaları vasitəsilə ViewModel ilə işləyir və biznes məntiqini ehtiva edə bilər. SwiftUI-də analoji iyerarxiya @ViewBuilder və fərdi View strukturları vasitəsilə qurulur.
SwiftUI-də atom — fərdi View strukturu AppButton, molekul — HStack-də etiketli giriş sahəsi, orqanizm — giriş forması. Belə struktur bütün ekranlarda komponentlərin təkrar istifadəsinə imkan verir — atomun dəyişdirilməsi (düymə rəngi) avtomatik olaraq bütün ekranlara tətbiq olunur. Atomic Design-ın dizayn sistemi ilə birləşməsi hər ekranın əl ilə yoxlanılması olmadan interfeysin ardıcıllığını təmin edir.
Tez-tez verilən suallar
Atomic Design-in beş səviyyəsinə ciddi riayət etmək lazımdırmı?
Beş səviyyə — tövsiyədir, qanun deyil. Bir çox dizayn sistemi (Material Design, IBM Carbon) 3 və ya 4 səviyyədən istifadə edir: əsas komponentlər, mürəkkəb komponentlər və şablonlar. Əsas qayda — hər komponent bir səviyyəyə aiddir və növbəti səviyyələrdə təkrar istifadə oluna bilər. Layihənizdə "molekul" və "orqanizm" səviyyələri fərqlənmirsə — onları birləşdirin. Atomlar və səhifələr yeganə məcburi səviyyələrdir.
Atomic Design komponentlərini necə test etmək olar?
Atomlar vizual olaraq test edilir (SnapShot testləri, Compose Preview) — müəyyən xüsusiyyətlərə malik düymənin düzgün göstərilib-göstərilmədiyi yoxlanılır. Molekullar atomların kombinasiyası kimi test edilir — vəziyyət yoxlanılır (xəta, uğur, söndürülmüş). Orqanizmlər inteqrasiya testləri tələb edir — ViewModel ilə qarşılıqlı əlaqə yoxlanılır (formanın göndərilməsi, məlumatların yüklənməsi). IT Sectr-da Android üçün Compose Test, iOS üçün XCTest istifadə edirik; vizual test üçün — Paparazzi (Android) və SnapshotTesting (iOS).
Atomic Design dizayn sistemi olmadan istifadə edilə bilərmi?
Mümkündür, lakin səmərəlilik aşağı düşür. Dizayn sistemi və dizayn tokenləri olmadan atomların vahid üslubu yoxdur — hər bir tərtibatçı öz atomlarını ixtiyari rənglər və boşluqlarla yaradır, bu da vizual uyğunsuzluğa gətirib çıxarır. Atomic Design və dizayn sistemi — bir-birini tamamlayan anlayışlardır: Atomic Design iyerarxiyanı, dizayn sistemi vizual dili müəyyənləşdirir. Onları birlikdə tətbiq etmək tövsiyə olunur: əvvəlcə dizayn tokenləri (rənglər, tipoqrafika, boşluqlar), sonra atomlar, daha sonra molekullar və orqanizmlər.
"Atom zonası" ilə (çox sayda atom) necə mübarizə aparmaq olar?
"Atom zonası" — atomların sayının ağlabatan həddi aşdığı vəziyyət (100+), lazımi komponenti tapmaq sıfırdan yazmaqdan daha çox vaxt aparır. Həll yolu — atomların funksiyalara görə yerləşdirilməsi: yalnız bir funksiya tərəfindən istifadə olunan atomu shared-də deyil, həmin funksiyanın daxilində saxlamaq. Shared-ə yalnız qlobal atomlar (Button, Text, Input) çıxarılır. Brad Frost məlumatına görə, bu yanaşma təkrar istifadəni itirmədən shared-atomlarının sayını 60–70% azaldır.
Atomic Design yalnız UI üçündür, yoxsa kod üçün də?
Atomic Design ilkin olaraq interfeys dizaynı metodologiyasıdır (design), lakin müasir praktikada kodun təşkili üçün də istifadə olunur (code). Dizayn alətlərində (Figma, Sketch) atomlar kitabxana komponentləridir; kodda — funksiyalar və siniflər. Metodologiya design və code arasında fərq qoymur — atom maketdə və tətbiqdə eynidir. IT Sectr-da biz dizayn atomları ilə kod atomlarını sinxronizasiya etmək üçün supernova.io istifadə edirik, bu da maketlə hazır interfeys arasında uyğunsuzluğu aradan qaldırır.
Nəticə
- Atomic Design — atomlar, molekullar, orqanizmlər, şablonlar və səhifələr metaforasından istifadə edən iyerarxik UI komponentlərinin təşkili metodologiyası.
- Atomlar — əsas elementlər (düymə, giriş sahəsi); molekullar — onların kombinasiyaları (etiketli sahə); orqanizmlər — mürəkkəb bloklar (axtarış forması).
- Şablonlar çərçivəni, səhifələr konkret məlumat doldurulmasını müəyyənləşdirir.
- Atomic Design vəziyyəti və biznes məntiqini idarə etmir — yalnız UI qatının təşkilinə cavabdehdir.
- Mobil inkişafda atomlar təbii olaraq @Composable funksiyaları (Android) və View strukturları (iOS) ilə təsvir edilir.
- Atomic Design FSD ilə yaxşı birləşir: FSD arxitekturanı, Atomic Design — slic-lər daxilində UI təşkilini müəyyənləşdirir.
- Əsas üstünlüklər — komponentlərin təkrar istifadəsi, vizual ardıcıllıq, yeni ekranların yaradılma sürəti.
Açar təslim mobil tətbiq hazırlayacağıq
IT Sectr 2017-ci ildən startaplar və bizneslər üçün iOS və Android tətbiqləri yaradır. Sizə məsləhət verəcəyik və ən yaxşı həlli təklif edəcəyik.
Həm də oxuyun