تقنية

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

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

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

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

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

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

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

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

احصل على تصميم UI/UX متوافق لموقعك في 2022 وتميز عن الآخرين
احصل على تصميم UI/UX متوافق لموقعك في 2022 وتميز عن الآخرين
  1. استخدم الرموز المحددة في واجهات المستخدم الخاصة بك لتجنب إرباك المستخدم.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

48 × 48dp  لنظام Android

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • الخاتمة

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

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

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

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

الوسوم
اظهر المزيد

مقالات ذات صلة

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

زر الذهاب إلى الأعلى
إغلاق