☰ Year plan · Communication Technology (Arabic)

واجهة المستخدم (UI)

Week 8 · Unit 2, Lesson 1 Principles of Designing Attractive, Professional Website Interfaces (2) · 3 lessons
1

ما واجهة المستخدم؟

ICT Prep 2 Term 1, Unit 2, Lesson 1: pp. 49–57
الهدفأشرح ما واجهة المستخدم ولماذا يهمّ الانطباع الأول.
كلمات جديدة
واجهة المستخدم (UI) · مظهر المنتج: الألوان والخطوط والتخطيط وحجم الأزرارالجاذبية البصرية · مدى جاذبية التصميم للعينالانطباع الأول · الشعور الذي يتكوّن في الثواني الأولى من رؤية شيءالتخطيط · طريقة توزيع أجزاء الصفحة
الشرح

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

جزء من الواجهةما هومشكلة يجب تجنّبها
الألوانالألوان المستخدمة في الصفحةألوان كثيرة زاهية متنافرة
الخطوطشكل الحروفحروف صغيرة أو مزخرفة جدًّا
التخطيطأين توضع الأجزاءصفحة مزدحمة بلا أقسام
الأزرارحجمها وشكلهاأزرار أصغر من أن يُضغط عليها
أمثلة محلولة
تفتح ليلى تطبيقي اختبار مخترَعين. الأول صفحته هادئة بالأزرق والرمادي وأزراره كبيرة وواضحة. والثاني فيه ثمانية ألوان زاهية وأزرار صغيرة. تبقى مع الأول. حسم انطباعها الأول الأمر قبل أن تجرّب أي سؤال.
الزرالنتيجة
صغير جدًّاضغطات خاطئة
كبير بما يكفيسهل الضغط
يجد جد صعوبة في الضغط على زر «التالي» الصغير في هاتف. فيكبّر حفيده الزر في تصميمه الورقي. الأزرار الأكبر اختيار في الواجهة يساعد على الاستخدام.
نشاط الفصل

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

تدرّب
1
ماذا تعني UI بكلماتك؟
2
ما الانطباع الأول؟
3
اذكر شيئين من الواجهة.
4
لماذا قد يكون الزر الأصغر من اللازم مشكلة؟