lec7.pdf

‫تصميم واجهات المستخدم‬ ‫‪Lecture 7‬‬ ‫‪1‬‬  ‫إبراز عمق المستويات أو الشكل ثالثي األبعاد‬ ‫‪Conveying depth of levels or a three dimensional appearance‬‬ ‫و التظليل‬ ‫ يمكن استعمال التلوين ‪highlighting‬‬ ‫‪ ،shading‬وتقنيات أخرى للحصول على مظهر ثالث...

‫تصميم واجهات المستخدم‬ ‫‪Lecture 7‬‬ ‫‪1‬‬  ‫إبراز عمق المستويات أو الشكل ثالثي األبعاد‬ ‫‪Conveying depth of levels or a three dimensional appearance‬‬ ‫و التظليل‬ ‫ يمكن استعمال التلوين ‪highlighting‬‬ ‫‪ ،shading‬وتقنيات أخرى للحصول على مظهر ثالثي‬ ‫األبعاد‪.‬‬ ‫– نفترض دائما بأنّ مصدر الضوء يكون في الزاوية العليا اليسرى‬ ‫من الشاشة‪.‬‬ ‫– عرض أزرار األوامر ‪ command buttons‬في السطح‬ ‫األعلى من الشاشة‪.‬‬ ‫‪2‬‬  ‫إبراز عمق المستويات أو الشكل ثالثي األبعاد‬ ‫‪Conveying depth of levels or a three dimensional appearance‬‬ ‫ تعود اإلنسان على فهم العديد من األجسام في العالم البصري كأجسام ثالثية األبعاد‪ ،‬حتى‬ ‫و إن لم تكن في الحقيقة ثالثية األبعاد‪.‬على الشاشات‪ ،‬هناك العديد من التقنيات و التي‬ ‫يمكن أن تستعمل لتعزيز فهم ثالثية األبعاد‪.‬هذه التقنيات‪:‬‬ ‫التداخل ‪.overlapping‬‬ ‫–‬ ‫التقليص والتكبير ‪.shrinking and growing‬‬ ‫–‬ ‫الحواف المائلة ‪.beveled edges‬‬ ‫–‬ ‫تغيير القوام ‪.texture change‬‬ ‫–‬ ‫تغيير اللون ‪.color change‬‬ ‫–‬ ‫تغيير الحجم ‪.size change‬‬ ‫–‬ ‫تغيير وضوح ‪.clarity change‬‬ ‫–‬ ‫الموقع العمودي ‪.vertical location‬‬ ‫–‬ ‫مباعدة التغيير ‪.spacing change‬‬ ‫–‬ ‫إتكاء الخطوط ‪.reclining lines‬‬ ‫–‬ ‫تغيير الحركة ‪.motion change‬‬ ‫–‬ ‫‪3‬‬  ‫إبراز عمق المستويات أو الشكل ثالثي األبعاد‬ ‫‪Conveying depth of levels or a three dimensional appearance‬‬ ‫التظليل‬ ‫تغيير القوام‬ ‫تسليط الضوء‬ ‫استخدام تقنيات مختلفة للحصول على مظهر ثالثي األبعاد‪.‬‬ ‫يمكن استخدام تقنيات مختلفة للحصول على مظهر ثالثي‬ ‫األبعاد‪.‬‬ ‫‪4‬‬  ‫عرض المعلومات على الشاشة‬ ‫‪Presenting information on screen‬‬ ‫ فيمّيليّبعضّتوجيهاتّلطريقةّعرضّالبياناتّعلىّالشاشات‪:‬‬ ‫ الطباعة ‪typography‬‬ ‫الخط ‪ font‬له عدّة خواص تتض ّمن‪:‬‬ ‫–‬ ‫الحجمّ ‪. size‬‬ ‫–‬ ‫الحالةّّ ‪case‬مثلّأنّيكونّالخطّباألحرفّالكبيرةّ‪ upper case‬أوّ‬ ‫–‬ ‫األحرفّالصغيرةّ‪. lower case‬‬ ‫النمطّ‪ style‬مثلّأنّيكونّالخطّداكنّ‪ bold‬أوّمائلّ‪ italic‬أوّتحتهّسطرّ‬ ‫–‬ ‫‪underlined‬‬ ‫النوعّ‪ّ،typeface‬أنواعّالخطوطّكثيرةّمنهاّ‪ Times New Roman‬وّ‬ ‫–‬ ‫‪ Arial‬وّ ‪ Courier New‬للكتابةّباألحرفّالآلتينية‪.‬أماّللكتابةّباللغةّ‬ ‫العربيةّفتوجدّأنواعّخطوطّكثيرةّمنهاّّ‪ Simplified Arabic‬وّ ‪Arabic‬‬ ‫‪ Transparent‬وّ‪. Traditional Arabic‬‬ ‫‪5‬‬  ‫عرض المعلومات على الشاشة‬ ‫‪Presenting information on screen‬‬ ‫ تعليمات عا ّمة ‪general guidelines‬‬ ‫حجم الخطّ ‪ 12‬نقطة هو أسرع في القراءة ويفضل لدى كثير من المستخدمين‪.‬‬ ‫–‬ ‫حجم الخطّ ‪ 14‬نقطة أفضل للمستخدمين األكبر سنا‪.‬‬ ‫–‬ ‫ال تستخدم أكثر من ثالثة أنواع أو أحجام من الخط في شاشة واحدة‪.‬‬ ‫–‬ ‫استعمل حجم الخطّ ‪ 12‬نقطة للقوائم و ‪ 10‬نقطة للنوافذ‪.‬‬ ‫–‬ ‫استعمل الخط المائل عندما تريد جذب االنتباه‪.‬‬ ‫–‬ ‫استعمل الخط الداكن عندما تريد جذب االنتباه أو خلق تدرج ‪.hierarchy‬‬ ‫–‬ ‫استعمل األحرف الكبيرة في الكتابة في الحاالت اآلتية‪:‬‬ ‫–‬ ‫ العناوين ‪titles‬‬ ‫ عناوين القسم ‪section headings‬‬ ‫ رسائل التحذير ‪warning messages‬‬ ‫– للقراءة والفهم السريع‪ ،‬استعمل نصاّ أسود ‪ black‬على خلفيات بسيطة و ذات‬ ‫تفاوت ‪contrast‬عالي‪.‬‬ ‫‪6‬‬  ‫عرض المعلومات على الشاشة‬ ‫‪Presenting information on screen‬‬ ‫ عناصر التطبيق ‪application elements‬‬ ‫ النوافذ ‪windows‬‬ ‫– كلّ النوافذ يجب أن يكون عندها عنوان ‪ ،title‬ماعدا النوافذ التي‬ ‫تحتوي الرسائل ‪.messages‬‬ ‫– اكتب العنوان باستعمال خطّ أحرفه كبيرة بالكامل أو خليط من‬ ‫األحرف الكبيرة و الصغيرة‪.‬الشكل التالى يوضح عنوان النافذة‬ ‫باستعمال خليط من األحرف الكبيرة و الصغيرة‪.‬‬ ‫‪7‬‬  ‫عرض المعلومات على الشاشة‬ ‫‪Presenting information on screen‬‬ ‫يوضح عنوان النافذة باستعمال خليط من األحرف الكبيرة و الصغيرة‬ ‫‪8‬‬  ‫عرض المعلومات على الشاشة‬ ‫‪Presenting information on screen‬‬ ‫ التعليقات و العالمات ‪captions and labels‬‬ ‫– التعليقاتّ ‪captions‬والعالماتّ‪ labels‬يجبّأنّتصممّجيداّ‪.‬‬ ‫– عرفّمفاتيحّالتحكمّ ‪controls‬بالتعليقاتّأوّالعالماتّبكلماتّ‬ ‫مألوفةّللمستخدم‪.‬‬ ‫– التعليقاتّوالعالماتّيجبّأنّتكتبّبشكلّواضحّوّمختصرّكماّ‬ ‫يجبّأنّتصفّالمعلوماتّالمعروضةّبشكلّجيد‪.‬‬ ‫– توحيدّصيغةّكلماتّالتعليقّلكلّحقولّالبياناتّالمماثلةّعلىّكلّ‬ ‫الشاشات‪.‬‬ ‫– العالمةّيجبّأنّتنتهيّبّ( ‪) :‬‬ ‫‪9‬‬  ‫عرض المعلومات على الشاشة‬ ‫‪Presenting information on screen‬‬ ‫‪ :‬تمت إعادة التصميم األول بعد حذف التكرار في العالمة )‪(Name‬‬ ‫‪10‬‬  ‫عرض المعلومات على الشاشة‬ ‫‪Presenting information on screen‬‬ ‫‪data fields‬‬ ‫ حقول البيانات‬ ‫– تستخدمّحقولّالبياناتّفيّاآلتي‪:‬‬ ‫– إلدخالّأوّتعديلّالبيانات‬ ‫ تعرضّفيّصندوقّخطّ‪.‬‬ ‫ أوّصندوقّمغايرّفيّاللونّمعّلونّالخلفية‬ ‫– لإلستفسارّأوّعرضّشاشاتّالقراءةّفقطّ‪ read-only‬التيّ‬ ‫تحتويّبياناتّغيرّمتغيرة‪.‬‬ ‫– لحقولّالبياناتّغيرّالنشطةّ ‪(inactive‬بشكلّمؤقت)‪.‬‬ ‫ تعرضّالبياناتّغيرّالنشطةّبلونّأخفّمنّلونّالبياناتّالنشطة‪.‬‬ ‫‪11‬‬  ‫عرض المعلومات على الشاشة‬ ‫‪Presenting information on screen‬‬ ‫صناديق باستخدام لون مغاير للخلفية‬ ‫صناديق باستخدام الخطوط‬ ‫‪12‬‬  ‫عرض المعلومات على الشاشة‬ ‫‪Presenting information on screen‬‬ ‫ يجب أن نفرق بين حقول البيانات و التعليقات أوالعالمات‪.‬‬ ‫ لحقول البيانات المفردة نضع التعليقات إلى اليسار من الحقل‪.‬‬ ‫ بالنسبة للبيانات التي ستدرج في شكل أعمدة أو جداول يجب‬ ‫وضع التعليق أعلى حقول البيانات ذات األعمدة كما هو‬ ‫موضح في الشكل التالى‪.‬‬ ‫‪13‬‬  ‫عرض المعلومات على الشاشة‬ Presenting information on screen Names: Abdurrahman Ahmed Ammar Mohammed ‫حقل بيانات مكون من أعمدة‬ 14  ‫عرض المعلومات على الشاشة‬ ‫‪Presenting information on screen‬‬ ‫ يمكنّوضعّالعالماتّفوقّحقلّالبياناتّكماّهوّموضحّفيّ‬ ‫الشكلّالتالى‪.‬‬ ‫ هذهّالطريقةّلوضعّالتعليقاتّلهاّالمزاياّاآلتية‪:‬‬ ‫– قربّالعالمةّمنّّحقلّالبياناتّالمقابلّله‪.‬‬ ‫ سرعةّمعالجةّالبياناتّلقربّالعالماتّمنّّالحقول‪.‬‬ ‫‪15‬‬  ‫عرض المعلومات على الشاشة‬ ‫‪Presenting information on screen‬‬ ‫وضع العالمات أعلى حقول البيانات‬ ‫‪16‬‬  ‫عرض المعلومات على الشاشة‬ ‫‪Presenting information on screen‬‬ ‫ التحكم في التعليقات وحقول البيانات ‪controlling captions‬‬ ‫‪and data fields‬‬ ‫– هناكّطرقيقتانّلترتيبّالتعليقاتّوحقولّالبيانات على الشاشة‪.‬‬ ‫– الطريقة األولى‬ ‫– محاذاةّكلّمنّحقولّالبياناتّوالتعليقاتّإلىّاليسارّ‪left justify‬‬ ‫– تركّفراغّواحدّبينّالتعليقّاألطولّوعمودّحقلّالبيانات‪.‬كماّهوّ‬ ‫موضحّفيّالشكلّالتالى‪.‬‬ ‫‪17‬‬  ‫عرض المعلومات على الشاشة‬ ‫‪Presenting information on screen‬‬ ‫التعليق‬ ‫األطول‬ ‫محاذاة كل من حقول البيانات والتعليقات إلى اليسار‬ ‫‪18‬‬  ‫عرض المعلومات على الشاشة‬ ‫‪Presenting information on screen‬‬ ‫ الطريقة الثانية‬ ‫ محاذاةّحقولّالبياناتّإلىّاليسارّ‪ left justify‬وّمحاذاةّ‬ ‫التعليقاتّإلىّيمينّ‪ right justify‬حقولّالبياناتّمعّتركّ‬ ‫فراغّواحدّبينّكلّمنهما‪.‬كماّهوّموضحّبالشكلّالتالى‪.‬‬ ‫‪19‬‬  ‫عرض المعلومات على الشاشة‬ ‫‪Presenting information on screen‬‬ ‫كل منهما‪.‬‬ ‫محاذاة حقول البيانات إلى اليسار و محاذاة التعليقات إلى يمين حقول البيانات مع ترك فراغ واحد بين ّ‬ ‫‪20‬‬  ‫عرض المعلومات على الشاشة‬ ‫‪Presenting information on screen‬‬ ‫مثاالً لمحاذاة سيئة للعالمات ‪ poor alignment‬و الحقول (أعلى)‪ ،‬و مثال آخر لمحاذاة‬ ‫جيدة ‪.good alignment‬‬ ‫‪21‬‬