واجهة المستخدم (UI) - كتاب هندسة البرمجيات - الصف 12 - الفصل 1 - المملكة العربية السعودية

--- SECTION: واجهة المستخدم (UI) --- واجهة المستخدم (UI) User Interface إن واجهة المستخدم (UI) هي نقطة التفاعل والتواصل بين الإنسان والحاسب داخل الجهاز. ويُمكن القول بأن واجهة المستخدم هي الشكل الرسومي للتطبيق، وتتضمن الأزرار، والنصوص المقروءة، والصور، وأشرطة التمرير، وحقول إدخال النص، إضافة إلى العديد من العناصر الأخرى التي يتفاعل معها المستخدم. تحتوي واجهة المستخدم أيضًا على تخطيط الشاشة، والانتقالات، والتأثيرات المتحركة لواجهة المستخدم الرسومية، وجميع التفاصيل الدقيقة للتفاعل، وأي تأثيرات رسومية بحاجة إلى تصميم. --- SECTION: شكل 2.17: واجهة المستخدم للأجهزة اللوحية --- شكل 2.17: واجهة المستخدم للأجهزة اللوحية تتمثل مهمة مصممي واجهة المستخدم (UI) في تحديد مظهر التطبيق، وفي إنشاء شكل واجهة مستخدم التطبيق ومظهرها، ويتعين على المصمم اختيار أنظمة الألوان وأشكال الأزرار، وأنواع خطوط النص وحجمها، وطريقة عرضها. --- SECTION: اعتبارات إنشاء واجهة مستخدم جيدة --- اعتبارات إنشاء واجهة مستخدم جيدة: ترتبط اعتبارات تصميم واجهة المستخدم بالعديد من العلوم والتخصصات الأخرى، كعلم النفس والفنون الجميلة، كما تأخذ بالاعتبار ما يلي: 1. يجب أن يشير شكل الأزرار والعناصر الأخرى إلى وظيفتها، ويجب أن يسمح التصميم للمستخدم باستكشاف هذه الوظائف بسهولة. 2. يجب تصميم الواجهات وإضافتها بشكل صحيح ومناسب للمستخدم، بحيث تكون عناصر التحكم مجاورة للأشياء المرتبطة بها. وزارة التعليم Ministry of Education 2023 - 1447 86 --- VISUAL CONTEXT --- **IMAGE**: شكل 2.17: واجهة المستخدم للأجهزة اللوحية Description: An image of a hand interacting with a tablet displaying a user interface. The screen shows various icons and widgets, including weather information (17°C, cloudy), settings, security, camera, and possibly music or other applications. The interface is predominantly green and white. Context: Illustrates a typical user interface on a tablet device, demonstrating the visual elements and interaction points discussed in the text. **DIAGRAM**: أزرار تبديل (ON/OFF) Description: Two toggle buttons. The left button is red with 'OFF' text and a power icon, indicating a disabled state. The right button is green with 'ON' text and a power icon, indicating an enabled state. Key Values: OFF, ON Context: Examples of user interface elements (buttons) that clearly indicate their state and function, relating to consideration 1 about clear functionality. **DIAGRAM**: أيقونات واجهة المستخدم Description: A row of four distinct user interface icons: an 'i' in a circle (information), a gear (settings), a speaker with sound waves (volume/audio), and a globe (world/language/internet). Context: Examples of common UI icons that represent specific functions, relating to consideration 1 and 2 about clear functionality and appropriate placement.