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

وبه نستعين

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

Mobile App Designs (Grids) Templates

 

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

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

Visual Design Qualities of Mobile Apps

المحاذاة Alignment

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

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

التقارب والتجميع Proximity and Grouping

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

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

الملامس Texture

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

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

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

الإضاءة Lighting

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

التدرج Gradient

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

إضاءة الأطراف والحواف Edge Highlights

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

 

الظلال Drop Shadow

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

أنواع قوالب وتصاميم تطبيقات الجوال

Types of Mobile App Design Templates

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

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

الشبكات منخفضة الدقة Low-Fidelity Wireframes

الشبكات (القوالب) منخفضة الدقة تتميز بأنها مصممة بحيث توفر مستوى عالي من التفاعل والتسلسل الهرمي للمعلومات، وتحتوي على حد أدني من التفاصيل يتم عرضة، وكل عنصر يؤدي وظيفة محددة. وتتضمن الصفحة الرئيسية العناصر الآتية.

رأس الصفحة بعدها شعار الموقع (اللوجو) Logo، قائمة التنقل Navigation menu، صورة على اليسار أسفل الشعار، مربع البحث Search form، وتحتها معلومات عن المنتج Product info، وبعدها على اليمين يوجد مكان مخصص للعروض الخاصة، وبجواره قائمة بموضوعات يتم ترشيحها للزائرRecommend، وفي ذيل الصفحة بعض المعلومات الإضافية Additional info.

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

الشبكات عالية الدقة High-Fidelity Wireframes

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

رأس الصفحة: ويحتوي شعار وأسم الموقع على اليسار، وبعض المعلومات عن حساب المستخدم مثل حسابي My Account والإعدادات Settings والخروج Log out وأسفل منها يوجد ومربع البحث، وبعض المعلومات عن الشركة أو أصحاب الموقع مثل الصفحة الرئيسية Home واتصل بنا Connect Us.

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

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

وعلى اليمين يوجد مكان مخصص لوضع إعلان ومكان للعروض الخاصة. 

الشبكات مختلطة الدقة Hybrid Wireframes

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

الشبكات بالرسم اليدوي Hybrid Wireframes

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

تصاميم ونماذج الشاشات

Screen Designs and Mock-Ups

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

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

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

لا يجب أن تكون كل متصفحات الويب موحدة في الشكل. حيث يجب تبني أفكار إبداعية جديدة.

 

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

 

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

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

What is Graphic Design?

 

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

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

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

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