التصميم الذري: 10 أسباب تجعلك تستخدمه

التصميم الذري
(رصيد الصورة: Jim McCauley)

ربما تكون قد سمعت عن Atomic Design إذا كنت في مجتمع تطوير الواجهة الأمامية لفترة من الوقت. التصميم الذري هو منهجية مستوحاة من الكيمياء. مثلما تتكون كل المادة من ذرات تتحد لتشكل جزيئات ، والتي بدورها تشكل كائنات أكثر تعقيدًا ، فإن Atomic Design يتضمن تقسيم موقع الويب إلى مكوناته الأساسية ثم العمل من هناك لإنشاء موقع.

هناك العديد من الفوائد لاستخدام التصميم الذري ؛ تابع القراءة لاكتشاف 10 أسباب تجعل حياتك أسهل.

جراب ماك بوك برو 13 انش

إذا كنت ترغب في الحصول على بعض النصائح العامة حول إنشاء مواقع الويب ، فراجع منشورنا حول كيفية إنشاء الموقع المثالي تخطيط الموقع ، بالإضافة إلى المفضلة لدينا بناة الموقع .



01. يمكنك مزج المكونات ومطابقتها

من خلال تقسيم المكونات إلى ذرات أساسية ، من السهل معرفة أجزاء الموقع التي يمكن إعادة استخدامها ، وكيف يمكن مزجها ومطابقتها لتشكيل جزيئات أخرى وحتى كائنات حية.

التصميم الذري: العناصر

يمكن إعادة مزج هذه العناصر الخمسة الأساسية لإنشاء مجموعة من الصفحات

على سبيل المثال ، لنفترض أن الموقع يحتوي على خمس ذرات فقط: صورة صغيرة وصورة كبيرة وفقرة وعنصر قائمة ورابط. يمكنك إنشاء صفحة ويب قابلة للاستخدام للغاية عن طريق تكرار هذه الذرات ودمجها لتكوين جزيئات.

02. إنشاء دليل أسلوب بسيط

إذا تم إنشاء موقع وفقًا لمبادئ Atomic Design منذ البداية ، فيمكن أن تعمل جميع الذرات والجزيئات التي تم إنشاؤها قبل إنشاء الموقع كدليل أساسي للأسلوب. حتى بالنسبة للمواقع التي لم يتم إنشاؤها بشكل ذري ، ليس من الصعب استقراء المكونات الأساسية وتجميعها معًا لإنشاء المزيد من الصفحات. ومع ذلك ، ضع في اعتبارك أنه من الأفضل دائمًا إنشاء موقع بشكل ذري من البداية ، بدلاً من محاولة تقديم مبادئ التصميم الذري إلى موقع في وقت لاحق.

كيفية رسم الريش على الأجنحة

03. تخطيط سهل الفهم

عادةً ما يكون رمز موقع الويب المصمم بشكل ذري أسهل في القراءة من أي موقع تم إنشاؤه بطريقة تقليدية. هذا صحيح ليس فقط خلال وقت الإنشاء ، ولكن في المستقبل عندما يتم إعادة النظر في الموقع كمرجع أو لإجراء تعديلات صغيرة.

نظرًا للتوثيق حول جزيئات الذرات والكائنات الحية التي يتم استخدامها وأين يتم استخدامها ، فمن السهل معرفة ما يمثله كل جزء من الكود. ومن المزايا الأخرى لهذا الأمر أنه يسهل شرح قاعدة التعليمات البرمجية لمطور جديد.

04. الكود أكثر اتساقًا

التصميم الذري: معمل الأنماط

Pattern Lab عبارة عن مجموعة من الأدوات التي تجعل التصميم الذري أسهل

باستخدام Atomic Design ، يمكنك استخدام ذرات محددة مسبقًا لإنشاء تخطيط الموقع ، ومن السهل معرفة المكونات التي يتم استخدامها لأجزاء مختلفة من الموقع. هذا يقلل من احتمالية كتابة كود مكرر.

على سبيل المثال ، إذا أنشأ شخص ما موقعًا بدون استخدام Atomic Design وطلبوا ، على سبيل المثال ، زرًا أحمر ، فسيتعين عليهم البحث في الموقع بالكامل لمحاولة العثور على موقع موجود. إذا كان هذا موجودًا ، فسيحتاجون إلى نسخ هذا الرمز ولصقه في المثيل الجديد. إذا لم تكن هناك أزرار حمراء ، فسيحتاجون إلى إنشاء زر جديد. ومع ذلك ، باستخدام Atomic Design ، من السهل الرجوع إلى قائمة الذرات والعثور على الزر الأحمر المحدد.

تصبح هذه عملية أسهل بكثير عندما تشارك مكتبة Pattern Lab. معمل الأنماط هي مجموعة من الأدوات التي تجعل تصميم Atomic أسهل. في مثالنا ، سيوفر شريط بحث عن الذرات ، مما يسهل البحث عن هذا الزر الأحمر الدقيق والعثور عليه.

05. لا تركيز على التصميمات المثالية للبكسل

نظرًا لأن الفكرة وراء Atomic Design هي استخدام الذرات كوحدات بناء لإنشاء الموقع ، فمن غير المرجح أن يقوم مطور الويب بإنشاء العديد من الذرات لشيء مشابه. بدلاً من ذلك ، يمكنهم ببساطة البحث في قائمة الذرات الموجودة ، وتعديلها لإنشاء ذرات جديدة إذا لزم الأمر.

وخير مثال على ذلك هو العناوين الموجودة على الموقع. لنفترض أن المنشئ لديه قائمة بالعناوين المستخدمة للموقع ، كلها باللون الأسود: رأس رئيسي وعنوان فرعي وعنوان فقرة. لم يعملوا في الموقع منذ فترة ويحتاجون إلى العودة إلى الموقع لإضافة عنوان أزرق جديد. يمكنهم إلقاء نظرة على العناوين الموجودة بالفعل وتخصيص أحدهم للحصول على النتيجة التي يرغبون فيها.

06. أسرع النماذج الأولية

إن وجود قائمة بالذرات قبل بدء إنشاء الموقع يعني أنه يمكنك إنشاء الصفحات بسرعة وسهولة - كل ما هو مطلوب هو اختيار العناصر المطلوبة للصفحة ودمجها. يمكن بعد ذلك تخصيص النموذج وصقله للموقع النهائي.

حقيبة حمل لماك بوك برو 13

07. أسهل لتحديث وإزالة أجزاء من الموقع

نظرًا لأنه يتم تغيير ذرة أو جزيء أو كائن حي واحد فقط في وقت واحد ، فمن السهل التأكد من أن أي تحديثات لمكون ما يتم نقلها عبر جميع الحالات الأخرى عبر الموقع. وبالمثل ، يمكن بسهولة إزالة المكونات غير المرغوب فيها.

08. المزيد من بنية الملفات المعيارية

على الرغم من أن Atomic Design منتشر جدًا عندما يتعلق الأمر بالترميز (HTML) ، إلا أنني أعتقد أنه يمكن استخدام هذه التقنيات أيضًا في CSS أو JavaScript أو أي لغات أخرى تُستخدم لإنشاء موقع لجعل الشفرة العامة أكثر نمطية وقابلة لإعادة الاستخدام.

أنا بنفسي أستخدم atomic CSS لمواقع الويب التي أنشأتها ووجدت فوائد كبيرة لهذا النهج. ومع ذلك ، أعتقد أنه مع وصول أشياء مثل مكونات HTML ، سيكون من المنطقي فصل CSS وجافا سكريبت الخاصين بذرة في مجلدها الخاص جنبًا إلى جنب مع HTML ، لذلك إذا كان أي شيء يحتاج إلى التحديث أو الحذف ، فأنت تعرف بالضبط إلى أين تذهب وماذا للتغيير.

09. مكونات أقل بشكل عام

إذا كان لدى المنشئ قائمة بالذرات والجزيئات والكائنات الحية المعروضة عليهم قبل بدء إنشاء الموقع ، فمن المرجح أن يستخدموا ما هو موجود بالفعل بدلاً من إنشاء مكونات جديدة لتغيرات صغيرة.

إذا كان العنوان بحجم خط 4.5em مطلوبًا لتصميم ولكن يوجد بالفعل عنوان بحجم 4em موجود من قائمة الذرات ، فمن المرجح أن يختار المنشئ العنصر 4em بدلاً من إنشاء عنوان جديد تمامًا. سيؤدي ذلك إلى استخدام عدد أقل من الذرات بشكل عام ، مما يجعل موقع الويب أنظف وأكثر رشاقة.

كيفية إنشاء نماذج بولي منخفضة

10. استكشف معمل الأنماط

التصميم الذري: معمل الأنماط

Pattern Lab هو مولد موقع ثابت ، أيضًا من Brad Frost

هذه ليست حقًا فائدة كبيرة من Atomic Design ولكنها أداة رائعة تم إنشاؤها بواسطة براد فروست (الذي صاغ مصطلح التصميم الذري) و ديف أولسن للمساعدة في هذه العملية. إنه في الأساس مولد موقع ثابت يستخدم الشارب للقوالب وعارض JavaScript للتفاعل. تم إنشاؤه مع وضع تصميم الجوال أولاً في الاعتبار مع وجود خيارات لتغيير حجم الصفحات وإضافة تعليقات إلى أقسام الموقع ومقتطفات التعليمات البرمجية.

النسخة الأصلية مكتوبة بلغة PHP ، ولكن هناك نسختان من Node: أحدهما لـ gulp والآخر لـ Grunt. أوصي بشدة بالعبث مع العرض التوضيحي على معمل الأنماط لإعطائك فهم أفضل لكيفية عمله والتصميم الذري بشكل عام.

اريد معرفة المزيد؟ اقرأ المنشور الأصلي لبراد فروست حول التصميم الذري .

مقالات ذات صلة: