1. ‫کاربردی‬‫تمرین‬
‫کاربری‬‫تجربه‬‫اح‬‫ر‬‫ط‬‫یک‬‫ای‬‫ر‬‫ب‬
‫اکرمی‬‫علی‬
aliakrami.ir
-‫کي‬ ‫ؽزٍع‬
-‫کارتزاى‬ ‫ًیاس‬ ‫تزرعی‬
-‫کارتزی‬ ‫راتظ‬ ‫عزاحی‬
-‫هحتَا‬ ‫اعتزاتضی‬
-‫ًْایی‬ ‫هحصَل‬ ِ‫تَعع‬

2. ‫کاربری‬ ‫رابط‬ ‫طراحی‬
‫عَم‬ ِ‫جلغ‬
19‫کي‬ ‫تٌذی‬ ‫اٍلَیت‬ ‫را‬ ‫اّذاف‬
20‫کي‬ ‫رعایت‬ ‫را‬ ‫ٍاقعی‬ ‫دًیای‬ ‫قَاعذ‬
21‫کي‬ ‫ًقاؽی‬ ‫را‬ ‫ّا‬ ُ‫ایذ‬ ٍ ‫ّا‬ ‫عزح‬
22‫کارتزی‬ ‫راتظ‬ ‫الگَّای‬ ‫هَرد‬ ‫در‬ ‫تحقیق‬
23‫قثَل‬ ‫قاتل‬ ‫حال‬ ‫عیي‬ ‫در‬ ‫تزیي‬ ِ‫پیؾزفت‬
24‫کي‬ ‫هغتٌذ‬ ‫را‬ ‫کارتزی‬ ‫راتظ‬ ‫الگَّای‬
25‫کي‬ ُ‫اعتفاد‬ ‫هَثز‬ ‫عَر‬ ِ‫ت‬ ‫ّا‬ ًِ‫ستا‬ ‫اس‬
26‫کي‬ ‫پزّیش‬ ‫ؽلَغی‬ ‫اس‬
27‫آعاى‬ ‫ًام‬ ‫ثثت‬
28‫حزٍفچیٌی‬ ‫اس‬ ُ‫اعتفاد‬
29‫کي‬ ‫عزاحی‬ ‫را‬ ‫خَد‬ ‫رًگ‬ ‫پالت‬
30‫کي‬ ِ‫ارائ‬ ‫فَری‬ ‫تاسخَرد‬

3. ‫کاربری‬ ‫رابط‬ ‫طراحی‬
‫را‬ ‫ّا‬ ‫فعالیت‬‫کي‬ ‫تٌذی‬ ‫اٍلَیت‬
19
- Who? - Where?
- What? - How?

4. ‫کي‬ ‫رعایت‬ ‫را‬ ‫ٍاقعی‬ ‫دًیای‬ ‫قَاعذ‬
20
‫کاربری‬ ‫رابط‬ ‫طراحی‬
- Seductive Interaction Design: Stephen P. Anderson

5. ‫کي‬ ‫ًقاؽی‬ ‫را‬ ‫ّا‬ ُ‫ایذ‬ ٍ ‫ّا‬ ‫عزح‬
21
‫کاربری‬ ‫رابط‬ ‫طراحی‬
Balsamiq
http://builds.balsamiq.com/b/mockups-web-demo
Omnigraffle
http://www.omnigroup.com/products/omnigraffle
Mockingbird
https://gomockingbird.com

6. ‫کي‬ ‫تحقیق‬ ‫کارتزی‬ ‫راتظ‬ ‫الگَّای‬ ‫هَرد‬ ‫در‬
22
‫کاربری‬ ‫رابط‬ ‫طراحی‬
UI Patterns
http://www.ui-patterns.com
Pattern Tap
http://www.patterntap.com
Yahoo! UI Design Pattern Library
http://developer.yahoo.com/ypatterns

7. ‫قاتل‬ ‫حال‬ ‫عیي‬ ‫در‬ ،‫تزیي‬ ِ‫پیؾزفت‬‫قثَل‬
(MAYA)
23
‫کاربری‬ ‫رابط‬ ‫طراحی‬
‫اگز‬‫کاهپیَتز‬‫قثل‬‫اس‬‫ایي‬ِ‫ک‬‫کغی‬‫تتَاًذ‬‫آى‬‫را‬
‫درک‬‫کٌٌذ‬ِ‫عاخت‬‫هی‬،‫ؽذ‬‫ّیچ‬‫کظ‬‫اس‬‫آى‬
ُ‫اعتفاد‬‫ًوی‬‫کزد‬.
Deliver the Future, Gradually: Jim O’Neill

8. ‫کي‬ ‫هغتٌذ‬ ‫را‬ ‫کارتزی‬ ‫راتظ‬ ‫الگَّای‬
‫یک‬ًِ‫کتاتخا‬‫الگَی‬‫راتظ‬‫کارتزی‬‫تزای‬ُ‫پزٍص‬‫خَد‬
‫ایجاد‬‫کٌیذ‬-‫یک‬‫عٌذ‬ُ‫سًذ‬(‫تزجیحا‬‫در‬‫کذ‬)ِ‫ک‬
‫توام‬‫الگَّای‬‫قاتل‬ُ‫اعتفاد‬‫هجذدی‬‫را‬ِ‫ک‬‫ؽوا‬
‫ایجاد‬ُ‫کزد‬،‫ایذ‬‫جوع‬‫آٍری‬‫هی‬‫کٌذ‬.ِ‫ت‬‫راحتی‬
‫تزای‬‫ّز‬‫یک‬‫اس‬‫اعضای‬‫هَجَد‬‫در‬‫تین‬‫کاری‬ٍ
‫کغاًی‬ِ‫ک‬‫در‬ُ‫آیٌذ‬ِ‫ت‬‫تین‬‫هی‬،‫پیًَذًذ‬‫در‬
‫دعتزط‬‫اعت‬.
ًِ‫کتاتخا‬‫ؽوا‬‫هی‬‫تَاًذ‬ِ‫ت‬‫عٌَاى‬‫یک‬ُ‫را‬‫اًذاس‬‫قَی‬
‫تزای‬ُ‫پزٍص‬‫تاؽذ‬ٍ‫یا‬‫تغیار‬ُ‫عاد‬‫تز‬ِ‫تغت‬ِ‫ت‬
‫ًیاسّای‬‫ؽوا‬‫عول‬‫ًوایذ‬.
24
‫کاربری‬ ‫رابط‬ ‫طراحی‬
http://twitter.github.com/bootstrap/components.html

9. ِ‫ت‬ ‫ّا‬ ًِ‫ستا‬ ‫اس‬‫هَثز‬ ‫عَر‬‫کي‬ ُ‫اعتفاد‬
25
‫کاربری‬ ‫رابط‬ ‫طراحی‬
- 13 Guidelines for Tabs, Jakob Nielsen

10. ‫کي‬ ‫پزّیش‬ ‫ؽلَغی‬ ‫اس‬
26
‫کاربری‬ ‫رابط‬ ‫طراحی‬
http://www.basecamp.com

11. ‫آعاى‬ ‫ًام‬ ‫ثثت‬
27
‫کاربری‬ ‫رابط‬ ‫طراحی‬
http://www.grooveshark.com

12. ‫ٍب‬ ‫در‬ ‫حزٍفچیٌی‬ ‫اس‬ ُ‫اعتفاد‬
28
‫کاربری‬ ‫رابط‬ ‫طراحی‬
- TypeKit - Google WebFonts

13. ‫کي‬ ‫عزاحی‬ ‫را‬ ‫خَد‬ ‫رًگ‬ ‫پالت‬
29
‫کاربری‬ ‫رابط‬ ‫طراحی‬
- Adobe Kuler for Designers
- Color Scheme Designer
- 21 Stimulating Color Palette Tools

14. ‫فَری‬ ‫تاسخَرد‬‫کي‬ ِ‫ارائ‬
30
‫کاربری‬ ‫رابط‬ ‫طراحی‬
-‫فزم‬‫را‬‫پز‬‫هی‬‫کٌیذ‬ٍِ‫ت‬ِ‫صفح‬‫تعذ‬‫هی‬‫رٍیذ‬.
-‫ّؾذار‬"‫چیشی‬‫در‬‫ایي‬‫فزم‬‫ًادرعت‬‫اعت‬!"‫را‬‫دریافت‬‫هی‬‫کٌیذ‬.
-‫تی‬‫خیال‬‫هی‬‫ؽَیذ‬ٍِ‫ت‬ًِ‫خا‬‫هی‬‫رٍیذ‬.
‫صثز‬‫کٌیذ‬.‫چی‬‫ؽذ؟‬‫تیاییذ‬ُ‫دٍتار‬‫ععی‬‫کٌین‬...
-‫فزم‬‫را‬‫پز‬‫هی‬‫کٌیذ‬ٍِ‫ت‬‫ؽاخص‬‫ّای‬ُ‫عاد‬‫ای‬ِ‫ک‬‫ًؾاى‬‫هی‬‫دّذ‬‫اعالعات‬‫ؽوا‬‫اعت‬ِ‫پذیزفت‬ُ‫ؽذ‬‫اعت‬‫یا‬‫خیز‬
ِ‫تَج‬‫هی‬‫کٌیذ‬.
-‫خغاّا‬‫را‬ِ‫ت‬‫عزعت‬ٍ‫ّواى‬‫جا‬‫تزعزف‬‫هی‬‫کٌیذ‬.
-‫تا‬‫هَفقیت‬‫اًجام‬‫ؽذ‬!