Atomic Design — मूल बातें, UI में परमाणु, अणु और जीव
हम समझाते हैं कि Atomic Design क्या है — एक UI डिज़ाइन पद्धति जिसे ब्रैड फ्रॉस्ट ने 2013 में प्रस्तावित किया था, जो UI घटकों का पदानुक्रम बनाने के लिए परमाणुओं, अणुओं और जीवों के रूपक का उपयोग करती है। पेज-आधारित दृष्टिकोण के विपरीत, जहां इंटरफ़ेस स्क्रीन दर स्क्रीन डिज़ाइन किया जाता है, Atomic Design UI को सबसे छोटे पुन: प्रयोज्य तत्वों (परमाणुओं) में तोड़ता है और उन्हें अधिक जटिल संरचनाओं में जोड़ता है। ब्रैड फ्रॉस्ट (2016) के अनुसार, यह पद्धति IBM, Airbnb और Google सहित 67% बड़ी कंपनियों के डिज़ाइन सिस्टम में उपयोग की जाती है।
मुख्य बिंदु
- Atomic Design — एक पद्धति जो UI घटकों को पाँच स्तरों में विभाजित करती है: परमाणु, अणु, जीव, टेम्पलेट और पेज।
- परमाणु मूल HTML तत्व हैं (बटन, इनपुट, लेबल); अणु परमाणुओं के संयोजन हैं (लेबल के साथ इनपुट फ़ील्ड); जीव जटिल ब्लॉक हैं (लॉगिन फ़ॉर्म)।
- यह पद्धति ब्रैड फ्रॉस्ट द्वारा 2013 में प्रस्तावित की गई थी और पुस्तक "Atomic Design" (2016) में वर्णित है।
- Atomic Design आधुनिक डिज़ाइन सिस्टम का आधार है: Material Design, Carbon (IBM), Lightning (Salesforce)।
- मोबाइल डेवलपमेंट में, Atomic Design घटक फ्रेमवर्क — Jetpack Compose और SwiftUI — के साथ एकीकृत होता है, जहां कस्टम घटक स्वाभाविक रूप से परमाणुओं और अणुओं का वर्णन करते हैं।
Atomic Design क्या है?
Atomic Design पदानुक्रमित इंटरफ़ेस सिस्टम बनाने की एक पद्धति है, जहां प्रत्येक UI तत्व पाँच स्तरों में से एक से संबंधित होता है: परमाणु (मूल तत्व), अणु (परमाणुओं के संयोजन), जीव (जटिल ब्लॉक), टेम्पलेट (पेज वायरफ्रेम) और पेज (डेटा के साथ विशिष्ट स्क्रीन)। यह सादृश्य रसायन विज्ञान से लिया गया है: परमाणु अणुओं में संयोजित होते हैं, अणु जीवों में, जीव टेम्पलेट में, टेम्पलेट सामग्री से भर जाते हैं और पेज बन जाते हैं।
यह पद्धति वेब डिज़ाइनर ब्रैड फ्रॉस्ट द्वारा 2013 में "पेज सोच" की समस्या के जवाब के रूप में प्रस्तावित की गई थी — जब प्रत्येक नई स्क्रीन मौजूदा घटकों पर विचार किए बिना खरोंच से डिज़ाइन की जाती है। पुस्तक "Atomic Design" (2016) में, फ्रॉस्ट बड़ी कंपनियों: IBM, GE, Starbucks की परियोजनाओं में पद्धति के कार्यान्वयन का वर्णन करते हैं। Nielsen Norman Group (2022) के अनुसार, Atomic Design तैयार घटकों के पुन: उपयोग के माध्यम से नई स्क्रीन के डिज़ाइन समय को 30–50% तक कम करता है।
Atomic Design उतनी तकनीक नहीं है जितना कि UI संगठन का दर्शन है। यह किसी विशिष्ट फ्रेमवर्क से बंधा नहीं है और वेब (React, Vue) और मोबाइल डेवलपमेंट (Jetpack Compose, SwiftUI) दोनों में लागू है। IT Sectr में, हम ग्राहकों के लिए डिज़ाइन सिस्टम बनाने के लिए Atomic Design का उपयोग करते हैं: हम डिज़ाइन चरण में परमाणु घटकों की पहचान करते हैं और उन्हें Compose/SwiftUI में कोड घटकों में स्थानांतरित करते हैं।
पाँच स्तर: परमाणु, अणु, जीव, टेम्पलेट, पेज
Atomic Design का प्रत्येक स्तर अपनी समस्या का समाधान करता है और उसकी जिम्मेदारी का एक सख्त क्षेत्र है। परमाणु इंटरफ़ेस के सबसे छोटे निर्माण खंड हैं जिन्हें अर्थ खोए बिना आगे विभाजित नहीं किया जा सकता: बटन, टेक्स्ट फ़ील्ड, आइकन, लेबल, चेकबॉक्स। परमाणुओं में कोई व्यावसायिक तर्क नहीं होता और वे संदर्भ पर निर्भर नहीं होते। वे बुनियादी दृश्य विशेषताओं को परिभाषित करते हैं: रंग, आकार, अंतराल, टाइपोग्राफी।
अणु दो या अधिक परमाणुओं के संयोजन हैं जो सरल कार्यात्मक इकाइयाँ बनाते हैं। लेबल और त्रुटि संदेश वाला इनपुट फ़ील्ड एक अणु है। छवि, नाम और मूल्य वाला उत्पाद कार्ड एक अणु है। अणुओं में बुनियादी तर्क (त्रुटि दिखाएं/छिपाएं) हो सकता है, लेकिन इनमें व्यावसायिक प्रक्रियाएँ नहीं होतीं। अणु पहला स्तर हैं जहां घटक विभिन्न स्क्रीनों में पुन: प्रयोज्य हो जाते हैं।
जीव अणुओं और परमाणुओं से युक्त जटिल इंटरफ़ेस ब्लॉक हैं जो एप्लिकेशन के एक विशिष्ट कार्य को लागू करते हैं। एक लॉगिन फ़ॉर्म (ईमेल फ़ील्ड, पासवर्ड फ़ील्ड, सबमिट बटन, "पासवर्ड भूल गए" लिंक) एक जीव है। लोगो, खोज और नेविगेशन वाला हेडर एक जीव है। जीवों में व्यावसायिक तर्क हो सकता है और वे API तक पहुँच सकते हैं, लेकिन केवल अपने कार्य के दायरे में।
टेम्पलेट पेज वायरफ्रेम हैं जो विशिष्ट सामग्री के बिना स्क्रीन पर जीवों की व्यवस्था को परिभाषित करते हैं। टेम्पलेट ग्रिड, कॉलम, सामग्री क्षेत्रों को परिभाषित करता है — कोड स्तर पर एक वायरफ्रेम। टेम्पलेट में कोई डेटा नहीं होता, केवल प्लेसहोल्डर होते हैं। वे सामग्री भरने से पहले पेज संरचना का मूल्यांकन करने की अनुमति देते हैं।
पेज विशिष्ट एप्लिकेशन स्क्रीन हैं जहां टेम्पलेट वास्तविक डेटा से भरा होता है। इस स्तर पर, यह जाँचा जाता है कि घटक वास्तविक सामग्री (लंबी स्ट्रिंग, लापता डेटा, त्रुटियाँ) के साथ कैसे दिखते हैं। पेज एकमात्र स्तर है जिसे अंतिम उपयोगकर्ता देखता है। पेज स्तर पर परिवर्तन परमाणुओं, अणुओं और जीवों को प्रभावित नहीं करने चाहिए — यदि किसी घटक को बदलने की आवश्यकता है, तो परिवर्तन उसके स्तर पर किया जाता है, और पेज इसे स्वचालित रूप से अपना लेता है।
Atomic Design के लाभ और सीमाएँ
लाभ — Atomic Design के लाभ इंटरफ़ेस को स्केल करते समय स्पष्ट होते हैं। एक एकल घटक लाइब्रेरी दृश्य स्थिरता की गारंटी देती है: एक बटन सभी स्क्रीनों पर एक जैसा दिखता है क्योंकि यह वही परमाणु है। ब्रैड फ्रॉस्ट (2016) के अनुसार, Atomic Design लागू करने वाली कंपनियाँ तैयार अणुओं और जीवों के पुन: उपयोग के माध्यम से नई स्क्रीन विकसित करने के समय को 30–50% तक कम करती हैं।
| विशेषता | Atomic Design | पेज-आधारित दृष्टिकोण |
|---|---|---|
| घटक पुन: उपयोग | उच्च (परमाणु, अणु, जीव) | निम्न (प्रत्येक स्क्रीन खरोंच से) |
| दृश्य स्थिरता | गारंटीकृत | मैनुअल नियंत्रण |
| नई स्क्रीन बनाने की गति | उच्च (तैयार ब्लॉक से असेंबली) | निम्न (डिज़ाइन + मार्कअप खरोंच से) |
| कार्यान्वयन जटिलता | उच्च (घटक कैटलॉग आवश्यक) | निम्न (परिचित मॉडल) |
| परीक्षण योग्यता | उच्च (प्रत्येक परमाणु पृथक) | एकीकरण (पूरी स्क्रीन एक साथ) |
सीमाएँ — Atomic Design यह नहीं बताता कि एप्लिकेशन स्थिति का प्रबंधन कैसे करें। पद्धति केवल "UI घटकों को कैसे व्यवस्थित करें" प्रश्न का उत्तर देती है, लेकिन व्यावसायिक तर्क, रूटिंग या डेटा प्रबंधन को संबोधित नहीं करती। दूसरी सीमा सीमाओं को परिभाषित करने की कठिनाई है: अणु कहाँ समाप्त होता है और जीव कहाँ शुरू होता है? व्यवहार में, सीमाएँ धुंधली होती हैं, और विभिन्न टीमें एक ही घटक को अलग-अलग वर्गीकृत कर सकती हैं। डिज़ाइन टोकन और घटक कैटलॉग (Storybook, Jetpack Compose Preview) में नियम स्थापित करने की अनुशंसा की जाती है।
तीसरी सीमा छोटी परियोजनाओं के लिए अत्यधिक अमूर्तता है। यदि कोई एप्लिकेशन 5 स्क्रीन से बना है, तो परमाणुओं और अणुओं का पदानुक्रम बनाना अनावश्यक कार्य है। Atomic Design तब लाभदायक होता है जब स्क्रीन की संख्या 20 से अधिक हो और घटक विभिन्न पृष्ठों पर पुन: उपयोग किए जाएँ।
Atomic Design बनाम Feature-Sliced Design
Atomic Design और Feature-Sliced Design (FSD) अलग-अलग समस्याओं का समाधान करते हैं और एक साथ उपयोग किए जा सकते हैं। Atomic Design UI घटकों को व्यवस्थित करने की पद्धति है, FSD व्यावसायिक परतों और संपूर्ण एप्लिकेशन को व्यवस्थित करने की पद्धति है। Atomic Design प्रश्न का उत्तर देता है "UI को पुन: प्रयोज्य भागों में कैसे तोड़ें", FSD उत्तर देता है "व्यावसायिक सुविधाओं के आसपास कोड को कैसे व्यवस्थित करें"। वे प्रतिस्पर्धा नहीं करते: आपके पास features और entities परतों वाली FSD संरचना हो सकती है, और प्रत्येक परत के अंदर UI घटकों को व्यवस्थित करने के लिए Atomic Design का उपयोग किया जा सकता है।
| मानदंड | Atomic Design | Feature-Sliced Design |
|---|---|---|
| क्षेत्र | UI घटक | एप्लिकेशन आर्किटेक्चर |
| समूहीकरण इकाई | रासायनिक रूपक (परमाणु → अणु → जीव) | व्यावसायिक सुविधा (स्लाइस) |
| निर्भरताएँ | परमाणुओं से पृष्ठों तक (नीचे से ऊपर) | एप से शेयर्ड तक (ऊपर से नीचे) |
| डेटा हैंडलिंग | वर्णित नहीं | मॉडल + एपीआई सेगमेंट के माध्यम से |
| स्केलिंग | क्षैतिज (अधिक घटक) | लंबवत (अधिक सुविधाएँ) |
सामान्य संयोजन: FSD एप्लिकेशन की मॉड्यूलर संरचना (परतें, स्लाइस) को परिभाषित करता है, Atomic Design प्रत्येक स्लाइस के अंदर UI घटकों की आंतरिक संरचना को परिभाषित करता है। उदाहरण के लिए, feature.auth स्लाइस में Atomic Design नियमों के अनुसार इकट्ठे किए गए अणु (LoginForm, PasswordInput) और जीव (AuthPage) होते हैं। शेयर्ड परत में सभी सुविधाओं में पुन: उपयोग किए जाने वाले परमाणु (Button, Input, Label) होते हैं।
मोबाइल एप्लिकेशन में Atomic Design: Compose और SwiftUI
Jetpack Compose और SwiftUI घटक संरचना के माध्यम से स्वाभाविक रूप से Atomic Design पदानुक्रम का समर्थन करते हैं। परमाणु Compose में बुनियादी @Composable फ़ंक्शन हैं: AppButton, AppTextField, AppCheckbox। प्रत्येक फ़ंक्शन अनुकूलन पैरामीटर (रंग, आकार, स्थिति) स्वीकार करता है और इसमें कोई व्यावसायिक तर्क नहीं होता। परमाणु शेयर्ड परत में परिभाषित होते हैं और UI-किट के रूप में निर्यात किए जाते हैं।
अणु @Composable फ़ंक्शन हैं जो कई परमाणुओं को जोड़ते हैं: LabeledTextField (लेबल + इनपुट फ़ील्ड + त्रुटि संदेश), ProductCard (छवि + नाम + मूल्य)। अणुओं में बुनियादी स्थिति (फ़ील्ड वैधता) हो सकती है, लेकिन वे API या ViewModel तक नहीं पहुँचते। वे विभिन्न जीवों में पुन: उपयोग किए जाते हैं।
जीव सुविधा स्तर पर @Composable फ़ंक्शन हैं: LoginForm (ईमेल के लिए LabeledTextField + पासवर्ड के लिए LabeledTextField + सबमिट AppButton + पुनर्प्राप्ति लिंक)। जीव Intent फ़ंक्शन के माध्यम से ViewModel के साथ काम करते हैं और इनमें व्यावसायिक तर्क हो सकता है। SwiftUI में, @ViewBuilder और कस्टम View संरचनाओं के माध्यम से एक समान पदानुक्रम बनाया जाता है।
SwiftUI में, एक परमाणु कस्टम View संरचना AppButton है, एक अणु HStack पर लेबल वाला इनपुट फ़ील्ड है, एक जीव लॉगिन फ़ॉर्म है। यह संरचना सभी स्क्रीनों पर घटकों के पुन: उपयोग की अनुमति देती है — एक परमाणु (बटन का रंग) बदलने से स्वचालित रूप से सभी स्क्रीनों पर लागू होता है। Atomic Design का डिज़ाइन सिस्टम के साथ संयोजन प्रत्येक स्क्रीन के मैनुअल नियंत्रण के बिना इंटरफ़ेस स्थिरता सुनिश्चित करता है।
अक्सर पूछे जाने वाले प्रश्न
क्या Atomic Design के पाँच स्तरों का सख्ती से पालन करना आवश्यक है?
पाँच स्तर एक अनुशंसा हैं, कानून नहीं। कई डिज़ाइन सिस्टम (Material Design, IBM Carbon) 3 या 4 स्तरों का उपयोग करते हैं: बुनियादी घटक, मिश्रित घटक और टेम्पलेट। मुख्य नियम — प्रत्येक घटक एक स्तर से संबंधित होता है और उच्च स्तरों पर पुन: उपयोग किया जा सकता है। यदि आप देखते हैं कि आपके प्रोजेक्ट में "अणु" और "जीव" स्तर अलग नहीं हैं — उन्हें मर्ज करें। परमाणु और पेज एकमात्र अनिवार्य स्तर हैं।
Atomic Design घटकों का परीक्षण कैसे करें?
परमाणुओं का दृश्य रूप से परीक्षण किया जाता है (स्नैपशॉट परीक्षण, Compose Preview) — यह सत्यापित किया जाता है कि दिए गए गुणों वाला बटन सही ढंग से रेंडर होता है। अणुओं का परीक्षण परमाणुओं के संयोजन के रूप में किया जाता है — स्थिति की जाँच की जाती है (त्रुटि, सफलता, अक्षम)। जीवों को एकीकरण परीक्षण की आवश्यकता होती है — ViewModel के साथ इंटरैक्शन की जाँच की जाती है (फ़ॉर्म सबमिशन, डेटा लोडिंग)। IT Sectr में, हम Android के लिए Compose Test और iOS के लिए XCTest का उपयोग करते हैं; दृश्य परीक्षण के लिए — Paparazzi (Android) और SnapshotTesting (iOS)।
क्या मैं डिज़ाइन सिस्टम के बिना Atomic Design का उपयोग कर सकता हूँ?
कर सकते हैं, लेकिन दक्षता कम हो जाती है। डिज़ाइन सिस्टम और डिज़ाइन टोकन के बिना, परमाणुओं की कोई एकीकृत शैली नहीं होती — प्रत्येक डेवलपर मनमाने रंगों और अंतराल के साथ अपने स्वयं के परमाणु बनाता है, जिससे दृश्य असंगति होती है। Atomic Design और डिज़ाइन सिस्टम पूरक अवधारणाएँ हैं: Atomic Design पदानुक्रम को परिभाषित करता है, डिज़ाइन सिस्टम दृश्य भाषा को परिभाषित करता है। उन्हें एक साथ लागू करने की अनुशंसा की जाती है: पहले डिज़ाइन टोकन (रंग, टाइपोग्राफी, अंतराल), फिर परमाणु, फिर अणु और जीव।
"परमाणु क्षेत्र" (बहुत अधिक परमाणु) से कैसे निपटें?
"परमाणु क्षेत्र" एक ऐसी स्थिति है जहां परमाणुओं की संख्या उचित सीमा (100+) से अधिक हो जाती है, और आवश्यक घटक को खोजने में खरोंच से लिखने से अधिक समय लगता है। समाधान है सुविधाओं के अनुसार परमाणुओं का स्थानीयकरण: केवल एक सुविधा द्वारा उपयोग किया जाने वाला परमाणु उस सुविधा के अंदर संग्रहीत किया जाना चाहिए, शेयर्ड में नहीं। शेयर्ड में केवल वैश्विक परमाणु (Button, Text, Input) रखे जाते हैं। ब्रैड फ्रॉस्ट के अनुसार, स्थानीयकरण पुन: उपयोग को खोए बिना शेयर्ड परमाणुओं की संख्या को 60–70% तक कम कर देता है।
क्या Atomic Design केवल UI के लिए है या कोड के लिए भी?
Atomic Design मूल रूप से इंटरफ़ेस डिज़ाइन पद्धति थी, लेकिन आधुनिक व्यवहार में इसका उपयोग कोड को व्यवस्थित करने के लिए भी किया जाता है। डिज़ाइन टूल (Figma, Sketch) में, परमाणु लाइब्रेरी घटक हैं; कोड में, वे फ़ंक्शन और क्लास हैं। पद्धति डिज़ाइन और कोड के बीच अंतर नहीं करती — परमाणु मॉकअप और कार्यान्वयन दोनों में समान है। IT Sectr में, हम डिज़ाइन परमाणुओं और कोड परमाणुओं को सिंक्रोनाइज़ करने के लिए supernova.io का उपयोग करते हैं, जो मॉकअप और तैयार इंटरफ़ेस के बीच विसंगति को समाप्त करता है।
सारांश
- Atomic Design UI घटकों के पदानुक्रमित संगठन की एक पद्धति है, जो परमाणुओं, अणुओं, जीवों, टेम्पलेट और पेजों के रूपक का उपयोग करती है।
- परमाणु मूल तत्व हैं (बटन, इनपुट); अणु उनके संयोजन हैं (लेबल वाला फ़ील्ड); जीव जटिल ब्लॉक हैं (खोज फ़ॉर्म)।
- टेम्पलेट ढाँचा परिभाषित करते हैं, पेज — विशिष्ट डेटा भरना।
- Atomic Design स्थिति या व्यावसायिक तर्क का प्रबंधन नहीं करता — यह केवल UI परत के संगठन के लिए जिम्मेदार है।
- मोबाइल डेवलपमेंट में, परमाणु स्वाभाविक रूप से @Composable फ़ंक्शन (Android) और View संरचनाओं (iOS) द्वारा वर्णित होते हैं।
- Atomic Design FSD के साथ अच्छी तरह से मेल खाता है: FSD आर्किटेक्चर को परिभाषित करता है, Atomic Design स्लाइस के अंदर UI को व्यवस्थित करता है।
- मुख्य लाभ हैं घटक पुन: उपयोग, दृश्य स्थिरता और नई स्क्रीन बनाने की गति।
हम एक मोबाइल एप्लिकेशन टर्नकी विकसित करेंगे
IT Sectr 2017 से स्टार्टअप और व्यवसायों के लिए iOS और Android एप्लिकेशन बनाता है। हम आपको सलाह देंगे और सर्वोत्तम समाधान प्रस्तावित करेंगे।
यह भी पढ़ें