بسم الله الرحمن الرحيم

وبه نستعين

التصميم الجرافيكي / نماذج تصميمات تطبيقات الجوال

Mobile App Designs Templates

 

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

User Interface Design Patterns for Mobile Apps

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

نموذج الراديو Radio

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

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

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

نموذج التسلسل الهرمي التفصيلي Master-Detail

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

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

نموذج عرض الخصائص الرئيسية في واحد Many in One

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

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

نموذج الغني للألعاب Rich Experience

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

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

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

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

نماذج الواجهة المخصصة Custom Interface Paradigms

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

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

صفات التصميم المرئي لتطبيقات الجوال

Visual Design Qualities of Mobile Apps

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

التباين Contrast

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

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

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

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

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

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

التكرار Repetition

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

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

 

أرجو أن تنال التدوينة إعجابكم وإلى لقاء قريب بإذن الله

 

المراجع والمصادر

ما هو التصميم الجرافيكي؟

What is Graphic Design?

 

لمزيد من التواصل تابعونا على وسائل التواصل الاجتماعي

حساب "مدونة ألوان" على فيسبوك.

حساب "مدونة ألوان" على انستجرام.

حساب "مدونة ألوان" على تويتر.