Lecture 3 Interaction Design PDF

‫تصميم واجهات المستخدم‬ ‫‪Lecture 3‬‬ ‫‪1‬‬  ‫أساليب التفاعل‬ ‫‪Interaction Styles‬‬ ‫ في م ا يلي أن واع أو أس اليب التفاع ل المس تعملة‪ ،‬و يعتم د‬ ‫اختي ار األس لوب على ن وع المس تخدِم والمهّم ة ال تي يري د‬...

‫تصميم واجهات المستخدم‬ ‫‪Lecture 3‬‬ ‫‪1‬‬  ‫أساليب التفاعل‬ ‫‪Interaction Styles‬‬ ‫ في م ا يلي أن واع أو أس اليب التفاع ل المس تعملة‪ ،‬و يعتم د‬ ‫اختي ار األس لوب على ن وع المس تخدِم والمهّم ة ال تي يري د‬ ‫القيام بها‪.‬‬ ‫ أساليب التفاعل هي‪:‬‬ ‫لغة األوامر ‪command language.‬‬ ‫‪.1‬‬ ‫ملء االستمارات ‪.form fill-in‬‬ ‫‪.2‬‬ ‫اختيار القائمة ‪menu selection.‬‬ ‫‪.3‬‬ ‫المعالجة المباشرة ‪.direct manipulation‬‬ ‫‪.4‬‬ ‫اللغة الطبيعية ‪.Natural language‬‬ ‫‪.5‬‬ ‫لغ ة االستفس ار‪ Query language‬أو أس لوب س ؤال ‪ /‬ج واب‬ ‫‪.6‬‬ ‫‪Question/answer‬‬ ‫‪2‬‬  ‫أساليب التفاعل‬ ‫‪Interaction Styles‬‬ ‫‪ -1‬لغ ة األوام ر ‪Command Language‬‬ ‫(أو إدخال األوامر)‬ ‫– أسلوب لغة األوامر هو الطريقة المباشرة التي يتم‬ ‫عن طريقه ا تجس يد األوام ر إلى الحاس وب ‪.‬يمكن‬ ‫أن يك ون مف اتيح وظيفة ‪ function keys‬أو حروف ًا‬ ‫ارات ‪abbreviations‬‬ ‫‪ characters‬أو إختص‬ ‫قصيرة أو كلمات كاملة‪ ،‬أو مزيجًا من كل ذلك‪.‬‬ ‫‪3‬‬  ‫مزايا وعيوب أسلوب لغة األوامر‬ ‫‪advantages and disadvantages‬‬ ‫ الميزات ‪advantages‬‬ ‫أسلوب مناسب للمهام التكرارية ‪.repetitive tasks‬‬ ‫‪.1‬‬ ‫يناسب المستخدمين الخبراء أكثر من المبتدئين‪.‬‬ ‫‪.2‬‬ ‫يوّفر الوصول المباشر لوظائف النظام المرنة‪.‬‬ ‫‪.3‬‬ ‫تس هل عملي ة إنش اء االختص ارت المعّر ف ة من قب ل‬ ‫‪.4‬‬ ‫المستخدم ‪.macros user-defined‬‬ ‫مناس بة للتفاع ل م ع ش بكات الحواس يب ح تى م ع‬ ‫‪.5‬‬ ‫انخفاض عرض النطاق الترددي ‪..low bandwidth‬‬ ‫اس تخدام واجه ات األوام ر ش ائع للكتاب ة في ش بكة‬ ‫‪.6‬‬ ‫اإلنترنت ‪web scripting‬‬ ‫‪4‬‬  ‫مزايا وعيوب أسلوب لغة األوامر‬ ‫‪advantages and disadvantages‬‬ ‫ العيوب ‪disadvantages‬‬ ‫لغة األوامر تضع عبئا إدراكيًا كبيرًا على المستخدم ألن هذا األسلوب في‬ ‫‪.1‬‬ ‫التفاعل يعتمد على التذكر و االسترجاع ‪ recall‬بدال من التمييز‬ ‫‪.recognition‬‬ ‫العدد الكبير من األوامر و الخيارات و المتغيرات التي يجب حفظها عن ظهر‬ ‫‪.2‬‬ ‫قلب‪ ،‬وال يوفر النظام أي مساعدة للمستخدم في مهمة استرجاع أسماء‬ ‫األوامر من الذاكرة‪.‬وهذه المهمة ليست سهلة ألن العديد من األوامر‬ ‫مختصرة‪.‬‬ ‫القدرة على االحتفاظ ‪ retention‬باألوامر في الذاكرة عمومًا ضعيفة جدًا‪.‬‬ ‫‪.3‬‬ ‫قابلية تعلم ‪ learnability‬االوامر سيئة للغاية‪.‬‬ ‫‪.4‬‬ ‫معدالت الخطا ‪ error rates‬مرتفعة‪.‬‬ ‫‪.5‬‬ ‫صعوبة توفير رسائل الخطأ ‪ error messages‬والمساعدة ‪ help‬بسبب‬ ‫‪.6‬‬ ‫تنوع االحتماالت‪ ،‬باالضافة إلى تعقيد وضع المهام مع مفاهيم الواجهة‬ ‫والتركيب‪.‬‬ ‫ال يصلح لغير الخبراء من المستخدمين‪.‬‬ ‫‪.7‬‬ ‫‪5‬‬  ‫ملء االستمارات‬ ‫‪Form Fill-in‬‬ ‫‪ -2‬ملء االستمارات ‪Form Fill-in‬‬ ‫– أس لوب ملء اإلس تمارات (ويس مى أيض ا ملء‬ ‫الفراغ ات) يس تهدف مجموع ة مختلف ة من‬ ‫المس تخدمين من اولئ ك ال ذين يس تهدفهم أس لوب‬ ‫لغة األوامر‪ ،‬وهم غير الخبراء من المستخدمين‪.‬‬ ‫– عن د ظه ور واجه ات ملء االس تمارات ألول م رة‪،‬‬ ‫ك انت ك ل الواجه ة في ش كل اس تمارة ‪ ،form‬على‬ ‫عكس الكث ير من الواجه ات الموج ودة الي وم و ال تي‬ ‫تعتبر خليط من أساليب التفاعل المختلفة‪.‬‬ ‫‪6‬‬  ‫مزايا وعيوب أسلوب ملء االستمارات‬ ‫ مزايا وعيوب أسلوب ملء االستمارات‬ ‫ فيم ا يلي بعض النق اط ال تي ت بين مزاي ا وعي وب أس لوب ملء‬ ‫االستمارات‬ ‫ الميزات ‪advantages‬‬ ‫– يبسط عملية إدخال البيانات‪.‬‬ ‫– يقِّص ر عملي ة التعُّلم ألن الحق ول ‪ fields‬مح ددة س لفًا‪ ،‬ومن الس هل‬ ‫التعرف عليها و تمييزها‪.‬‬ ‫– توّج ه المستخدم من خالل قواعد محددة سلفا‪.‬‬ ‫العيوب ‪disadvantages‬‬ ‫ ‬ ‫– تشغل االستمارات مساحة من كبيرة الشاشة‪.‬‬ ‫– يجع ل أس لوب ملء االس تمارات عملي ة إدخ ال المه ام التجاري ة عملي ة‬ ‫جامدة ‪.rigid‬‬ ‫‪7‬‬  ‫اختيار القوائم‬ ‫‪Menus Selection‬‬ ‫‪ -3‬اختيار القوائم ‪Menus Selection‬‬ ‫– القائم ة ‪ Menu‬هي مجموع ة من الخي ارات المعروض ة على‬ ‫الشاش ة‪ ،‬عن د إختي ار وتنفي ذ واح د أو أك ثر من ه ذه الخي ارات ينتج‬ ‫تغيير في حالة الواجهة‪.‬‬ ‫– في النظ ام ال ذي يق وم على اختي ار القائم ة‪ ،‬يخت ار المس تخدم‬ ‫أمر‪ command‬محددًا من مجموعة األوامر المرتبة في القوائم‬ ‫ويالحظ تأثير هذا االختيار‪.‬‬ ‫– اذا ك انت التس ميات على الق وائم ‪ /‬األوام ر مفهوم ة (ومجمع ة‬ ‫جي دا) يمكن للمس تخدمين إنج از مه امهم دون الحاج ة الي التعّلم‬ ‫‪ learning‬أو الّت ذكر ‪ memorization‬ألن إيج اد األم ر‪ /‬القائم ة‬ ‫يعتمد على التمييز ‪ recognition‬و ليس على التذكر و اإلسترجاع‬ ‫‪ recall‬من الذاكرة‪.‬‬ ‫‪8‬‬  ‫اختيار القوائم‬ ‫‪Menus Selection‬‬ ‫ هياكل و طرق تصّف ح القوائم‬ ‫‪menu structures and navigation‬‬ ‫– هيكل العمق ‪structure depth‬‬ ‫العمق يوفر‪:‬‬ ‫ ‬ ‫أقل اكتظاظ على القوائم‪.‬‬ ‫ ‬ ‫يتم مسح ‪ scan‬خيارات أقل‪.‬‬ ‫ ‬ ‫أسهل الختفاء الخيارات غير المتوفرة‪.‬‬ ‫ ‬ ‫من غير المحتمل أن تعرض الخيارات المتشابهة سوية‪.‬‬ ‫ ‬ ‫– هيكل العرض ‪structure breadth‬‬ ‫ العرض يوفر‪:‬‬ ‫ خطوات أقل‪ ،‬و زمن وصول أقصر‪.‬‬ ‫ سهولة التعّلم ألن العالقات تكون مرئية للمستخدم‪.‬‬ ‫‪9‬‬  ‫اختيار القوائم‬ ‫‪Menus Selection‬‬ ‫ع‬ ‫م‬ ‫ق‬ ‫عرض‬ ‫سوياتمتعددة‬ ‫م ت‬ ‫سوى الواحد‬ ‫إختياراتمتعددة فيالم ت‬ ‫الشكل يوضح هياكل القوائم‪.‬‬ ‫‪10‬‬  ‫اختيار القوائم‬ ‫‪Menus Selection‬‬ ‫أنواع القوائم ‪types of menus‬‬ ‫ ‬ ‫القوائم المسّطحة ‪Flat menus‬‬ ‫ ‬ ‫هذا الن وع من الق وائم جّي د في ع رض ع دد ص غير من‬ ‫ ‬ ‫الخي ارات في ف ترة زمني ة قص يرة حيث‪ ،‬إّن حجم‬ ‫شاش ة الع رض ص غير‪ ،‬ومث ال على ذل ك شاش ة جه از‬ ‫‪ iPods‬المس تخدم لس ماع الموس يقى‪.‬انظ ر الشاش ة‬ ‫المبينة في الشكل التالى‪.‬‬ ‫لكن ت راكم ق وائم الخي ارات بعض ها ببعض يجع ل‬ ‫ ‬ ‫الوص ول إلى الخي ار المطل وب بالقائم ة يتطّلب ع ّدة‬ ‫خطوات‪ ،‬و أيضا يجعل عملية االنتقال خالل الشاشات‬ ‫مضجرة‪.‬‬ ‫‪11‬‬  ‫اختيار القوائم‬ ‫‪Menus Selection‬‬ ‫نموذج لقائمة ‪iPod‬‬ ‫المسطحة‬ ‫‪12‬‬  ‫اختيار القوائم‬ ‫‪Menus Selection‬‬ ‫القوائم المتوّس عة ‪Expanding menus‬‬ ‫ ‬ ‫تمّكن من عرض خيارات أكثر على شاشة واحدة‪.‬‬ ‫ ‬ ‫يتم يز ه ذا الن وع بمرون ة أك ثر في التص ّفح‪ ،‬إذ يس مح إلختي ار‬ ‫ ‬ ‫الخي ارات ب أن يتم في نفس الناف ذة‪.‬وأك ثر أن واع الق وائم‬ ‫المتوّس عة انتش ارًا هي الق وائم المتعاقب ة ‪menus‬‬ ‫‪.cascading‬‬ ‫الش كل الت الى يوض ح طريق ة الق وائم المتعاقب ة‪.‬الح ظ‬ ‫ ‬ ‫مس تويات الق وائم‪ ،‬أساس ية وثانوي ة و ثالثي ة و رباعي ة‬ ‫المستوى‪.‬‬ ‫من عيوب هذه األسلوب أن كثرة المستويات تستلزم تحكم ًا‬ ‫ ‬ ‫دقيق ًا بالف أرة و ق د ي ؤّدي ه ذا إلى اختي ار الخي ارات الخاطئ ة‬ ‫أحيانًا‪.‬‬ ‫‪13‬‬  ‫اختيار القوائم‬ ‫‪Menus Selection‬‬ ‫الشكل يوضح أسلوب القوائم المتعاقبة بمستوياته المتسلسلة‬ ‫‪14‬‬  ‫اختيار القوائم‬ ‫‪Menus Selection‬‬ ‫القائمة المنسدلة ‪Pull-Down Menu‬‬ ‫ ‬ ‫القائمة المنسدلة هي قائمة لالختيار وهي ال تظهر عادة‬ ‫ ‬ ‫وال يتم ع رض البن ود الخاص ة به ا اال عن د الض غط على‬ ‫العنوان أو النقر بواسطة المؤشر‪.‬‬ ‫القائمة المنبثقة ‪Pop-up‬‬ ‫ ‬ ‫تظهر القائمة المنبثقة عند النقر على منطقة معّينة من‬ ‫ ‬ ‫الشاشة أو أيقونة‪.‬‬ ‫مثال على ذلك القائمة التي تظهر عند النقر على الجزء‬ ‫ ‬ ‫األيمن من الفأرة ‪ right click‬في سطح المكتب ‪desk‬‬ ‫‪ top‬في نظام التشغيل ويندوز‪.‬‬ ‫‪15‬‬  ‫اختيار القوائم‬ Menus Selection Types of Menus‫أنواع القوائم‬ File Edit View Insert Format Help New Open Menu bar Close Cascading Save Menu Save As Cut > Send to My Document… Copy... My File Paste Pop-up Pull-down Menu Menu ‫أنواع القوائم‬ ‫المختلفة‬ 16  ‫اختيار القوائم‬ ‫‪Menus Selection‬‬ ‫القائمة المنبثقة من سطح المكتب في‬ ‫نظام التشغيل ويندوز‪.‬‬ ‫‪17‬‬  ‫اختيار القوائم‬ ‫‪Menus Selection‬‬ ‫ مزايا وعيوب إسلوب اختيار القائمة‬ ‫ الميزات ‪advantages‬‬ ‫أس لوب اختي ار القائم ة ه و أس لوب مث الي للمس تخدمين المبت دئين‪.‬يمكن‬ ‫–‬ ‫ج ذب الخ براء من المس تخدمين عن د اس تخدام آلي ات س ريعة لالختي ار مث ل‬ ‫إستخدام االختصارات ‪.shortcuts‬‬ ‫يتيح عملي ة االستكش اف‪ ،‬إذ تمّكن المس تخدمين من النظ ر في الق وائم‬ ‫–‬ ‫الختيار األمر المناسب للمهمة دون االضطرار الى تذكر اسم األمر و طريقة‬ ‫كتابته إمالئيا كما هو الحال عند استخدام أسلوب لغة األوامر‪.‬‬ ‫يوفر الدعم للمستخدم‬ ‫–‬ ‫من السهل معالجة االخطاء‪.‬‬ ‫–‬ ‫العيوب‬ ‫ ‬ ‫– العدد الكبير من القوائم قد يؤدي الى تعقيد المهام‪.‬‬ ‫– قد يجد الخبراء من المستخدمين أسلوب القوائم بطئًا‪.‬‬ ‫‪18‬‬  ‫المعالجة المباشرة‬ ‫‪Direct Manipulation‬‬ ‫‪ -4‬المعالجة المباشرة ‪Direct Manipulation‬‬ ‫– مصطلح المعالجة المباشرة في تصميم الواجهات يستخدم‬ ‫لوصف اسلوب التفاعل 'المباشر' أو التعامل المباشر مع‬ ‫الكينونات ‪ objects‬في البرمجيات‪.‬‬ ‫– الشكل التالى شاشة توضح منهج المعالجة المباشرة‬ ‫المستخدم في شاشة نافذة استكشاف الملفات ‪File‬‬ ‫‪ Explorer‬في نظام ‪.Windows‬‬ ‫ تتميز واجهات المعالجة المباشرة بالخصائص التالية ‪:‬‬ ‫– إمكانية رؤية الكينونات المراد التعامل معها‪.‬‬ ‫– تنفيذ اإلجراءات يكون تدريجيا و سريعا و يمكن عكسه‪.‬‬ ‫– استبدال لغة األوامر المعقدة التركيب بالتعامل المباشر مع‬ ‫األشياء‪.‬‬ ‫‪19‬‬  ‫المعالجة المباشرة‬ ‫‪Direct Manipulation‬‬ ‫شاشة توضح منهج المعالجة المباشرة‪ ،‬نافذة استكشاف الملفات ‪File‬‬ ‫‪ Explorer‬في نظام‪. Windows‬‬ ‫‪20‬‬  ‫المعالجة المباشرة‬ ‫‪Direct Manipulation‬‬ ‫ ميزات وعيوب المعالجة المباشرة‬ ‫ الميزات ‪:advantages‬‬ ‫– يعرض المفاهيم المهمة بصريا‪.‬‬ ‫– سهل التعلم‪.‬‬ ‫– يمكن تجنب األخطاء بسهولة أكبر‪.‬‬ ‫– تشجع االستكشاف‪.‬‬ ‫– يعتم د على التمي يز على عكس أس لوب األوام ر ال ذي يعتم د على التلقين أو‬ ‫التذكر‬ ‫ العيوب‪:‬‬ ‫– قد تكون صعبة البرمجة أحيانًا‪.‬‬ ‫– ليست مناسبة لشاشات العرض الصغيرة‪.‬‬ ‫– االس تعارات أو المج از ‪metaphors‬يمكن أن تك ون مض للة إذا م ااختلفت عم ا‬ ‫تمثله‪.‬‬ ‫‪21‬‬  ‫واجهات المستخدم الرسوماتية‬ ‫‪GUI Graphical User Interfaces‬‬ ‫)‪(Windows, Icons, Menus, Pointing- WIMP‬‬ ‫‪GUI‬‬ ‫واجه ة المس تخدم الرس وماتية ‪Graphical‬‬ ‫ ‬ ‫‪ User Interface‬هي ن وع من أن واع واجه ات‬ ‫المستخدم‪ ،‬والتي تتيح لإلنسان التفاعل مع الحاسوب‪.‬‬ ‫فب دال من تق ديم ق وائم نص ية فق ط أو أوام ر تتطلب‬ ‫ ‬ ‫الطباع ة‪ ،‬واجه ات المس تخدم الرس وماتية ت تيح‬ ‫إستخدام أسلوب المعالجة المباشرة‪.‬‬ ‫آلي ة التفاع ل االساس ية هي أداة اإلش ارة ‪pointing‬‬ ‫ ‬ ‫‪. device‬‬ ‫اداة اإلش ارة هي المع ادل االلك تروني لي د اإلنس ان‪.‬‬ ‫ ‬ ‫يتفاع ل المس تخدم م ع مجموع ة من العناص ر تع رف‬ ‫بالكينونات ‪.objects‬‬ ‫‪22‬‬  ‫واجهات المستخدم الرسوماتية‬ ‫‪GUI Graphical User Interfaces‬‬ ‫)‪(Windows, Icons, Menus, Pointing- WIMP‬‬ ‫هذه الكينونات دائما مرئية للمستخدم ‪ ،‬وتستخدم ألداء المهام‪.‬‬ ‫ ‬ ‫يق وم المس تخدم ب أداء عملي ات و تع رف ب اإلجراءات ‪ action‬على‬ ‫ ‬ ‫هذه الكينونات‪.‬‬ ‫وتش مل اإلج راءات عملي ات مث ل الوص ول ‪ accessing‬والتع ديل‬ ‫ ‬ ‫‪ modifying‬و اإلشارة إلى األشياء ‪ pointing‬واالختيار ‪.selecting‬‬ ‫و تس تخدم واجه ات المس تخدم الرس وماتية األيقون ات ‪graphical‬‬ ‫ ‬ ‫‪ icons‬و المؤشرات البصرية ‪ visual indicators‬و عناصر رسومية‬ ‫أخرى تسمى القطع ‪.widgets‬‬ ‫وغالب ا م ا تس تخدم األيقون ات جنب ا إلى جنب م ع النص ‪ text‬أو‬ ‫ ‬ ‫العالم ات ‪ labels‬لتمثي ل المعلوم ات واتخ اذ اإلج راءات المتاح ة‬ ‫للمستخدم‪.‬‬ ‫و تؤدي اإلجراءات خالل المعالجة المباشرة للعناصر الرسومية‪.‬‬ ‫ ‬ ‫‪23‬‬  ‫عناصر واجهات المستخدم الرسوماتية‬ ‫‪Components of graphical user interfaces‬‬ ‫)‪(Windows, Icons, Menus, Pointing- WIMP‬‬ ‫ النوافذ ‪Windows‬‬ ‫الناف ذة هي‪ :‬المس احة ال تي تع رض المعلوم ات على الشاش ة‪ ،‬تع رض‬ ‫–‬ ‫محتوياتها بشكل مستقل عن بقية الشاشه‪.‬‬ ‫من الس هل على المس تخدم التعام ل م ع الناف ذة ‪ :‬فيمكن فتحه ا واغالقه ا‬ ‫–‬ ‫ب النقر‪ click‬على أيقون ة ‪ icon‬أو تط بيق‪ ،‬و يمكن نقله ا إلى اي منطق ة‬ ‫بسحبها ‪( dragging‬بالنقر في منطقة معينة من النافذة عادة على شريط‬ ‫العن وان في أعلي الناف ذة م ع الض غط على زر أداة اإلش ارة ثم تحري ك أداة‬ ‫االشارة)‪.‬‬ ‫يمكن وضع النافذة أمام او خلف نافذة أخرى‪.‬‬ ‫–‬ ‫كم ا يمكن تع ديل حجمه ا‪ ،‬و يمكن اس تخدام ش ريط التمري ر ‪scrollbar‬‬ ‫–‬ ‫للتنقل داخل أقسامها‪.‬‬ ‫يمكن أيض ا فتح نواف ذ متع ددة ‪ Multiple windows‬في وقت واح د‪ ،‬وفي‬ ‫–‬ ‫هذه الحالة يمكن لكل نافذة عرض تطبيق أو ملف مختلف‪.‬‬ ‫و يفي د ذل ك عن د العم ل في بيئ ة متع ددة المه ام ‪multitasking‬‬ ‫–‬ ‫‪.environment‬‬ ‫‪24‬‬  ‫عناصر واجهات المستخدم الرسوماتية‬ ‫‪Components of graphical user interfaces‬‬ ‫)‪(Windows, Icons, Menus, Pointing- WIMP‬‬ ‫ هناك العديد من أنواع النوافذ المتخصصة منها‪:‬‬ ‫– ناف ذة المتص فح ‪ browser window‬تس مح‬ ‫للمس تخدم ب التحرك إلى األم ام وإلى ال وراء من‬ ‫خالل سلس لة من الوث ائق أو ص فحات ال ويب ‪web‬‬ ‫‪.pages‬متص فحات ال ويب ‪ Web browsers‬هي‬ ‫مث ال على ه ذه األن واع من النواف ذ‪.‬انظ ر الش كل‬ ‫الت الى لمتص فح ال ويب ‪ Internet Explorer‬من‬ ‫مايكروسوفت‪.‬‬ ‫‪25‬‬ ‫عناصر واجهات المستخدم الرسوماتية‬ Components of graphical user interfaces (Windows, Icons, Menus, Pointing- WIMP) ‫متصفح الويب من‬ ‫مايكروسوفت‬ 26  ‫عناصر واجهات المستخدم الرسوماتية‬ ‫‪Components of graphical user interfaces‬‬ ‫)‪(Windows, Icons, Menus, Pointing- WIMP‬‬ ‫– النوافذ الطرفية ‪ Terminal windows‬مصممة لترسيخ التفاعل مع‬ ‫واجه ات المس تخدم النص ية ‪ text user interfaces‬داخ ل الواجه ة‬ ‫الرس وماتية الكلّي ة‪.‬شاش ات أنظم ة التش غيل ‪ DOS‬و ‪ UNIX‬هي‬ ‫أمثلة على هذه النوع من النوافذ‪.‬‬ ‫– الناف ذة الص غيرة ‪ child window‬تفتح تلقائي ا أو نتيج ة لنش اط‬ ‫المس تخدم في ناف ذة من النواف ذ الرئيس ية (الوال دين) ‪parents‬‬ ‫‪.window‬مثال على هذا النوع من النوافذ هو النوافذ المنبثقة على‬ ‫اإلنترنت‪.‬‬ ‫– نافذة الرسالة ‪ message window‬أو صندوق الحوار ‪dialog box‬‬ ‫ه و ن وع من أن واع النواف ذ الص غيرة‪.‬و هي ع ادة ناف ذة ص غيرة‬ ‫وأساسية تفتح بواسطة البرنامج لعرض معلومات إلى المستخدم و‪/‬‬ ‫أو للحصول على المعلومات من المستخدم‪.‬و عادة ما يكون لها زر‬ ‫يجب أن يدفع للسماح للبرنامج بمواصلة العمل‪.‬‬ ‫‪27‬‬  ‫عناصر واجهات المستخدم الرسوماتية‬ ‫‪Components of graphical user interfaces‬‬ ‫)‪(Windows, Icons, Menus, Pointing- WIMP‬‬ ‫ األيقونات ‪Icons‬‬ ‫– األيقون ة هي ص ورة رس ومية ‪،graphical image‬‬ ‫هي ص ورة ص غيرة تمث ل ملف ًا أو برنامج ًا أو ص فحة‬ ‫ويب أو أمرًا‪.‬‬ ‫– األيقون ة هي طريق ة س ريعة لتنفي ذ األوام ر و فتح‬ ‫الوثائق وإدارة البرامج‪.‬‬ ‫– االيقون ات ايض ا مفي دة عن د البحث عن غ رض في‬ ‫متص فح ال ويب ‪ ،web browser‬ألن ه في كث ير من‬ ‫نظم التش غيل جمي ع الوث ائق ال تي له ا نفس االمت داد‬ ‫‪ extension‬يكون لها نفس األيقونة‪.‬‬ ‫‪28‬‬ ‫عناصر واجهات المستخدم الرسوماتية‬ ‫‪Components of graphical user interfaces‬‬ ‫)‪(Windows, Icons, Menus, Pointing- WIMP‬‬ ‫بعض من األيقونات المستخدمة في نظام ويندوز‬ ‫و متصفح الويب‬ ‫‪29‬‬  ‫عناصر واجهات المستخدم الرسوماتية‬ ‫‪Components of graphical user interfaces‬‬ ‫)‪(Windows, Icons, Menus, Pointing- WIMP‬‬ ‫ القوائم ‪Menus‬‬ ‫– الق وائم تس مح للمس تخدم لتنفي ذ األوام ر عن طري ق االختي ار من قائم ة به ا‬ ‫خيارات‪.‬يتم االختيار عن طريق الفأرة او غيرها من أدوات اإلشارة داخل ‪.GUI‬‬ ‫ويمكن أيض ا اس تخدام لوح ة المف اتيح‪.‬الق وائم مريح ة ألنه ا تظه ر ك ل االوام ر‬ ‫المتاح ة داخ ل البرمجي ات‪.‬وه ذا يقل ل من كمي ة الوث ائق ال تي يجب أن يقراءه ا‬ ‫المستخدم لفهم البرمجيات‪.‬‬ ‫ المؤشرات ‪Pointers‬‬ ‫– من العناصر األكثر شيوعا في واجهة المستخدم الرسوماتية هي المؤشر و هي‬ ‫ص ورة رس ومية على الشاش ة تش ير إلى مك ان وج ود جه از اإلش ارة ‪pointing‬‬ ‫‪ ،device‬ويمكن اس تخدامها الختي ار األش ياء وتحري ك األوام ر ال تي تظه ر على‬ ‫الشاش ة‪.‬المؤش ر ع ادة م ا يب دو على ش كل س هم ل ه زاوي ة ‪،angled arrow‬‬ ‫ولكن يمكن أن يختل ف في الش كل ب اختالف ال برامج أو أنظم ة التش غيل‪.‬ومن‬ ‫األمثل ة على ذل ك في متص فحات ال ويب ‪ web browsers‬يتح ّول المؤش ر إلى‬ ‫ش كل قف از ممت د م ع مؤش ر اص بع عن د م روره من ف وق الراب ط ‪.hyperlink‬‬ ‫الشكل التالى يبين أشكاًال مختلفة من المؤشرت‪.‬‬ ‫‪30‬‬ ‫عناصر واجهات المستخدم الرسوماتية‬ Components of graphical user interfaces (Windows, Icons, Menus, Pointing- WIMP) ‫الشكل يبين أشكال مختلفة من المؤشرت‬ 31