☰ خطة العام · تكنولوجيا المعلومات والاتصالات (بالعربية)

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

الأسبوع 8 · الدرس ١ «مبادئ تصميم واجهات احترافية شيقة للمواقع الإلكترونية» (٢): واجهة المستخدم UI ومبادئها والفرق بينها وبين UX · 3 دروس
2

الألوان والخطوط والتخطيط

ICT Prep 2 Term 1, Unit 2, Lesson 1: pp. 49–57
الهدفأخطّط الألوان والخطوط والتخطيط لتطبيق تعليمي متخيَّل وأذكر الأسباب.
كلمات جديدة
الألوان المتناسقة · مجموعة صغيرة من الألوان تبدو جميلة معًاالتباين · الفرق بين لون النص ولون الخلفية، وهو ما يجعل النص مقروءًاالخط · شكل الحروفالقسم · جزء واضح من الصفحة مثل الترويسة أو القائمة
الشرح

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

A
1الترويسة: اسم التطبيق
2القائمة: الرئيسية، الدروس، المساعدة
3المحتوى: درس اليوم
4التذييل: ملاحظات صغيرة
أمثلة محلولة
الاختيارالسبب
نص أزرق داكن على رمادي فاتحهادئ والتباين عالٍ وسهل القراءة
خط بسيط للدروسمقروء في القراءة الطويلة
ثلاثة أقسام مرتبةتعرف العين أين تنظر
يخطّط يوسف لتطبيق مخترَع اسمه «علماء صغار». الألوان: أزرق داكن ورمادي فاتح وأبيض (هادئة وتباينها جيد). الخطوط: بسيط للقراءة وأغلظ للعناوين. التخطيط: ثلاثة أقسام مرتبة. ويكتب سببًا لكل اختيار في جدول.
يريد زميل كلمات صفراء باهتة على صفحة بيضاء. تشرح نور أن التباين منخفض جدًّا فلا يرى كثير من القرّاء الكلمات جيدًا. وتقترح كلمات زرقاء داكنة على الأبيض بدلًا منها. القرار تحسمه الأسباب لا الذوق وحده.
نشاط الفصل

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

تدرّب
1
لماذا يُعدّ النص الداكن على خلفية فاتحة اختيارًا جيدًا؟
2
متى تكون الخطوط المزخرفة مقبولة؟
3
اذكر أربعة أقسام في تخطيط صفحة بسيطة.
4
لماذا نذكر أسبابًا لاختيار الألوان؟