تصميم واجهات المستخدم (Lecture 7)

تصميم واجهات المستخدم (Lecture 7)

• يهدف تصميم واجهات المستخدم إلى إبراز عمق المستويات أو الشكل ثلاثي الأبعاد، وذلك باستخدام تقنيات مثل التلوين (highlighting) والتظليل (shading) لخلق مظهر ثلاثي الأبعاد.
• يُفترض دائماً أن يكون مصدر الضوء في الزاوية العليا اليسرى للشاشة.
• تُعرض أزرار الأوامر (command buttons) في السطح العلوي للشاشة.

أساليب إبراز العمق ثلاثي الأبعاد

• التداخل (overlapping): تراكب بعض العناصر فوق بعضها ليعطي انطباعاً بالعمق.
• التقليص والتكبير (shrinking and growing): تغيير حجم العناصر يعطي انطباعاً بوجود مستويات متباينة.
• الحواف المائلة (beveled edges): إضافة حواف منحنية أو مائلة لعناصر التصميم.
• تغيير القوام (texture change): تغيير نسيج العناصر يعزز مظهرها ثلاثي الأبعاد.
• تغيير اللون (color change): تعديل ألوان العناصر لتوضيح العلاقة بينها وعمقها.
• تغيير الحجم (size change): تغيير حجم العناصر، خاصة عند تداخلها، يبرز العمق.
• تغيير وضوح (clarity change): التغييرات في وضوح العناصر.
• الموقع العمودي (vertical location): تغيير موقع الأهداف عمودياً.
• تغيير المسافات (spacing change): إحداث تغييرات في المسافات بين العناصر.
• خطوط الإتكاء (reclining lines): إضافة خطوط مائلة أو متحركة.
• تغيير الحركة (motion change): إظهار حركة العناصر لتوحي بعمقها.

عرض المعلومات على الشاشة

• تُعتبر typography خاصية هامة لعرض المعلومات على الشاشات، وتشمل خصائص الخط (font):
  • الحجم (size): يُوصى بحجم 12 نقطة للقراءة السريعة.
  • الحالة (case): يمكن استخدام الأحرف الكبيرة (upper case) أو الصغيرة (lower case) حسب الحاجة.
  • النمط (style): يمكن استخدام الخط المائل (italic) أو الخط الغامق (bold).
  • النوع (typeface): يوجد العديد من أنواع الخطوط، مثل Times New Roman و Arial، بالإضافة إلى أنواع الخطوط العربية.
• حجم وعدد أنواع الخطوط المطلوب استخدامها على الشاشات محدود.
• استخدام الخط المائل (italic) أو الغامق (bold) لجذب الانتباه.

عناصر التطبيق (application elements)

• تحتوي كل نافذة (window) على عنوان (title).
• يُنصح باستخدام أحرف كبيرة في كتابة العناوين (titles) وعناوين الأقسام (section headings) ورسائل التحذير (warning messages) لأهداف القراءة السريعة.
• يجب استخدام التباين الجيد (contrast) بين النصوص والخلفيات (black text on white background).

التعليقات والعلامات (captions and labels)

• يجب تصميم التعليقات والعلامات جيداً.
• تحديد مفاتيح التحكم (controls) بكلمات مألوفة للمستخدم.
• كتابة التعليقات والعلامات بشكل واضح ومختصر.
• توحيد صيغة كلمات التعليق (labels) لكلّ حقول البيانات المماثلة.
• إضافة علامات تنتهي بعلامة النقطتين (:) في نهاية كل علامة.

حقول البيانات (data fields)

• تُستخدم حقول البيانات لإدخال أو تعديل البيانات.
• يمكن استخدام صندوق خط أو صندوق مغاير في اللون لعرض البيانات.
• يُستخدم حقول قراءة فقط (read-only) لعرض البيانات الثابتة.
• يتم عرض البيانات غير النشطة (inactive) بلون أخف من لون البيانات النشطة.
• يمكن وضع العلامات (labels) فوق حقول البيانات، أو بجانبه.
• يُوصى بترتيب العلامات (Labels) والبيانات (Data Field) لموازنة الشكل وسهولة فهم المستخدم للمعلومات.

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