تعلم تصميم واجهة المستخدم الأساسي في 5 دقائق

إذا كان لديك فهم أساسي لـ HTML و CSS وترغب في إنشاء واجهات مستخدم رائعة المظهر في المتصفح ، فلا مزيد من البحث! في هذه المقالة ، ستعزز مهاراتك في تصميم واجهة المستخدم من خلال التعرف على الأساسيات السبعة التالية:

  • مساحة بيضاء
  • انتقام
  • التباين
  • مقياس
  • الطباعة
  • اللون
  • التسلسل الهرمي البصري

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

إطلاق الدورة: هل تعلم أساسيات تصميم واجهة المستخدم؟

نعتقد أن جميع مطوري الواجهة الأمامية يجب أن يتمتعوا بمهارات تصميم واجهة المستخدم الأساسية. إذن في هذا؟ بالطبع ،designcoursecom يعلمك ذلك. كل ذلك بدون استخدام أي أدوات تصميم ، فقط HTML و CSS.

هل تقدر RTs؟ // t.co/mT9fDjShUd # 100daysofcode

- Scrimba (scrimba) 28 يناير 2020

لذلك إذا تركت هذه المقالة في حاجة إلى المزيد ، فتأكد من مراجعة الدورة التدريبية. الآن دعنا نقفز إليه!

مساحة بيضاء

أول أساسيات التصميم التي سننظر إليها هي White Space ، والمعروف أيضًا باسم الفضاء السلبي. كما يوحي الاسم ، إنها المسافة بين العناصر على الصفحة.

العناصر التي يتم سحقها على صفحة بدون مساحة بيضاء لا تبدو غير جذابة فحسب ، بل يصعب التنقل فيها وصعوبة قراءتها.

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

قبل وبعد تعديل المسافة البيضاء

انتقام

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

كما ترى من الصور التالية ، فإن الصفحة الأولى التي تحتوي على عناصر في العديد من الأعمدة المختلفة (محاذاة ضعيفة) أقل جاذبية وقابلية للقراءة من الثانية ، والتي تتمتع بمحاذاة قوية

صفحة ذات محاذاة ضعيفة صفحة ذات محاذاة قوية

التباين

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

كما ترى من هذا المثال ، يصعب قراءة الصفحات ذات التباين الضعيف ولا تبرز العناصر.

صفحة ذات تباين ضعيف

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

مثال على التباين الجيد

لمساعدتك في الحصول على التباين الصحيح تمامًا ، تقترح WCAG (إرشادات الوصول إلى محتوى الويب) حدًا أدنى (AA) لنسبة التباين لا يقل عن 4.5: 1 ، أو 3: 1 للنص الكبير ، أو نسبة تباين محسّنة (AAA) تبلغ 7 : 1 أو 4.5: 1 للنص الكبير. هناك مجموعة من المكونات الإضافية أو مواقع الويب للتحقق من ذلك.

مقياس

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

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

صفحة ذات مقياس رديء مثال على مقياس جيد

الطباعة

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

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

إذا اتبعت هذه النصائح ، فستظهر صفحتك بالشكل التالي:

مثال على الطباعة الجيدة

وليس مربكا وغير مقروء مثل هذا:

صفحة ذات طباعة رديئة

اللون

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

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

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

صفحة ذات خيارات ألوان رديئة الاستخدام الجيد للون

التسلسل الهرمي المرئي

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

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

صفحة ذات تسلسل هرمي مرئي ضعيف استخدام الطباعة واللون لإنشاء تسلسل هرمي بصري

يتم إحتوائه

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

دورة أساسيات تصميم واجهة المستخدم

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

حظًا سعيدًا ، وترميزًا سعيدًا :)