Lecture 5 - User Interface Design PDF

‫تصميم واجهات المستخدم‬ ‫‪Lecture 5‬‬  ‫مبادئ التصميم الجيد للواجهات و الشاشات‬ ‫ الواجه‪##‬ة جي‪##‬دة التص‪##‬ميم يجب أن تعكس الق‪##‬درات واالحتياج‪##‬ات والمه‪##‬ام‬ ‫لمس‪#‬تخدميها بصورة‪#‬واضحة‪.‬‬...

‫تصميم واجهات المستخدم‬ ‫‪Lecture 5‬‬  ‫مبادئ التصميم الجيد للواجهات و الشاشات‬ ‫ الواجه‪##‬ة جي‪##‬دة التص‪##‬ميم يجب أن تعكس الق‪##‬درات واالحتياج‪##‬ات والمه‪##‬ام‬ ‫لمس‪#‬تخدميها بصورة‪#‬واضحة‪.‬‬ ‫ وحتى يتحقق ذلك يجب أن‪:‬‬ ‫– يتم تطويره‪#‬ا في إط‪#‬ار القي‪#‬ود المادي‪#‬ة ال‪#‬تي تفرض‪#‬ها األجه‪#‬زة ال‪#‬تي يتم عرض‪#‬ها فيه‪#‬ا‪.‬‬ ‫– تس‪#‬تفيد من ق‪#‬درات البرمجي‪#‬ات ال‪#‬تي تتحكم فيه‪#‬ا بفعالية ‪.‬‬ ‫– تحق‪#‬ق األه‪#‬داف التجاري‪#‬ة للنظ‪#‬ام ال‪#‬ذى ص‪#‬ممت من أجله‪.‬‬ ‫ لتحقي‪#‬ق ه‪#‬ذه األه‪#‬داف ‪ ،‬يجب على المص‪#‬مم ان يفهم أوال فهم مب‪#‬ادئ التص‪#‬ميم‬ ‫ال‪#‬جي‪#‬د للوا‪#‬جه‪#‬ا‪#‬ت و‪#‬لت‪#‬ص‪#‬م‪#‬ي‪#‬م ا‪#‬لش‪#‬ا‪#‬ش‪#‬ات‪#.#‬ف‪#‬ي م‪#‬ا‪ #‬يل‪#‬ي‪#‬تج‪#‬مي‪#‬ع ل‪#‬ل‪#‬مب‪#‬اد‪#‬ئ التو‪#‬جي‪#‬هي‪#‬ه‬ ‫م من ا‪#‬لشاشه‪.#‬‬ ‫لتصم‪#‬يم و‪#‬اجهة‪#‬ل‪#‬لمستخد ‪#‬‬ ‫ وه‪#‬و يتض‪##‬من مجموع‪##‬ة من المب‪#‬ادئ التوجيهي‪#‬ة التفص‪#‬يلية ال‪#‬تي تتعام‪#‬ل م‪#‬ع‬ ‫’‪.users‬‬ ‫ا‪#‬عتب‪############‬ا‪#‬ر‪#‬ات‪ #‬الم‪#‬س‪############‬ت‪#‬خد‪#‬مين‪consideration#‬‬  ‫مراعاة المستخدم في التصميم‬ ‫‪Considering users in the design‬‬ ‫ يتأثر استخدام الشاشة والنظام‪ ،‬بكثير من‬ ‫العوامل‪ ،‬وتشمل اآلتي‪:‬‬ ‫– كم المعلومات التي يتم تقديمها أو عرضها في‬ ‫الشاشة‪.‬‬ ‫– كيفية تنظيم هذه المعلومات ‪.‬‬ ‫– اللغة المستخدمة للتواصل مع المستخدم‪.‬‬ ‫– مدى وضوح المكونات التي يتم عرضها‪.‬‬ ‫– الجماليات المستخدمة ‪.‬‬ ‫– مدى تناسق الشاشة مع الشاشات األخرى‪.‬‬  ‫مراعاة المستخدم في التصميم‬ ‫‪Considering users in the design‬‬ ‫ اكثر مشاكل الواجهات المرئية شيوعا هي‪:‬‬ ‫التضارب البصري بين محتويات الشاشة مع نظام‬ ‫–‬ ‫التشغيل‪.‬‬ ‫االفتقار إلى استخدام ميزات وعناصر التصميم‪.‬‬ ‫–‬ ‫اإلفراط في استخدام األلوان الزاهية‬ ‫–‬ ‫سوء تصميم األيقونات‪.‬‬ ‫–‬ ‫سوء الطباعة ‪typography‬‬ ‫–‬ ‫استخدام المجاز ‪ Metaphors‬يقّيد خيارات التصميم‬ ‫–‬ ‫أحيانا‪.‬‬  ‫أهداف تصميم الواجهات‬ ‫‪Goals of interface design‬‬ ‫ لجعل الواجهة سهلة االستخدام‪ ،‬فإن الهدف في‬ ‫التصميم هو‪:‬‬ ‫تقليل العمل البصري ‪. visual work‬‬ ‫–‬ ‫التقليل من العمل الفكري ‪.intellectual work‬‬ ‫–‬ ‫التقليل من عمل الذاكرة‪.‬‬ ‫–‬ ‫التقليل من العمل الحركي‪.‬‬ ‫–‬ ‫التقليل أو القضاء على اي اعباء أو تعليمات تفرضها‬ ‫–‬ ‫التكنولوجيا‪.‬‬ ‫ سيؤدي ذلك لسهولة استخدام النظام و زيادة انتاجية‬ ‫المستخدم‪.‬‬  ‫تنظيم عناصر الشاشة‬ ‫‪Organizing screen elements‬‬ ‫ الوضوح البصري ‪ Visual clarity‬يتحقق عندما يتم عرض عناصر‬ ‫الشاشة بطريقة منظمة ومفهومه و ذات معنى و واضحة ويمكن‬ ‫التعّر ف عليها بسهولة‪.‬‬ ‫ التنظيم الجيد يجعل عملية التعرف أسهل لعناصر الشاشة األساسية‬ ‫والثانويه‪.‬‬ ‫ الوضوح يتأثر بكثير من العوامل ‪:‬‬ ‫التكوين البصري المرضي‪.‬‬ ‫–‬ ‫التسلسل و الترتيب المنطقي‪.‬‬ ‫–‬ ‫عرض الكم السليم من المعلومات‪.‬‬ ‫–‬ ‫التجمع ‪. Grouping‬‬ ‫–‬ ‫محاذاة عناصر ‪ Alignment‬الشاشة‪.‬‬ ‫–‬ ‫االتساق في التصميم ‪Consistency in the design‬‬ ‫–‬  ‫ترتيب البيانات والمحتويات‬ ‫‪Ordering data and contents‬‬ ‫ مخططات الترتيب ‪ordering schemes‬‬ ‫يهدف مخطط الترتيب أو التنظيم في تصميم التطبيقات ألى الحفاظ‬ ‫على الحد األدنى من عدد المعلومات المتغيرة التي يجب أن تبقى في‬ ‫ذاكرة المستخدم على المدى القصير‪.‬‬ ‫ وذلك باالتي‪:‬‬ ‫تقسيم المعلومات إلى وحدات منطقيه ذات مغزى‪.‬‬ ‫–‬ ‫تنظيم البيانات أو المعلومات حسب درجة الترابط بينها‪.‬‬ ‫–‬ ‫ترتيب وحدات الشاشه والمعلومات والعناصر وإعطائها األولوية وفقا‬ ‫–‬ ‫لتجربة المستخدم واحتياجاته‪.‬‬ ‫تكوين المجموعات التي تغطي جميع االحتماالت‪.‬‬ ‫–‬ ‫التأكد من ان المعلومات المراد مقارنتها مرئية في الوقت نفسه‪.‬‬ ‫–‬ ‫يجبُ عرض البيانات المتعلقة بالمستخدم والمهمة التي يريد إنجازها فقط‪.‬‬ ‫–‬  ‫ترتيب البيانات والمحتويات‬ ‫‪Ordering data and contents‬‬ ‫– مخططات الترتيب وهي‪:‬‬ ‫ مخط‪##‬ط ال‪##‬ترتيب التقلي‪##‬دي والع‪##‬رفي ‪Conventional‬‬ ‫‪ #.and custom‬بعض‪ #‬ال‪#‬م‪#‬خطط‪#‬ا‪#‬ت تط‪#‬و‪#‬رت م‪#‬ن‪#‬عناص‪#‬ر‪#‬‬ ‫ع ‪ #،‬و أش‪#‬هر‪#‬‬ ‫ب بأي‪#‬ام‪#‬األس‪#‬بو ‪#‬‬‫ة ذل‪#‬ك‪##‬ال‪#‬تر‪#‬تي ‪#‬‬ ‫معين‪#‬ة‪.‬و‪#‬من أ‪#‬مث‪#‬ل‪# #‬‬ ‫ت‪#‬رتب‬ ‫‪#‬‬ ‫م والعن‪#‬وان‪ ، #‬ه‪#‬ذه العنا‪#‬ص‪#‬ر ينبغي‪ #‬ان‬ ‫ة ‪،‬االس‪# #‬‬ ‫الس‪#‬ن ‪#‬‬ ‫دائما بالطريقة العرفية‪.‬‬ ‫ مخط‪#‬ط ت‪#‬رتيب حس‪#‬ب تسلس‪#‬ل االس‪#‬تخدام ‪Sequence‬‬ ‫ع‬ ‫ل ا‪#‬الس‪###‬ت‪#‬خد‪#‬ام‪#‬ينط‪###‬وي‪#‬ع‪#‬لى‪ #‬ت‪#‬جمي‪# ###‬‬ ‫‪ #.of use‬ت‪#‬س‪#‬لس‪# ###‬‬ ‫ت‪#‬ب‪#‬ه‪#،‬‬‫ال‪#‬م‪#‬علو‪#‬م‪#‬ات و‪#‬ت‪#‬رت‪#‬ي‪#‬ب‪#‬البن‪#‬و‪#‬د‪#‬وف‪#‬ق‪#‬ا‪#‬لل‪#‬ت‪#‬رتي‪#‬ب ا‪#‬ل‪#‬ذ‪#‬ي‪#‬ور‪#‬د ‪#‬‬ ‫ل ا‪#‬لمث‪##‬ال ت‪##‬رتي‪#‬ب‪#‬ال‪#‬عن‪##‬وان‪#، #‬ع‪##‬ادة‪ #‬م‪##‬ا يك‪##‬و‪#‬ن‪#‬‬ ‫ع‪#‬لى‪#‬س‪##‬ب‪#‬ي ‪#‬‬ ‫بالتسلس‪##‬ل اآلتي‪ :‬الش‪##‬ارع ‪ ،‬والمدين‪##‬ة والدول‪##‬ة ‪ ،‬والرم‪##‬ز‬ ‫البريدي‪.‬‬  ‫ترتيب البيانات والمحتويات‬ ‫‪Ordering data and contents‬‬ ‫ مخط‪#‬ط ت‪#‬رتيب وظيفي أو فئ‪#‬وي ‪.Functional or categorical‬‬ ‫ت وف‪#‬ق‪#‬ا‪#‬لغ‪#‬رض‪#‬ا‪#‬س‪#‬تخدا‪#‬مه‪#‬ا‪ #.‬ف‪#‬على‬ ‫تج‪#‬م‪#‬ع ال‪#‬معلوم‪#‬ات ف‪#‬ي‪##‬مجموع‪##‬ا ‪#‬‬ ‫ع‪#‬مركب‪#‬ا‪#‬ت ا‪#‬ل‪#‬نق‪#‬ل‪#‬و‪#‬يم‪#‬كن‪#‬ت‪#‬ص‪#‬نيفه‪#‬ا‪#‬ض‪#‬من فئ‪#‬ات‬ ‫س‪#‬ب‪#‬ي‪#‬ل ال‪#‬مث‪#‬ال جمي‪# #‬‬ ‫الطائرات والقطارات والسيارات‪.‬‬ ‫ مخط‪##‬ط ت‪##‬رتيب حس‪##‬ب األهمي‪##‬ة ‪.Importance‬التجم‪##‬ع حس‪##‬ب‬ ‫‪#‬ألهمي‪##‬ة تع‪#‬تم‪##‬د ه ‪#‬ذ‪#‬ه‪##‬ا‪#‬لطريق‪##‬ة ع ‪#‬لى‪ #‬تص‪##‬ني‪#‬ف‪#‬ا‪#‬لمع ‪#‬لو‪#‬م‪##‬ات‪#‬حس ‪#‬ب‪#‬‬ ‫ا‪#‬‬ ‫ة‪#‬ال‪##‬تي‪#‬يق‪##‬وم به‪##‬ا‪.‬الب‪#‬ن‪##‬ود‬ ‫ة للمس‪##‬تخدم و ‪#‬الوظيف ‪# #‬‬ ‫أهميته‪##‬ا با‪#‬لن‪#‬س‪##‬ب ‪#‬‬ ‫يمكن‬ ‫‪#‬‬ ‫ة يوض‪#‬ع اوال في الك‪#‬ان االب‪#‬رز‪#.‬وفق‪#‬ا له‪#‬ذه‪#‬الطريق‪#‬ة‬ ‫الهام‪# #‬‬ ‫تنظيم البنود من األفضل إلى األسوأ أو من األكبر إلى االصغر‪.‬‬ ‫ مخط‪##‬ط ت‪##‬رتيب للبيان‪##‬ات من الع‪##‬ام الى المح‪##‬دد ‪General to‬‬ ‫ة ه‪#‬ي أك‪#‬ث‪#‬ر‪#‬من غير‪#‬ه‪#‬ا؛‬ ‫‪ #.specific‬إذا ك‪#‬انت‪ #‬بعض‪#‬ال‪#‬بيان‪#‬ا‪#‬ت‪#‬العام‪# #‬‬ ‫ف‪#‬إن ا‪#‬لع‪#‬ناص‪#‬ر‪#‬ال‪#‬عام‪#‬ة ي‪#‬ن‪#‬بغي أن ‪#‬تس‪#‬ب‪#‬ق ال‪#‬عناص‪#‬ر‪#‬المح‪#‬دد‪#‬ة‪#.‬وي‪#‬تم ه‪#‬ذا‪#‬‬ ‫عادة عندما يكون هناك عالقة هرمية بين عناصر البيانات‪.‬‬  ‫شاشة المالحة والتدفق‬ ‫‪Screen navigation and flow‬‬ ‫التصّفح خالل الشاشات ينبغي أن يكون واضحًا وسهل‬ ‫ ‬ ‫اإلنجاز‪.‬‬ ‫يجب جعل عملية التصفح واضحة وذلك بتجميع وتنسيق‬ ‫ ‬ ‫الشاشة وباستخدام الضوابط و الحدود لتوجيه نظر‬ ‫المستخدم أثناء التفاعل‪.‬‬ ‫ترتيب المعلومات في الشاشة والعناصر بحيث تقوم بتوجيه‬ ‫ ‬ ‫النظر خالل الشاشة و تقليل مسافه تحرك المؤشر ‪pointer‬‬ ‫والعين‪.‬‬ ‫تحديد مكان أهم العناصر وأكثرها استخداما في أعلى يسار‬ ‫ ‬ ‫الشاشة (اللغة الالتينية)‪.‬‬ ‫مساعدة التصفح عن طريق المواءمه بين العناصر و تجميع‬ ‫ ‬ ‫العناصر باستخدام خط الحدود ‪line borders‬‬  ‫التكوين المرضي بصريًا‬ ‫‪Visually pleasing composition‬‬ ‫ النظ‪##‬ام اإلدراكي ل‪##‬دى اإلنس‪##‬ان يح‪##‬اول إيج‪##‬اد‬ ‫مع‪#‬نى لألش‪#‬ياء من حول‪#‬ه‪ ،‬ويح‪#‬اول هيكل‪#‬ة األش‪#‬ياء‬ ‫عندما يواجه حاالت غير واضحة‪.‬‬ ‫ يجب تنظيم عناص‪#‬ر الشاش‪#‬ة بحيث تت‪#‬وفر فيه‪#‬ا‬ ‫الصفات التالية‪:‬‬  ‫التكوين المرضي بصريًا‬ ‫‪Visually pleasing composition‬‬ ‫ التوازن ‪Balance‬‬ ‫– المقصود بتوازن الشاشة أن تكون عناصر الشاشة‬ ‫في يسار الشاشة هي نفسها (في العدد و الشكل‬ ‫و الحجم) في يمين الشاشة‪.‬‬ ‫يقوم المستخدم بمعالجة العمود األيسر أوًال‬ ‫ كما يالحظ العمود األيمن في نفس الوقت‪.‬‬ ‫ يجب فهم كال من العمودين من ِقبل نظام المعالجة‬ ‫البصرية‬  ‫التكوين المرضي بصريًا‬ ‫‪Visually pleasing composition‬‬ ‫عناصر الشاشة المتوازنة‬ ‫عناصر الشاشة غير متوازنة‬  ‫التكوين المرضي بصريًا‬ ‫‪Visually pleasing composition‬‬ ‫ التناظر ‪Symmetry‬‬ ‫– المقصود بالتناظر تكرار العناصر من يمين ويسار‬ ‫الخط المركزي للشاشة‬ ‫يوضح عناصر الشاشة المتماثلة‬ ‫عناصر غير متماثلة‬  ‫التكوين المرضي بصريًا‬ ‫‪Visually pleasing composition‬‬ ‫االنتظام ‪Regularity‬‬ ‫ ‬ ‫خل‪#‬ق مس‪#‬افات موح‪#‬دة وقياس‪#‬ية وثابت‪#‬ة بين نق‪#‬اط المباع‪#‬دة‬ ‫ ‬ ‫األفقي‪####‬ة والرأس‪####‬ي‪#‬ة ‪horizontal and vertical‬‬ ‫‪alignment points‬‬ ‫عن‪#‬دما تك‪#‬ون عناص‪#‬ر الشاش‪#‬ة منتظم‪#‬ة كم‪#‬ا في الش‪#‬كل ‪5‬‬ ‫ ‬ ‫م م‪#‬عالج‪#‬ة‪#‬العم‪#‬و ‪#‬د ‪ column‬أقص‪#‬ى‪#‬اليس‪#‬ار‪ ،#‬و في نف‪#‬س‬‫يت ‪#‬‬ ‫الوقت ُيالحظ العمودين إلى اليمين‪.‬‬ ‫إم‪#‬ا إذا ك‪#‬انت عناص‪#‬ر الشاش‪#‬ة غ‪#‬ير منتظم‪#‬ة فتتم معالج‪#‬ة‬ ‫ ‬ ‫موق‪##‬ع‪ location#‬وحجم ك ‪ّ#‬ل ش‪##‬كل‪#‬على‪#‬ح‪##‬ده كم‪##‬ا في‬ ‫الشكل ‪.6‬‬  ‫التكوين المرضي بصريًا‬ ‫‪Visually pleasing composition‬‬ ‫ يوضح عناصر الشاشة المنتظمة‬ ‫العناصر غير‬ ‫المنتظمة‬  ‫التكوين المرضي بصريًا‬ ‫‪Visually pleasing composition‬‬ ‫ التوقّع ية ‪Predictability‬‬ ‫– التوقّعية أو القدرة على التنبؤ هو وضع األشياء في‬ ‫االماكن التي تمّكن المستخدم من التنبؤ بها على‬ ‫الشاشة‪.‬‬ ‫– على سبيل المثال في الشكل (‪ )7‬و التي تمثل‬ ‫شاشة للبحث عن كتب‪.‬‬ ‫– يتوقع المستخدم القائمة و محرك البحث أعلى‬ ‫الشاشة تليها الكلمات الرئيسية أو الدليلية‬ ‫‪ keywords‬التي تستخدم في البحث‪.‬‬  ‫التكوين المرضي بصريًا‬ Visually pleasing composition File Edit View Insert Window Help Icon Search for Books Enter Keywords: interface Graphical user OK Cancel ‫وضع العناصر على الشاشة في األماكن‬ ‫المتوقعة من قبل المستخدم‬ Icon OK File Edit View Insert Window Help Enter Keywords: interface graphical user Search for Books Cancel ‫وضع العناصر على الشاشة في األماكن غير المتوقعة‬ ‫من قبل المستخدم‬  ‫التكوين المرضي بصريًا‬ ‫‪Visually pleasing composition‬‬ ‫‪Sequentially‬‬ ‫ التسلسل‬ ‫– التسلسل هو عملية توجيه البصر من خالل مهمة واضحة‪.‬‬ ‫العين تنجذب إلى ‪:‬‬ ‫ المشرق من العناصر أكثر من األقل إشراقا‪.‬‬ ‫ العناصر المتفرقة أكثر من المتجمعة‪.‬‬ ‫ الرسومات قبل النصوص‪.‬‬ ‫ الملّون قبل غير الملون‪.‬‬ ‫ األلوان المشبعه قبل األقل تشبعا‪.‬‬ ‫ المناطق مظلمة قبل المضيئة‪.‬‬ ‫ العناصر الكبيرة قبل الصغيرة‪.‬‬ ‫ األشكال غير المألوفة قبل المألوف منها‪.‬‬ ‫ الشكل ‪ 9‬يوضح عناصر شاشة ذات تسلسل منطقي‪ ،‬الحظ توجيه‬ ‫البصر باستخدام األلوان‪.‬أما الشكل ‪ 10‬فيوضح عناصر غير متسلسلة‪.‬‬  ‫التكوين المرضي بصريًا‬ Visually pleasing composition Membership Name Form Dues: : ddress: A Pub City Total: s: State: :Code OK Cancel : ‫عناصر ذات تسلسل‬ ‫منطقي‬ Membership Form Cancel Name: OK Address: Pub Dues: s: State: Code: City: Total: ‫عناصر غير متسلسلة‬  ‫التكوين المرضي بصريًا‬ ‫‪Visually pleasing composition‬‬ ‫ االقتصاد ‪Economy‬‬ ‫– هو استخدام أقل ما يمكن من أساليب الحوار و‬ ‫الخطوط و األلوان و تقنيات العرض‪.‬‬  ‫التكوين المرضي بصريًا‬ Visually pleasing composition Membership Name: Form Dues: Addres Pubs: s: City: Total: State :Code: OK Cancel ‫شاشة مستخدمة بطريقة‬: ‫اقتصادية‬ Membership Form Name: Dues: Addres Pubs: s: City: Total: State OK Cancel :Code: ‫شاشة مستخدمة بطريقة غير‬ ‫اقتصادية‬  ‫التكوين المرضي بصريًا‬ ‫‪Visually pleasing composition‬‬ ‫ الوحدة ‪Unity‬‬ ‫– الوحدة هي جعل العناصر تبدو كوّح دة متكاملة‬ ‫(للتماسك البصري) و ذلك باآلتي‪:‬‬ ‫ استعمال أشكال‪ ،‬وحجوم‪ ،‬أو ألوان مماثلة‪.‬‬ ‫ جعل المسافة بين عناصر الشاشة أقل من المسافة بين‬ ‫العناصر و هامش الشاشة‬  ‫التكوين المرضي بصريًا‬ ‫‪Visually pleasing composition‬‬ ‫الوحدة‬ ‫التجزؤ‬  ‫التكوين المرضي بصريًا‬ ‫‪Visually pleasing composition‬‬ ‫ النسبة ‪Proportion‬‬ ‫– النسبة هي تجميع البيانات أو النّصوص باستعمال‬ ‫نسب مرضية‬ ‫تجّم عات باستعمال أشكال‬ ‫متناسبة‬  ‫التكوين المرضي بصريًا‬ ‫‪Visually pleasing composition‬‬ ‫ البساطة ‪Simplicity‬‬ ‫– قّلل عدد النقاط المصطّفة باستعمال‪:‬‬ ‫– أقل عدد من األعمدة لعرض العناصر على الشاشة‪.‬‬ ‫– دمج العناصر لتقليل عدد عناصر الشاشة‪.‬‬ ‫– مع مراعاة أن ال يؤثر ذلك على وضوح ‪clarity‬‬ ‫البيانات على الشاشة‪.‬‬ ‫– الحظ تأثير التصميم على معالجة البيانات على‬ ‫الشاشة في الشكل ‪ 15‬و الشكل ‪16‬‬  ‫التكوين المرضي بصريًا‬ Visually pleasing composition Membership Form Name: Dues Addres : Pubs: s: City: Total: State: OK Cancel Code: ‫تتم معالجة أربعة اصطفافات‬ ‫ فقط‬alignments Membership Form Dues Nam : e:Addres Pub s:City s: : Stat Total Code:e: : OK Cancel ‫تتم معالجة تسعة‬ ‫اصطفافات‬  ‫التكوين المرضي بصريًا‬ ‫‪Visually pleasing composition‬‬ ‫ التجميعات ‪Groupings‬‬ ‫– التجميعات هي التقنية المستخدمة لترتيب عناصر الشاشة بصريًا‬ ‫حسب وظيفية كل منها‪.‬و يمكن تصميم هذه التجميعات بما يلي‪:‬‬ ‫– إصطفاّف ‪ Align‬عناصر الشاشة في مجموعات‬ ‫ المباعدة بين المجموعات بفراغات‬ ‫ استعمال العناصر اإلضافية بشكل مقتصد‪.‬‬ ‫– استعمال األلوان الكثيرة والحدود تضيف تعقيدا للشاشة لذلك قّلل‬ ‫منها‪.‬‬ ‫التجميع البسيط ‪simple grouping‬‬ ‫ ‬ ‫– يمكن الحصول على تجميع بسيط لعناصر الشاشة و ذلك باآلتي‪:‬‬ ‫ اصطفاف العناصر المماثلة بشكل عمودي‬ ‫ يجب أن تكون المسافة العمودية بين األجسام المماثلة صغيرة‬  ‫التكوين المرضي بصريًا‬ Visually pleasing composition Membership Form Name: Dues Address: :Pubs City: Total: : State: Code: OK Cancel ‫التجمعات‬ ‫البسيطة‬  ‫التكوين المرضي بصريًا‬ ‫‪Visually pleasing composition‬‬ ‫ تجميع الصناديق ‪Boxed grouping‬‬ ‫– يمكن تجميع أو احتواء البيانات المرتبطة ببعضها‬ ‫باستخدام إطار ‪.frame‬عند استحدام اإلطار يجب‬ ‫مراعاة اآلتي‪:‬‬ ‫– الصناديق تضيف تعقيدًا إضافيًا للشاشة‪.‬‬ ‫– في كثير من الحاالت يمكن االكتفاء بالترتيب‬ ‫المكاني ‪ Spatial arrangement‬للعناصر‪.‬‬  ‫التكوين المرضي بصريًا‬ Visually pleasing composition Membership Form Name: Dues: Pubs: Address: City: Total: State: OK Cancel Code: ‫التجميع باستخدام الصناديق‬  ‫التكوين المرضي بصريًا‬ ‫‪Visually pleasing composition‬‬ ‫ تجميع الخلفية ‪Background‬‬ ‫‪grouping‬‬ ‫– بدال من استخدام اإلطار يمكن استخدام خلق‬ ‫تجميعات بإعطاء لون لخلفية العناصر‪.‬عند‬ ‫استخدام األلوان يجب مراعاة اآلتي‪:‬‬ ‫ يضيف اللون تعقيدًا بصريًا ‪ visual complexity‬إضافيًا‪.‬‬ ‫ يفضل استخدام الترتيب المكاني ‪Spatial‬‬ ‫‪. arrangement‬‬  ‫التكوين المرضي بصريًا‬ Visually pleasing composition Membership Form Name: Dues: Address: Pubs: City: Total: State: Code: OK Cancel ‫التجميع باستخدام األلوان‬