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

Post on 28-Nov-2014

253 views 8 download

description

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

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

تمرین کاربردی برای یک طراح تجربه کاربری

علی اکرمیaliakrami.ir

ضريع که - بررسی ویاز کاربران - طراحی رابط کاربری - استراتژی محتًا - تًسؼٍ محصًل وُایی -

توسعه محصول نهایی

جلسٍ پىجم

برجستٍ کهيیرایص را مًارد در حال 41 بارگساری تذریجی 42 مرحلٍ ایبُبًد 43 استراتژی برای صفحٍ ومایص َای کًچک 44 تحقیق در مًرد ريیکرد رابط کاربری 45

بُبًد بارگساری تصايیر 46 HTML 5استفادٌ از قابلیت َای 4748 CSS که را مذیریت فطردٌ کردن فایل َا 49 CSSتفکیک کالس َا ي ضىاسٍ َا در 50

توسعه محصول نهایی

را برجستٍ کهيیرایص مًارد در حال 41

بارگساری تذریجی

42 توسعه محصول نهایی

:مطکل ضًد می ػث با سىتی ريش بٍ صفحات بارگساری

فراخًاوی چیسی ومایص از قبل اطالػات َمٍ کٍ .بماوذ مىتظر خیلی کاربر ضًد می باػث کٍ ضًد

:حل راٌ

ثابت ػىاصر ابتذا تذریجی، بارگساری از استفادٌ با َا دادٌ سپس.ضًوذ می فرياخًاوی صفحٍ

با ي تذریج بٍ وُایت در ي ضًوذ می فرياخًاوی می بارگساری بیطتری َای دادٌ کاربر، پیمایص

.ضًوذ

مرحلٍ ایبُبًد

43 توسعه محصول نهایی

پایٍ وسخٍ یک .کىیذ تمرکس محتًا ريی ابتذا -1 داضتٍ دسترسی آن بٍ بتًاوىذ َمٍ کٍ کىیذ ایجاد قابل ضکل بٍ را ضما وظر مًرد محتًای ي باضىذ .دَذ ومایص قبًل

کٍ َایی دستگاٌ برای را بصری َای جلًٌ -2

.کىیذ اػمال داروذ را َا آن ومایص قابلیت

کٍ َایی دستگاٌ برای را تؼاملی الیٍ وُایت در -3 .کىیذ اضافٍ کىىذ می پطتیباوی را َا آن

Aaron Gustafson http://www.alistapart.com/articles/understandingprogressiveenhancement http://filamentgroup.com/dwpe

استراتژی برای صفحٍ ومایص َای کًچک

44 توسعه محصول نهایی

Responsive Web Design: Ethan Marcotte http://www.alistapart.com/articles/responsive-web-design

تحقیق در مًرد ريیکرد رابط کاربری

Programmatic vs Declarative http://candanny.wordpress.com/2011/08/14/declarative-vs-programmatic-in-javascript-mobile-app-frameworks

45 توسعه محصول نهایی

بُبًد بارگساری تصايیر

CSS Sprite Generator http://spritegen.website-performance.org http://css-tricks.com/css-sprites

46 توسعه محصول نهایی

HTML 5استفادٌ از قابلیت َای

47 توسعه محصول نهایی

•url •email •datetime •datetime-local •date •month •week •number •range •color •search •tel •time

CSS که را مذیریت

48 توسعه محصول نهایی

بخص برای ػىًان ایجاد برای تًضیحات از• اوتُای تا کار ایه ي که استفادٌ مختلف َای .بذٌ ادامٍ فایل

ایجاد ػىايیه لیست یک فایل َر ابتذای در•

فُرست ترتیب بٍ را مختلف َای بخص ي که .که

ي راحت CSS محتًای در بتًاوی کٍ ایه برای•

در خاظ وطاوٍ یک از کىی، جستجً سریغ .که استفادٌ ػىايیه ابتذای

فطردٌ کردن فایل َا

Minify http://code.google.com/p/minify

49 توسعه محصول نهایی

CSSتفکیک کالس َا ي ضىاسٍ َا در

50 توسعه محصول نهایی