User Interface Design Lecture #4 PDF

User Interface design Lecture #4  ‫‪.1‬تجميع‬ ‫العناصرالمرتبطة‬ ‫معا‬ ‫‪.8‬استخدام‬ ‫‪.2‬المحافظة‬...

User Interface design Lecture #4  ‫‪.1‬تجميع‬ ‫العناصرالمرتبطة‬ ‫معا‬ ‫‪.8‬استخدام‬ ‫‪.2‬المحافظة‬ ‫أساسيات‬ ‫خطوط‬ ‫علي تناسق‬ ‫واضحة في‬ ‫الواجهة‬ ‫الواجهة‬ ‫أساسيات‬ ‫تصميم‬ ‫تصميم‬ ‫واجهة‬ ‫‪.7‬إضافة‬ ‫‪.3‬إنشاء‬ ‫اشارات مرئية‬ ‫تسلسل هرمي‬ ‫في الواجهة‬ ‫واجهة‬ ‫مرئي‬ ‫المستخدم‬ ‫المستخدم‬ ‫‪.6‬المحافظة‬ ‫‪.4‬المحافظة‬ ‫علي التباين‬ ‫علي بساطة‬ ‫في الواجهة‬ ‫الواجهة‬ ‫‪.5‬استخدام‬ ‫األلوان بشكل‬ ‫هادف‬ ‫‪2‬‬ ‫أساسيات تصميم واجهة المستخدم‬ ‫‪ -‬إنشاء تسلسل هرمي مرئي‪:‬‬ ‫ليست كل المعلومات الموجودة في الواجهة لها نفس‬ ‫المستوي من األهمية ‪،‬لذلك يجب ترتيب المعلومات‬ ‫وتقديم المعلومات االكثر أهمية بشكل واضح‬ ‫وبارزليتم توجيه المستخدم إلي األجزتء األكثر أهمية‬ ‫في التطبيق ‪،‬ويحسن الجماليات ‪.‬‬ ‫‪3‬‬  ‫‪.1‬تباين في‬ ‫اللون‬ ‫المحافظة علي التباين‬ ‫‪.8‬تباين‬ ‫اإليقاع‬ ‫‪.2‬التباين في‬ ‫الحجم‬ ‫في الواجهة‬ ‫أنواع‬ ‫التباين في‬ ‫‪.3‬التباين في‬ ‫‪.7‬التباين في‬ ‫العزلة ‪.‬‬ ‫تصميم‬ ‫الشكل‬ ‫واجهة‬ ‫المستخدم‬ ‫‪.6‬التباين في‬ ‫‪.4‬التباين في‬ ‫اإلتجاه‬ ‫الموضع‬ ‫‪.5‬التباين في‬ ‫الملمس‬ ‫‪4‬‬  ‫المحافظة علي التباين في الواجهة‬ ‫‪.1‬التباين في اللون ‪:‬هو مقياس اإلختالف في سطوع بين لونيين‬ ‫‪.2‬التباين في الحجم ‪:‬جعل العنصر الذي يجب ان يلفت اإلنتباه أوال بحجم أكبر بشكل ملحوظ من‬ ‫العناصر األخري ‪،‬والتباين يكون في الكتابات‬ ‫‪.3‬التباين في الشكل ‪:‬من خالل جعل أحد العناصر مختلفا عن العناصر األخري ‪.‬‬ ‫‪.4‬التباين في الموضع ‪:‬يقوم المصمم بتغيرموضع عنصر واحد في الصف مما يجعله يبدو‬ ‫مختلفا عن العناصر األخري ‪.‬‬ ‫‪.5‬التباين في الملمس ‪:‬من خالل استخدام مواد تتميز بالوضوح عن بعضها البعض ‪.‬‬ ‫‪.6‬التباين في اإلتجاه ‪:‬يمكن تغير الموضع الفعلي للعنصر ‪،‬مما يجعله يستخدام اتجاهات أخري‬ ‫أخري أو غير متوقع‬ ‫‪.7‬التباين بالعزلة ‪:‬الذي ينتج من وضع كلمة أو عبارة واحدة بعيدا عن العناصر األخري ‪،‬وبهذا‬ ‫تبرز بين الحشود‬ ‫‪.8‬التباين باإليقاع‪:‬الذي ينتج من خالل الفواصل ‪،‬فاألجزاء التي يتم كسرها تحددالتباين وتجذب‬ ‫اإلنتباه ‪.‬‬ ‫‪5‬‬  ‫المحافظة علي التباين في الواجهة‬ ‫‪ -‬إضافة إشارات مرئية في واجهة المستخدم ‪:‬‬ ‫ال يجب اإلعتماد علي اللون وحده كمؤشر ‪،‬فهناك العديد من األنواع المختلفة لعمي األلوان (ال‬ ‫يستطيعوا التميز بين األحمر واألخضر ‪ ،‬والبعض العمي الكلي )‪.‬‬ ‫‪-‬استخدام خطوط واضحة في واجهة المستخدم ‪:‬‬ ‫للوضوح والبساطة‬ ‫‪7‬‬  ‫متحكمات واجهة المستخدم‬ ‫متحكمات واجهة المستخدم هي البناء األساسي لواجهة أي تطبيق إذ يساعد استعمالها السليم‬ ‫المستخدم في التعرف علي منتجك كما ترغب ويشعره باأللفة كما يمكنه من تعلمه حتي لو لم‬ ‫يستخدم المنتج من قبل ‪.‬‬ ‫أنواع متحكمات واجهة المستخدم ‪:‬‬ ‫‪.1‬متحكمات الدخل ‪:‬مثل المتحكمات التي نراها في نموذج اإلدخال ‪.‬‬ ‫‪.2‬متحكمات التنقل ‪ :‬التي تسمع للمستخدمين بالتنقل في التطبيق أو الموقع ‪.‬‬ ‫‪.3‬متحكمات الخرج ‪:‬التي توصل المعلومات للمستخدم ‪.‬‬ ‫‪8‬‬ ‫متحكمات واجهة المستخدم‬ ‫‪.1‬األزرار ‪:Buttons‬‬ ‫‪ -‬يجب أن تكون مقروئية و وضوح وسهولة‬ ‫اإلستخدام االزرار حتي عندما يتعامل معها‬ ‫أقل مستخدمي الحاسوب خبرة‪،‬يفضل‬ ‫استخدمها إلجراء األعمال المهمة ‪،‬فكاما زاد‬ ‫عدد األزرار التي تضيفها إلي الصفحة ‪،‬قل‬ ‫وضوحها وسهولة استخدامها ‪،‬لذل يجب‬ ‫اختيارها بحكمة كما يوضخ الشكل التالي‬ ‫‪ -‬توجد ‪3‬أزرار فقط تستخدم وفق ترتيب‬ ‫منطقي ‪:‬‬ ‫‪ -‬اشتراآلن‪.‬‬ ‫‪ -‬إضافة إلي سلة المبيعات‬ ‫‪ -‬بيع األن‬ ‫‪9‬‬ ‫متحكمات واجهة المستخدم‬ ‫‪-‬االستخدام الرئيسي‬ ‫‪ -‬حاالت الزر‬ ‫‪ -‬التنوع‬ ‫‪10‬‬ ‫متحكمات واجهة المستخدم‬ ‫‪.2‬مدخل النص ‪Text input‬‬ ‫تستخدم إلدخال بيانات في النموذج ‪،‬مثل رقم‬ ‫الهاتف ‪،‬اسم المستخدم ‪،‬أو كلمة المرور أو‬ ‫تعليق ‪.‬وهي من المكونات األساسية في‬ ‫النموذج‪،‬اذ تستخدم بالتكرارفي البحث‬ ‫والتعليقات والدردشة كما هو في الشكل ‪.‬‬ ‫متي يستخدم ‪ :‬فمثال عند السؤال علي دولة أو‬ ‫عن حالة اجتماعية أو طرق الدفع ‪.‬‬ ‫او يستخدم عندما ال يمكنك بالتنبؤ بإجابة‬ ‫المستخدميين وعند احتمال تنوع كبير في‬ ‫اجاباتهم ‪.‬‬ ‫‪11‬‬ ‫متحكمات واجهة المستخدم‬ ‫‪-‬االستخدام العادي‬ ‫‪ -‬حاالت‬ ‫‪12‬‬ ‫متحكمات واجهة المستخدم‬ ‫‪ -‬التنوع‬ ‫‪13‬‬ ‫متحكمات واجهة المستخدم‬ ‫‪.3‬القائمة المنسدلة ومربع التحرير ‪:‬‬ ‫‪ -‬تستخدم لعرض عدد كبير من الخيارات‬ ‫دون شغل مساحة كبيرة في الصفحة ‪.‬‬ ‫‪ -‬من عيوبها عدم قدرة المستخدم علي‬ ‫رؤية جميع الخيارات كلها دفعة واحدة او‬ ‫يحتاج وقتا ومهارة التمرير ‪،‬وهنا‬ ‫ببساطة يمكننا استخدام مربع التحرير‪.‬‬ ‫‪ -‬وفقا لمعايير تصميم الويب األمريكية‬ ‫‪،‬فالعدد المثالي لعناصر القائمة المنسدلة‬ ‫يجب ان يكون بين سبعة وخمسة عشر‬ ‫عنصرا ‪ ،‬ويقترح أزرار اإلنتقاء‬ ‫‪ Radio button‬أو مربع اإلنتقاء‬ ‫‪ Boxes Check‬للقوائم القصيرة‬ ‫‪14‬‬ ‫متحكمات واجهة المستخدم‬ ‫‪ -‬اإلستخدام الرئيسي‬ ‫‪ -‬حاالت القائمة المنسدلة‬ ‫‪ -‬التنوع‬ ‫‪15‬‬ ‫متحكمات واجهة المستخدم‬ ‫‪ -‬التنوع‬ ‫‪16‬‬ ‫متحكمات واجهة المستخدم‬ ‫‪.4‬زر اإلنتقاء ومربع اإلنتقاء‬ ‫يجب استخدام عنوان لوصف كل مجموعة‬ ‫خيارات ما لم يكن المربع لخيار واحد ‪.‬‬ ‫‪17‬‬ ‫متحكمات واجهة المستخدم‬ ‫‪ -‬اإلستخدام الرئيسي‬ ‫‪18‬‬ ‫متحكمات واجهة المستخدم‬ ‫‪ -‬التنوع‬ ‫‪19‬‬ ‫متحكمات واجهة المستخدم‬ ‫‪.5‬الروابط ‪: Links‬‬ ‫هي الطرق األساسية للتنقل من صفحة‬ ‫ألخري في الويب ‪،‬وهي شائعة في‬ ‫تطبيقات الويب وتطبيقات المكتبية الشبيهة‬ ‫بالويب ‪،‬اذ تكمن قوتها في بساطتها ‪،‬وقد‬ ‫تضمن في النص العادي ‪ ،‬مما يسمح‬ ‫للمستخدم قراءة المحتوي دون مقاطعته‬ ‫‪،‬هذا مع اشارة الرابط إلي المحتوي‬ ‫المرتبط به متاح للقراءة‬ ‫‪20‬‬ ‫متحكمات واجهة المستخدم‬ ‫‪ -‬االستخدام العادي‬ ‫‪ -‬الحاالت ‪:‬‬ ‫‪.1‬افتراضي ‪:default‬رابط عادي وليس‬ ‫مختارا‪.‬‬ ‫‪.2‬المقروء بالتحويم عليه ‪:hover‬عندما‬ ‫تمرر الفأرة علي الربط يصبح مقروءا‬ ‫‪.3‬نشيط ‪ :active‬يصبح الرابط نشيط‬ ‫عند الضغط عليه ‪.‬‬ ‫‪.4‬مزار‪: Visited‬يصبح الرابط مزارا‬ ‫بعد استخدامه ‪.‬‬ ‫‪21‬‬ ‫متحكمات واجهة المستخدم‬ ‫‪ -‬التنوع ‪:‬‬ ‫من المفيد اإلشارة إلي الروابط التي تنتقل‬ ‫إلي مواقع خارجية باستخدام رمز صغير‬ ‫كما في الشكل‬ ‫‪22‬‬  ‫متحكمات واجهة المستخدم‬ ‫‪.6‬مسار التنقل ‪:breadcrumb‬‬ ‫طريقة مختصرة إلظهار التسلسل الهرمي للتنقالت ضمن مستويات متعددة الموقع ‪.‬‬ ‫عندما تكون المساحة (خاصة في اإلتجاه األفقي )محدودة ‪.‬وذلك عند استخدام الهاتف‬ ‫المحمول‬ ‫‪23‬‬ ‫متحكمات واجهة المستخدم‬ ‫‪ -‬االستخدام العادي ‪:‬‬ ‫‪ -‬التنوع ‪:‬‬ ‫‪24‬‬ ‫متحكمات واجهة المستخدم‬ ‫التنقل العمودي ‪:Vertical Navigation‬‬ ‫‪25‬‬ ‫متحكمات واجهة المستخدم‬ ‫التنقل العمودي ‪:Vertical Navigation‬‬ ‫‪26‬‬ ‫التنوع ‪:‬‬ ‫متحكمات واجهة المستخدم‬ ‫شريط القوائم ‪:Menu Bar‬‬ ‫أهم ما يميزها ثباتها ‪،‬أي إمكانية الوصول إليها دائما‬ ‫‪28‬‬