البدء في تطوير الوحدات النمطية والواجهة الأمامية المعيارية

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

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

مجمعات الوحدة

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

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

فيما يلي جزء من وحدة مجمعة حديثة لي ، مثال على زر صممته في Sketch في بداية المشروع:

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

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

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

• قد لا تصل شركات Static للرسالة الصحيحة. سيختلف الشكل والمظهر كثيرًا بمجرد دمج التفاعل - مثل حالات التمرير والانتقالات والرسوم المتحركة.

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

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

بناء الوحدات النمطية لتطوير الواجهة الأمامية

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

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

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

 .submit-button { background: orange; color: #fff; padding: 10px 20px; font-size: 16px; }

 <a href=“#” class=“submit-button”>A link</a>

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

إذا سبق لك أن طورت مشروعًا متوسطًا إلى كبير الحجم ، فلا شك أنك واجهت نصيبك العادل من الصداع. قد تكون هذه ناجمة عن أي من الأسباب التالية:

• رمز فوضوي وغير متسق ويصعب مسحه وفهمه.
• كود منتفخ وملفات XXL CSS مع الكثير من الازدواجية.
• رمز يصعب الحفاظ عليه.
• عدم انفصال الهيكل عن الجلد.

لا تقلق ، لست وحدك. أراهن أن جميع مطوري الواجهة الأمامية قد واجهوا تلك المشكلات المؤلمة من وقت لآخر ، وربما أكثر من ذلك بكثير. يمكنني القول بأمان أن لدي الكثير من المشاريع في الماضي حيث واجهت كل تلك المشاكل النموذجية.

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

الزر المعياري

كيف تكتب هذا الزر بطريقة معيارية؟ تتمثل الطريقة المعيارية في كتابة التعليمات البرمجية التي يمكنك إعادة استخدامها. تذكر تلك الليجو ، والتي يمكن استخدامها وإعادة استخدامها من جديد.

 .button { padding: 10px 20px; font-size: 16px; } .button-orange { background: orange; color: #fff; }

 <a href=“#” class=“button button-orange”>A link</a>

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

يمكن أن تتكون وحدة الزر الخاصة بك من عدة أزرار مستقلة ، جاهزة للاستخدام متى احتجت إليها.

ماذا عن الأشياء الأكثر تعقيدًا؟

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

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

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

إشراك العميل

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

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

استخدم الوحدات التي قمت بإنشائها كوحدات بناء للصفحات. بالنسبة لصفحة الفهرس الخاصة بك ، يمكنك وضع وحدة التنقل في الأعلى ، والوحدة البطل بعد ذلك ، وبعض وحدات المحتوى بعد ذلك ، ثم التذييل في الأسفل. قبل أن تعرفه ، لديك بالفعل صفحة لنموذج أولي لـ HTML. لكن ما هو النموذج الأولي بالضبط؟ لطالما أحببت تعريف ليا بولي للنموذج الأولي من كتابها الرائع The User Experience Team of One:

أمثلة وظيفية أو شبه وظيفية لكيفية تصرف التصميم وتشغيله بمجرد تنفيذه.

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

أعد استخدام اللبنات الأساسية

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

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

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