Atomic Design — الأساسيات، الذرات والجزيئات والكائنات في واجهة المستخدم
نشرح ما هو Atomic Design — منهجية تصميم واجهات اقترحها براد فروست في عام 2013، تستعير استعارة الذرات والجزيئات والكائنات لبناء تسلسل هرمي لمكونات واجهة المستخدم. على عكس النهج القائم على الصفحات، حيث يتم تصميم الواجهة شاشة بشاشة، يقسم Atomic Design واجهة المستخدم إلى أصغر العناصر القابلة لإعادة الاستخدام (الذرات) ويجمعها في هياكل أكثر تعقيدًا. وفقًا لبراد فروست (2016)، تُستخدم المنهجية في أنظمة التصميم لـ 67% من الشركات الكبرى، بما في ذلك IBM وAirbnb وGoogle.
أهم النقاط
- Atomic Design — منهجية تقسم مكونات واجهة المستخدم إلى خمسة مستويات: الذرات والجزيئات والكائنات والقوالب والصفحات.
- الذرات هي عناصر HTML الأساسية (زر، حقل إدخال، تسمية)؛ الجزيئات هي مجموعات من الذرات (حقل إدخال مع تسمية)؛ الكائنات هي كتل معقدة (نموذج تسجيل الدخول).
- اقترح براد فروست المنهجية في عام 2013 ووصفها في كتاب "Atomic Design" (2016).
- Atomic Design هو أساس أنظمة التصميم الحديثة: Material Design وCarbon (IBM) وLightning (Salesforce).
- في تطوير تطبيقات الجوال، يتكامل Atomic Design مع أطر العمل المكوناتية — Jetpack Compose وSwiftUI — حيث تصف المكونات المخصصة الذرات والجزيئات بشكل طبيعي.
ما هو Atomic Design؟
Atomic Design هي منهجية لإنشاء أنظمة واجهات هرمية، حيث ينتمي كل عنصر من عناصر واجهة المستخدم إلى أحد خمسة مستويات: الذرات (العناصر الأساسية)، الجزيئات (مجموعات الذرات)، الكائنات (الكتل المعقدة)، القوالب (الهياكل الأساسية للصفحات) والصفحات (الشاشات المحددة بالبيانات). التشبيه مستعار من الكيمياء: تتحد الذرات لتكون جزيئات، والجزيئات تكون كائنات، والكائنات تكون قوالب، وتمتلئ القوالب بالمحتوى لتصبح صفحات.
اقترح المنهجية مصمم الويب براد فروست في عام 2013 كرد على مشكلة "التفكير القائم على الصفحات" — حيث يتم تصميم كل شاشة جديدة من الصفر دون النظر إلى المكونات الموجودة. في كتاب "Atomic Design" (2016)، يصف فروست تطبيق المنهجية في مشاريع الشركات الكبرى: IBM وGE وStarbucks. وفقًا لمجموعة Nielsen Norman (2022)، يقلل Atomic Design من وقت تصميم الشاشات الجديدة بنسبة 30–50% من خلال إعادة استخدام المكونات الجاهزة.
Atomic Design ليست مجرد تقنية بل فلسفة لتنظيم واجهة المستخدم. إنها غير مرتبطة بإطار عمل معين وقابلة للتطبيق في كل من الويب (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 كيفية إدارة حالة التطبيق. المنهجية تجيب فقط على سؤال "كيف تنظم مكونات واجهة المستخدم" لكنها لا تتناول منطق الأعمال أو التوجيه أو إدارة البيانات. القيد الثاني هو صعوبة تحديد الحدود: أين تنتهي الجزيء ويبدأ الكائن؟ في الممارسة العملية، الحدود غير واضحة، وقد تصنف فرق مختلفة نفس المكون بشكل مختلف. يوصى بتحديد القواعد في رموز التصميم وكتالوج المكونات (Storybook، Jetpack Compose Preview).
القيد الثالث هو الإفراط في التجريد للمشاريع الصغيرة. إذا كان التطبيق يتكون من 5 شاشات، فإن إنشاء تسلسل هرمي للذرات والجزيئات هو عمل غير ضروري. يصبح Atomic Design مفيدًا عندما يتجاوز عدد الشاشات 20 وتُعاد استخدام المكونات عبر صفحات مختلفة.
Atomic Design مقابل Feature-Sliced Design
Atomic Design وFeature-Sliced Design (FSD) يحلان مشاكل مختلفة ويمكن استخدامهما معًا. Atomic Design هي منهجية لتنظيم مكونات واجهة المستخدم، FSD هي منهجية لتنظيم طبقات الأعمال والتطبيق ككل. Atomic Design تجيب على سؤال "كيف تقسم واجهة المستخدم إلى أجزاء قابلة لإعادة الاستخدام"، FSD تجيب على "كيف تنظم الكود حول ميزات الأعمال". إنهما غير متنافستين: يمكن أن يكون لديك هيكل FSD بطبقات features وentities، وداخل كل طبقة استخدام Atomic Design لتنظيم مكونات واجهة المستخدم.
| المعيار | Atomic Design | Feature-Sliced Design |
|---|---|---|
| النطاق | مكونات واجهة المستخدم | هندسة التطبيق |
| وحدة التجميع | الاستعارة الكيميائية (ذرة → جزيء → كائن) | ميزة الأعمال (شريحة) |
| التبعيات | من الذرات إلى الصفحات (من الأسفل إلى الأعلى) | من التطبيق إلى المشترك (من الأعلى إلى الأسفل) |
| معالجة البيانات | غير موصوفة | عبر مقاطع model + api |
| التوسع | أفقي (مزيد من المكونات) | عمودي (مزيد من الميزات) |
المزيج النموذجي: FSD يحدد الهيكل المعياري للتطبيق (الطبقات، الشرائح)، Atomic Design يحدد الهيكل الداخلي لمكونات واجهة المستخدم داخل كل شريحة. على سبيل المثال، شريحة feature.auth تحتوي على جزيئات (LoginForm، PasswordInput) وكائنات (AuthPage) مجمعة وفقًا لقواعد Atomic Design. الطبقة المشتركة تحتوي على ذرات (Button، Input، Label) معاد استخدامها عبر جميع الميزات.
Atomic Design في تطبيقات الجوال: Compose وSwiftUI
Jetpack Compose وSwiftUI يدعمان بشكل طبيعي التسلسل الهرمي لـ Atomic Design من خلال تركيب المكونات. الذرات في Compose هي دوال @Composable أساسية: AppButton وAppTextField وAppCheckbox. كل دالة تقبل معلمات تخصيص (اللون، الحجم، الحالة) ولا تحتوي على منطق أعمال. تُعرف الذرات في الطبقة المشتركة وتُصدر كمجموعة أدوات واجهة مستخدم.
الجزيئات هي دوال @Composable تجمع عدة ذرات: LabeledTextField (تسمية + حقل إدخال + رسالة خطأ)، ProductCard (صورة + اسم + سعر). يمكن أن تحتوي الجزيئات على حالة أساسية (صلاحية الحقل) لكنها لا تصل إلى API أو ViewModel. إنها قابلة لإعادة الاستخدام عبر كائنات مختلفة.
الكائنات هي دوال @Composable على مستوى الميزة: LoginForm (LabeledTextField للبريد الإلكتروني + LabeledTextField لكلمة المرور + AppButton للإرسال + رابط الاسترداد). تعمل الكائنات مع ViewModel من خلال دوال Intent ويمكن أن تحتوي على منطق أعمال. في SwiftUI، يُبنى تسلسل هرمي مماثل من خلال @ViewBuilder وهياكل View مخصصة.
في SwiftUI، الذرة هي هيكل View مخصص AppButton، الجزيء هو حقل إدخال مع تسمية على HStack، الكائن هو نموذج تسجيل الدخول. هذا الهيكل يسمح بإعادة استخدام المكونات عبر جميع الشاشات — تغيير ذرة (لون الزر) يطبق تلقائيًا على جميع الشاشات. الجمع بين Atomic Design ونظام التصميم يضمن اتساق الواجهة دون تحكم يدوي في كل شاشة.
الأسئلة الشائعة
هل من الضروري اتباع المستويات الخمسة لـ Atomic Design بدقة؟
المستويات الخمسة هي توصية وليس قانونًا. العديد من أنظمة التصميم (Material Design، IBM Carbon) تستخدم 3 أو 4 مستويات: مكونات أساسية، مكونات مركبة وقوالب. القاعدة الرئيسية — أن ينتمي كل مكون إلى مستوى واحد ويمكن إعادة استخدامه في المستويات الأعلى. إذا رأيت أن مستويي "الجزيء" و"الكائن" في مشروعك لا يختلفان — ادمجهما. الذرات والصفحات هما المستويان الإلزاميان الوحيدان.
كيف تختبر مكونات Atomic Design؟
تُختبر الذرات بصريًا (اختبارات Snapshot، Compose Preview) — يتم التحقق من أن الزر بالخصائص المحددة يُعرض بشكل صحيح. تُختبر الجزيئات كمجموعة من الذرات — يتم التحقق من الحالة (خطأ، نجاح، معطل). تتطلب الكائنات اختبارات تكامل — يتم التحقق من التفاعل مع ViewModel (إرسال النموذج، تحميل البيانات). في IT Sectr، نستخدم Compose Test لنظام Android وXCTest لنظام iOS؛ للاختبار البصري — Paparazzi (Android) وSnapshotTesting (iOS).
هل يمكن استخدام Atomic Design بدون نظام تصميم؟
يمكن، لكن الكفاءة تقل. بدون نظام تصميم ورموز تصميم، لا تمتلك الذرات نمطًا موحدًا — كل مطور ينشئ ذراته الخاصة بألوان ومسافات عشوائية، مما يؤدي إلى التناقض البصري. Atomic Design ونظام التصميم مفهومان متكاملان: Atomic Design يحدد التسلسل الهرمي، نظام التصميم يحدد اللغة البصرية. يوصى بتنفيذهما معًا: أولاً رموز التصميم (الألوان، الخطوط، المسافات)، ثم الذرات، ثم الجزيئات والكائنات.
كيف تتعامل مع "المنطقة الذرية" (عدد كبير جدًا من الذرات)؟
"المنطقة الذرية" هي حالة يتجاوز فيها عدد الذرات الحدود المعقولة (100+) ويستغرق البحث عن المكون المناسب وقتًا أطول من كتابته من الصفر. الحل هو تجميع الذرات حسب الميزات: الذرة التي تستخدمها ميزة واحدة فقط تُخزن داخل تلك الميزة، وليس في المشترك. في المشترك توضع فقط الذرات العامة (Button، Text، Input). وفقًا لبراد فروست، يقلل التجميع عدد الذرات المشتركة بنسبة 60–70% دون فقدان إعادة الاستخدام.
هل Atomic Design مخصص لواجهة المستخدم فقط أم للكود أيضًا؟
Atomic Design في الأصل منهجية لتصميم الواجهات، لكن في الممارسة الحديثة يُستخدم أيضًا لتنظيم الكود. في أدوات التصميم (Figma، Sketch)، الذرات هي مكونات مكتبة؛ في الكود، هي دوال وفئات. المنهجية لا تفرق بين التصميم والكود — الذرة هي نفسها في النموذج الأولي وفي التنفيذ. في IT Sectr، نستخدم supernova.io لمزامنة ذرات التصميم وذرات الكود، مما يلغي التناقض بين النموذج الأولي والواجهة النهائية.
الخلاصة
- Atomic Design هي منهجية للتنظيم الهرمي لمكونات واجهة المستخدم، تستخدم استعارة الذرات والجزيئات والكائنات والقوالب والصفحات.
- الذرات هي عناصر أساسية (زر، حقل إدخال)؛ الجزيئات هي مجموعاتها (حقل مع تسمية)؛ الكائنات هي كتل معقدة (نموذج بحث).
- القوالب تحدد الهيكل، الصفحات — التعبئة المحددة بالبيانات.
- Atomic Design لا يدير الحالة أو منطق الأعمال — هو مسؤول فقط عن تنظيم طبقة واجهة المستخدم.
- في تطوير تطبيقات الجوال، توصف الذرات بشكل طبيعي بدوال @Composable (Android) وهياكل View (iOS).
- Atomic Design يتوافق جيدًا مع FSD: FSD يحدد الهندسة، Atomic Design ينظم واجهة المستخدم داخل الشرائح.
- المزايا الرئيسية هي إعادة استخدام المكونات والاتساق البصري وسرعة إنشاء شاشات جديدة.
سنقوم بتطوير تطبيق جوال جاهز
تقدم IT Sectr تطبيقات iOS وAndroid للشركات الناشئة والشركات منذ عام 2017. سوف نقدم لك النصح ونقترح أفضل حل.
اقرأ أيضًا