كيفية استخدام أنماط تصميم واجهة المستخدم
أنماط التصميم هي الحلول المثلى لمشاكل التصميم الشائعة. كما يتم حل المشاكل الشائعة حول المجتمع ويتم حلها ، غالباً ما تظهر حلول مشتركة. في نهاية المطاف ، فإن أفضل هذه الزيادة فوق الدين ، تحديد الذات ، وتصبح صقل حتى تصل إلى حالة نمط التصميم.
لم أكن لأطلق على تصميم التصميم اتجاهًا في تصميم الويب ، يبدو أن أنماط التصميم تدور حول النظر في كيفية تصنيف التصميمات الشائعة في الماضي ، بدلاً من إنشاء مناطق جديدة أو النظر إلى أين تتجه الأمور.
كيف يجب أن تقترب من أنماط تصميم واجهة المستخدم؟
نستخدم أنماط التصميم طوال الوقت ، إذا لم تكن على دراية بها ، فربما لم تكن قد أدركت أنك في كل مكان حولك.
ماذا عن المثال الكلاسيكي لوجود عدد كبير من المحتويات لعرضها على صفحة واحدة؟ نوجه اهتمامنا إلى "علامات التبويب" ، وهو نمط تصميم يمكننا من تقديم كل المحتوى الذي نريده ، دون أن يختفي المستخدم في بحر من الروابط.
تتضمن الفوائد المعتادة لاستخدام نمط التصميم ما يلي:
- عرض للمبتدئين كيفية استخدام أفضل الممارسات في تصميم الويب ؛
- تعلم التكيف مع الفهم الجماعي للمصممين ؛
- السماح باتصال أفضل ، والحد من المخاطر المرتبطة بخيارات غير مألوفة ؛
- تقليل الوقت اللازم وتكاليف سير العمل لتنفيذ مهام محددة ؛
- تجنب إهدار الوقت في بناء شيء تم بناؤه من قبل ؛
- إعطاء المستخدم خبرة أنه مألوف ومعروف (طبيعة أنماط التصميم).
في المثال أعلاه نرى Clicky وسائل الإعلام باستخدام نمطين من أنماط التصميم الشائعة جدًا اليوم:
- Navicon - رمز عالمي للقائمة ، والمعروف أيضًا باسم التنقل في المواقع ، أصبح شائعًا بشكل متزايد في تصميم الويب الحديث ، ولكن تم تكييفه بالكامل تمامًا مع الأجهزة المحمولة.
- Parallax Scrolling - تصميم فريد من نوعه يعمل على تمكين موقع الويب الخاص بصفحة واحدة ، مع آلية تمرير سهلة الاستخدام ، ولكنه يتضمن أيضًا قائمة من النقوش الخلفية التي تعطي الصفحة شعوراً بالحيوية.
على الرغم من أن قائمة Navicon والقائمة العامة الموجودة أعلى الصفحة تتشارك في اختيارات متشابهة - فسيكون من الصعب جدًا تضمين جميع الارتباطات في شريط العناوين نفسه - يصبح من الواضح أن الخيارات الصغيرة يمكن أن تحدث فرقًا كبيرًا.
إليك ما تحتاج إلى التفكير فيه عند تقييم نمط تصميم وتطويعه لاحتياجاتك الخاصة:
- ملخص المشكلة: ما مشكلة المستخدم التي تحلها؟ حافظ على تركيزك ، واستخدم عبارة مثل قصة مستخدم - في جملة واحدة فقط.
- الحل: كيف حل الآخرون هذه المشكلة؟ تتضمن بعض الأشياء التفصيلية التنقل في المستخدم (بما في ذلك الاختصارات) ، والحصول على مدخلات المستخدم ، والتعامل مع البيانات والتكاملات مع الخدمات أو التطبيقات الأخرى ، وعرض المعلومات والمحتوى (بما في ذلك الافتراضات).
- مثال: رائع ، هل يمكنك إظهار ذلك؟ في بعض الأحيان ، تكون لقطة الشاشة أو نموذج بالحجم الطبيعي كافيين ؛ في أحيان أخرى ، تكون تدفقات المستخدم و / أو الملاحظات الإضافية ضرورية لتوصيل النمط بوضوح.
- الاستخدام: متى يجب استخدام هذا النمط (لا)؟ تتضمن بعض الأشياء بالتفصيل بنية المنتج أو تخطيط الواجهة أو الجهاز (الأجهزة) أو لغة البرمجة أو غياب أو وجود أنماط تصميم أخرى ونوع المستخدم وحالات الاستخدام الأساسية.
يتطلب الأمر ممارسة وانضباط للتفكير في الأنماط بهذه الطريقة إذا لم تكن قد فعلت ذلك بعد. خصص بعض الوقت للإجابة على هذه الأسئلة عند تصميم منتجك لأنه قد يساعدك على توفير الكثير من الوقت لإعادة بناء الطريق عندما يسأل المستخدمون وفريقك عن تفاصيل مشابهة.
صعود مجموعة أدوات واجهة المستخدم
لطالما كانت أنماط تصميم واجهة المستخدم تسهل على المستخدم التنقل داخل موقعك أو تطبيقك أو نظامك. إذا تعلم المستخدم كيفية تقديم تعليق لأول مرة ، فستعرف على الفور كيفية إرسال بريد إلكتروني لك باستخدام نموذج الاتصال ، وهو نفس المفهوم التكراري لإدخال المعلومات.
في السنوات الأخيرة ، شهدنا نمواً هائلاً في سوق مجموعة أدوات واجهة المستخدم. يمكن فهم مجموعة أدوات واجهة المستخدم ببساطة على أنها مجموعة من الأدوات التي تمكنك من إنشاء تطبيق رسومية بالكامل من البداية. Twitter Bootstrap هو مثال ممتاز على مجموعة أدوات UI الناجحة. في هذه الأيام ، ستعتمد نسبة كبيرة من مصممي الويب على ميزات Bootstrap لتسهيل سير العمل الخاص بهم. بمعنى من المعاني ، ليست هناك حاجة لإعادة اختراع العجلة!
3 أنماط تصميم واجهة المستخدم للتذكر
باختصار ، أنماط التصميم هي حلول للمشكلات المتكررة. من خلال استخدام أنماط يمكننا التغلب على مشاكل واجهة المستخدم البسيطة. إذا كنا نولي اهتمامًا وثيقًا ، نلاحظ أن الأنماط تحيط بنا جميعًا. لا يوجد شيء خاص حول هذا التصميم المحدد ، إنها الطريقة التي تم تطبيقها على أنك متحمس!
Crystal Clear Calls to to Action
سيكون أبسط نماذج الويب (وأيضًا أكثرها شيوعًا) عادةً زرًا واحدًا قابلاً للتنفيذ: في هذه الحالة "إنشاء موقع ويب". انها جميلة لا تحتاج إلى شرح ، وهذا هو الهدف.
ما مدى سهولة الحصول عليها ، أليس كذلك؟ دائما الذهاب للخيار السهلة ، لا إعادة اختراع العجلة فقط لتبرز من الحشد.
فتات الخبز لانقاذ
تعرض مسارات التنقل في المسار من الصفحة الأمامية للموقع إلى الموقع الحالي للمستخدم في التسلسل الهرمي لصفحة الويب. وهي عبارة عن شكل من أشكال التنقل الثانوي يساعد المستخدمين على فهم التسلسل الهرمي وهيكل الموقع. تبدأ Breadcrumbs بالصفحة الرئيسية وتنتهي بالصفحة التي يتم عرضها حاليًا.
في هذا المثال من قبل فارس فرحان ، نرى كيف يستخدم اثنين من أنماط تصميم واجهة المستخدم في نفس الوقت. أولا ، لديه نمط علامات التبويب في الأعلى ، وثانيًا نمط التنقل في مسار التنقل في الأسفل. من خلال دمجها معًا ، فإنه يجعل تجربة تصفح ممتعة جدًا.
يجب أن يكون التسجيل سهلاً
ما لم تكن تعيش تحت صخرة ، ستكون على دراية بالتسجيل الاجتماعي. يعد التسجيل في موقع ويب أمرًا شائعًا ، لذا يجب جعله سهلاً وممتعًا قدر الإمكان.
هذه واحدة من صفحات التسجيل المفضلة في الوقت الحالي. انها ال جيثب يتم عرض الصفحة الرئيسية ، وكما ترون في كل شيء يقال عن الشاشات أن الشركة في أقل من مائة كلمة. لديك أيضًا القدرة على التسجيل أثناء التنقل ، وتستغرق العملية أقل من دقيقة لإكمالها. ستتلقى بريدًا إلكترونيًا لإثبات ملكية حسابك ، ولكن هذا شيء اعتدنا استخدامه على أي حال!
الكلمات الأخيرة
لقد قمت ببناء مواقع ويب لأكثر من ثماني سنوات وخلال تلك السنوات الثمانية أدركت أن البساطة هي مفتاح العديد من مشاكل التصميم.
لقد توصلت إلى استنتاج مفاده أن الفوضى في التصميم ، والمنتفخة بالعناصر والنماذج غير الضرورية هي أكثر تجربة محبطة يمكنك العثور عليها على الويب. نعم ، التصميم هو بالضبط كيف يعمل شيء ما ، فلماذا لا يجعله يعمل بشكل صحيح؟ واجهة المستخدم (UI) مهمة للغاية لنجاح عملك أو مشروعك.
أفضل طريقة لضمان تصميم مواقع ناجحة هي التعلم من أنماط التصميم الموجودة واستخدامها.