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

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

حافظ على فريقك على المسار الصحيح ورمزك جاف

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

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

ما الذي يجب أن يتضمنه دليل أسلوب الويب؟

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

لوحات الألوان

إنها لفكرة رائعة أن تقوم بتضمين حوامل ذات اللون السداسي العشري. سوف تشكرك ذاتك المستقبلي المليء بالوقت في المستقبل! لا أتذكر عدد المرات التي سألت فيها أو سُئلت ، "ما هذا اللون السداسي مرة أخرى؟" من المؤكد أن وجود مرجع سريع سيكون مفيدًا للجميع.

الطباعة والتسلسل الهرمي

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

يجب أن تتضمن أدلة النمط أيضًا تسلسلاً هرميًا مقترحًا. ما هي h1 و h2 و h3 وما إلى ذلك؟ الكلمات الوصفية مثل العنوان الأساسي والعنوان الفرعي وعنوان عنصر واجهة الشريط الجانبي أيضًا تأخذ الكثير من التخمينات في المستقبل.

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

الصور

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

الارتباط والتنقل وأنماط النموذج

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

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

على وجه التحديد ، فيما يلي بعض المكونات الأساسية التي يجب تضمينها لأنماط النموذج:

• حالة حقل الإدخال العادي
• التركيز على حالة حقل الإدخال
• أنماط التسمية
• نص العنصر النائب للنموذج
• نص المستخدم النشط
• أدخل المستخدم نصًا
• زر الإرسال
• رسالة خطأ
• اختيار أنماط الخانات

المزيد من الأفكار لتضمينها في دليل الأسلوب الخاص بك

من الصعب سرد كل عنصر قد تواجهه ، ولكن إليك بعض العناصر الأخرى التي قد تجدها مفيدة:

• مربع المكالمة
• روابط أفقية
• عناصر التعليق
• علامات الفئات
• نموذج منبثق

كيف تصنع دليل أسلوب الويب الخاص بك

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

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

ابدأ بجرد جميع عناصر موقعك ثم أضف الترميز الدقيق الذي تحتاجه لكل عنصر إلى دليل الأسلوب الخاص بك. صوت مخيف؟

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

صدقني. هذا هو الوقت المستغرق جيدا. من الجيد أيضًا تذكيرك بأنه لا يوجد شيء دائم وأنه يمكن تعديل كل شيء وتوسيعه بسهولة.

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

على سبيل المثال ، ستنشئ Pattern Primer من Jeremy Keith قائمة بجميع الأنماط الموجودة في مجلد. هذه أداة PHP بسيطة لتحويل قصاصات التعليمات البرمجية إلى مكتبة أنماط. سترى النمط معروضًا بتنسيق HTML.

خيار رائع آخر هو Kyle Neath's KSS ، وهو أيضًا أداة رائعة لتوثيق دليل النمط. هذه الأنماط التلقائية التي تم إنشاؤها هي مجموعة من الإرشادات لمساعدتك في إنتاج دليل نمط HTML مرتبط بوثائق CSS. تم تصميم KSS للعمل بشكل جيد مع معالجات CSS الأولية ويستوعب العديد من أطر CSS.

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

قد لا يكون دليل النمط الأولي الخاص بك مطابقًا للصفحات التي أنشأتها في النهاية ، ولكنها فرصة رائعة لاختبار أنماط جديدة ، وهي مفيدة بشكل خاص للتصميم لمتصفحات متعددة.

أمثلة على أدلة الأسلوب

هل تريد بعض الأمثلة الواقعية لأدلة الأناقة الرائعة؟ لك ذالك:

كود لأمريكا
Mailchimp
قوة المبيعات

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