إنشاء دليل نمط واجهة المستخدم لتجربة مستخدم أفضل

استمع إلى النسخة الصوتية من هذه المقالة

ضمان تماسك تصميم المنتج وتجربة المستخدم

في عام 1976 ، أصدر جوني كاش أغنية One Piece at a Time ، وهي أغنية تحكي قصة عامل سيارات في ديترويت يقضي عشرين عامًا في جمع أجزاء كاديلاك المسروقة من خط التجميع.

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

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

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

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

UI Style Guides هي أداة تصميم وتطوير تجلب التماسك لواجهة مستخدم المنتج الرقمي وتجربته. هم في جوهرهم:

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

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

قم بتضمين مكونات التصميم الحاسمة هذه في أدلة نمط واجهة المستخدم

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

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

مخطط الطباعة

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

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

تخطيطات مستجيبة

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

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

لوحة الألوان

يعد استخدام الألوان غير المتسق أحد أسرع الطرق لتدمير الواجهة ، لذا يجب تحديد مجموعات الألوان بوضوح. يعد سرد الألوان وقيمها (HEX ، UIColor) بداية جيدة ، ولكن يجب أيضًا تقديم أزواج محددة وأمثلة للاستخدام.

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

أزرار

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

مكونات واجهة المستخدم الإضافية التي قد تكون مطلوبة

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

تنظيم تعليمات التصميم وتحديد سياقاتها

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

جدول المحتويات

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

ملاحظات السياق

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

علي سبيل المثال:

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

تعليمات التباعد وتحديد المواقع

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

ما يجب فعله و ما لا يجب فعله

في كثير من الأحيان ، قد يكون من المفيد تحديد ما يجب فعله وما لا يجب فعله في التصميم. على سبيل المثال:

• " لا تستخدم نسخة النص الأبيض لشعار شركتنا في تذييل الواجهة."
• " لا تستخدم إصدارات ملونة بديلة من تصميم الشركة النصي على خلفيات سوداء."

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

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

العناصر الحية ومقتطفات التعليمات البرمجية

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

تسمح مقتطفات التعليمات البرمجية للمطورين بنسخ رمز العناصر الحية ولصقها بسرعة في النهاية الخلفية للمنتج.

اجعل أدلة نمط واجهة المستخدم سهلة الوصول لفرق التصميم

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

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

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

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

فيجما

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

مرحلة

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

إنفيجن

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

Material.io

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

يجب أن تكون أدلة نمط واجهة المستخدم سهلة الاستخدام

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

تخطيطات بسيطة

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

تعليمات موجزة

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

سيناريوهات الاستخدام الإعلامي

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

تاريخ الإصدارات ذات الصلة

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

أدلة نمط واجهة المستخدم هي مصدر ثمين وأداة تصميم قوية

تقدر فرق التصميم والتطوير المعاصرة الكفاءة والتعاون متعدد التخصصات - كما يتضح من أنظمة لغة التصميم التي توصف بها العلامات التجارية الكبرى مثل MailChimp و Google و Salesforce.

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

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

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

مزيد من القراءة على مدونة Toptal Design:

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