1. ‫مقدماتی‬ ‫آموزش‬ ‫کارگاه‬
‫کارب‬ ‫واسط‬ ‫طراحی‬ ‫و‬ ‫کاربری‬ ٔ‫تجربه‬ ‫طراحی‬‫ری‬
‫اول‬ ‫جلسه‬/۹‫اسفند‬۹۷/‫پناه‬‫محمدی‬ ‫اسماعیل‬

2. ‫پناه‬‫محمدی‬ ‫اسماعیل‬
‫کاربری‬ ‫تجربه‬ ‫طراح‬/‫کاربری‬ ‫واسط‬ ‫طراح‬/‫خدمات‬ ‫طراح‬
esmailmp@gmail.com

3. ‫دهیم‬‫می‬ ‫انجام‬ ‫دوره‬ ‫این‬ ‫در‬ ‫چه‬‫آن‬
‫جلسه‬‫سوم‬
‫کاربری‬ ‫تجربه‬ ‫های‬‫آزمایش‬ ‫با‬ ‫آشنایی‬
‫گرا‬‫واکنش‬ ‫طراحی‬ ‫با‬ ‫آشنایی‬
‫شده‬ ‫انجام‬ ‫های‬‫پروژه‬ ‫بررسی‬ ‫و‬ ‫نقد‬
‫ها‬‫پروژه‬ ‫ارائه‬
‫جلسه‬‫دوم‬
‫ت‬ ‫شده‬ ‫تهیه‬ ‫های‬‫وایرفریم‬ ‫بررسی‬ ‫و‬ ‫نقد‬‫ا‬
‫دوم‬ ‫جلسه‬
‫کاربری‬ ‫واسط‬ ‫طراحی‬ ‫با‬ ‫آشنایی‬
‫سازی‬‫وپیاده‬ ‫فردی‬ ‫فعالیت‬ ‫آغاز‬
‫افزار‬‫نرم‬ ‫در‬ ‫ها‬‫وایرفریم‬
‫جلسه‬‫اول‬
‫کاربری‬ ‫تجربه‬ ‫طراحی‬ ‫با‬ ‫آشنایی‬
‫طراحی‬ ‫پروژه‬ ‫انجام‬ ‫چگونگی‬ ‫با‬ ‫آشنایی‬
‫فعال‬ ‫آغاز‬ ‫و‬ ‫نفره‬ ‫سه‬ ‫های‬‫تیم‬ ‫تشکیل‬‫یت‬
‫گروهی‬

4. .‫مناسب‬ ‫های‬‫پاسخ‬ ‫کردن‬ ‫پیدا‬ ‫و‬ ‫مهم‬ ‫سواالت‬ ‫یافتن‬ ‫توانایی‬.‫نوآورانه‬ ‫و‬ ‫خالقانه‬ ‫مسئله‬ ‫حل‬.‫ت‬ ‫ایجاد‬ ‫و‬ ‫ارزش‬ ‫خلق‬‫مایز‬
.‫زندگی‬ ‫سبک‬ ‫تغییر‬ ‫و‬ ‫ایجاد‬.‫تجربه‬ ‫بهبود‬ ‫یا‬ ‫ساخت‬.‫بهبود‬ ‫یا‬ ‫ساخت‬‫رفتار‬‫کاربران‬.‫کس‬ ‫در‬ ‫موثر‬ ‫عامل‬‫کار‬ ‫و‬ ‫ب‬

5. ‫دیزاین‬ ‫کلی‬ ‫فرآیند‬
‫بررسی‬ ‫شناخت‬ ‫توسعه‬ ‫ارائه‬

6. ‫چیست؟‬ ‫کاربری‬ ‫تجربه‬

7. ‫کارب‬ ٔ‫تجربه‬ ‫کردن‬ ‫بهتر‬ ‫منظور‬ ‫به‬ ‫طراحی‬‫از‬ ‫ر‬
‫خدمت‬ ‫یا‬ ‫محصول‬ ‫از‬ ‫استفاده‬
‫کاربری‬ ‫تجربه‬(‫صورت‬ ‫هر‬ ‫در‬)‫تبدیل‬ ‫بهتری‬ ‫چیز‬ ‫به‬ ‫را‬ ‫آن‬ ‫باید‬ ‫شما‬ ،‫شود‬‫می‬ ‫خلق‬‫کنید‬.

8. ‫است؟‬ ‫مهم‬ ‫کاربری‬ ‫تجربه‬ ‫طراحی‬ ‫چرا‬
•‫محصول‬ ‫یک‬ ‫شکست‬ ‫یا‬ ‫موفقیت‬/‫کاربران‬ ‫جذب‬ ‫در‬ ‫خدمت‬
•‫محصول‬ ‫توانایی‬/‫بازگشت‬ ‫نرخ‬ ‫بردن‬ ‫باال‬ ‫و‬ ‫کاربران‬ ‫نگهداشت‬ ‫در‬ ‫خدمت‬
•‫محصول‬ ‫موفقیت‬/‫کاربرانش‬ ‫سوی‬ ‫از‬ ،‫سایرین‬ ‫به‬ ‫شدن‬ ‫معرفی‬ ‫در‬ ‫خدمت‬
•‫کاربران‬ ‫در‬ ‫خشنودی‬ ‫یا‬ ‫رضایت‬ ‫ایجاد‬
•‫ارزش‬ ‫کسب‬ ‫و‬ ‫کار‬ ‫و‬ ‫کسب‬ ‫موفقیت‬

9. ‫کاربری‬ ‫تجربه‬ ‫طراح‬ ‫کاری‬ ‫های‬‫فرصت‬
•‫طراحی‬ ‫استودیوهای‬ ‫و‬ ‫ها‬‫استارتاپ‬
•‫های‬‫شرکت‬‫افزاری‬‫نرم‬
•‫های‬‫آژانس‬‫آنالین‬ ‫تبلیغات‬
•‫ای‬‫رسانه‬ ‫چند‬ ‫های‬‫شرکت‬
•‫لنسینگ‬‫فری‬

11. ‫کردن‬ ‫همدلی‬ ‫آنالیز‬ ‫پردازی‬‫ایده‬ ‫سازی‬‫نمونه‬ ‫ارزیابی‬ ‫کردن‬ ‫تکرار‬
‫کاربر‬ ‫طراحی‬‫محور‬(‫محور‬‫انسان‬)
User-centered design

12. ‫کاربری‬ ‫تجربه‬ ‫طراحی‬ ‫مسیر‬
‫پژوهش‬:،‫ها‬‫داده‬ ‫تحلیل‬ ‫و‬ ‫آوری‬‫جمع‬،‫رقبا‬ ‫شناخت‬ ‫و‬ ‫بررسی‬‫کاربران‬ ‫و‬ ‫مخاطبان‬ ‫شناخت‬
‫اکتشاف‬:‫کند‬ ‫خشنود‬ ‫را‬ ‫کاربران‬ ‫که‬ ‫هایی‬‫حل‬‫راه‬ ‫ارائه‬ ‫و‬ ‫پردازی‬‫ایده‬.
‫دیزاین‬:‫عملی‬ ‫شکلی‬ ‫به‬ ‫آنها‬ ‫توسعه‬ ‫و‬ ‫ها‬‫حل‬‫راه‬ ‫بهترین‬ ‫انتخاب‬
‫خلق‬:‫سریع‬ ‫سازی‬‫نمونه‬ ،‫وایرفریم‬ ‫رسم‬
‫تکرار‬ ‫و‬ ‫آزمایش‬:‫نیازها‬ ‫و‬ ‫اهداف‬ ‫با‬ ‫تطابق‬ ‫بررسی‬ ،‫کاربران‬ ‫با‬ ‫شده‬‫دیزاین‬ ‫نمونه‬ ‫آزمودن‬

13. ‫کاربردپذیری‬
‫آن‬ ‫با‬ ‫کردن‬ ‫کار‬ ‫آیا‬
‫است؟‬ ‫ساده‬
‫محتوا‬ ‫راهبرد‬
‫متن‬ ‫از‬ ‫چیزی‬ ‫چه‬
‫در‬ ‫ها‬‫رسانه‬ ‫سایر‬ ‫و‬
‫است؟‬ ‫آن‬
‫اطالعات‬ ‫معماری‬
‫ساختار‬ ‫آیا‬
‫است؟‬ ‫فهم‬‫قابل‬
‫بصری‬ ‫دیزاین‬
‫نظر‬ ‫به‬ ‫چطور‬
‫آید؟‬‫می‬
‫تعاملی‬ ‫دیزاین‬
‫مواجه‬ ‫آن‬ ‫با‬ ‫چطور‬
‫شوند؟‬‫می‬

14. ‫کاربری‬ ‫تجربه‬ ‫طراحی‬ ‫ابزارهای‬
•‫کاربرپژوهی‬
•‫پرسونا‬ ‫ساخت‬
•‫کاربری‬ ‫سناریوی‬
•‫برد‬ ‫استوری‬
•‫مشتری‬ ‫سفر‬ ‫نقشه‬
•‫وایرفریم‬ ‫و‬ ‫اسکچ‬ ‫کشیدن‬
•‫سریع‬ ‫سازی‬‫نمونه‬

15. ‫کاربرپژوهی‬
‫کاربری‬ ‫تجربه‬ ‫طراحی‬ ‫حین‬ ‫و‬ ‫قبل‬ ‫کاربر‬ ‫درک‬
•‫تمرکز‬ ‫گروه‬Focus groups
•‫مصاحبه‬Interviews
•‫ایملی‬ ‫نظرسنجی‬Email surveys
•‫برداری‬‫عکس‬ ‫و‬ ‫فیلم‬Camera studies
•‫مستقیم‬ ‫مشاهده‬Direct observation
•‫ها‬‫کارت‬ ‫سازی‬‫مرتب‬Card sorting
•‫چشم‬ ‫کردن‬ ‫دنبال‬Eye tracking
•‫ها‬‫کلیک‬ ‫جریان‬ ‫تحلیل‬Clickstream analysis
•‫آ‬ ‫آزمون‬/‫ب‬A/B testing
•‫کاربردپذیری‬ ‫مطالعه‬Usability studies

16. ‫پرسونا‬ ‫ساخت‬

17. ‫اول‬ ‫مرحله‬
‫فکرها‬
‫احساسات‬
‫ها‬‫گفته‬
‫کارها‬
‫ها‬‫فرصت‬
‫اجرایی‬ ‫های‬‫ایده‬
‫مشتری‬ ‫سفر‬ ‫نقشه‬

18. ‫اطالعات‬ ‫معماری‬

19. ‫وایرفریم‬ ‫طراحی‬

20. ‫عملی‬ ‫تمرین‬
‫اول‬ ‫موضوع‬:‫بپزیم؟‬ ‫غذایی‬ ‫چه‬ ‫که‬ ‫این‬ ‫راهنمایی‬ ‫برای‬ ‫طراحی‬
‫دوم‬ ‫موضوع‬:‫خانگ‬ ‫یا‬ ‫کارگاهی‬ ‫ساز‬‫دست‬ ‫تولیدات‬ ‫فروش‬ ‫برای‬ ‫طراحی‬‫ی‬
‫سوم‬ ‫موضوع‬:‫شخصی‬ ‫برند‬ ‫برای‬ ‫طراحی‬

21. ‫کنید‬ ‫تکمیل‬ ‫را‬ ‫کاربری‬ ‫تجربه‬ ‫طراحی‬ ‫کاربرگ‬
‫پروژه‬ ‫کوتاه‬ ‫توضیح‬ ‫و‬ ‫عنوان‬:‫بنوی‬ ‫آن‬ ‫از‬ ‫کوتاهی‬ ‫توضیح‬ ‫همراه‬ ‫به‬ ‫را‬ ‫تان‬‫انتخابی‬ ‫موضوع‬‫سید‬
‫پروژه‬ ‫سوال‬ ‫یا‬ ‫مشکل‬ ‫شرح‬:‫دهید‬ ‫توضیح‬ ‫را‬ ‫مشکل‬ ‫یا‬ ‫سوال‬
‫پروژه‬ ‫اهداف‬:‫پروژه‬ ‫انداز‬‫چشم‬ ‫و‬ ‫نهایی‬ ‫خواسته‬ ‫کردن‬‫مشخص‬
‫شناخت‬:‫ب‬ ‫پرسونا‬ ‫یک‬ ‫و‬ ‫بشناسید‬ ‫را‬ ‫شده‬ ‫انجام‬ ‫های‬‫فعالیت‬ ‫و‬ ‫رقبا‬ ،‫کاربران‬ ،‫پروژه‬ ‫موضوع‬‫سازید‬
‫دیزاین‬ ‫و‬ ‫پردازی‬‫ایده‬:‫برگزینی‬ ‫را‬ ‫ایده‬ ‫بهترین‬ ‫و‬ ‫کنید‬ ‫پردازی‬‫ایده‬ ‫آمده‬ ‫دست‬ ‫به‬ ‫شناخت‬ ‫با‬‫د‬
‫وایرفریم‬ ‫ترسیم‬:‫کنید‬ ‫ترسیم‬ ‫را‬ ‫خود‬ ‫محصول‬ ‫وایرفریم‬

22. ‫اول‬ ‫جلسه‬ ‫پایان‬

23. ‫مقدماتی‬ ‫آموزش‬ ‫کارگاه‬
‫کارب‬ ‫واسط‬ ‫طراحی‬ ‫و‬ ‫کاربری‬ ٔ‫تجربه‬ ‫طراحی‬‫ری‬
‫دوم‬ ‫جلسه‬/۱۵‫اسفند‬۹۷/‫پناه‬‫محمدی‬ ‫اسماعیل‬

24. ‫چیست؟‬ ‫کاربری‬ ‫واسط‬

25. ‫ماشین‬‫انسان‬ ‫کاربری‬ ‫واسط‬

26. ‫چیست؟‬ ‫در‬ ‫کاربری‬ ‫واسط‬ ‫اهمیت‬
•‫است‬ ‫مهم‬ ‫تماس‬ ‫نقطه‬ ‫یک‬ ‫وبسایت‬
•‫گیرد‬‫می‬ ‫صورت‬ ‫وبسایت‬ ‫توسط‬ ‫شما‬ ‫معرفی‬
•‫شماست‬ ‫برند‬ ‫معرف‬ ‫وبسایت‬
•‫شماست‬ ‫کار‬ ‫و‬ ‫کسب‬ ‫ویترین‬ ‫وبسایت‬
•‫بین‬ ‫شما‬۲‫تا‬۲۰‫کنید‬ ‫جذب‬ ‫را‬ ‫کاربر‬ ‫تا‬ ‫دارید‬ ‫زمان‬ ‫ثانیه‬
۱۰‫ثانیه‬
‫دارید‬ ‫فرصت‬

27. ‫تعامالت‬ ‫طراحی‬
•‫دیدن‬
•‫شنیدن‬
•‫کردن‬ ‫لمس‬
•‫چشیدن‬
•‫دادن‬ ‫حرکت‬
•‫کردن‬ ‫صحبت‬
‫ایجاد‬ ‫برای‬ ‫انسان‬ ‫های‬‫توانایی‬ ‫از‬ ‫استفاده‬‫تعامل‬

28. ‫دیزاین‬ ‫فرآیند‬ ‫از‬ ‫مرحله‬ ‫ترین‬‫مهم‬

29. •‫کنید‬ ‫رها‬ ‫را‬ ‫کار‬ ‫این‬ ،‫برید‬‫نمی‬ ‫لذت‬ ‫طراحی‬ ‫از‬ ‫اگر‬
•‫است‬ ‫طراحی‬ ‫مسیر‬ ‫در‬ ‫ها‬‫تالش‬ ‫تمام‬ ‫حاصل‬ ‫کردن‬ ‫مصور‬ ‫نوبت‬ ‫االن‬
•‫بگیرید‬ ‫کار‬ ‫به‬ ‫را‬ ‫خود‬ ‫خالقیت‬ ‫و‬ ‫توانایی‬ ‫تمام‬ ‫باید‬
•‫باشید‬ ‫داشته‬ ‫زیادی‬ ‫صبر‬ ‫باید‬
•‫کنید‬ ‫آزمایش‬ ‫را‬ ‫مختلف‬ ‫چیزهای‬ ‫بارها‬ ‫و‬ ‫بارها‬
•‫اعتمادی‬‫بی‬ ‫عامل‬ ‫نه‬ ‫باشید‬ ‫اعتمادساز‬ ‫دیزاینرها‬ ‫جامعه‬ ‫برای‬

30. ‫اپلیکیشن‬ ‫و‬ ‫وب‬ ‫برای‬ ‫طراحی‬ ‫شناخت‬

31. ‫؟‬

32. •‫کنم؟‬ ‫شروع‬ ‫صفحه‬ ‫کجای‬ ‫از‬
•‫کنید‬ ‫طراحی‬ ‫بروشور‬ ‫یا‬ ‫پوستر‬ ‫نیست‬ ‫قرار‬.‫باشید‬ ‫آگاه‬ ‫ها‬‫تفاوت‬ ‫به‬.
•‫شود‬ ‫تبدیل‬ ‫افزاری‬‫نرم‬ ‫کدهای‬ ‫به‬ ‫است‬ ‫قرار‬ ‫شما‬ ‫طراحی‬!‫باشید‬ ‫مراقب‬ ‫پس‬.
•‫است‬ ‫محدود‬ ‫دارید‬ ‫اختیار‬ ‫در‬ ‫که‬ ‫فضایی‬.‫بدانید‬ ‫را‬ ‫ها‬‫پیکسل‬ ‫تک‬ ‫تک‬ ‫قدر‬ ‫پس‬
•‫بشناسید‬ ‫را‬ ‫وب‬ ‫صفحه‬ ‫مختلف‬ ‫های‬‫قسمت‬.‫هستند؟‬ ‫مناسب‬ ‫چیزی‬ ‫چه‬ ‫برای‬ ‫کدام‬ ‫هر‬

33. ‫های‬‫سبک‬ ‫و‬ ‫ها‬‫گرایش‬
‫کاربری‬ ‫واسط‬ ‫طراحی‬ ‫مختلف‬
•‫ها‬‫سایت‬‫وب‬ ‫تحول‬ ‫سیر‬:‫طراحی‬ ‫یافتن‬ ‫اهمیت‬
•‫تغییر‬‫ها‬‫سبک‬:‫از‬‫همه‬ ‫شدن‬ ‫سایه‬ ‫بدون‬ ‫و‬ ‫تخت‬ ‫یا‬ ‫واقعیت‬ ‫بازنمایی‬ ‫برای‬ ‫تالش‬‫ع‬‫ناصر‬
•،‫کالسیک‬ ،‫مال‬‫مینی‬ ،‫مدرن‬ ‫های‬‫سبک‬‫فانتزی‬ ،‫لوکس‬‫و‬...

36. ‫ها‬‫مشی‬‫خط‬ ‫و‬ ‫ها‬‫چارچوب‬
• Metro
• Material
• iOS
• …
• Fundation
• Bootstrap
• Semantic UI
• Wirez
• Juiced
• …

39. ‫کنیم‬ ‫توجه‬ ‫نکات‬ ‫این‬ ‫به‬
•‫صفحه‬ ‫لود‬ ‫سرعت‬ ‫کنترل‬:‫صفحه‬ ‫حجم‬ ‫کنترل‬
•‫تصاویر‬ ‫از‬ ‫اندازه‬ ‫به‬ ‫و‬ ‫صحیح‬ ‫استفاده‬
•‫ها‬‫آیکون‬ ‫و‬ ‫ها‬‫فونت‬ ‫از‬ ‫درست‬ ‫استفاده‬
•‫ها‬‫چارچوب‬ ‫از‬ ‫یکی‬ ‫در‬ ‫طراحی‬ ‫و‬ ‫کلی‬ ‫راهنمای‬ ‫خطوط‬ ‫رعایت‬
•‫ها‬‫رنگ‬ ‫از‬ ‫صحیح‬ ‫استفاده‬
•‫ها‬‫موشن‬ ‫از‬ ‫صحیح‬ ‫استفاده‬

40. ،‫عناصر‬ ‫چینش‬
‫الگوها‬‫و‬‫بند‬‫ترکیب‬‫ی‬
•‫دارید‬ ‫دست‬ ‫در‬ ‫که‬ ‫کاربری‬ ‫تجربه‬ ‫طراحی‬ ‫اساس‬ ‫بر‬ ‫عناصر‬ ‫بندی‬‫اولویت‬
•‫و‬ ‫ها‬‫دکمه‬ ‫و‬ ‫عکس‬ ،‫ها‬‫متن‬ ،‫منو‬ ‫است؟‬ ‫مناسب‬ ‫کاری‬ ‫چه‬ ‫برای‬ ‫صفحه‬ ‫از‬ ‫قسمت‬ ‫هر‬...
•‫آماده‬ ‫های‬‫اوت‬‫لی‬ ‫از‬ ‫الگوگیری‬

41. ‫بندی‬‫ترکیب‬ ‫در‬ ‫موثر‬ ‫عوامل‬
‫اندازه‬/‫رنگ‬/‫قرارگیری‬ ‫محل‬

46. ‫سازی‬‫ساده‬
•‫محتوا‬ ‫سازی‬‫ساده‬:‫باشند‬ ‫فهم‬ ‫قابل‬ ‫سادگی‬ ‫به‬ ‫که‬ ‫هایی‬‫عبارت‬ ‫از‬ ‫استفاده‬
•‫بصری‬ ‫عناصر‬ ‫سازی‬‫ساده‬:‫استفاده‬‫بی‬ ‫خطوط‬ ‫حذف‬ ،‫اضافات‬ ‫حذف‬
•‫ها‬‫کادربندی‬ ‫حذف‬:‫رویت‬ ‫قابل‬ ‫غیر‬ ‫های‬‫ستون‬ ‫از‬ ‫استفاده‬ ‫با‬ ‫بندی‬‫تقسیم‬ ‫و‬ ‫رویت‬ ‫قابل‬ ‫خطوط‬ ‫حذف‬

49. ‫رنگ‬
•‫رنگ‬ ‫اساس‬ ‫بر‬ ‫صفحه‬ ‫بندی‬ ‫تقسیم‬:‫اصلی‬ ‫عناصر‬ ‫یا‬ ‫عنصر‬ ،‫فرعی‬ ‫عناصر‬ ،‫زمینه‬
•‫ها‬‫رنگ‬ ‫خواص‬ ‫و‬ ‫معانی‬ ‫شناخت‬
•‫ها‬‫رنگ‬ ‫همنشینی‬ ‫و‬ ‫ترکیب‬ ‫شناخت‬
•‫رنگ‬ ‫از‬ ‫اندازه‬ ‫به‬ ‫استفاده‬
•‫رنگی‬ ‫های‬‫طیف‬ ‫از‬ ‫اندازه‬ ‫به‬ ‫و‬ ‫درست‬ ‫استفاده‬
•‫پروژه‬ ‫هر‬ ‫برای‬ ‫رنگ‬ ‫پالت‬ ‫ساختن‬

55. ‫تایپوگرافی‬
•‫در‬ ‫مهم‬ ‫عنصری‬ ‫نوشته‬‫بندی‬‫ترکیب‬‫است‬ ‫وب‬ ‫مختلف‬ ‫های‬‫بخش‬
•‫ها‬‫فونت‬ ‫اندازه‬:‫است‬ ‫مشخص‬ ‫و‬ ‫محدود‬ ‫ها‬‫اندازه‬ ‫تغییر‬
•‫هستند‬ ‫مشخص‬ ‫وب‬ ‫در‬ ‫استفاده‬ ‫قابل‬ ‫های‬‫فونت‬.
•‫کرد‬ ‫توجه‬ ‫آن‬ ‫به‬ ‫باید‬ ‫که‬ ‫دارد‬ ‫هایی‬‫حساسیت‬ ‫مرسوم‬ ‫غیر‬ ‫های‬‫فونت‬ ‫از‬ ‫استفاده‬
•‫تصویر‬ ‫نه‬ ‫باشند‬ ‫فونت‬ ‫باید‬ ‫امکان‬ ‫حد‬ ‫تا‬ ‫نوشته‬
•‫زیبایی‬ ‫در‬ ‫مهمی‬ ‫عامل‬ ‫ها‬‫نوشته‬ ‫بندی‬‫ترکیب‬‫بندی‬‫ترکیب‬‫است‬ ‫کلی‬

59. ‫ها‬‫آیکون‬ ‫و‬ ‫تصاویر‬ ‫از‬ ‫استفاده‬
•‫تصاویر‬ ‫از‬ ‫استفاده‬ ‫در‬ ‫صفحه‬ ‫حجم‬ ‫به‬ ‫دقت‬
•‫نیاز‬ ‫مورد‬ ‫جای‬ ‫در‬ ‫کیفیت‬ ‫با‬ ‫و‬ ‫بزرگ‬ ‫تصاویر‬ ‫از‬ ‫استفاده‬
•‫وب‬ ‫در‬ ‫استفاده‬ ‫برای‬ ‫تصاویر‬ ‫حجم‬ ‫کردن‬ ‫بهینه‬
•‫و‬ ‫ظاهر‬ ‫در‬ ‫تصاویر‬ ‫تغییر‬ ‫تاثیر‬ ‫به‬ ‫توجه‬‫بندی‬‫ترکیب‬‫سایت‬

61. ‫ها‬‫آیکون‬ ‫از‬ ‫استفاده‬
‫صورت‬ ‫به‬ ‫ترجیحا‬Font‫یا‬SVG
•‫بسته‬ ‫یک‬ ‫از‬ ‫ترجیحا‬ ‫و‬ ‫همسان‬ ‫ها‬‫آیکون‬ ‫از‬ ‫استفاده‬
•‫تصویر‬ ‫حالت‬ ‫در‬ ‫استفاده‬ ‫از‬ ‫پرهیز‬
•‫وکتور‬ ‫یا‬ ‫فونت‬ ‫قالب‬ ‫از‬ ‫استفاده‬
•‫کم‬ ‫نه‬ ‫زیاد‬ ‫نه‬ ،‫جا‬ ‫به‬ ‫استفاده‬
•‫تنهایی‬ ‫به‬ ‫آیکون‬ ‫از‬ ‫استفاده‬:‫مخاطبان‬ ‫برای‬ ‫مناسب‬ ‫فهم‬ ‫قابلیت‬
•‫آیکون‬ ‫بدون‬ ‫متن‬ ‫از‬ ‫استفاده‬:‫آیکون‬ ‫به‬ ‫نیاز‬ ‫عدم‬ ‫و‬ ‫طراحی‬ ‫کردن‬ ‫شلوغ‬ ‫از‬ ‫پرهیز‬
•‫متن‬ ‫و‬ ‫آیکون‬ ‫از‬ ‫استفاده‬:‫همه‬ ‫توسط‬ ‫شدن‬ ‫فهمیده‬ ‫از‬ ‫اطمینان‬ ‫برای‬‫کاربران‬

62. •‫کمک‬ ‫صفحه‬ ‫مهم‬ ‫های‬‫المان‬ ‫سایر‬ ‫شدن‬ ‫دیده‬ ‫به‬ ‫و‬ ‫هستند‬ ‫مهم‬ ‫بسیار‬ ‫خالی‬ ‫فضاهای‬
‫کنند‬‫می‬.
•‫ک‬ ‫پر‬ ‫آجر‬ ‫یا‬ ‫بلوک‬ ‫با‬ ‫منظم‬ ‫صورت‬ ‫به‬ ‫را‬ ‫آن‬ ‫تمام‬ ‫که‬ ‫نیست‬ ‫دیوار‬ ‫شبیه‬ ‫وبسایت‬‫نیم‬.
•‫نکنیم‬ ‫حمله‬ ‫مخاطب‬ ‫چشم‬ ‫به‬.‫بدهیم‬ ‫استراحت‬ ‫او‬ ‫به‬.
•‫می‬ ‫اسکن‬ ‫سرعت‬ ‫با‬ ‫بلکه‬ ‫خوانند‬‫نمی‬ ‫را‬ ‫ها‬‫آن‬ ‫وب‬ ‫صفحات‬ ‫دیدن‬ ‫هنگام‬ ‫در‬ ‫کاربران‬‫کنند‬.
‫شود‬‫می‬ ‫ها‬‫پیام‬ ‫بهتر‬ ‫انتقال‬ ‫باعث‬ ‫خالی‬ ‫فضاهای‬.
‫خالی‬ ‫فضای‬

63. ‫فعالیت‬ ‫به‬ ‫کاربر‬ ‫فراخوانی‬
Call to action

66. ‫میکروانیمیشن‬ ‫و‬ ‫انیمیشن‬
•‫کاربر‬ ‫با‬ ‫تعامل‬ ‫افزایش‬ ‫برای‬
•‫کاری‬ ‫انجام‬ ‫به‬ ‫ترغیب‬ ‫و‬ ‫فراخواندن‬ ‫برای‬
•‫جذابیت‬ ‫افزایش‬
•‫طبیعی‬ ‫اتفاقات‬ ‫و‬ ‫فرآیندها‬ ‫نمایش‬
•‫کاربر‬ ‫در‬ ‫احساس‬ ‫ایجاد‬

67. •‫کاربر‬ ‫حرکات‬ ‫به‬ ‫اپلیکیشن‬ ‫یا‬ ‫وبسایت‬ ‫صفحه‬ ‫عناصر‬ ‫بودن‬ ‫حساس‬
•‫کاربردپذیری‬ ‫افزایش‬ ‫و‬ ‫کاربر‬ ‫با‬ ‫تعامل‬ ‫افزایش‬
•‫میکروانیمیشن‬ ‫یا‬ ‫انیمیشن‬
•‫شود‬ ‫دیده‬ ‫باید‬ ‫المان‬ ‫هر‬ ‫برای‬ ‫مختلف‬ ‫های‬‫حالت‬.
•‫دکمه‬ ‫یک‬ ‫مثال‬ ‫عنوان‬ ‫به‬:‫است‬ ‫گرفته‬ ‫قرار‬ ‫آن‬ ‫روی‬ ‫موس‬ ‫که‬ ‫حالتی‬ ،‫عادی‬ ‫حالت‬،
‫ک‬ ‫از‬ ‫بعد‬ ‫فعالیت‬ ‫انجام‬ ‫حال‬ ‫در‬ ‫که‬ ‫حالتی‬ ،‫است‬ ‫شده‬ ‫کلیک‬ ‫آن‬ ‫روی‬ ‫که‬ ‫حالتی‬‫لیک‬
‫است‬.‫فایل‬ ‫یک‬ ‫دانلود‬ ‫حال‬ ‫در‬ ‫مثال‬.
‫کاربر‬ ‫به‬ ‫واکنش‬

71. •‫ها‬‫دستگاه‬ ‫تمام‬ ‫در‬ ‫وبسایت‬ ‫درست‬ ‫نمایش‬
•‫چینش‬ ‫و‬ ‫ها‬‫اندازه‬ ‫در‬ ‫تغییر‬
•‫عناصر‬ ‫کردن‬ ‫اضافه‬ ‫و‬ ‫حذف‬
•‫کاربردپذیری‬ ‫افزایش‬
‫گرا‬‫واکنش‬ ‫طراحی‬

75. •‫ها‬‫فرم‬
•‫ها‬‫فرآیند‬ ‫نمایش‬
•‫ها‬‫پیغام‬
•‫منو‬‫و‬‫تب‬
•‫فیلدهای‬‫ورود‬‫اطالعات‬
•‫ها‬‫دکمه‬
•‫انواع‬،‫عکس‬ ،‫متنی‬ ‫محتوای‬‫فیلم‬
•‫ها‬‫حرکت‬
•‫جداول‬
•‫فیلترها‬
•‫جستجو‬
•‫مدیریت‬‫و‬ ‫محتوا‬‫داشبورد‬
•‫خرید‬‫و‬‫فروش‬
•‫محیط‬‫و‬ ‫نوشتن‬‫تعامالت‬
•‫راهنماها‬
‫وب‬ ‫صفحات‬ ‫عناصر‬

76. Adobe Photoshop sketchAdobe Experience Design
‫افزارها‬‫نرم‬

80. ‫دوم‬ ‫جلسه‬ ‫پایان‬

81. ‫مقدماتی‬ ‫آموزش‬ ‫کارگاه‬
‫کارب‬ ‫واسط‬ ‫طراحی‬ ‫و‬ ‫کاربری‬ ٔ‫تجربه‬ ‫طراحی‬‫ری‬
‫سوم‬ ‫جلسه‬/۱۶‫اسفند‬۹۷/‫پناه‬‫محمدی‬ ‫اسماعیل‬

82. ‫کاربردپذیری‬ ‫آزمون‬
Usability Testing
‫اول‬ ‫گام‬:‫کنیم‬‫می‬ ‫آماده‬ ‫آزمون‬ ‫برای‬ ‫را‬ ‫طراحی‬ ‫یا‬ ‫محصول‬.
‫دوم‬ ‫گام‬:‫کنیم‬‫می‬ ‫پیدا‬ ‫را‬ ‫آزمون‬ ‫در‬ ‫کنندگان‬ ‫اشرکت‬.
‫سوم‬ ‫گام‬:‫نویسیم‬‫می‬ ‫آزمون‬ ‫انجام‬ ‫مسیر‬ ‫برای‬ ‫طرحی‬.
‫چهارم‬ ‫گام‬:‫کنیم‬‫می‬ ‫راهبری‬ ‫و‬ ‫مدیریت‬ ‫را‬ ‫زمون‬.
‫گام‬‫پنجم‬:‫کنیم‬‫می‬ ‫بیان‬ ‫و‬ ‫مشخص‬ ‫را‬ ‫ها‬‫یافته‬.

87. ‫وب‬ ‫برای‬ ‫مناسب‬ ‫قلم‬ ‫چند‬
•‫یکان‬B Yekan
•‫یکان‬ ‫ایران‬IranYekan
•‫سنس‬‫ایران‬IranSans
•‫ایران‬Iran
•‫بلک‬ ‫ایران‬Iran Black
•‫رویا‬B Roya
•‫نازنین‬B nazanin
•‫میترا‬B Mitra
•‫تیتر‬B Titr
‫فونت‬ ‫خرید‬:fontiran.com

88. ‫مناسب‬ ‫آیکون‬ ‫مجموعه‬ ‫چند‬
fontawesome.com
iconscout.com/unicons
flaticon.com

92. ‫دیدن‬
‫دیدن‬ ‫درست‬ ‫و‬

104. cssdesignawards.comcssdesignawards.com

105. ‫برگزیده‬ ‫های‬‫نمونه‬ ‫پیگیری‬
cssdesignawards.com
ux-design-awards.com
webbyawards.com

109. ‫گروهی‬ ‫های‬‫فعالیت‬ ‫ارائه‬
•‫تیم‬ ‫هر‬۵‫دارد‬ ‫زمان‬ ‫دقیقه‬:
•‫پردازی‬‫ایده‬ ‫و‬ ‫موضوع‬ ‫انتخاب‬ ‫فرآیند‬
•‫پروژه‬ ‫شرح‬ ‫و‬ ‫برتر‬ ‫ایده‬ ‫انتخاب‬
•‫ها‬‫طراحی‬ ‫نتیجه‬ ‫ارائه‬

110. ‫جلسه‬ ‫پایان‬‫سوم‬