50 تمرین کاربردی برای یک طراح تجربه کاربری - جلسه پنجم

1. تمرین کاربردی
برای یک طراح تجربه کاربری
علی اکرمی
aliakrami.ir
- ضريع که
- بررسی ویاز کاربران
- طراحی رابط کاربری
- استراتژی محت اً
- ت سًؼ محص لً و اُیی

2. توسعه محصول نهایی
جلس پىجم
41 م اًرد در حال يیرایص را برجست که
42 بارگساری تذریجی
43 ب بُ دً مرحل ای
44 استراتژی برای صفح ومایص اَی ک چًک
45 تحقیق در م رًد ريیکرد رابط کاربری
46 ب بُ دً بارگساری تصايیر
47 استفاد از قابلیت اَی HTML 5
48 CSS را مذیریت که
49 فطرد کردن فایل اَ
50 تفکیک کلاس اَ ي ضىاس اَ در CSS

3. توسعه محصول نهایی
م اًرد در حال يیرایص را برجست که
41

4. بارگساری تذریجی
توسعه محصول نهایی
42
مطکل:
بارگساری صفحات ب ريش سىتی با ػث می ض دً
ک مَ اطلاػات قبل از ومایص چیسی فراخ اًوی
ض دً ک باػث می ض دً کاربر خیلی مىتظر بماوذ.
را حل:
با استفاد از بارگساری تذریجی، ابتذا ػىاصر ثابت
صفح فرياخ اًوی می ض وًذ.سپس داد اَ
فرياخ اًوی می ض وًذ ي در و اُیت ب تذریج ي با
پیمایص کاربر، داد اَی بیطتری بارگساری می
ض وًذ.

5. ب بُ دً مرحل ای
توسعه محصول نهایی
43
1 - ابتذا ريی محت اً تمرکس کىیذ. یک وسخ پای ایجاد کىیذ ک مَ بت اًوىذ ب آن دسترسی داضت باضىذ ي محت اًی م رًد وظر ضما را ب ضکل قابل
قب لً ومایص د ذَ.
2 - جل اَی بصری را برای دستگا اَیی ک قابلیت ومایص آن اَ را داروذ اػمال کىیذ.
3 - در و اُیت لای تؼاملی را برای دستگا اَیی ک آن اَ را پطتیباوی می کىىذ اضاف کىیذ.
Aaron Gustafson
http://www.alistapart.com/articles/understandingprogressiveenhancement
http://filamentgroup.com/dwpe

6. استراتژی برای صفح ومایص اَی ک چًک
توسعه محصول نهایی
44
Responsive Web Design: Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design

7. تحقیق در م رًد ريیکرد رابط کاربری
Programmatic vs Declarative
http://candanny.wordpress.com/2011/08/14/declarative-vs-programmatic-in- javascript-mobile-app-frameworks
توسعه محصول نهایی
45

8. ب بُ دً بارگساری تصايیر
CSS Sprite Generator
http://spritegen.website-performance.org
http://css-tricks.com/css-sprites
توسعه محصول نهایی
46

9. استفاد از قابلیت اَی HTML 5
توسعه محصول نهایی
47
•url •email •datetime •datetime-local
•date •month •week •number
•range •color •search •tel
•time

10. CSS تیریذم ار هک
توسعه محصول نهایی
48
• از ت ضًیحات برای ایجاد ػى اًن برای بخص
اَی مختلف استفاد که ي ایه کار تا اوت اُی
فایل ادام بذ .ٌ
• در ابتذای رَ فایل یک لیست ػىايیه ایجاد
که ي بخص اَی مختلف را ب ترتیب ف رُست
که.
• برای ایه ک بت اًوی در محت اًی CSS راحت ي
سریغ جستج کىی، از یک وطاو خاظ در
ابتذای ػىايیه استفاد که.

11. فطرد کردن فایل اَ
Minify
http://code.google.com/p/minify
توسعه محصول نهایی
49

12. تفکیک کلاس اَ ي ضىاس اَ در CSS
توسعه محصول نهایی
50