مم يتكون نظام التصميم؟

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

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

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

۱.مكتبة النمط

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

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

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

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

على الرغم من أن مكتبة النمط يمكن أن تتضمن عناصر مختلفة بناءً على طبيعة كل من نظام التصميم و المنتج ( المنتجات) التي تخدمه. إلا أن هناك بعض المكونات الشائعة الاستخدام التي توجد دائمًا في غالبية مكتبات الأنماط.

تتضمن هذه العناصر الشائعة: الأزرار buttons وحقول الإدخال input fields والقوائم menus والتنقل navigation لإدراج عدد قليل منها:

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

العنوان

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

الوصف

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

الاستخدام والمبادئ

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

تنوعات

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

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

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

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

عنصر آخر من عناصر التنوع يمكن أن يكون حجم المكون. يمكن أن توجد أحجام مختلفة من الأزرار في مكتبة النمط، والتي يجب أيضًا تسميتها باستمرار. على سبيل المثال: صغير، ومتوسط، وكبير، وكبير جدًا.

الكود

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

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

۲. الإرشادات " Style Guide"

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

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

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

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

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

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

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

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

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

دليل الأنماط يمكن أن يشمل ما يلي:

مبادئ التصميم

مبادئ التصميم هي مجموعة من القواعد التي تحدد القيم الأساسية للمنتج، وهي تحدد بعض الأساليب التي يجب اتباعها في نطاق المنتج.

مبادئ التصميم الفعال هي:

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

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

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

إرشادات العلامة التجارية

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

إرشادات العلامة التجارية هي انعكاس للمنتج وهويته التي يدركها الجمهور المستهدف. تساعد هذه الإرشادات على جعل العلامة التجارية مفهومة وواضحة وتؤسس علاقات مناسبة مع الجمهور المستهدف.

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

قصة العلامة التجارية

عنصر أساسي في إرشادات العلامة التجارية؛ لأنها تمنح الناس الرؤى حول هوية العلامة التجارية وتساعدهم على فهم القيم الأساسية الخاصة بها.

في الأغلب تتضمن رؤية العلامة التجارية، والمهمة التي تضعها على عاتقها وكذلك بعض القيم والخصائص التي تشكل العلامة التجارية.

الشعار

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

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

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

الألوان

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

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

التايبوجرافي

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

صوت ونبرة العلامة التجارية

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

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

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

الأيقونوجرافي

قسم مهم آخر في الإرشادات، وهو بناء الأيقونات في نظام التصميم.

يوضح هذا الجزء مجموعة أيقونات نظام التصميم، سواء كانت هذه الأيقونات تم تصميمها من البداية، أو أيقونات جاهزة من مصدر آخر.

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

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

الصور

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

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

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

إرشادات الكود

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

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

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

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