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

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

يمكن تجميع كل هذه المصطلحات المختلفة في فئتين مختلفتين:

1) دليل الاسلوب

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

2) مكتبات نمط / مكتبات مكون / مجموعة أدوات واجهة المستخدم

كل هذه الشروط تشير إلى نفس الشيء.

وهي عبارة عن مجموعة من المكونات القابلة لإعادة الاستخدام التي تشكل موقعًا على الويب. مكتبات النماذج (كما سأشير إليها من الآن) هي طريقة لتمثيل كل ما يشكل موقعًا على الويب. وهذا يشمل التخطيط والبنية وكل شيء موجود داخلها.

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

لذا ، فإن مكتبة النماذج هي مجموعة من المكونات التي تشكل موقع الويب.

مكتبات النمط مقابل أدلة الأسلوب

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

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

عرض

يسعى كلاهما لتحقيق هدف مشترك - لجعل الموقع متسقًا وعلامة تجارية وسهلة الاستخدام.

لماذا هي مفيدة؟

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

اليك السبب:

فوائد لعملائك

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

فوائد لأصحاب المواقع

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

فوائد للمطورين

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

فوائد للمصممين

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

أمثلة

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

فيما يلي بعض الأمثلة المفضلة لدينا.

قوة المبيعات

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

قوة المبيعات

uSwitch

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

ustyle

وول مارت

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

وول مارت

داخل وكالة

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

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

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

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

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

لا شيء سوى الفوائد

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

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