‫عنوان المحاضرة‬

‫مرحلة تصميم البرنامج ‪Software Design‬‬

‫المحاضرة التاسعة‬

‫د‪ .‬خالد عبدالسالم عياد‬

 ‫مقدمة‬ ‫•‬
‫ماهي مبادئ التصميم ‪Design Principles‬‬ ‫•‬
‫تعريف النموذج‬ ‫•‬
‫ماهي نماذج التصميم ‪Design Patterns‬‬ ‫•‬
‫ماهو الفرق بين مبادئ ونماذج التصميم‬ ‫•‬
‫ماذا يقصد بتصميم البرنامج ()‪Software Design‬‬ ‫•‬
‫أوال ‪ :‬تصميم البنية أو الهيكل )‪Architectural Design‬‬ ‫•‬
‫ثانيا‪ :‬تصميم النماذج بالـ‪:(UML) Unified Modelling Language‬‬ ‫•‬
‫ثالثا‪ :‬تصميم واجهة االستخدام )‪GUI Design‬‬ ‫•‬
‫الخالصة‬ ‫•‬
 ‫مقدمة‬
‫تتأثر جودة البرمجيات بمستوى التصميم ‪ Design‬الذي تم اعتماده من قبل الفريق الذي يسهر‬
‫على تطويرها‪ ،‬حيث يلعب تصميم البرمجيات دورا كبيرا في جعلها قابلة للصيانة والتحديث‬
‫‪ ،Maintainable‬ومفتوحة على الزيادة والتوسيع ‪ ،Extensible‬وقادرة على الخضوع‬
‫لالختبارات ‪ Testable‬التي من شأنها التحقق من سالمة اشتغال مختلف أجزاء البرنامج وأدائها‬
‫للمطلوب منها بالشكل المتوقع‪ .‬لذلك ينبغي أن يولي كل مشتغل في مجال صناعة البرمجيات‬
‫أهمية كبيرة لعملية التصميم نظرا لتأثيرها المباشر على جودة المنتوج المقدم‪.‬‬
‫وال يمكن للتصميم أن يكون ناجحا إال إذا كان يمنح المزايا الثالثة التي تقدم ذكرها وهي كاآلتي‪:‬‬
‫‪-‬القابلية للتحديث والصيانة‪ :‬إذ يلزم أن يكون المشروع قابال للتحديث في أي وقت دون أن يكون‬
‫لهذه العملية تأثير سلبي على باقي أجزاء المشروع‪.‬‬
‫‪ -‬القابلية للزيادة والتوسيع‪ :‬كل مشروع ال يسمح بإضافة أجزاء جديدة عليه‪ ،‬أو توسيع أجزاء‬
‫موجودة مسبقا‪ ،‬دون أن تتأثر باقي المكونات بشكل سلبي‪ ،‬فهو مشروع ناقص ومحدود‪.‬‬
‫‪ -‬القابلية لالختبار‪ :‬االختبارات مهمة جدا لضمان سالمة اشتغال أجزاء المشروع‪ ،‬ولكي‬
‫يكون المشروع قابال لالختبار عليه أن يكون منضبطا لمجموعة من القواعد التابعة لمجال‬
‫التصميم‪.‬‬

‫عملية تصميم البرمجيات ترتكز على مجموعة من المبادئ والنماذج ‪Principles and‬‬
‫‪ Patterns‬التي وضعها أناس متضلعون في هذا المجال بغرض حل إشكاليات تعرضوا لها‬
‫باستمرار‪ ،‬فقاموا بتقديم حلول جاهزة يمكن ألي مطور أن يستعملها في وضعيات مماثلة‪.‬‬

‫أغلب هذه الحلول ‪ -‬التي تأتي على شكل مبادئ ونماذج ‪ -‬متوافقة بشكل كبير مع نمط البرمجة‬
‫كائنية التوجه ‪ ،Object Oriented Programming Paradigm‬حيث تستعمل هذه‬
‫المبادئ والنماذج مفاهيم البرمجة الكائنية مثل الوراثة ‪ Inheritance‬وتعدد األشكال‬
‫‪ Polymorphism‬و التجريد ‪ Abstraction‬وغيرها من أجل صياغة حلول متكاملة‬
‫ومنظمة‪.‬‬
 ‫ماهي مبادئ التصميم ‪Design Principles‬‬
‫مبادئ التصميم هي مجموعة من القواعد والتوجيهات التي توضح لنا كيف ينبغي أن يكون شكل‬
‫وسلوك الكود الذي نقوم بكتابته‪ ،‬حيث تفرض علينا مجموعة من القيود التي باالنضباط لها سنكتب‬
‫كودا نظيفا ‪ ،Clean Code‬قابال للصيانة ‪ ،Maintainable‬قابال للزيادة والتوسيع ‪،Extensible‬‬
‫وقابال لالختبار ‪ Testable‬كاالختبارات األحادية ‪ ،Unit Tests‬والغرض من هذه المبادئ هو تمكين‬
‫المطور من التخلص من العادات السلبية التي تدفعه إلى التركيز على الوصول إلى الحل فقط دون‬
‫األخذ بعين االعتبار جودة هذا الحل‪ ،‬ومدى قدرة هذا الحل على التكيف مع باقي أجزاء المشروع‬
‫بحيث ال يؤدي تعديله إلى سلسلة من الكوارث‪ ،‬ومدى قابلية هذا الحل إلى التوسيع بحيث لو أردنا في‬
‫المستقبل أن نضيف إليه أمورا جديدة أمكننا ذلك بكل يسر‪ ،‬واألهم من هذا وذاك مدى موافقة هذا الحل‬
‫لمواصفات االختبارات األحادية ليخضع لها بغرض التأكد من أنه يؤدي المطلوب بالشكل المرغوب‪.‬‬
‫توجد العديد من مبادئ التصميم مثل مبدأ ‪ DRY‬اختصارا ل ‪ ،Don’t Repeat Yourself‬والذي‬
‫يقضي بأن التعليمات البرمجية ال ينبغي أن تتكرر في أكثر من مكان‪ ،‬ويجب تفادي ذلك عبر استعمال‬
‫الوظائف ‪ Methods‬مثال‪ ،‬بحيث بدل تكرار كتابة األوامر نقوم بتجميعها في وظيفة واحدة ونستدعيها‬
‫كلما احتجنا إليها‪.‬‬
 ‫تعريف النموذج‬
‫هو عبارة عن مجموعة من المخططات ‪ ،diagrams‬ذات األشكال الهندسية ‪ ،‬والصور ‪ ،‬التي‬
‫تحمل دااللت وصفية محددة ‪ .‬وتماثل هذه االشكال والصور في وظيفتها الحروف االبجدية ألي لغة‬
‫بشرية ‪ .‬فبدال من االستعانة بالوصف السردي للنظام ‪ ،‬يتم إنجاز عملية الوصف عبر االشكال ‪،‬‬
‫والصور ‪ ،‬فهي أسرع استيعابا ‪ ،‬وأيسر للفهم ‪ ،‬مقارنة بالوصف السردي ‪ ،‬الذي قد يستغل العديد‬
‫من الصفحات ‪ ،‬هذا باالضافة إلى الغموض الذي قد يصاحب النصوص السردية عموما‪.‬‬

‫مثلما تمثل الجملة ‪ ،‬أو العبارة ‪ ،‬وحدة البناء األساسية لكتابة النصوص في اللغات البشرية ‪ ،‬فإن‬
‫مخططات لغة ‪ UML‬المختلفة ‪ ،‬تمثل وحدة بناء أي نموذج ‪Model‬لوصف مخرجات عمليات‬
‫تحليل وتصميم النظم المعلوماتية ‪ .‬والنموذج ‪ Model‬هو عبارة عن مخطط ‪diagrams‬أو‬
‫مجموعة من المخططات الوصفية التي تصف أي عملية أو وظيفة من وظائف النظام المعلوماتي‬
‫قيد البناء‬
 ‫ماهي نماذج التصميم ‪Design Patterns‬‬
‫نماذج التصميم هي حلول عملية تم بناؤها لتناسب وضعيات برمجية معينة‪ ،‬والغرض األساسي‬
‫منها هو توفير حلول برمجية لمشاكل شائعة‪ ،‬هذه الحلول تم اختبارها مرات ومرات وأثبتت‬
‫نجاعتها‪ ،‬لذلك حينما تجد نفسك في وضعية برمجية من الممكن استعمال نموذج للتصميم فيها ال‬
‫داعي ألن تتعب أعصابك في كتابة حل قد سبقك إليه غيرك‪ ،‬فقط قم بتطبيق هذا الحل واستمتع‬
‫بالنتيجة‪.‬‬

‫إذن فنماذج التصميم ‪ Design Patterns‬هي حلول برمجية عملية عامة يمكنك استعمالها في‬
‫وضعيات برمجية معينة‪ ،‬ويوجد العديد من نماذج التصميم مثل ‪ Repository‬الذي يسمح لنا‬
‫بتجميع العمليات الممكن أن نقوم بها على البيانات في مكان واحد‪ ،‬أو مثل ‪ Singletone‬الذي‬
‫يسمح لنا باستعمال ‪ Object‬واحد من نوع معين‪ ،‬وكذلك ‪ Factory‬الذي يسمح لنا بإنشاء الكائنات‬
‫من أنواع أخرى‪ ،‬والعديد من نماذج التصميم وأشهرها ‪ GoF‬اختصارا ل ‪ Gang of Four‬وهي‬
‫مجموعة من نماذج التصميم التي صاغها ثلة من المحترفين في مجال تصميم البرمجيات‪.‬‬
 ‫ماهو الفرق بين مبادئ ونماذج التصميم‬

‫الفرق بين مبادئ التصميم ‪ Design Patterns‬ونماذج التصميم هو الفرق بين ما يقوله المهندس‬
‫وبين ما يفعله البناء‪ ،‬األول يعطيك تعليمات وتوجيهات عامة لتكون المنشأة موافقة لمعايير البناء‬
‫الجيد‪ ،‬والثاني يقوم باستعمال حلول فعلية إلنجاز عملية البناء‪ ،‬فطريقة وضع اللبنة استعملها عدة‬
‫بنائين‪ ،‬وطريقة تبليط الحائط كذلك‪ ،‬وهكذا دواليك‪..،‬‬
‫فحينما نتحدث عن توجيهات عامة فنحن نتحدث عن مبادئ التصميم ‪،Design Principles‬‬
‫وحينما نتحدث عن حلول عملية لوضعيات معينة فنحن نتحدث عن نماذج التصميم ‪Design‬‬
‫‪.Patterns‬‬
‫يمكننا باختصار أن نقول أن الفرق بين مبادئ التصميم ونماذج التصميم هو أن هذه األخيرة تعنى‬
‫بالمستوى المنخفض المتعلق بالحلول البرمجية لوضعيات معينة‪ ،‬بينما مبادئ التصميم تعطيك قواعد‬
‫ومبادئ عامة على مستوى أعلى لكي توظفها في مشاريعك بغرض تجويدها‪.‬‬
‫مرحلة التصميم لبرنامج هي عملية تحليلية لمتطلبات البرنامج الختيار و بناء هيكل البرنامج و‬
‫أجزاءه و كيفية ترابطها مع بعضها البعض‪ ،‬ينتج عن ذلك مجموعة من الملفات و النماذج و‬
‫الرسومات البيانية التي يمكن منها برمجة وكتابة شيفرة البرنامج بالكامل‪.‬‬
‫و تنقسم مرحلة التصميم إلى مراحل عديدة من أهمها‪:‬‬
‫‪ .1‬تصميم البنية أو الهيكل ‪Architectural Design‬‬
‫‪ .2‬تصميم نماذج البرنامج باستخدام اللغة الرسومية ‪UML - Unified Modeling‬‬
‫‪Language‬‬
‫‪GUI‬‬ ‫‪-‬‬ ‫‪Graphical User‬‬ ‫‪Interface‬‬ ‫االستخدام‬ ‫واجهة‬ ‫‪ .3‬تصميم‬
‫وسوف نشرح كل مرحلة في هذه المحاضرة‪:‬‬
 ‫أوال ‪ :‬تصميم البنية أو الهيكل )‪)Architectural Design‬‬
‫كما أن بناء مبنى يتطلب أوال تحديد شكل هيكله‪ ،‬فكذلك بناء البرنامج‪ .‬هيكيلة البرنامج هي عميلة ترتيب‬
‫ألجزاء البرنامج بطريقة معينة و مرتبة و تنظيم ترابط هذه األجزاء مع بعضها البعض‪ .‬غالبا ال تتطلب‬
‫هذه مرحلة االبتكار‪ ،‬فهناك أنواع معروفة و محددة من الهياكل‪ .‬كل ما يُستلزم في هذه المرحلة أو اختيار‬
‫الهيكل المناسب للبرنامج‪ .‬يعتمد اختيار الهيكل على نوع البرنامج و على دراسة جوانب آخرى مهمة‬
‫كاألداء ) )‪ ) performance‬والحماية و األمان )‪ security and safety‬و سهولة الصيانة ) و‬
‫)‪)Maintainability‬‬
‫من الهياكل المستخدمة‪:‬‬
‫‪Client-Server‬‬ ‫)‪Architecture‬‬ ‫الزبون)‬ ‫(أو‬ ‫الخادم‪-‬المخدوم‬ ‫• هيكل‬
‫و يستخدم في البرامج التي تعمل على أكثر من جهاز أو موزعة على شبكة‪.‬‬
‫مثال‪ :‬متصفح االنترنت‪.‬‬
‫‪)Layered‬‬ ‫)‪Architecture‬‬ ‫الطبقات‬ ‫• هيكل‬
‫ويستخدم في البرامج التي تنقسم إلى أجزاء واضحة (طبقات)‪ .‬و كل طبقة تعتمد على ما تحتها من‬
‫طبقات‪.‬‬
‫مثال‪ :‬برامج تحويل و إرسال البيانات عبر الشبكة‪ .‬فتحويل البيانات يستلزم مراحل و كل مرحلة تعتبر‬
‫‪)Repository‬‬ ‫)‪Architecture‬‬ ‫المخرن‬ ‫أو‬ ‫التخرين‬ ‫• هيكل‬
‫و يستخدم في البرامج التي تعتمد على قاعدة (أو قواعد) بيانات كبيرة ‪.)Database).‬‬
‫مثال‪ :‬برنامج تنظيم مكتبة يحتوي قاعدة بيانات ضخمة تحوي جميع معلومات الكتب و معلومات‬
‫الموظفين …الخ‪ ، .‬و يستخدم هذه القاعدة أكثر من شخص في نفس الوقت‪.‬‬

‫ثانيا‪ :‬تصميم النماذج بالـ‪:(UML) Unified Modelling Language‬‬

‫وهي أهم المراحل‪ ،‬حيث أنها زبدة التصميم وفيها الجزء األكبر من التحليل و التفكير و “االبتكار”‬
‫في عملية التصميم‪.‬‬
‫لكن ما هي ال ‪UML‬؟‬
‫هي لغة رسومية موحدة و متفق عليها دوليا تُستخدم لرسم نماذج “ألجزاء” البرنامج‪ .‬هذه النماذج‬
‫تُستخدم في برمجة البرنامج كامال‪ .‬بعبارة آخرى‪ ،‬اليحتاج المبرمج إلى مستندات متطلبات البرنامج‬
‫“مباشرة”‪ ،‬بل يبرمج البرنامج من هذه الرسوم و النماذج فقط‪ ،‬كالمهندس المعماري الذي ال يحمل في‬
‫يديه أثناء العمل إال تخطيطات المبنى‪.‬‬
‫تقوم لغة ‪ UML‬بوصف النظم عبر استخدام مخططات عديدة كل منها يقوم بوصف وتمثيل‬
‫النظام من نواحي معينة ‪ .‬فكل نظام يمكن وصفه من مشاهد أو زوايا ربما يحتاج إلى صيغة معينة‬
‫لوصفه ‪ .‬ويمكن إجمال مخططات لغة ‪ UML‬وأغراضها بالشكل ونالحظ أن هناك العديد من‬
‫المخططات التي توفرها لغة ‪UML‬وهي تختلف حول أي من نواحي النظام التي يقوم بوصفها‬
‫كل مخطط‪.‬‬
‫اول ما يتم مالحظته عن ‪ UML‬هو أنه يوجد العديد من المخططات المختلفة (نماذج ) و التي‬
‫يجب التعّود عليها‪ .‬السبب في هذا التنّوع يعود إلى أن المنظومة يُحتمل أن يُنظر إليها من زوايا‬
‫مختلفة بحسب المشاركين فيها‪.‬‬
‫تطوير البرمجيات يشترك فيه عدد من االفراد‪ ،‬و كل واحد له دور – مثال‪:‬‬
‫•المحللون‬
‫صممون‬‫• الم ّ‬
‫• المبرمجون‬
‫• القائمون باالختبار‬
‫• مراقبو الجودة‬
‫• المستفيدون‬
‫ّ‬
 ‫من أهم نماذج ال ‪UML:‬‬
‫• نموذج دراسة حالة (سمة) من البرنامج ‪Usecase‬‬
‫)‪)Diagram‬‬
‫• نموذج ترابط األصناف أو األجزاء )‪)Class Diagram‬‬
‫• النماذج الديناميكية ( ‪ ،)Dynamic Diagrams‬وتنقسم‬
‫إلى‪:‬‬
‫‪ -‬نموذج الفعالية بين األجزاء (‪)Activity Diagram‬‬
‫‪ -‬نموذج التعاون أو االشتراك (بين األصناف)‬
‫‪)Collaboration‬‬ ‫)‪Diagram‬‬
‫‪ -‬نموذج تسلسل األحداث (‪)Sequence Diagram‬‬
‫‪ -‬نموذج المراحل )‪)Statechart‬‬
‫و هناك العديد من النماذج اآلخرى و في نهاية هذه المرحلة‬
‫الطويلة و المتعبة نكون قد أنتجنا نماذج مفصلة و عديدة عن‬
‫البرنامج تكون جاهزة لتقديمها للمبرمج‪.‬‬
‫مثال عن نموذج دراسة الحالة‬ ‫• وهذه بعض األمثلة‪:‬‬
‫مثال عن نموذج ترابط األصناف أو األجزاء‬
 ‫ثالثا‪ :‬تصميم واجهة االستخدام )‪)GUI Design‬‬
‫واجهة االستخدام هي واجهة البرنامج التي يتعامل معها المستخدم‪ .‬وتشمل باألساس الجزئ المرئي‬
‫الذي يتكون عادة من نوافذ و أزرار و حقول كتابة و لون الخلفية و لون الخط…الخ‪.‬‬

‫يتعلق هذا القسم بالجزء الفني و جمالي من البرنامج‪ .‬كم يهتم بسرعة استجابة الواجهة و إمكانيتها‬
‫إعطاء معلومات واضحة و كافية للمستخدم‪ .‬وهناك دراسات كثيرة في هذا المجال تشمل دراسة‬
‫الجانب النفسي لإلنسان و تأثره باأللوان و بطريقة ترتيب األشياء‪.‬‬
‫على سبيل المثال‪ ،‬من النصائح المعروفة في هذا المجال هي‪ :‬ال تستخدام جميع ألوان قوس قزح‬
‫في واجهة برنامجك! من المفضل استخدام لونين إلى أربع ألوان مختلفة كحد أقصى‪.‬‬

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

‫يمكن أن تكون واجهة المستخدم الرسومية ‪ ،‬القائمة على النص ‪ ،‬والصوت والفيديو ‪ ،‬اعتمادا‬
‫على مجموعة األجهزة والبرمجيات األساسية‪ .‬يمكن أن تكون واجهة المستخدم األجهزة أو‬
‫البرامج أو مزيج من االثنين معا‪.‬‬

‫يصبح البرنامج أكثر شعبية إذا كانت واجهة المستخدم الخاصة به هي‪:‬‬
‫• جذاب‬
‫• سهل االستخدام‬
‫• استجابة في وقت قصير‬
‫• واضح لفهم‬
‫• متسقة على جميع شاشات التواصل‬
 ‫تنقسم واجهة المستخدم على نطاق واسع إلى فئتين‪:‬‬
‫‪ .1‬واجهة سطر األوامر‬
‫‪ .2‬واجهة المستخدم الرسومية‬

‫اوال ‪ :‬واجهة سطر األوامر )‪)CLI‬‬

‫لقد كان ‪CLI‬أداة رائعة للتفاعل مع أجهزة الكمبيوتر حتى ظهرت شاشات عرض الفيديو‪CLI .‬‬
‫هو الخيار األول للعديد من المستخدمين والمبرمجين الفنيين‪CLI .‬هي الحد األدنى للواجهة التي‬
‫يمكن للبرنامج توفيرها لمستخدميها‪.‬‬
‫يوفر ‪CLI‬موجه األوامر ‪ ،‬وهو المكان الذي يكتب فيه المستخدم األمر ويتغذى على النظام‪ .‬يحتاج‬
‫المستخدم إلى تذكر بناء جملة األمر واستخدامه‪ .‬لم تتم برمجة ‪CLIs‬السابقة للتعامل مع أخطاء‬
‫المستخدم بشكل فعال‪.‬‬
‫يعد األمر مرجعًا يستند إلى النص إلى مجموعة من التعليمات ‪ ،‬التي يتوقع أن يتم تنفيذها بواسطة‬
‫النظام‪ .‬هناك طرق مثل وحدات الماكرو والبرامج النصية التي تجعل من السهل على المستخدم أن‬
‫يعمل‪.‬‬
‫مقدارا أقل من مورد الكمبيوتر مقارنةً بـ ‪GUI.‬‬
‫ً‬ ‫يستخدم ‪CLI‬‬
 ‫مكن أن تحتوي واجهة سطر األوامر النصية على العناصر التالية‪:‬‬

‫موجه األوامر ‪ -‬هو ُمعلم قائم على النص يُظهر في الغالب السياق الذي يعمل فيه المستخدم‪ .‬يتم‬
‫إنشاؤه بواسطة نظام البرمجيات‪.‬‬

‫المؤشر ‪ -‬هو خط أفقي صغير أو شريط عمودي الرتفاع الخط ‪ ،‬لتمثيل موضع الحرف أثناء‬
‫الكتابة‪ .‬تم العثور على المؤشر في الغالب في حالة وامض‪ .‬يتحرك عندما يكتب المستخدم أو يحذف‬
‫شيئًا ما‪.‬‬

‫األوامر ‪ -‬األمر هو تعليمات قابلة للتنفيذ‪ .‬قد يكون لها معلمة واحدة أو أكثر‪ .‬يظهر اإلخراج على‬
‫تنفيذ األوامر مضمنة على الشاشة‪ .‬عند إنتاج اإلخراج ‪ ،‬يتم عرض موجه األوامر في السطر التالي‪.‬‬
 ‫ثانيا ‪ :‬واجهة المستخدم الرسومية ‪:GUI‬‬
‫توفر واجهة المستخدم الرسومية وسيلة رسومية للمستخدم للتفاعل مع النظام‪ .‬يمكن أن تكون واجهة‬
‫المستخدم الرسومية مزي ًجا من األجهزة والبرامج‪ .‬باستخدام واجهة المستخدم الرسومية ‪ ،‬يفسر‬
‫المستخدم البرنامج‪.‬‬
‫عادة ً ما يكون واجهة المستخدم الرسومية أكثر استهالكا للموارد من تلك الموجودة في ‪CLI.‬بفضل‬
‫التكنولوجيا المتقدمة ‪ ،‬يقوم المبرمجون والمصممون بإنشاء تصميمات واجهة مستخدم رسومية معقدة‬
‫تعمل بكفاءة ودقة وسرعة أكبر‪.‬‬
‫عناصر واجهة المستخدم الرسومية‪:‬‬
‫توفر واجهة المستخدم الرسومية مجموعة من المكونات للتفاعل مع البرامج أو األجهزة‪.‬‬
‫يوفر كل مكون رسومي طريقة للعمل مع النظام‪ .‬يحتوي نظام ‪GUI‬على العناصر التالية مثل‪:‬‬
‫نافذة ‪ -‬منطقة حيث يتم عرض محتويات التطبيق‪ .‬يمكن عرض المحتويات في نافذة على شكل‬
‫أيقونات أو قوائم ‪ ،‬إذا كانت النافذة تمثل بنية الملف‪ .‬يسهل على المستخدم التنقل في نظام الملفات في‬
‫نافذة استكشاف‪ .‬يمكن تصغير ‪Windows‬أو تغيير حجمها أو تكبيرها وفقًا لحجم الشاشة‪ .‬يمكن‬
‫نقلها في أي مكان على الشاشة‪ .‬قد تحتوي النافذة على نافذة أخرى من نفس التطبيق ‪ ،‬تسمى النافذة‬
‫الفرعية‪.‬‬
‫عالمات التبويب ‪ -‬إذا سمح أحد التطبيقات بتنفيذ مثيالت متعددة بحد ذاته ‪ ،‬فإنها تظهر على الشاشة‬
‫كنوافذ منفصلة‪ .‬ظهرت واجهة المستندات المبوبة لفتح مستندات متعددة في نفس النافذة‪ .‬تساعد هذه‬
‫ضا في عرض لوحة التفضيالت في التطبيق‪ .‬تستخدم جميع متصفحات الويب الحديثة هذه‬ ‫الواجهة أي ً‬
‫الميزة‪.‬‬

‫القائمة ‪ -‬القائمة هي مجموعة من األوامر القياسية ‪ ،‬يتم تجميعها معًا وتوضع في مكان مرئي (عادة ً‬
‫ما يكون أعلى) داخل نافذة التطبيق‪ .‬يمكن برمجة القائمة لتظهر أو تختبئ عند نقرات الماوس‪.‬‬
‫أيقونة ‪ -‬أيقونة صورة صغيرة تمثل تطبيق مرتبط عند النقر على هذه الرموز أو النقر المزدوج عليها‬
‫‪ ،‬يتم فتح نافذة التطبيق‪ .‬يعرض ‪Icon‬التطبيق والبرامج المثبتة على نظام في صورة صور صغيرة‪.‬‬

‫المؤشر ‪ -‬يتم تمثيل األجهزة التفاعلية مثل الماوس ولوحة اللمس والقلم الرقمي في واجهة المستخدم‬
‫الرسومية كمؤشرات‪ .‬على الشاشة المؤشر يتبع تعليمات األجهزة في الوقت الحقيقي تقريبا‪ .‬تتم‬
‫ضا مؤشرات في أنظمة واجهة المستخدم الرسومية‪ .‬يتم استخدامها لتحديد القوائم‬ ‫تسمية المؤشرات أي ً‬
‫والنوافذ وغيرها من ميزات التطبيق‪.‬‬
‫مثال عن واجهة سطر األوامر‬
‫مثال عن واجهة المستخدم الرسومية‬
 ‫متطلبات واجهة المستخدم الرسومية‬

‫قد يرغب المصممون في إدراج جميع المتطلبات الوظيفية وغير الوظيفية في واجهة المستخدم‬
‫الرسومية‪ .‬هذا يمكن أن تؤخذ من المستخدمين و البرمجيات الموجودة باتباع الخطوات التالية‪:‬‬

‫‪ .1‬تحليل المستخدم ‪ -‬يدرس المصمم الذين يستخدمون واجهة المستخدم الرسومية للبرنامج‪ .‬يهم‬
‫الجمهور المستهدف حيث تتغير تفاصيل التصميم وفقًا لمستوى المعرفة والكفاءة لدى‬
‫المستخدم‪ .‬إذا كان المستخدم يتمتع بالدهاء التقني ‪ ،‬فيمكن دمج واجهة المستخدم الرسومية‬
‫المتقدمة والمعقدة‪ .‬لمستخدم مبتدئ ‪ ،‬يتم تضمين المزيد من المعلومات حول برنامج الكيفية‪.‬‬
‫‪ .2‬تحليل المهام ‪ -‬يتعين على المصممين تحليل المهمة المراد تنفيذها بواسطة حل البرنامج‪ .‬هنا‬
‫في واجهة المستخدم الرسومية ‪ ،‬ال يهم كيف سيتم ذلك‪ .‬يمكن تمثيل المهام بطريقة هرمية تأخذ‬
‫مهمة رئيسية واحدة وتقسيمها إلى مهام فرعية أصغر‪ .‬توفر المهام أهدافًا لعرض واجهة‬
‫المستخدم الرسومية‪ .‬يحدد تدفق المعلومات بين المهام الفرعية تدفق محتويات واجهة المستخدم‬
‫الرسومية في البرنامج‪.‬‬
‫‪ -3‬تصميم وتنفيذ واجهة المستخدم الرسومية ‪ -‬المصممون بعد الحصول على معلومات حول‬
‫المتطلبات والمهام وبيئة المستخدم وتصميم واجهة المستخدم الرسومية حيت تنفذ في التعليمات‬
‫البرمجية وتدمج واجهة المستخدم الرسومية مع برنامج عمل في الخلفية‪ .‬ثم يتم اختبارها ذاتيا من قبل‬
‫المطورين‪.‬‬

‫‪ -4‬االختبار ‪ -‬يمكن إجراء اختبار واجهة المستخدم الرسومية بطرق مختلفة‪ .‬يمكن أن يكون لدى‬
‫المنظمة التفتيش الداخلي ‪ ،‬والمشاركة المباشرة للمستخدمين وإصدار النسخة التجريبية ‪ ،‬قليل‬
‫منهم‪ .‬قد يشمل االختبار قابلية االستخدام والتوافق وقبول المستخدم ‪ ،‬إلخ‪.‬‬
 ‫أدوات تنفيذ واجهة المستخدم الرسومية‬
‫هناك العديد من األدوات المتاحة باستخدام والتي يمكن للمصممين إنشاء واجهة المستخدم الرسومية‬
‫بأكملها بنقرة ماوس‪ .‬يمكن تضمين بعض األدوات في بيئة البرنامج (‪IDE).‬‬
‫توفر أدوات تنفيذ واجهة المستخدم الرسومية مجموعة قوية من عناصر تحكم واجهة المستخدم‬
‫الرسومية‪ .‬لتخصيص البرامج ‪ ،‬يمكن للمصممين تغيير الرمز وفقًا لذلك‪.‬‬
‫هناك شرائح مختلفة من أدوات واجهة المستخدم الرسومية وفقًا الستخدامها ونظامها األساسي‬
‫المختلفين‪.‬‬
‫مثال‬
‫واجهة المستخدم الرسومية للجوال ‪ ،‬واجهة المستخدم الرسومية للكمبيوتر ‪ ،‬واجهة المستخدم الرسومية‬
‫التي تعمل باللمس ‪ ،‬إلخ‪ .‬فيما يلي قائمة من األدوات القليلة المفيدة لبناء واجهة المستخدم الرسومية‪:‬‬
‫• ‪FLUID‬‬
‫• )‪AppInventor (Android‬‬
‫• ‪LucidChart‬‬
‫• ‪WaveMaker‬‬
‫• مرئي ستوديو‬
 ‫قواعد واجهة المستخدم الذهبية‬
‫يذكر أن القواعد التالية هي القواعد الذهبية لتصميم واجهة المستخدم الرسومية ‪ ،‬التي وصفها‬
‫شنايدرمان وباليسانت في كتابهما (تصميم واجهة المستخدم)‪.‬‬

‫‪ .1‬السعي لتحقيق االتساق ‪ -‬يجب أن تكون هناك حاجة إلى تسلسالت متسقة من اإلجراءات في‬
‫مواقف مماثلة‪ .‬يجب استخدام المصطلحات المتطابقة في شاشات المطالبات والقوائم وشاشات‬
‫المساعدة‪ .‬يجب استخدام األوامر المتناسقة طوال الوقت‪.‬‬
‫‪ .2‬تمكين المستخدمين المتكررين من استخدام االختصارات ‪ -‬تزداد رغبة المستخدم في تقليل عدد‬
‫التفاعالت مع تكرار االستخدام‪ .‬تعد االختصارات ومفاتيح الوظائف واألوامر المخفية‬
‫وتسهيالت الماكرو مفيدة للغاية للمستخدم الخبير‪.‬‬
‫‪ .3‬تقديم تعليقات إعالمية ‪ -‬لكل إجراء من إجراءات المشغل ‪ ،‬يجب أن يكون هناك بعض‬
‫مالحظات النظام‪ .‬بالنسبة إلى اإلجراءات المتكررة والصغرى ‪ ،‬يجب أن تكون االستجابة‬
‫متواضعة ‪ ،‬بينما يجب أن تكون االستجابة أكثر جوهرية فيما يتعلق باإلجراءات النادرة وغير‬
‫الرئيسية‪.‬‬
‫تصميم الحوار إلغالق العائد ‪ -‬يجب تنظيم تسلسل اإلجراءات في مجموعات ذات بداية ووسط‬
‫ونهاية‪ .‬إن التغذية الراجعة بالمعلومات عند االنتهاء من مجموعة من اإلجراءات تمنح المشغلين‬
‫الرضا باإلنجاز ‪ ،‬والشعور بالراحة ‪ ،‬وإشارة إلى إسقاط خطط وخيارات الطوارئ من أذهانهم ‪،‬‬
‫وهذا يشير إلى أن الطريق إلى األمام واضح للتحضير لاللتالي مجموعة من اإلجراءات‪.‬‬
‫تقدم معالجة بسيطة لألخطاء ‪ -‬قدر اإلمكان ‪ ،‬صمم النظام حتى ال يرتكب المستخدم خطأ ً خطيرا ً‪ .‬في‬
‫قادرا على اكتشافه وتقديم آليات بسيطة ومفهومة لمعالجة‬
‫حالة حدوث خطأ ‪ ،‬يجب أن يكون النظام ً‬
‫الخطأ‪.‬‬
‫السماح بعكس اإلجراءات بسهولة ‪ -‬تعمل هذه الميزة على تخفيف القلق ‪ ،‬حيث يعلم المستخدم أنه‬
‫يمكن التراجع عن األخطاء‪ .‬من السهل عكس اإلجراءات يشجع استكشاف خيارات غير مألوفة‪ .‬قد‬
‫تكون وحدات قابلية االنعكاس إجراء فرديًا أو إدخال بيانات أو مجموعة كاملة من اإلجراءات‪.‬‬
‫دعم موضع التحكم الداخلي ‪ -‬يرغب المشغلون المتمرسون بشدة في الشعور بأنهم مسؤولون عن‬
‫النظام وأن النظام يستجيب إلجراءاتهم‪ .‬صمم النظام لجعل المستخدمين بادئ اإلجراءات بدالً من‬
‫المستجيبين‪.‬‬
‫‪ .4‬و اخيرا تقليل حمل الذاكرة على المدى القصير ‪ -‬يتطلب الحد من معالجة المعلومات البشرية‬
‫في الذاكرة قصيرة المدى أن تظل شاشات العرض بسيطة ‪ ،‬ويعرض توحيد صفحات متعددة ‪،‬‬
‫وتقليل تردد حركة النافذة ‪ ،‬ووقت تدريب كاف مخصص للرموز ‪ ،‬وذكريات التعبير ‪ ،‬وتسلسل‬
‫اإلجراءات‪.‬‬
 ‫الخالصة‬
‫مرحلة التصميم لبرنامج هي عملية تحليلية لمتطلبات البرنامج الختيار و بناء هيكل البرنامج و أجزاءه و‬
‫كيفية ترابطها مع بعضها البعض‪ ،‬ينتج عن ذلك مجموعة من الملفات و النماذج و الرسومات البيانية‬
‫التي يمكن منها برمجة وكتابة شيفرة البرنامج “بالكامل”‪.‬‬

‫و تنقسم مرحلة التصميم إلى مراحل عديدة من أهمها‪:‬‬

‫• تصميم البنية أو الهيكل ‪Architectural Design‬‬
‫من الهياكل المستخدمة في مرحلة تصميم البنية أو الهيكل‬
‫أ ) هيكل الخادم‪-‬المخدوم (أو الزبون) ()‪Client-Server Architecture‬‬
‫مثال‪ :‬متصفح االنترنت‪.‬‬
‫ب) هيكل الطبقات ()‪Layered Architecture‬‬
‫مثال‪ :‬برامج تحويل و إرسال البيانات عبر الشبكة‪ .‬فتحويل البيانات يستلزم مراحل و كل مرحلة تعتبر‬
‫طبقة‪.‬‬
‫ج) هيكل التخرين أو المخرن ()‪Repository Architecture‬‬
 ‫• تصميم نماذج البرنامج باستخدام اللغة الرسومية ‪UML - Unified Modeling Language‬‬
‫هي لغة رسومية موحدة و متفق عليها دوليا تُستخدم لرسم نماذج “ألجزاء” البرنامج‪ .‬هذه النماذج‬
‫تُستخدم في برمجة البرنامج كامال‪ .‬بعبارة آخرى‪ ،‬اليحتاج المبرمج إلى مستندات متطلبات البرنامج‬
‫“مباشرة”‪ ،‬بل يبرمج البرنامج من هذه الرسوم و النماذج فقط‪ ،‬كالمهندس المعماري الذي ال يحمل‬
‫في يديه أثناء العمل إال تخطيطات المبنى‪.‬‬
‫• تصميم واجهة االستخدام ‪GUI - Graphical User Interface‬‬
‫واجهة االستخدام هي واجهة البرنامج التي يتعامل معها المستخدم‪ .‬وتشمل باألساس الجزئ المرئي‬
‫الذي يتكون عادة من نوافذ و أزرار و حقول كتابة و لون الخلفية و لون الخط… الخ‪.‬‬
‫يتعلق هذا القسم بالجزء الفني و جمالي من البرنامج‪ .‬كم يهتم بسرعة استجابة الواجهة و إمكانيتها‬
‫إعطاء معلومات واضحة و كافية للمستخدم‪ .‬وهناك دراسات كثيرة في هذا المجال تشمل دراسة‬
‫الجانب النفسي لإلنسان و تأثره باأللوان و بطريقة ترتيب األشياء‪.‬‬
‫على سبيل المثال‪ ،‬من النصائح المعروفة في هذا المجال هي‪ :‬ال تستخدام جميع ألوان قوس قزح في‬
‫واجهة برنامجك! ‪ .‬من المفضل استخدام لونين إلى أربع ألوان مختلفة كحد أقصى‪.‬‬
 ‫اسئلة عن المحاضرة‬
‫س‪ :1‬ينبغي أن يولي كل مشتغل في مجال صناعة البرمجيات أهمية كبيرة لعملية التصميم‬
‫نظرا لتأثيرها المباشر على جودة المنتوج المقدم‪-‬ماذا يعني ذلك؟‬
‫س‪ :2‬ماذا يقصد بمبادئ التصميم ‪Design Principles‬؟‬
‫س‪ :3‬عرف النموذج ؟‬
‫س‪ :4‬ما هو ال ‪UML‬؟ و في اي مرحلة من مراحل التصميم يصنف هذا النوع ؟‬
‫ماهو الفرق بين مبادئ ونماذج التصميم؟‬ ‫س‪:5‬‬

‫س‪ :6‬تكلم عن مرحلة تصميم واجهة االستخدام ‪GUI - Graphical User Interface‬؟‬