يُعد Atomic Design أحد النماذج الذهنية الأساسية لأنظمة التصميم الحديثة، فهو يمنحنا لغة مشتركة لوصف الواجهة كبنية هرمية: ذرات، جزيئات، كائنات، قوالب، وصفحات. لقد أوضح براد فروست منذ البداية أن التصميم الذري ليس عملية خطية، بل نموذج ذهني يسمح لنا بالاحتفاظ بالصورة الكلية وأجزائها في الوقت نفسه.
ومع ذلك، في الممارسة العملية، تطبق معظم الفرق النموذج في اتجاه واحد: تبدأ بتعريف أصغر الأجزاء القابلة لإعادة الاستخدام ثم تجميع كتل أكبر منها، ثم استخدامها في الشاشات. هذا النهج الشائع، الذي يُسمى «المكونات أولاً» (Component-first)، قد يحجب الهيكل الفعلي لتجربة المستخدم.
مشكلة منهج «المكونات أولاً»
عندما تبدأ الفرق بعملية جرد المكونات، فإنها تركز على «ماذا يوجد على الشاشة؟» (مثل: زر، حقل إدخال، جدول)، وهو ما لا يجيب عن أسئلة أساسية مثل «لماذا يوجد شيء ما هنا؟ وماذا يرتبط به؟». فمثلاً، زر الفرز في ترويسة عمود واحد قد يؤثر على جميع الصفوف في مجموعة البيانات، مما يوضح أن العناصر ترتبط بنطاق سلوكها وتأثيرها وليس بمجرد قربها المادي. هذا القصور يجعل نهج «المكونات أولاً» محدودًا في فهم التفاعلات المعقدة.
نهج «النطاق أولاً»: البدء من تجربة المستخدم
نرى أنه من الأفضل البدء من تجربة المستخدم نفسها، بسؤال: «ما الذي يحتاج المستخدم لفعله هنا؟» (مثل البحث والتصفية). هذا المدخل، الذي نطلق عليه نهج «النطاق أولاً» (Scope-first)، يعني تحديد نطاق كل إجراء للمستخدم – أي مجموعة البيانات أو جزء الواجهة الذي يتغير بتشغيل هذا الإجراء. بهذه الطريقة، نحصل على نموذج هيكلي للشاشة يركز على «ما الذي يتغير؟» قبل البدء بإنشاء المكونات.
القوالب: حيث يعيش منطق العمل المشترك
يظهر التوتر بين تصميم المكونات القابلة لإعادة الاستخدام ومنطق عمل المنتج بوضوح في عناصر مثل البحث والتصفية والترقيم. كمكونات مكتبية، يجب أن تكون مستقلة. ولكن في شاشة معينة، قد تدير هذه المكونات مجموعة بيانات مشتركة: تغيير مرشح قد يعيد الترقيم إلى الصفحة الأولى، أو استعلام بحث لا يجد مطابقات يفرغ الجدول.
لحل هذه المشكلة، يُقترح أن يكون مستوى القوالب (Templates) هو المكان الطبيعي ليس فقط للتخطيط، بل لإدارة منطق كيفية عمل المكونات معًا. يمكن للقالب أن يعمل كـ «مكون ذكي» (smart component) يجمع المكونات «العادية» ويحتفظ بالمنطق الذي يربطها، مثل الحالة المشتركة والقواعد الخاصة بسياق الشاشة، خاصة تلك القواعد التي تصف العلاقات المتكررة بين مناطق الشاشة (مثل «تغيير المرشح يعيد الترقيم إلى الصفحة الأولى»)، بينما تبقى القواعد الخاصة بشاشة وبيانات محددة على مستوى الصفحة.
المعنى العملي للمطورين والمصممين
بالنسبة للمصممين، يعني هذا الانتقال من التفكير في العناصر المرئية إلى تدفقات المستخدم ونطاقات الإجراءات، مما يساعد على بناء واجهات أكثر تماسكًا وتركيزًا على المستخدم. أما للمطورين، فهو يوفر طريقة واضحة لتنظيم الكود، حيث تظل المكونات بسيطة وقابلة لإعادة الاستخدام، بينما تُدار التعقيدات والتفاعلات بينها على مستوى القالب. هذا يؤدي إلى كود أنظف وأسهل في الصيانة، ويصف نظام التصميم أنماط المنتج الفعلية بدلاً من مجرد كونه مجموعة من المكونات المنفصلة.
المصدر: uxdesign.cc