اسلاید های کارگاه تجربه / رابط کاربری (UI/UX) - رابط کاربری، واسط کاربری و تجربه کاربری چیست؟ - فرایند طراحی UI و UX - مهارت های لازم یک طراح UI و UX - سبک شناسی و اصول UI و UX - روانشناسی رنگ در طراحی محصول - شناخت کاربر و اهمیت آن - معرفی ابزار ها - نکات طلائی و عملی برای باز طراحی محصولات - استفاده از خلاقیت در طراحی تجربه کاربری و چگونه خلاق باشیم - آن چیزی که برای طراحی تخصصی باید دنبال کنید ( نرم افزار – وب – اپلیکیشن ) - اشتباهات رایج در طراحی رابط کاربری و تجربه کاربری در ایران - مروری بر کارهای موفق و ناموفق

1. ‫سالم‬
‫هستم‬ ‫پور‬ ‫علی‬ ‫یوسف‬
‫کنید‬ ‫پیدا‬ ‫زیر‬ ‫کاربری‬ ‫نام‬ ‫با‬ ‫منو‬ ‫میتونید‬ ‫اجتماعی‬ ‫های‬ ‫شبکه‬ ‫در‬
@yoosefap
1

2. ‫تجربه‬ ‫و‬ ‫رابط‬ ‫کارگاه‬‫کاربری‬
UI / UX
18‫اردیبهشت‬1397

3. ‫ها‬ ‫سرفصل‬:
‫چیست؟‬ ‫کاربری‬ ‫تجربه‬
‫چیست؟‬ ‫کاربری‬ ‫رابط‬
‫تفاوت‬UI‫و‬UX
‫جایگاه‬ ‫و‬ ‫نقش‬
‫طراحی‬ ‫فرایند‬UX
‫ابزارها‬
‫نادرست‬ ‫های‬ ‫باور‬
‫طراحی‬ ‫های‬ ‫سبک‬
‫طراحی‬ ‫استراتژی‬
‫نمونه‬ ‫چند‬ ‫بررسی‬

4. ‫سالم‬
‫هستم‬ ‫فرد‬ ‫بحرانی‬ ‫اسماعیل‬
‫کنید‬ ‫پیدا‬ ‫زیر‬ ‫کاربری‬ ‫نام‬ ‫با‬ ‫منو‬ ‫میتونید‬ ‫اجتماعی‬ ‫های‬ ‫شبکه‬ ‫در‬
@esmaeilbahrani
4

5. ‫چه؟‬ ‫یعنی‬ ‫کاربری‬ ‫تجربه‬
UXUser Experience

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

7. User Experience Design
7
‫کاربری‬ ‫تجربه‬ ‫طراحی‬
UXD
‫افزایش‬ ‫و‬ ‫بهبود‬ ‫فرآیند‬
‫کاربردپذیری‬،‫رضایت‬،‫استفاده‬ ‫سهولت‬
‫بین‬ ‫تعامل‬ ‫در‬‫محصول‬ ‫و‬ ‫مشتری‬

8. 8

9. 9
‫زیبا‬
‫پرستیژ‬
‫قدرتمند‬
‫راحت‬
‫ترکیب‬ ‫بد‬
‫مرگ‬ ‫ارابه‬
‫فالکت‬
‫بدبختی‬

10. ‫چه؟‬ ‫یعنی‬ ‫کاربری‬ ‫رابط‬
UIUser Interface

11. ‫به‬‫طور‬‫کلی‬‫طراحی‬‫رابط‬‫کاربری‬‫یعنی‬‫روش‬
‫استفاده‬‫از‬‫عناصر‬‫بصری‬‫مثل‬‫رنگ‬،‫تصاوی‬‫ر‬‫و‬
‫سمبل‬‫ها‬،‫برای‬‫انتقال‬‫یک‬‫پیام‬‫و‬‫روش‬‫است‬‫فاده‬
‫به‬‫کاربر‬‫است‬.

13. UI = UX

14. 14

15. 15

16. 16

17. 17
‫فیسبوک‬
‫دکمه‬Like‫احساسات‬ ‫ابراز‬ ‫و‬ ‫بیشتر‬

18. 18
1.‫بگذاریم؟‬ ‫افراد‬ ‫اختیار‬ ‫در‬ ‫را‬ ‫هایی‬ ‫واکنش‬ ‫چه‬
2.‫کن‬ ‫استفاده‬ ‫و‬ ‫انتخاب‬ ‫را‬ ‫ها‬ ‫واکنش‬ ‫چگونه‬ ‫افراد‬‫ند؟‬

19. 19
‫واکنش‬ ‫انتخاب‬ ‫اصول‬
●‫واکنش‬ ‫جهانی‬ ‫درک‬
●‫بیانگر‬ ‫و‬ ‫گسترده‬ ‫استفاده‬

20. 20

21. 21

22. 22
‫ها‬ ‫واکنش‬
‫کردن‬ ‫وارد‬ ‫نحوه‬ ‫اولیه‬ ‫نمونه‬

23. 23
‫ها‬ ‫واکنش‬
‫او‬ ‫نمونه‬ ‫از‬ ‫بعد‬ ‫تغییرات‬ ‫اولین‬‫لیه‬

24. 24
‫ها‬ ‫واکنش‬
‫نسخه‬‫نمایشی‬

25. ‫طراحی‬ ‫فرآیند‬UX
25
‫تحقیق‬‫کاربر‬‫سازی‬ ‫شخصیت‬‫چرخه‬
user personaflow user research
‫اولیه‬ ‫نمونه‬
wireframe
‫بصری‬ ‫طراحی‬
Visual design
‫آنالیز‬
testing

26. 26
‫کاربر؟‬ ‫تحقیق‬ User Research
‫طراحی‬ ‫شروع‬ ‫نقطه‬UX‫اس‬ ‫کاربر‬ ‫مشکالت‬ ‫و‬ ‫نیازها‬ ، ‫ها‬ ‫خواسته‬ ‫روی‬ ‫بر‬ ‫تحقیق‬ ‫با‬‫ت‬
‫حضوری‬‫غیرحضوری‬

27. 27
‫شخصیت‬ ‫ساخت‬‫کاربر‬‫؟‬ User Persona
‫پرسونا‬‫تخیلی‬‫از‬‫شخصیت‬‫هایی‬‫به‬
‫نمایندگی‬‫یک‬‫دسته‬‫از‬‫کاربران‬‫شما‬‫که‬
‫خصوصیات‬‫مشابه‬‫ای‬‫را‬‫دارند‬‫هستند‬‫ک‬‫ه‬‫از‬
،‫سایت‬‫برند‬‫یا‬‫محصول‬‫شما‬‫استفاده‬‫م‬‫ی‬
‫کنند‬.

28. 28
‫حرکت؟‬ ‫جریان‬ Flow chart
‫یا‬ ‫محصول‬ ‫در‬ ‫کاربر‬ ‫حرکت‬ ‫جریان‬
‫هدفش‬ ‫به‬ ‫رسیدن‬ ‫برای‬ ‫خدمات‬

29. 29
‫اولیه؟‬ ‫نمونه‬ wireframe
‫ایجاد‬‫یک‬‫ساختار‬‫و‬‫طرح‬‫کلی‬‫و‬
‫نحوه‬‫چینش‬‫عناصر‬‫و‬‫محتوا‬‫بدو‬‫ن‬
‫در‬‫نظرگرفتن‬‫رنگ‬،‫تایپوگراف‬‫ی‬،
‫سایه‬‫و‬...

30. 30
‫؟‬ ‫بصری‬ ‫طراحی‬ Visual design
‫تبدیل‬‫طرح‬‫اولیه‬‫به‬‫یک‬‫رابط‬
‫کاربری‬‫گرافیکی‬‫با‬‫در‬‫نظر‬‫گرف‬‫تن‬
‫نکات‬‫طراحی‬‫بصری‬،‫تایپوگرا‬‫فی‬،
‫رنگ‬،‫و‬...

31. ‫از‬ ‫باید‬ ‫چرا‬Wireframe‫استفاده‬‫کرد؟‬ wireframe
•Wireframe‫کنند‬ ‫می‬ ‫ایجاد‬ ‫را‬ ‫کلی‬ ‫ساختار‬ ‫و‬ ‫معماری‬ ‫ها‬
•‫دهد‬ ‫می‬ ‫نمایش‬ ‫خوبی‬ ‫به‬ ‫را‬ ‫اپلیکیشن‬ ‫یا‬ ‫سایت‬ ‫عملیاتی‬ ‫های‬ ‫بخش‬ ‫و‬ ‫ویژگی‬
•‫شود‬ ‫می‬ ‫محصول‬ ‫کاربردپذیری‬ ‫ارتقاء‬ ‫و‬ ‫رشد‬ ‫باعث‬
•‫است‬ ‫هزینه‬ ‫کم‬ ‫و‬ ‫سریع‬ ‫آن‬ ‫بروزرسانی‬ ‫و‬ ‫نواقص‬ ‫رفع‬
•‫ش‬ ‫می‬ ‫طراحی‬ ‫سرعت‬ ‫افزایش‬ ‫باعث‬ ‫و‬ ‫جلوگیری‬ ‫کاربری‬ ‫رابط‬ ‫طراحی‬ ‫مرحله‬ ‫در‬ ‫مورد‬ ‫بی‬ ‫تکرار‬ ‫از‬‫ود‬
•‫کند‬ ‫می‬ ‫جویی‬ ‫صرفه‬ ‫پروژه‬ ‫اجرای‬ ‫شده‬ ‫تمام‬ ‫هزینه‬ ‫و‬ ‫زمان‬ ‫در‬

32. ‫طراحی‬ ‫ابزارهای‬
tools
Balsamiq Mockups
Adobe XD
Sketch
Axure
Penultimate
Justinmind
invision
Photoshop
GIMP
illustrator
Corel DRAW

33. 33
‫بررسی‬‫چند‬‫مورد‬‫از‬‫اپلیکیشن‬‫های‬‫شناخته‬‫ش‬‫ده‬

34. 34

35. 35

36. 36

37. 37
‫بیند؟‬ ‫می‬ ‫ایرادی‬ ‫چه‬

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

39. 39

40. 40

41. 41

42. 42

43. 43

44. ‫طالیی‬ ‫نکات‬
‫نادرست‬ ‫باورهای‬

45. ‫است‬ ‫موفقیت‬ ‫عامل‬ ‫تقلید‬
target.com
vs
amazon.com

46. ‫رفته‬ ‫هدر‬ ‫فضای‬ ‫سفید‬ ‫فضای‬
1-‫تر‬ ‫استفاده‬ ‫قابل‬
2-‫خواناتر‬ ‫محتوای‬
3-‫چشم‬ ‫خستگی‬ ‫از‬ ‫جلوگیری‬
4-‫فشردگی‬ ‫حذف‬‫ذهنی‬ ‫انحراف‬ ‫و‬
5-‫مدرن‬ ‫حسی‬ ‫و‬ ‫ظاهر‬

47. ‫جایگزین‬‫ناوبری‬ ‫جو‬ ‫و‬ ‫جست‬
‫مطابق‬‫تحقیقاتی‬‫که‬‫در‬‫این‬‫زمینه‬‫انجام‬‫شده‬‫حدود‬۷۰‫درصد‬‫افراد‬‫بدنبال‬‫لینک‬‫ها‬‫میروند‬‫و‬
‫روی‬‫لینک‬‫ها‬‫و‬‫متن‬‫های‬‫مختلف‬‫کلیک‬‫میکنند‬‫و‬‫تنها‬۳۰‫درصد‬‫بازدیدکنندگان‬‫از‬‫فرم‬‫جستجو‬
‫استفاده‬‫میکنند‬.

48. ‫شماست‬ ‫وبسایت‬ ‫صفحه‬ ‫ترین‬ ‫مهم‬ ‫خانه‬ ‫صفحه‬
‫تحقیقات‬ ‫مطابق‬Nielsen Group‫حدود‬60%‫موتورهای‬ ‫از‬ ‫استفاده‬ ‫با‬ ‫کاربران‬
‫میکنند‬ ‫پیدا‬ ‫دسترسی‬ ‫وبسایت‬ ‫مطالب‬ ‫به‬ ‫جو‬ ‫و‬ ‫جست‬

49. ‫باشد‬ ‫تک‬ ‫باید‬ ‫طراحی‬!
Don’t make me think
‫استف‬ ‫چگونگی‬ ‫کردن‬ ‫فکر‬ ‫زحمت‬ ‫نباید‬‫از‬ ‫اده‬
‫کنید‬ ‫تحمیل‬ ‫کاربر‬ ‫به‬ ‫را‬ ‫محصوالتان‬

50. ‫طراحی‬ ‫های‬ ‫سبک‬
50
‫اسک‬‫ئ‬‫ومورفیس‬‫م‬
Skeuomorphism
‫تخت‬ ‫طراحی‬
flat design
‫روان‬ ‫طراحی‬
material design
fluent design
‫دیزاین‬ ‫متریال‬
🎨
🎨

51. 51

52. ‫گرایانه‬ ‫واقع‬ ‫طراحی‬
52
🎨‫اسکئومورفیسم‬
Skeuomorphism

53. ‫ر‬ ‫و‬ ‫تایپوگرافی‬ ‫و‬ ‫محتوا‬ ‫روی‬ ‫تمرکز‬‫نگ‬
53
🎨‫تخت‬ ‫طراحی‬
flat design

54. ‫اشیا‬ ‫به‬ ‫بخشیدن‬ ‫عمق‬
54
🎨‫متریال‬ ‫طراحی‬
material design
‫انیمیشن‬
‫تایپوگرافی‬

55. 55
🎨‫روان‬ ‫طراحی‬
fluent design‫رنگی‬ ‫طیف‬ ، ‫شفاف‬ ‫نیمه‬ ‫زمینه‬ ‫پس‬

56. ‫طراحی‬ ‫های‬ ‫استراتژی‬
56
F pattern
Z pattern
ZIG-ZAG pattern

57. F
57

58. Z
58

59. Zig Zag
59

60. 60
‫کاربر‬ ‫شناخت‬ ‫اهمیت‬
‫موبایل‬ ‫حوزه‬ ‫در‬ ‫مثال‬ ‫برای‬

61. 61

62. 62

63. 63

65. 65

66. 66

67. 67

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

69. 69

70. 70

71. 71

72. 72

73. 73

74. 74

75. 75

81. 81
‫کردید‬ ‫توجه‬ ‫که‬ ‫ممنون‬
‫سوال‬‫؟‬