تصميم أنظمة واجهة مستخدم معيارية من خلال التطوير المستند إلى الدليل
نشرت: 2022-03-10يعد استخدام دليل الأسلوب لدفع التطوير ممارسة تكتسب الكثير من الجاذبية في تطوير الواجهة الأمامية - ولسبب وجيه. سيبدأ المطورون في دليل النمط بإضافة كود جديد أو تحديث كود موجود ، وبالتالي المساهمة في نظام واجهة مستخدم معياري يتم دمجه لاحقًا في التطبيق. ولكن من أجل تنفيذ نظام واجهة مستخدم معياري ، يجب أن نتعامل مع التصميم بطريقة معيارية.
يشجعنا التصميم المعياري على التفكير وتصميم UI و UX في الأنماط. على سبيل المثال ، بدلاً من تصميم سلسلة من الصفحات أو المشاهدات لتمكين المستخدم من إنجاز مهمة ما ، سنبدأ عملية التصميم من خلال فهم كيفية هيكلة نظام واجهة المستخدم وكيف يمكن استخدام مكوناته لإنشاء تدفق المستخدم.
مزيد من القراءة على SmashingMag:
- كيفية عمل دليل أسلوب فعال
- نظرة عامة متعمقة على أدوات دليل أسلوب المعيشة
- أتمتة تطوير أسلوب يحركها
- تعيين رمز أدلة نمط مجانية للكتاب والمحررين
في هذا المنشور ، سأشرح قيمة الوحدات النمطية في تصميم واجهة المستخدم وكيف ترتبط بعملية التطوير المستند إلى دليل الأسلوب ، مما يحسن تنفيذ التطبيقات المرنة وسهلة الاستخدام ، مع مساعدة المصممين والمطورين على التعاون بشكل أكثر إنتاجية.
التصميم المعياري في واجهة المستخدم
يتعلق التصميم المعياري بتقسيم التصميم إلى أجزاء صغيرة (وحدات) ، وإنشاءها بشكل مستقل ، ثم دمجها لاحقًا في نظام أكبر. إذا نظرنا حولنا ، فسنجد العديد من الأمثلة على التصميمات المعيارية: السيارات وأجهزة الكمبيوتر والأثاث كلها معيارية. بسبب نمطيتها ، يمكن استبدال أجزاء من هذه الأنظمة وإضافتها وإزالتها وإعادة ترتيبها. يعد هذا أمرًا رائعًا للمستهلكين لأنهم يقومون بتخصيص النظام ليناسب احتياجاتهم . هل تريد فتحة سقف ، محرك أقوى ، مقاعد جلدية؟ لك ذالك! يسمح التصميم المعياري للسيارات بهذه الأنواع من التخصيصات وأكثر من ذلك بكثير.
مثال رائع آخر هو أثاث ايكيا. في الرسوم التوضيحية أدناه ، يمكنك أن ترى أن نمطية التصميم ليست فقط في شكل خزانة الكتب ، مما يسمح بتعيينها في اتجاهات مختلفة ، أو يمكنك إضافة إدخالات في فتحاتها ، ولكن أيضًا في نفس الأجزاء التي تصنع القطعة نفسها ، وهي مستطيلات بأحجام مختلفة ، تكرر نفس النمط.
من منظور التصنيع ، يعتبر التصميم المعياري أيضًا فعالاً من حيث التكلفة. أحد الجوانب المهمة لذلك هو أن بناء أجزاء بسيطة صغيرة يمكن توصيلها لاحقًا أسهل وأرخص من بناء قطعة واحدة كبيرة معقدة مرة واحدة. بالإضافة إلى ذلك ، يمكن إعادة استخدام الحل مرارًا وتكرارًا ، مما يؤدي إلى زيادة الإنتاجية.
الأهداف في إنشاء تصميم واجهة المستخدم متشابهة. كمصممين ، نريد إنشاء نظام واجهة مستخدم فعال في كل من البناء والتشغيل. عندما نجد حلاً لمشكلة ما ، نريد أن نكون قادرين على إعادة استخدام الحل في العديد من الأماكن. هذا لا يوفر الوقت فحسب ، بل ينشئ أيضًا نمطًا يمكن للمستخدمين تعلمه مرة واحدة وإعادة تقديمه في مناطق أخرى من التطبيق. نريد أيضًا أن نكون قادرين على تخصيص النظام لسيناريوهات معينة دون الحاجة إلى إعادة هيكلة كل شيء.
هذا هو بالضبط ما تجلبه الوحدات النمطية لتصميم واجهة المستخدم: إنها تؤدي إلى نظام مرن وقابل للتطوير وفعال من حيث التكلفة ، ولكنه أيضًا قابل للتخصيص وقابل لإعادة الاستخدام ومتسق .
أمثلة على التصميم المعياري
يمكن رؤية بعض أمثلة تصميم واجهة المستخدم المعيارية في أنماط مثل الشبكات المتجاوبة وتصميم نوافذ البلاط وتصميم البطاقة . في كل منها ، يتم استخدام الوحدات بشكل متكرر لتوفير تصميم مرن يتكيف بسهولة مع أحجام الشاشات المختلفة. بالإضافة إلى ذلك ، تعمل الوحدات كحاويات للمكونات ، مما يمكننا من إدخال أنواع مختلفة من المحتوى والوظائف ، مثل الكثير من الملحقات التي يمكن إضافتها إلى خزانة ايكيا.
هل هذا متجانس؟
إذا كان التصميم المعياري يتعلق بتصميم نظام ، وتتألف أنظمة واجهة المستخدم في الغالب من نفس الأجزاء (الأزرار ، والمحارف ، والأيقونات ، والشبكات ، وما إلى ذلك) ، فقد تتساءل:
- ألا تبدو جميع التصاميم المعيارية متشابهة؟
- كيف سيؤثر هذا على هوية العلامة التجارية؟
- كيف يمكن جعل واجهة مستخدم المنتج فريدة من نوعها؟
هذه الأسئلة ، رغم صحتها ، تثير سؤالًا أساسيًا: أين يكمن الابتكار والتفرد في تصميم المنتج؟ ظهر هذا الجدل مؤخرًا (راجع "تجانس التصميم الذي لا يطاق" و "دفاعًا عن التصميم المتجانس") ، لكنني أقول ذلك ، نظرًا لأن التصميم المرئي هو ما نراه أولاً ، فإننا نميل إلى الاعتقاد بأن الابتكار والتفرد يكمن في الطريقة التي يبدو بها التصميم. ومع ذلك ، فإن التصميم المرئي هو جزء واحد فقط من ذلك. يجب مراعاة الابتكار والتفرد في تصميم المنتج في المنتج بأكمله: في القيمة الجوهرية التي يوفرها والطريقة التي يختبر بها الناس ذلك ، بما في ذلك مظهره. خذ كرسي. يشترط أن يكون كرسيًا ، ولكن ليست كل تصميمات الكراسي تبدو أو تشعر أو تعمل بنفس الشكل. في الواقع ، كان تصميم الكرسي تاريخياً مجالاً للابتكار في التصميم والمواد. وبالمثل ، فإن واجهات المستخدم متطلباتها الخاصة ، واستخدام الأنماط التي ثبت نجاحها لا يعني التضحية بالابتكار والتفرد. على العكس من ذلك ، ستكون هناك حاجة إلى الابتكار والتفرد لحل المشكلات الخاصة التي يواجهها عملاؤك. يكمن جمال التصميم المعياري في أنه يشجعنا على التعامل مع هذه الحلول كنظام من الأجزاء المترابطة ، بدلاً من إيجاد حلول أصلية بطريقة منعزلة من أجل أن نكون مختلفين. بمعنى آخر ، لن يظل التصميم المبتكر المطبق على عنصر تحكم في واجهة المستخدم محصورًا في مكان واحد في التطبيق ، ولكنه بدلاً من ذلك سيتخلل النظام بأكمله ، ويحافظ على التماسك ويحسن قابلية الاستخدام.
نمطية نمط تطوير محرك الدليل
من جانب التنفيذ ، فإن التطوير المستند إلى دليل الأسلوب هو أيضًا معياري للغاية. بالنسبة للمبتدئين ، تبدأ العملية بمرحلة اكتشاف : فهم المشكلة التي يجب حلها ، وجمع المتطلبات والتكرار من خلال حلول التصميم. بينما يتم تقديم حلول التصميم عادةً كحزمة أو ميزة كاملة ، يجب أن تكون في الواقع مزيجًا من العديد من أجزاء النظام الموثقة في دليل النمط. قد تكون بعض أجزاء التصميم جديدة ، ولكن لا يزال يتعين إنشاؤها كوحدات نمطية. النقطة المهمة هي استخدام دليل النمط لتحديد الوحدات النمطية المتوفرة في نظام واجهة المستخدم والتي يمكن إعادة استخدامها أو توسيعها لإنشاء التصميم.
(ماذا لو لم يكن هناك دليل نمط؟ لا تقلق! سأوضح لك في القسم التالي كيفية التصميم بطريقة معيارية ، حتى إذا كنت لا تستخدم دليل أسلوب.)
الخطوة التالية في التطوير المستند إلى الدليل هي مرحلة التجريد ، وهي في الأساس تمرين لتقسيم حل التصميم إلى أجزاء أصغر. خلال هذه المرحلة ، يعمل المصممون والمطورون معًا لتمييز التصميم المقترح وتحديد العناصر والمكونات (أي الوحدات) التي سيتم استخدامها أو تحسينها أو التي ستحتاج إلى إنشائها للتنفيذ.
تعمل مرحلة التجريد أيضًا على تتبع خطة للخطوة التالية: التنفيذ والتوثيق . خلال هذه المرحلة ، يتم بناء الوحدات أو تحسينها بمعزل عن باقي الوحدات الموجودة. في تطوير الويب ، يعني هذا إنشاء مكون أو تحديد أنماط لعنصر مستقل عن التطبيق. يعد هذا جانبًا مهمًا من الجوانب النمطية ، لأنه يساعدك على تحديد أي مشاكل في وقت مبكر من العملية ، مما يمنع التبعيات غير المتوقعة مع أجزاء أخرى من النظام. والنتيجة هي أجزاء أكثر استقرارًا يسهل تكاملها في الكل.
هناك شيء فريد حول التطوير المستند إلى الدليل وهو أنه أثناء تقدم التنفيذ ، يتم التوثيق أيضًا ، بدلاً من أن يكون فكرة لاحقة. هذا ممكن لأنه عند استخدام منشئ دليل النمط ، يصبح التوثيق دليلاً لأسلوب المعيشة ، حيث يعمل كإطار عمل وصندوق رمل للتنفيذ:
- يعمل دليل نمط المعيشة كإطار عمل لتعريفات عناصر واجهة المستخدم (مثل العناوين والقوائم والروابط وعناصر التحكم في الإدخال وما إلى ذلك) وكمكتبة من المكونات (مثل أنظمة التنقل وأشرطة الأدوات وأدوات البحث وجداول الشبكة وما إلى ذلك. ) المتاحة للاستخدام. هذا يعني أن التطوير لا يبدأ من الصفر في كل مرة. بدلاً من ذلك ، فهو يعتمد على التعريفات الحالية في نظام واجهة المستخدم ويساهم في ذلك.
- إنه أيضًا صندوق رمل لأنه يعمل كمساحة توضيحية لبناء واختبار التنفيذ. هذا هو بالضبط المكان الذي يتم فيه التطوير قبل أن يتم دمجه في التطبيق.
الخطوة الأخيرة من التطوير المستند إلى دليل النمط ، مرحلة التكامل ، تشبه خطوة التجميع في التصميم المعياري. تم تطوير عناصر أو مكونات واجهة المستخدم المطلوبة وهي جاهزة للدمج في التطبيق. ما تبقى هو تكوينها وتخصيصها. أثناء الدمج ، يشبه دليل النمط أي دليل تعليمات جيد يُستخدم لتجميع تصميم معياري مادي.
الآن بعد أن حددنا المفاهيم الأساسية للتصميم المعياري والتطوير المدفوع بالأسلوب ، فلنستخدمها.
التصميم بطريقة معيارية
تخيل هذا: لقد توصلت إلى تدفق مستخدم رائع ، وقمت بتجميع نماذج بالأحجام الطبيعية ونماذج أولية لتوضيح التفاعلات ، وقمت بتوثيق كل جزء على حدة. من المحتمل أن تتبع تصميماتك بالفعل دليلًا للأسلوب ، مما قد يمنحك ميزة كبيرة. (إذا لم يكن الأمر كذلك ، فلا تقلق!) ما عليك سوى الرجوع إلى الوراء والبدء في تحديد الأجزاء الرئيسية لحل التصميم الخاص بك على مستوى عالٍ. يمكن أن تكون هذه الأجزاء هي نقاط التفاعل حيث يتم إنجاز أشياء معينة. على سبيل المثال ، يمكن أن يبدو تدفق الخروج كما يلي:
لكن امسكوا بنادقكم! هذه ليست وحدات بعد. للوصول إلى هناك ، نحتاج إلى تحديد عناصر واجهة المستخدم الثابتة في التدفق ، مثل:
- مؤشر خطوات الخروج ،
- عناصر النموذج المستخدمة لإدخال المعلومات ،
- تمثيل المنتجات في عربة التسوق ،
- تمثيل المنتجات ذات الصلة التي اشتراها الآخرون ،
- سياسات حول الشراء ،
- نص المساعدة ،
- الرسائل والتنبيهات.
بالتعمق أكثر ، سنجد أيضًا أنماطًا وأنماط تفاعل:
الأنماط:
الألوان المستخدمة للدلالة على:
- رسائل الخطأ والنجاح والتحذير والمعلومات ؛
- الإجراءات الأولية مقابل الإجراءات الثانوية ؛
- غير نشط مقابل الحالات المختارة مقابل المعوقين ؛
- الروابط مقابل النص العادي ؛
- العلامات التجارية
الطباعة المستخدمة للإشارة إلى أنواع مختلفة من المحتوى:
- حجم الخط لتخطيط المعلومات بشكل هرمي ؛
- أنواع الخطوط لإبراز الرسائل أو تقديم معلومات إضافية ؛
- قوائم لتلخيص المعلومات ؛
الأيقونية لنقل المعنى المرئي ولإشارة سريعة إلى الإجراءات المشتركة.
أنماط التفاعل:
- إظهار الخطوات القادمة (معطل) ؛
- إظهار الخطوات السابقة (مُمكَّنة بحيث يمكن تحرير المعلومات) ؛
- عرض الملخصات التي يمكن تحريرها ؛
- التحقق من صحة المعلومات بمجرد نقر المستخدم خارج الحقل ؛
- تقديم نص المساعدة عند التمرير ؛
- تحديث العربة بمجرد التحديد.
بمجرد تقسيم التصميم إلى كل هذه القطع الأصغر ، سنحصل أخيرًا على وحداتنا. في هذه المرحلة ، من السهل أن ترى أن الكثير منها لا ينطبق فقط على عملية الخروج ، ولكن على العديد من المجالات الأخرى للتطبيق. باستخدام نهج التصميم المعياري ، يمكن إنشاء هذه الوحدات بحيث تكون قابلة للاستخدام في هذا التصميم المعين وكذلك في المستقبل.
تجدر الإشارة إلى التصميم الذري كمنهجية يمكنها تسريع عملية إنشاء تصميمات معيارية. تحلل هذه المنهجية العلاقات بين الأجزاء المختلفة للنظام وكيف تترابط ، باستخدام الكيمياء كمثال. إن اتباع الخطوات هو إلى حد كبير عكس تمريننا السابق:
- نبدأ من الذرات ، وهي أصغر وحدات النظام (في مثالنا ، الأزرار والطباعة والأيقونات).
- تزداد الوحدات النمطية تعقيدًا ، وترتبط معًا في جزيئات ، والتي توفر المزيد من الوظائف (في مثالنا ، مؤشرات خطوات الخروج ووحدة المنتجات ذات الصلة).
- ثم ، هناك كائنات حية ، وهي جزيئات تم تجميعها معًا في التطبيق (في مثالنا ، عنوان التطبيق وأشكال مختلفة).
- إذا تركنا القياس الكيميائي ، فإن المستوى التالي هو القوالب ، وهي هياكل محددة مسبقًا حيث يتم وضع الكائنات الحية.
- أخيرًا ، هناك صفحات ، وهي أمثلة على النماذج.
القطعة المفقودة هنا هي طريقة لتوثيق الوحدات التي تم تحديدها. لا يتعلق الأمر فقط بإنشاء مستند مواصفات لالتقاط كيفية بناء الوحدات النمطية ، أو كتابة إرشادات تلتقط تعريفات عالية المستوى مثل ألوان العلامة التجارية وعائلات الخطوط (وهي نموذجية لأي دليل نمط قياسي). بدلاً من ذلك ، يجب أن تكون الوثائق أكثر تعقيدًا وديناميكية ، بحيث عندما تتغير هذه الوحدات (وأنت تعلم أنها ستتغير!) ، لا تصبح الوثائق قديمة. هذا هو بالضبط المكان الذي تملأ فيه أدلة أنماط المعيشة الفجوة!
استخدام دليل أسلوب المعيشة
يمكن أن يكون دليل أسلوب المعيشة مفيدًا جدًا أثناء عملية التصميم لأنه يوفر العديد من الأشياء.
خط أساس للعمل معه
بدلاً من البدء من نقطة الصفر في كل مرة ، يوفر دليل النمط الاتجاه المرئي والوحدات النمطية التي يجب استخدامها لإنشاء التصميم.
نظرًا لأن دليل أسلوب المعيشة يتم إنشاؤه من التعليمات البرمجية الفعلية ، فإنه يعكس أحدث وأكبر إصدار من التصميم المنفذ.
توثيق حلول التصميم
يمكن إرسال المعرفة التي تم الحصول عليها لحل مشكلة معينة في واجهة المستخدم أو تجربة المستخدم لاستخدامها لاحقًا.
يساعد هذا في الحفاظ على الاتساق في التنفيذ ، ويشجعك على ملاءمة أي حل جديد في جزء من التصميم الحالي.
ستعمل على تطوير أنماط يمكن للمستخدمين التعرف عليها ، وبالتالي تحسين قابلية الاستخدام.
سهولة الاتصال
يساعد الدليل في توصيل التصميم من خلال توفير أحدث تمثيل لواجهة المستخدم (على عكس النماذج الثابتة ، التي أصبحت قديمة بسرعة).
تم تطوير لغة واجهة مستخدم مشتركة لأنه يتعين عليك تسمية العناصر المختلفة في دليل النمط. يتطلب هذا التعاون ليس فقط بين مصممي واجهة المستخدم ، ولكن بين المصممين والمطورين ، وهي ميزة كبيرة عندما يتعين عليك توصيل كيفية تنفيذ التصميم.
سواء كان لديك دليل نمط موجود أو تخطط لإنشاء واحد ، فإن أتمتة العملية ستضعك في الاتجاه الصحيح ، مما يؤدي إلى عملية التصميم بطريقة معيارية. لذلك ، إذا كنت مستعدًا للتسوق من أجل مولد من أدلة أسلوب المعيشة ، فأنا أوصي بالموارد التالية:
- "نظرة عامة حول أدوات دليل أسلوب المعيشة ،" روبرت هاريتونوف ، مجلة سماشينج
- "نظرة عامة على مولدات مكتبة الأنماط ،" ديفيد هوند ، جيثب
- “Style Guide Generator Roundup” ، سوزان روبرتسون ، A List Apart
لا تأخذ الأمر إلى أقصى الحدود!
الآن بعد أن نظرنا في كيفية صقل عملية التصميم لدمج الوحدات النمطية ، بالإضافة إلى مزايا دليل أسلوب المعيشة ، دعنا نستكشف بعض المزالق الشائعة التي قد تواجهها على طول الطريق.
لا يحل دليل النمط محل أعمال التصميم
ليس من غير المألوف أن تسمع من المديرين أنه بمجرد وضع دليل أسلوب المعيشة ، يتم الانتهاء من معظم أعمال التصميم. بينما يتم إنجاز الكثير من الأعمال المتكررة والتافهة (مثل وضع النماذج الأولية للحالات المختلفة للزر مرارًا وتكرارًا) ، ضع في اعتبارك ما يلي:
- الميزات الجديدة ستظل بحاجة إلى البناء باستمرار ،
- إيجاد حل ينطوي على اتخاذ قرارات التصميم.
لذا ، نعم ، وجود دليل لأسلوب المعيشة والتطور المبني على دليل الأسلوب يحسن سير عمل التطوير ، لكنه لا يخرج المصمم من المعادلة. يعد امتلاك أداة تعمل على تسريع سير العمل وتعزيز الاتصال مفيدًا لكل من المصممين والمطورين. لكن الشيء العظيم في هذا النهج هو أنه يتيح مساحة كبيرة لواجهة المستخدم للتخصيص ، وبالتالي تحسين تجربة المستخدم - واكتشاف ذلك جزء من دور المصمم.
لا تتبع الأنماط إلى أقصى الحدود
يجب أن نسعى دائمًا لاستخدام الأنماط في التطبيق. على سبيل المثال ، يمكن أن يشير الاستخدام المتسق للألوان وأحجام الخطوط إلى عناصر المستخدم في واجهة المستخدم التي يمكن التفاعل معها. ومع ذلك ، تجنب استخدام نمط لمجرد أنه تم تنفيذه من قبل ؛ بدلاً من ذلك ، استخدمه لأنه يحل المشكلة المطروحة حقًا.
على سبيل المثال ، إذا قمت بإنشاء نمط عرض أشرطة الأدوات في الجزء العلوي من الشاشة ، فسيعمل هذا النمط في معظم الحالات ، ولكن ستكون هناك أوقات عند تقديم شريط أدوات سياقي ، أقرب إلى المكان الذي يتخذ فيه المستخدم الإجراء ، يكون أكثر منطقية . لذلك ، اسأل دائمًا عما إذا كانت إعادة استخدام النمط تعطي الأولوية لسهولة التنفيذ على تجربة المستخدم.
لا تتغاضى عن تكرار التصميم
هذا يرتبط قليلاً بالنقطة السابقة. لا تغفل عن قيمة التكرار والابتكار عند تجربة أنماط جديدة وإيجاد طرق لتصميم واجهة ، حتى لو كانت للوهلة الأولى لا تتبع دليل الأسلوب. يجب ألا يحد دليل الأسلوب من جهودك لخلق أفضل تجربة مستخدم ممكنة. بدلاً من ذلك ، كما يوحي الاسم ، يجب أن يكون دليلاً ونقطة بداية لمساعدتك في حل المشكلات من خلال الاستفادة من العمل والخبرة السابقة. يجب أن يظل التكرار أثناء مرحلة التصميم مهمًا كما كان دائمًا ويجب أن يحفزك على تحسين الأنماط المعمول بها.
عبء الصيانة
من بين الأشياء التي تتضمنها وظيفتك ، يجب أن يكون الحفاظ على دليل الأسلوب هو آخر شيء يبدو أنه عبء. للتغلب على هذا ، أجد الممارسات التالية مفيدة:
- ابحث عن نظام توثيق سهل التثبيت والتفاعل معه بشكل منتظم.
- اجعل تحديثات الوثائق جزءًا من سير عملك ، بدلاً من كونها فكرة لاحقة بمجرد انتهاء التنفيذ بالفعل. وثق كما تذهب!
- ضع إرشادات تسهل على الجميع المساهمة في التوثيق. سيؤدي ذلك إلى توزيع عبء العمل وزيادة الشعور بالملكية.
وحدات التصميم لبناء وحدات
لا يعتمد إنشاء نظام واجهة مستخدم مرن متسق وسهل التخصيص ، مع قابلية التوسع والفعالية من حيث التكلفة ، ليس فقط على كيفية بنائه ، ولكن على كيفية تصميمه. مكتبة المكونات لها قيمة قليلة جدًا إذا تم إنشاء كل تصميم جديد بشكل مستقل ، متجاهلاً المعايير والأنماط المعمول بها.
على الجانب الآخر ، لا يتعلق الأمر بإنشاء واجهات قاطعة ملفات تعريف الارتباط التي تعيد استخدام نفس الأنماط والأنماط لأنها مريحة. التصميم الجيد فعال ليس بسبب تفرده ، ولكن لأنه يجمع بين كل من الشكل والوظيفة لخلق تجربة رائعة . يجب أن يكون هذا الهدف دائمًا في قمة اهتماماتك ، واستخدام طريقة مثل التطوير المستند إلى دليل الأسلوب لإضفاء نمطية لكل من التصميم والتطوير يجب أن يساعدك على إنشاء نظام واجهة مستخدم متماسك يحقق هذا الهدف.