محاضرة تصميم واجهات التفاعل لطلاب الفرقة الثانية إعلام - جامعة النهضة

1. By : Dr. Mostafa gawdat
www.mostafa-gawdat.net

2. ‫األول‬ ‫تصميمنا‬ ‫لنبدأ‬
‫نتفق‬ ‫أن‬ ‫يجب‬ ‫األول‬ ‫تصميمنا‬ ‫نبدأ‬ ‫أن‬ ‫قبل‬
‫نتبعها‬ ‫أسس‬ ‫عدة‬ ‫على‬.

3. ‫ا‬‫أول‬ ‫فلنتفق‬
‫كمبيوترية‬ ‫مادة‬ ‫نصمم‬ ‫نحن‬
 Design for the computer medium
‫ككل‬ ‫للموقع‬ ‫موحد‬ ‫تصميم‬ ‫لعمل‬ ‫نحتاج‬
 Create a unified site design
‫المستخدم‬ ‫مراعاة‬(‫الجمهور‬)‫تصميمنا‬ ‫في‬
 Design for the user
‫وليس‬ ‫الشاشة‬ ‫على‬ ‫تعرض‬ ‫مادة‬ ‫نصمم‬ ‫نحن‬
‫ملصقات‬ ‫أو‬ ‫ورقية‬ ‫مادة‬
 Design for the screen

4. ‫الكمبيوترية‬ ‫المواد‬ ‫تصميم‬
‫عمل‬ ‫منصات‬ ‫على‬ ‫تصميمك‬ ‫يعمل‬ ‫أن‬ ‫راعي‬
‫متعددة‬(‫متعددة‬ ‫مستعرضات‬)
 Design for Cross Platform
‫نطاق‬ ‫سعة‬ ‫تصميمك‬ ‫يستهلك‬ ‫ال‬ ‫أن‬ ‫راعي‬
‫الشبكة‬.
 Design for low bandwidth
‫إلى‬ ‫الوصول‬ ‫معه‬ ‫يسهل‬ ‫واضح‬ ‫لتصميم‬ ‫خطط‬
‫معلوماتك‬.
 Plan for clear presentation and easy
access to your information

5. ‫متعددة‬ ‫عمل‬ ‫منصات‬ ‫مع‬ ‫التوافق‬
‫بشكل‬ ‫يعمل‬ ‫أن‬ ‫يجب‬ ‫اإللكتروني‬ ‫موقعك‬
‫نظام‬ ‫أو‬ ‫المستعرض‬ ‫عن‬ ‫النظر‬ ‫بغض‬ ‫صحيح‬
‫الكمبيوتر‬ ‫جهاز‬ ‫نوع‬ ‫أو‬ ‫التشغيل‬.
 Your Web should be accessible across
different browsers, operating systems,
and computer platforms
‫من‬ ‫واثقا‬ ‫كنت‬ ‫لو‬ ‫حتى‬ ‫تصميمك‬ ‫دوما‬ ‫اختبر‬‫ه‬.
 Remember to test your work even when
you feel confident of your results

6. ‫الشبكة‬ ‫نطاق‬ ‫سعة‬ ‫مراعاة‬
‫يجب‬‫الال‬‫م‬ ‫أكثر‬ ‫الصفحة‬ ‫تحميل‬ ‫يستغرق‬‫ن‬7
‫ثواني‬7 Second Rule.
‫الس‬ ‫مع‬ ‫لتتفق‬ ‫صفحتنا‬ ‫نصمم‬ ‫أن‬ ‫يفضل‬‫رعات‬
‫لإلنترنت‬ ‫المختلفة‬.
 Plan your pages so that they are
accessible at a variety of connection
speeds.

7. ‫التالي‬ ‫التصميم‬ ‫راجع‬

9. ‫العرض‬ ‫وأسلوب‬ ‫الشكل‬ ‫تحديد‬
‫توحيد‬ ‫راعي‬‫الثمة‬‫تصميمك‬ ‫في‬ ‫والبنية‬.
 Plan with unifying themes and Structures
‫للحفاظ‬ ‫والعرضية‬ ‫الطولية‬ ‫الخطوط‬ ‫استخدم‬
‫للصفحة‬ ‫البصرية‬ ‫البنية‬ ‫على‬.
 Use a grid to provide visual structure
‫الفعالة‬ ‫البيضاء‬ ‫المساحات‬ ‫استخدم‬.
 Use active white space

10. ‫الحالية‬ ‫للصفحة‬ ‫جيدا‬ ‫أنظر‬

11. ‫بالساب‬ ‫الحالية‬ ‫الصفحة‬ ‫قارن‬‫قة‬

12. ‫الصفحة‬ ‫بنية‬ ‫على‬ ‫للحفاظ‬ ‫الخطوط‬ ‫استخدم‬
Use a grid to provide visual structure

13. ‫الفع‬ ‫البيضاء‬ ‫المساحات‬ ‫استخدم‬‫الة‬

15. ‫تصميمك‬ ‫في‬ ‫المستخدم‬ ‫راعي‬
 Keep your design efforts centered
around your user
 Design for interaction
 Design for location
 Guide the user’s eye
 Decide whether the user will read or
scan

18. ‫للمسح‬ ‫مصممة‬ ‫صفحة‬‫للقراءة‬ ‫مصممة‬ ‫صفحة‬
‫للمستخ‬ ‫وفقا‬ ‫الصفحات‬ ‫تصميم‬‫دم‬

19. ‫التفضي‬ ‫مناطق‬ ‫حسب‬ ‫التصميم‬‫ل‬

20. ‫التفضيل‬ ‫لمناطق‬ ‫مثال‬

21. ‫القراءة‬ ‫التجاه‬ ‫وفقا‬ ‫التصميم‬

22. ‫المسح‬ ‫اتجاه‬ ‫حسب‬ ‫التصميم‬