Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

بهبود تجربه‌ی کاربری در طراحی واکنش‌گرا

669 views

Published on

ابزارها و متدهای جدید برای هرچه سیال‌کردن صفحات وب و نمایش بهتر آن‌ها روی اندازه‌های مختلف نمایشگر‌ها منتشر شده و می‌شوند، اما چه خوب است که به تجربه‌ی کاربر بعد از بارگذاری صفحه و هنگام کار با صفحه (مخصوصا در برنامه‌های تحت وب) نیز توجه کنیم. با هم چند نکته برای بهبود یک سایت واکنش‌گرا و ایجاد یک تجربه‌بهتر را مرور خواهیم کرد.

Published in: Education
  • Be the first to comment

  • Be the first to like this

بهبود تجربه‌ی کاربری در طراحی واکنش‌گرا

  1. 1. ‫ﺑﻬﺒﻮﺩ‬‫ﻃﺮﺍﺣﯽ‬ ‫ﺩﺭ‬ ‫ﮐﺎﺭﺑﺮی‬ ‫ی‬‫ﺗﺠﺮﺑﻪ‬‫ﮔﺮﺍ‬‫ﻭﺍﮐﻨﺶ‬ ‫ﺩﻫﻨﺪﻩ‬ ‫ﺍﺭﺍﺋﻪ‬: ‫ﻋﻠﯿﭙﻮﺭ‬ ‫ﺳﻌﯿﺪ‬ alipoor.sa" saeedalipoor" saeednitrate" saeedalipoor"
  2. 2. ‫ﻃﺮﺍﺣﯽ‬‫ﮔﺮﺍ‬‫ﻭﺍﮐﻨﺶ‬
  3. 3. ‫ﮔﺮﺍ‬‫ﻭﺍﮐﻨﺶ‬ ‫ﻃﺮﺍﺣﯽ‬ ‫ﻫﺎی‬‫ﺭﻭﺵ‬ ‫ﻭ‬ ‫ﺍﻟﮕﻮﻫﺎ‬‫ﻓﻌﻠﯽ‬
  4. 4. ‫ﮔﺮﺍ‬‫ﻭﺍﮐﻨﺶ‬ ‫ﻃﺮﺍﺣﯽ‬ ‫ﻓﻌﻠﯽ‬ ‫ﻫﺎی‬‫ﺭﻭﺵ‬ ‫ﻭ‬ ‫ﺍﻟﮕﻮﻫﺎ‬ ‫ﺳﻄﺢ‬ ‫ﺑﺮﺩﻥ‬ ‫ﺑﺎﻻ‬‫ﺭﺿﺎﯾﺖ‬‫ﮐﺎﺭﺑﺮﺍﻥ‬
  5. 5. ‫ﮔﺮﺍ‬‫ﻭﺍﮐﻨﺶ‬ ‫ﻃﺮﺍﺣﯽ‬ ‫ﻓﻌﻠﯽ‬ ‫ﻫﺎی‬‫ﺭﻭﺵ‬ ‫ﻭ‬ ‫ﺍﻟﮕﻮﻫﺎ‬ ‫ﺳﻄﺢ‬ ‫ﺑﺮﺩﻥ‬ ‫ﺑﺎﻻ‬‫ﮐﺎﺭﺑﺮﺍﻥ‬ ‫ﺭﺿﺎﯾﺖ‬ ‫ﮔﺮﺍ‬‫ﻭﺍﮐﻨﺶ‬ ِ‫ﮐﺎﺭﺑﺮی‬‫ﺗﺠﺮﺑﻪ‬
  6. 6. ‫ﻃﺮﺍﺣﯽ‬ ‫ﻫﻨﮕﺎﻡ‬ ‫ﻧﮑﺎﺕ‬ ‫ﺑﻌﻀﯽ‬ ‫ﺭﻋﺎﯾﺖ‬ ‫ﻭ‬ ‫ﺩﺍﻧﺴﺘﻦ‬ ‫ﺑﺎ‬ ‫ﻟﻤﺴﯽ‬ ‫ﯾﺎ‬ ‫ﺗﺮ‬‫ﮐﻮﭼﮏ‬ ‫ﻧﻤﺎﯾﺸﮕﺮﻫﺎی‬ ‫ﺑﺮﺍی‬ ‫ﮐﺮﺩ‬ ‫ﻫﺪﯾﻪ‬ ‫ﮐﺎﺭﺑﺮﺍﻥ‬ ‫ﺑﻪ‬ ‫ﺑﯿﺸﺘﺮی‬ ‫ﺭﺍﺣﺘﯽ‬ ‫ﺗﻮﺍﻥ‬‫ﻣﯽ‬
  7. 7. ‫ﺻﺤﯿﺢ‬ ‫ﮐﺎﺭﺑﺮﺩ‬Meta Viewport Tag <meta name=viewport content="width=device-width, initial-scale=1">
  8. 8. ‫ﻟﻤﺴﯽ‬ ‫ﻧﻤﺎﯾﺸﮕﺮﻫﺎی‬ ‫ﻭ‬ ‫ﻣﻮﺑﺎﯾﻞ‬ ‫ﮐﺎﺭﺑﺮﺍﻥ‬ ‫ﺭﻭﯾﺪﺍﺩ‬Hover‫ﻧﺪﺍﺭﻧﺪ‬
  9. 9. ‫ﮐﺎﺭﺑﺮ‬ ‫ﺍﻧﮕﺸﺘﺎﻥ‬ ‫ﺩﺳﺘﺮﺱ‬ ‫ﺩﺭ‬
  10. 10. ‫ﺻﻔﺤﻪ‬ ‫ﺩﺭ‬ ‫ﺍﻧﮕﺸﺖ‬ ‫ﺣﺮﮐﺎﺕ‬ ‫ﺍﺯ‬ ‫ﭘﺸﺘﯿﺒﺎﻧﯽ‬
  11. 11. ‫ﻫﺎ‬‫ﻓﺮﻡ‬ ‫ﭘﺮﮐﺮﺩﻥ‬ ‫ﺩﺭ‬ ‫ﮐﺎﺭﺑﺮ‬ ‫ﺭﺍﺣﺘﯽ‬
  12. 12. ‫ﻫﺎ‬‫ﺳﺎﯾﺖ‬ ‫ﻧﻤﺎﯾﺶ‬ ‫ﺩﺭ‬ ‫ﻫﺎ‬‫ﺗﺒﻠﺖ‬ ‫ﻭ‬ ‫ﻫﺎ‬‫ﮔﻮﺷﯽ‬ ‫ﺳﻬﻢ‬ ‫ﮐﺎﺭﺑﺮﺍﻧﺸﺎﻥ‬ ‫ﺑﺮﺍی‬ ،‫ﺍﺳﺖ‬ ‫ﺍﻓﺰﺍﯾﺶ‬ ‫ﺣﺎﻝ‬ ‫ﺩﺭ‬ ‫ﺭﻭﺯ‬ ‫ﻫﺮ‬ ‫ﺑﺰﻧﯿﻢ‬ ‫ﺭﻗﻢ‬ ‫ﺧﻮﺏ‬ ‫ﺍی‬‫ﺗﺠﺮﺑﻪ‬.(:
  13. 13. ‫ﺷﻤﺎ‬ ‫ﺗﻮﺟﻪ‬ ‫ﺍﺯ‬ ‫ﺳﭙﺎﺱ‬

×