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

Ali Akrami
Ali AkramiIT Management Consultant, Software Engineer, Java Developer, Linux Lover, Microservices Architect
تمرین کاربردی 
برای یک طراح تجربه کاربری 
علی اکرمی 
aliakrami.ir 
- ضريع که 
- بررسی ویاز کاربران 
- طراحی رابط کاربری 
- استراتژی محت اً 
- ت سًؼ محص لً و اُیی
توسعه محصول نهایی 
جلس پىجم 
41 م اًرد در حال يیرایص را برجست که 
42 بارگساری تذریجی 
43 ب بُ دً مرحل ای 
44 استراتژی برای صفح ومایص اَی ک چًک 
45 تحقیق در م رًد ريیکرد رابط کاربری 
46 ب بُ دً بارگساری تصايیر 
47 استفاد از قابلیت اَی HTML 5 
48 CSS را مذیریت که 
49 فطرد کردن فایل اَ 
50 تفکیک کلاس اَ ي ضىاس اَ در CSS
توسعه محصول نهایی 
م اًرد در حال يیرایص را برجست که 
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
1 de 12

Recomendados

اصول طراحی برای معماری اطلاعات por
اصول طراحی برای معماری اطلاعاتاصول طراحی برای معماری اطلاعات
اصول طراحی برای معماری اطلاعاتVahid Abolhassani Nejad
1.7K visualizações34 slides
طراحی تجربه کاربری چیست؟ por
طراحی تجربه کاربری چیست؟طراحی تجربه کاربری چیست؟
طراحی تجربه کاربری چیست؟Vahid Abolhassani Nejad
1.7K visualizações29 slides
50 تمرین کاربردی برای یک طراح تجربه کاربری - جلسه اول por
50 تمرین کاربردی برای یک طراح تجربه کاربری - جلسه اول50 تمرین کاربردی برای یک طراح تجربه کاربری - جلسه اول
50 تمرین کاربردی برای یک طراح تجربه کاربری - جلسه اولAli Akrami
1.3K visualizações12 slides
50 تمرین کاربردی برای یک طراح تجربه کاربری - جلسه دوم por
50 تمرین کاربردی برای یک طراح تجربه کاربری - جلسه دوم50 تمرین کاربردی برای یک طراح تجربه کاربری - جلسه دوم
50 تمرین کاربردی برای یک طراح تجربه کاربری - جلسه دومAli Akrami
985 visualizações10 slides
تفکر طراحی |Design thinking por
تفکر طراحی |Design thinkingتفکر طراحی |Design thinking
تفکر طراحی |Design thinkingdayavent
1.6K visualizações8 slides
product management in simple language مدیریت محصول به زبان ساده por
product management in simple language مدیریت محصول به زبان سادهproduct management in simple language مدیریت محصول به زبان ساده
product management in simple language مدیریت محصول به زبان سادهNegin Yashmi
644 visualizações40 slides

Mais conteúdo relacionado

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

مديريت محصول por
مديريت محصولمديريت محصول
مديريت محصولShadi Golchinfar(شادی گلچین فر)
385 visualizações20 slides
نصب تضمینی اپلیکیشن por
نصب تضمینی اپلیکیشننصب تضمینی اپلیکیشن
نصب تضمینی اپلیکیشنfaratehran
29 visualizações30 slides
agil software managment by scrunm in tfs por
agil software managment by scrunm in tfsagil software managment by scrunm in tfs
agil software managment by scrunm in tfsReza Rahimy
424 visualizações87 slides
چارچوب متن باز جهت توسعه سیستم های نرم افزاری por
چارچوب متن باز جهت توسعه سیستم های نرم افزاریچارچوب متن باز جهت توسعه سیستم های نرم افزاری
چارچوب متن باز جهت توسعه سیستم های نرم افزاریعباس بني اسدي مقدم
439 visualizações23 slides
Scrum Presentation por
Scrum PresentationScrum Presentation
Scrum PresentationS.Mostafa Sayyedi
334 visualizações16 slides
در نگهداشت و مدیریت دارائی ITILبکارگیری چارچوب por
در نگهداشت و مدیریت دارائی ITILبکارگیری چارچوب در نگهداشت و مدیریت دارائی ITILبکارگیری چارچوب
در نگهداشت و مدیریت دارائی ITILبکارگیری چارچوب Mohammad Ahmadzadeh
106 visualizações28 slides

Similar a 50 تمرین کاربردی برای یک طراح تجربه کاربری - جلسه پنجم(20)

نصب تضمینی اپلیکیشن por faratehran
نصب تضمینی اپلیکیشننصب تضمینی اپلیکیشن
نصب تضمینی اپلیکیشن
faratehran29 visualizações
agil software managment by scrunm in tfs por Reza Rahimy
agil software managment by scrunm in tfsagil software managment by scrunm in tfs
agil software managment by scrunm in tfs
Reza Rahimy424 visualizações
چارچوب متن باز جهت توسعه سیستم های نرم افزاری por عباس بني اسدي مقدم
چارچوب متن باز جهت توسعه سیستم های نرم افزاریچارچوب متن باز جهت توسعه سیستم های نرم افزاری
چارچوب متن باز جهت توسعه سیستم های نرم افزاری
عباس بني اسدي مقدم439 visualizações
Scrum Presentation por S.Mostafa Sayyedi
Scrum PresentationScrum Presentation
Scrum Presentation
S.Mostafa Sayyedi334 visualizações
در نگهداشت و مدیریت دارائی ITILبکارگیری چارچوب por Mohammad Ahmadzadeh
در نگهداشت و مدیریت دارائی ITILبکارگیری چارچوب در نگهداشت و مدیریت دارائی ITILبکارگیری چارچوب
در نگهداشت و مدیریت دارائی ITILبکارگیری چارچوب
Mohammad Ahmadzadeh106 visualizações
Trahimoarfivateam por Reza Maleki
TrahimoarfivateamTrahimoarfivateam
Trahimoarfivateam
Reza Maleki70 visualizações
oCCc_24_Cloud_Design_Patterns por Morteza Javan
oCCc_24_Cloud_Design_PatternsoCCc_24_Cloud_Design_Patterns
oCCc_24_Cloud_Design_Patterns
Morteza Javan1.1K visualizações
Content management system por nasimtalebi1984
Content management systemContent management system
Content management system
nasimtalebi198455 visualizações
طرح درس بسته 3 جلد 1 سال 94 por pani ansari
طرح درس بسته 3 جلد 1 سال 94طرح درس بسته 3 جلد 1 سال 94
طرح درس بسته 3 جلد 1 سال 94
pani ansari624 visualizações
طرح درس بسته 3 جلد 1 سال 94 por pani ansari
طرح درس بسته 3 جلد 1 سال 94طرح درس بسته 3 جلد 1 سال 94
طرح درس بسته 3 جلد 1 سال 94
pani ansari2K visualizações
کارگاه آموزش مقدماتی طراحی واسط و تجربه کاربری UI/UX Desgin Workshop por Esmail MohammadiPanah
کارگاه آموزش مقدماتی طراحی واسط و تجربه کاربری UI/UX Desgin Workshopکارگاه آموزش مقدماتی طراحی واسط و تجربه کاربری UI/UX Desgin Workshop
کارگاه آموزش مقدماتی طراحی واسط و تجربه کاربری UI/UX Desgin Workshop
Esmail MohammadiPanah213 visualizações
راهکارهای طراحی نرم افزار ها محب الله امان por Muhibullah Aman
راهکارهای طراحی نرم افزار ها   محب الله امانراهکارهای طراحی نرم افزار ها   محب الله امان
راهکارهای طراحی نرم افزار ها محب الله امان
Muhibullah Aman1.9K visualizações
آموزش جامع شی گرایی در سی شارپ por faradars
آموزش جامع شی گرایی در سی شارپآموزش جامع شی گرایی در سی شارپ
آموزش جامع شی گرایی در سی شارپ
faradars691 visualizações
2- Agile BABOK - Ali Razi por Ali Moghadam
2- Agile BABOK - Ali Razi2- Agile BABOK - Ali Razi
2- Agile BABOK - Ali Razi
Ali Moghadam887 visualizações
Agile & BABOK | By Ali Razi por Iran Agile Community
Agile & BABOK | By Ali RaziAgile & BABOK | By Ali Razi
Agile & BABOK | By Ali Razi
Iran Agile Community539 visualizações
from internship to professional work por Negin Yashmi
from internship to professional workfrom internship to professional work
from internship to professional work
Negin Yashmi79 visualizações
cloud-based authoring tools por dadyjoon71
cloud-based authoring toolscloud-based authoring tools
cloud-based authoring tools
dadyjoon71561 visualizações

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