Lecture 7: User Interface Design - 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‬‬