تصميم واجهات المستخدم المحاضرة الأولى User Interface Design

تصميم واجهات المستخدمالمحاضرة الأولىUser Interface Design أ.مرام المغربي

أ. مرام المغربي تصميم واجهات المستخدم الفصل الدراسي الثاني 1435 مقدمة عامة تاريخ وتعريفات • الاتصال الوسيط Mediated Communication • تفاعل الإنسان والآلة Human-Computer Interaction • هندسة الاستخدامية usability engineering (البرامج) • استخدامية الويب Web usability (مواقع الويب) • واجهة المستخدم User Interface (UI) هي تلك الأجزاء من النظام (المادية والبرامجية) التي يتفاعل معها المستخدم.

أ. مرام المغربي تصميم واجهات المستخدم الفصل الدراسي الثاني 1435 يتبع.. • بنائية المعلومات information architecture • المعرفة المرئية knowledge visualization • الكتابة للويب writing for the Web • تصميم واجهات المستخدم User Interface Design (UID)

أ. مرام المغربي تصميم واجهات المستخدم الفصل الدراسي الثاني 1435 تاريخ الواجهات مخترع الواجهة الرسومية دوغلاس عام 1962م حيث صرح وقال ” بأن الحواسيب الرقمية يمكن أن تصبح أسرع طريقة لـ”زيادة فاعلية الجنس البشري في التعامل مع المشاكل الصعبة والمعقدة ، والحصول على فهم يلائم احتياجاتنا الخاصة ، واستنباط حلول مناسبة للمشاكل التي نواجهها” كانت هذه قفزة كبيرة في التفكير بالنسبة لعام 1962. لان الحواسيب الموجودة في تلك الفترة عبارة عن حاسبات عملاقة يتم التعامل معها باستخدام ما يسمى بـ”المعالجة بالدفعات”.. ” A History of the GUI ,2005 http://arstechnica.com/features/2005/05/gui/1/ المرجع :

أ. مرام المغربي تصميم واجهات المستخدم الفصل الدراسي الثاني 1435 NLS أو نظام on-Line نظام مبني على تقنية الرسوم الخطية بحيث يمكن عرض كل من النص و السطور على نفس الشاشة. وبسبب محدودية ذاكرة الأجهزة ذلك الوقت، كان بالإمكان فقط عرض الأحرف الإنجليزية الكبيرة.

أ. مرام المغربي تصميم واجهات المستخدم الفصل الدراسي الثاني 1435 • لوحة مفاتيح من طراز آلة الكاتبة القديمة ، ولوحة مفاتيح “وترية” بمفاتيح خمسة بحيث مجموعات من المفاتيح الخمسة يمكن أن تولد 2^5 أو 32 مدخل منفصل تكفي لتمثيل جميع الأحرف الهجائية ، وصندوق مستطيل الشكل بحجم علبتي عصير مع ثلاثة أزار في الأعلى ، متصل بالحاسوب باستخدام سلك كهربائي طويل.

أ. مرام المغربي تصميم واجهات المستخدم الفصل الدراسي الثاني 1435 محاولة تجربة أدوات إدخال أخرى (مثل الأقلام الضوئية وشاشات اللمس) ، ولكن التجارب وجدت أن المستخدم يفضل استخدام الفأرة باعتبارها أفضل الطرق الطبيعية في التعامل مع مؤشر الشاشة ، وحتى اليوم لم تتغير هذه النظرة.

أ. مرام المغربي تصميم واجهات المستخدم الفصل الدراسي الثاني 1435

أ. مرام المغربي تصميم واجهات المستخدم الفصل الدراسي الثاني 1435 Smalltalk سمالتالك • كانت سمالتالك أول لغة برمجية كائنية التوجه ، حيث يتم احتواء شفرة وبيانات البرنامج ضمن وحدات مفردة أطلق عليها اسم كائنات objects ، وتتلخص فائدتها في إمكانية إعادة استخدامها مرات عدة من قبل برامج أخرى دون الحاجة لمعرفة التفاصيل الداخلية. كما كانت تحتوي أيضا على خصائص حديثة مشابهة للغة جافا كإدارة الذاكرة التلقائية • سمالتالك كانت عبارة عن بيئة تطوير رسومية (مثلها مثل أي بيئة تطوير رسومية حديثة)

أ. مرام المغربي تصميم واجهات المستخدم الفصل الدراسي الثاني 1435 لقطة للشاشة من جهاز زيوركس

أ. مرام المغربي تصميم واجهات المستخدم الفصل الدراسي الثاني 1435 جهاز ليسا من شركة ابل نموذج لواجهة استخدام جهاز ليسا المبدئية حوالي عام 1979م

أ. مرام المغربي تصميم واجهات المستخدم الفصل الدراسي الثاني 1435 نظام ماكنتوش

أ. مرام المغربي تصميم واجهات المستخدم الفصل الدراسي الثاني 1435 واجهة استخدام VisiOn في الثمانينيات

أ. مرام المغربي تصميم واجهات المستخدم الفصل الدراسي الثاني 1435 النموذج المبدئي لنظام ويندوز حوالي 1983.

أ. مرام المغربي تصميم واجهات المستخدم الفصل الدراسي الثاني 1435 Tandy DeskMate

أ. مرام المغربي تصميم واجهات المستخدم الفصل الدراسي الثاني 1435 Workbench واجهةتعمل على جهاز اوميجا 1000.

أ. مرام المغربي تصميم واجهات المستخدم الفصل الدراسي الثاني 1435 نسخة ويندوز 2.0. لاحظي وجود خاصية تصغير/تكبير النوافذ الجديدة وخاصية تداخل النوافذ.

أ. مرام المغربي تصميم واجهات المستخدم الفصل الدراسي الثاني 1435 Acorn

أ. مرام المغربي تصميم واجهات المستخدم الفصل الدراسي الثاني 1435 NeXTstep.

أ. مرام المغربي تصميم واجهات المستخدم الفصل الدراسي الثاني 1435 تخطى ويندوز 95 كل إحصائيات المبيعات وأصبح الواجهة الرسومية الأكثر شعبية على مدى العصور

أ. مرام المغربي تصميم واجهات المستخدم الفصل الدراسي الثاني 1435 نظام ماك أو أس

أ. مرام المغربي تصميم واجهات المستخدم الفصل الدراسي الثاني 1435 Windows 2000

أ. مرام المغربي تصميم واجهات المستخدم الفصل الدراسي الثاني 1435 Windows XP

أ. مرام المغربي تصميم واجهات المستخدم الفصل الدراسي الثاني 1435 Windows Vista

أ. مرام المغربي تصميم واجهات المستخدم الفصل الدراسي الثاني 1435 الهدف من واجهات المستخدم • الهدف الأساسي هو لجعل العمل مع النظام: • سهل Easy • آمن Secure or Save • عملي Effective او منتج Productive او فعال Efficiently • ممتع Enjoyable • سريع

أ. مرام المغربي تصميم واجهات المستخدم الفصل الدراسي الثاني 1435 عناصر واجهات المستخدم • المدخلات Input: تحدد كيفية تواصل المستخدم مع النظام. من الأمثلة: لوحة المفاتيح-الفأرة-اللمس-الصوت..... • المخرجات Output: تحدد كيفية تواصل النظام مع المستخدم. من الأمثلة: الشاشة-الطابعة-السماعة الصوتية..... • تصميم الشاشات Screen Design: تحدد شكل الشاشة وتوزيع الكائنات والصور والنصوص عليها ..... (يمكن اعتبارها من عناصر المخرجات)

أ. مرام المغربي تصميم واجهات المستخدم الفصل الدراسي الثاني 1435 أنواع تصميم واجهات المستخدم • تصميم الواجهات الرسومية Graphical User Interface Design • تصميم واجهات مواقع الويبWeb Design • تصميم الواجهات النصية Text-Based Interface Design

نموذج التصميم التقييم التنفيذ أ. مرام المغربي تصميم واجهات المستخدم الفصل الدراسي الثاني 1435 مراحل تصميم واجهات المستخدم • تحديد الأهداف. • دراسات المستفيدين. • تحليل المهام. • النموذج المبدئي Prototype • الاختبار والتقويم. • التصميم Design • التنفيذImplementation • التقييم والاختبارTesting & Evaluation

أ. مرام المغربي تصميم واجهات المستخدم الفصل الدراسي الثاني 1435 مرحلة التصميم قد تتضمن 4 مراحل • التصميم المرتكز على النظام System-Centered Design • Task Analysis • التصميم المرتكز على المستخدم User-Centered Design يسمى أحيانا نموذج المستخدم User Model او النموذج التصوري Mental Model والذي يصف مفهوم المستخدم عن النظام ووظائفه وطريقة عمله... • نموذج المصمم Designer Model او النموذج الإدراكي Conceptual model الذي يصف مفهوم المصمم عن الطريقة التي يعمل ويستخدم بها النظام • نموذج المنفذ والمطور Implementer & Developer Model

أ. مرام المغربي تصميم واجهات المستخدم الفصل الدراسي الثاني 1435 المسئول عن بناء او تصميم الواجهات فريق تصميم الواجهات) • مصمم الجرافيكس Graphic Designer • مصمم الواجهات التفاعليةInteraction / Interface Designer • الكاتب التقني Technical Writer • المسوق Marketer • المهندس الفني Test Engineer • مهندس البرامج Software Engineer • المستخدم(الزبون) User (Customer)

أ. مرام المغربي تصميم واجهات المستخدم الفصل الدراسي الثاني 1435 أنتهت المحاضرة الأولى

تصميم واجهات المستخدم المحاضرة الأولى User Interface Design