الأحد، 4 مارس 2018

6 نصائح مهمة و عملية لتصميم واجهة مستخدم UI مميزة
  • mohamed morabit, med morabit
  • محمد المرابط
الأحد، 4 مارس 2018

جميع مطوري الويب سيجدون انفسهم يتعاملون يوما ما مع تصميم واجهة المستخدم سواء احبوا ذلك ام لا, رغم ان تخصصهم برمجة عقل و منطق الموقع back-end و ليس واجهة الموقع, لكن ربما سترغب في تصميم فكرة معينة و ليس لديك القدرة على توظيف مصمم, حتى لو استعملت بوتستراب Bootstrap لبرمجة موقع ويب فلابد ان تعرف كيف ستوظف العناصر في الموقع ليخدم الغاية التي تطمح اليها و تحسن تجربة المستخدم.
هناك طن من الحيل العملية التي يمكنك استخدامها لرفع مستوى عملك وتحسين تصاميمك وفيما يلي ستة أفكار و نصائح مهمة لتحسين التصاميم الخاصة بك و رفع مستوى خبرتك كمصمم جرافيك او مطور ويب.

النصيحة 1: استخدم اللون و وزن الخط Bolder لانشاء تسلسل هرمي بصري مريح  :

مصطلح “التسلسل الهرمى البصري” Visual Hierarchy بشكل عام يعني ترتيب مجموعة من العناصر (أسماء ، قيم ، تصنيفات …إلخ) من أعلى لأسفل وفق معيار محدد (الحجم، الأهمية، الشكل … إلخ).

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

"هل هذا النص مهم؟ اذا لنجعله اكبر"
"هل هذا النص ثانوي؟ اذا لنجعله اصغر"

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

تصحيح
"هل هذا النص مهم؟ اذا لنجعله عريضا Bolder"
"هل هذا النص ثانوي؟ اذا لنجعله فاتح اللون قليلا"

مثال:

اعتمد على لونين او ثلاتة على اقصى تقدير لعمل تسلسل هرمي بصري :
- اللون الغامق لاظهار المحتوى المهم مثل عنوان المقالة.
- اللون الرمادي grey لاظهار المحتوى الثانوي مثل الوصف او التاريخ.
- اللون الرمادي grey الفاتح للمحتوى الاضافي مثل التقييم او حقوق الطبع والنشر.

وبالنسبة لوزن الخط Bold عادة ما يكون نوعين من الاوزان كافيين لعمل تسلسل هرمي بصري:
- الوزن Regular يستخدم للمحتوى الثانوي كنص المقال او الوصف
- الوزن Bold يستخدم في العناوين و النصوص المهمة كالسعر أو زر اقرأ المزيد او اشتري

النصيحة 2: لا تستخدم ابدا اللون الرمادي grey على خلفية ملونة:

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


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

النصيحة 3: قم دائما بإزاحة الظلال Shadows نحو الاسفل


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

نفس الامر ينطبق كذلك على الظلال الداخلية التي تستخدم في حقول ادخال البيانات كما في الصورة, فعوض جعل الظلال ذات قيم متساوية استخدم الظلال Shadow لخلق تأثير الضوء الساطع من فوق على الحقول, و هذا يجعل التصميم اكثر واقعية و قبولا. هذا الامر الهين له تأثير واضح في تحسين واجهة المستخدم user interface و قد يكون له تأثير ايضا في تحسين تجربة المستخدم User Experience.

النصيحة 4: حاول التقليل من استخدام الحدود Borders في التصميم:


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

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

1- استخدم الظلال Shadow :


الظلال Shadows يمكن ان تقوم بمهمة التمييز بين العناصر بشكل رائع. لكنها تحتاج الى دقة عالية في تحديد قيم الـShadow كي تظهر بشكل ممتاز في التصميم و عكس هذا سيظهر عيب في التصميم

2- استخدام خلفية Background ذات لون مختلف:


وضع خلفية ذات لون مختلف لاحد العناصر كل ما تحتاج اليه للفصل بينها, فلون الخلفية كافي لتمييز العناصر عن بعضها البعض مهما كانت العناصر متشابهة

3- اضافة تباعد (مساحة Spacing)

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

النصيحة 5: استخدم الحدود الملونة Border من اجل التوضيح و الجمالية


في النصيحة 4 اشرنا الى ضرورة التخفيف من استخدام الحدود Borders لكن الحدود الملونة تعتبر طريقة رائعة يمكنك استخدامها لاضفاء الوضوح و الجمال الى تصميم واجهة المستخدم,

مثال على ذلك, رسالة التنبيه :

مثال اخر لتسليط الضوء على عناصر التنقل النشطة في القائمة:

النصيحة 6: ليست كل الازرار تحتاج خلفية Background

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


بتطبيق هذه الطريقة فأنت تصمم كل زر حسب اهميته و ليس عبطا.
اي صفحة ويب تحتوي في الغالب على زر اساسي (مهم جدا) واحد, و اثنين من الإجراءات الثانوية أقل أهمية. و عند تصميم هذه الاجراءات لابد من مراعات التسلسل الهرمي البصري فهذه الخطوة مكملة لما ذكر في النصيحة رقم 1.

- ينبغي أن تكون الإجراءات الاساسية ( زر مهم جدا ) واضحة, ذات ألوان خلفية عالية التباين.
- ينبغي أن تكون الإجراءات الفرعية ( زر مهم ) واضحة ولكنها ليست بارزة. يكفي استخدام الحدود Borders أو ألوان الخلفية Background ذات تباين أقل.
- ينبغي أن تكون الإجراءات الاضافية ( زر غير مهم ) يمكن رأيتها ولكنها غير واضحة جدا. يكفي استعمال كلمات بروابط Links.

المثال التالي يوضح كل ما سبق ذكره :


وفي الاخير اريد ان اشير الى ان جميع النصائح المضمنة في هذا المقال مهمة لكل مصمم جرافيك, و لابد ان تستوعب استعابا وفيا.
تقبل تحياتي ❤️




شارك الموضوع مع اصدقائك
mohamed morabit محمد المرابط
مصمم جرافيك و مطور ويب حر. حاصل على شهادة infographic design. مسوق بالعمولة سابق لدى شركة orange للاتصالات المغربية. لي خبرة 5سنوات في تطوير المواقع بالـ php , html5 , css3 , mysql , javascript ...