احصل على تصميم UI/UX متوافق لموقعك في 2022 وتميز عن الآخرين

• احصل على تصميم UI/UX متوافق لموقعك في 2022 وتميز عن الآخرين

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

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

يمكن أن تساعد النصائح التي بجهد ضئيل في تحسين تصميماتك وتجربة المستخدم.

لقد قمت هنا بتجميع مجموعة مختارة من 12 من أشهر نصائح UI و UX.

دعونا نتعمق فيها …

1. استخدم الرموز المحددة في واجهات المستخدم الخاصة بك لتجنب إرباك المستخدم.

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

اختر رمزًا ينقل المعنى والوظيفة الصحيحين ، لأن أي شيء آخر يدعو إلى الارتباك ويصبح عقبة معرفية للمستخدم.

لا تكن متمردًا جدًا مع تلك الرموز.

2. 4pt Baseline Grid + 8pt Grid = تناغم عمودي إيقاع.

عند العمل باستخدام الكتابة ، يمكن أن يؤدي استخدام خط الأساس 4 نقاط جنبًا إلى جنب مع 8pt Grid متعددة الاستخدامات،

إلى إحداث إيقاع رأسي أكثر تناسقًا لتصميماتك.

تحتاج إلى محاذاة النوع الخاص بك إلى شبكة أساسية من 4 ، باستخدام قيمة ارتفاع سطر مضاعف 4 (16 ، 20 ، 24 ، 28 ، إلخ …)

لماذا 4؟ حسنًا ، لقد وجدت أن القياس بمضاعفات 8 في الماضي ليس متعدد الاستخدامات عند العمل بأحجام نصوص معينة.

4pt Baseline Grid + 8pt Grid = تناغم عمودي جميل.

3. استخدم الوزن والحجم واللون للإشارة إلى التسلسل الهرمي ضمن النوع الخاص بك.

عند العمل باستخدام النوع ، لا تحتاج العناصر إلى الصراخ “انظر إلي!” طوال الوقت.

لكنهم بحاجة إلى وجود تسلسل هرمي متوازن.

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

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

4. المسافة البيضاء. استخدمها بسخاء.

مسافة بيضاء. مسافة سلبية.

نفس الشيء. عناوين مختلفة.

نصيحتي لك. استخدمه بسخاء أو باعتدال ، لكن استخدمه جيدًا.

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

مما يسمح لعملك بالتنفس وإطلالة أكثر دقة.

5. صمم أيقوناتك باستمرار عند استخدام نظام الشبكة 8pt.

عند العمل مع الرموز ونظام الشبكة 8pt ،

ستجد أن معظم مجموعات الأيقونات جيدة التصميم بها أيقونات تقع داخل إطارات من مضاعفات 8 (أي 16 × 16 ، 24 × 24 ، 32 × 32 ، إلخ …)

في بعض الأحيان ، فقط في بعض الأحيان ، ليس هذا هو الحال دائمًا.

إذا لم يكن الأمر كذلك ، فتأكد من أن أي أيقونة مدرجة في تصميمك تقوم بتأطيرها داخل حاوية تستخدم قيمة شبكة 8pt (أي 24 × 24).

سيؤدي القيام بذلك إلى تمكين تصميم الرموز الخاصة بك باستمرار داخل تصميماتك.

6. أبلغ المستخدم بما سيحدث إذا طبق إجراءً معينًا.

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

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

دع المستخدم يعرف ما سيحدث واطلب منه التأكيد قبل أن يضغط على الزر الأحمر الكبير المسمى “حذف”.

7. تأكد من إعطاء الأولوية لشاشاتك الأكثر أهمية في شريط علامات التبويب.

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

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

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

8. حاول إنشاء مساحات كبيرة يمكن النقر عليها على الهاتف المحمول.

عند التصميم للجوال ، حاول جعل المناطق القابلة للضغط كبيرة بما يكفي لتضغط الأصابع بنجاح.

الحد الأدنى من منطقة النقر الموصى بها لكل من iOS و Android هو –

44 × 44 نقطة لنظام iOS

48 × 48dp  لنظام Android

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

9. لا تقم فقط باختيار أحجام الخطوط بشكل عشوائي. استخدم مقياس النوع.

عندما تحتاج إلى تحديد مجموعة من أحجام الخطوط بسرعة وعملية وبدون أي تخمين ، استخدم مقياس الكتابة.

كما يوحي الاسم ، يعمل مقياس النوع على عامل مقياس (على سبيل المثال ، 1.25).

تتمثل الطريقة في البدء بحجم خط أساسي

(على سبيل المثال ؛ 18 بكسل) وضربه (أو تقسيمه) على عامل المقياس (على سبيل المثال ؛ 1.25) للحصول على أحجام خط أعلى

(على سبيل المثال ؛ H1 ، H2 ، H3 ، إلخ.) أو التسلسل الهرمي السفلي (مثل تسمية توضيحية ، زر ، إلخ).

سيساعدك استخدام مقياس الكتابة على إنشاء نصوص تبدو متناغمة،

وتجلب التناسق والإيقاع والتسلسل الهرمي إلى الطباعة الخاصة بك.

10. إجراء المستخدم الأولي الفوري مع الحالات الفارغة المفيدة.

الحالات الفارغة. مفيد للغاية في تحسين تجربة المستخدم ولكن غالبًا ما يتم إهماله.

استخدم الحالات الفارغة كفرصة للمستخدم لاكتشاف الميزات التي ستفيدهم بسرعة ،

وحملهم على تحقيق أهدافهم في وقت أقرب ، واستخدام الموقع أو التطبيق على النحو الذي تريده.

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

11. قم بتعيين ارتفاع الخط بناءً على x-height الخاص بـ Typeface للحصول على أفضل قراءة.

تحتاج الخطوط ذات الارتفاعات السينية المختلفة إلى قياسات مختلفة لارتفاع السطر لتحقيق أفضل قراءة ووضوح.

Merriweather ، على سبيل المثال ، هو محرف ذو ارتفاع x كبير ، وبالتالي يتطلب ارتفاع خط أكبر.

في المقابل ، يتطلب شيء مثل Mr Eaves Sans بارتفاع x الصغير ، ارتفاعًا أقل للخط لتحقيق أفضل قراءة.

12. لتحديد قابلية قراءة الخط الذي اخترته ، استخدم اختبار x-height أو Il1.

الارتفاع x هو ارتفاع الحرف الصغير “x” بالنسبة إلى الحرف الكبير (على سبيل المثال ، T) في نفس المحرف.

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

الآن ، هناك طريقة أخرى لتحديد قابلية قراءة محرف وهي إجراء اختبار Il1.

باستخدام هذا الاختبار ، تقارن ثلاثة أحرف من نفس المحرف: الأحرف الكبيرة i (I) ، والأحرف الصغيرة L (l) ، والرقم واحد (1).

يمكن أن يساعد مدى اختلاف أشكال الحروف عن بعضها البعض في تحديد قابلية القراءة ، خاصة عند العمل باستخدام محارف Sans Serif.

عند اختيار محرف للنص الأساسي ، استهدف دائمًا الحصول على أفضل وضوح ، إما عبر x-height أو Il1 أو كليهما.

• الخاتمة

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

أتطلع إلى تقديم المزيد من النصائح القيمة حول UI و UX في عام 2022!

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

قد يهمك أيضاً: 4 نصائح لتسويق الكتروني فعال يرفع من مبيعات اعمالك