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.
界面线索性设计<br />大脸<br />
目标导向设计vs过程体验设计<br />
1.什么是界面线索性?<br />
Contextual Environment<br />Prev.<br />Now<br />Next<br />How to Action<br />
当他们操作时,他们知道下一步即将出现什么、怎么回去——即使是在第一次操作。<br />
2.为什么是移动界面?<br />
界面限制<br />没有任务栏,没有窗口管理<br />没有最小化,没有关闭,默认全屏<br />屏幕尺寸降低到原来的1/4<br />按钮增大两倍<br />
界面限制<br />
因各种限制导致的导航缺失,使得线索性设计成为移动应用界面导航的救命稻草。<br />
其他原因<br />交互方式的拟真化<br />用户的移动场景需求<br />单任务思想<br />开发效率提高<br />竞争差异化<br />
3.线索性设计内容<br />
像素级拟物式外观<br />
看一眼,我就知道你是干嘛的。<br />类似真实物体的外观和呈现,让人几乎是条件反射般理解客户端的作用。<br />
即时反馈<br />
快速熟悉手势与导航<br />触摸屏的方式降低了操作的学习成本,即时反馈则大大降低了操作与反馈之间的距离,提高用户学习的效率。<br />
流动式动画<br />
显示界面的流动信息,隐喻操作行为。<br />无需言语,给动画1秒钟的舞台,他就能解释清楚,他就能被理解。就这么简单。<br />
有逻辑的物理空间<br />
Flipboard<br />封面<br />正文<br />目录<br />
让界面富有空间感,立体化。<br />从三视图,到立体图的进化。<br />
自圆其说的线索性<br />
有来有往,有去也有回。<br />关注于界面如何向前流动,也应该让用户知道如何返回。<br />
4.线索性设计展示<br />
iOS:瑕不掩瑜优秀的领先者<br />总体界面线索性设计的优秀,并不能掩盖其在多任务中的线索性的短板。<br />
Android:山寨仍需努力。<br />菜单,弹窗,易导致界面相互之间线索性的断裂。<br />
WP7:小伙子,我看好你哦。<br />革命性创新的线索性设计,全景视图让人惊艳。<br />
5.练习:书籍目录设计<br />
6.Q&A<br />
结束,谢谢大家!<br />大脸:tolyer@gmail.com<br />
彩蛋:这个PPT的线索性设计是如何?<br />答中有奖<br />
PPT线索性设计结构<br />封面<br />1.什么是线索性<br />…..<br />……<br />2.为什么是移动界面<br />…<br />3.线索性设计内容<br />….<br />4.线索性设计展示<br />…….<br />
Upcoming SlideShare
Loading in …5
×

界面线索性设计

3,295 views

Published on

阿里巴巴用户体验百家讲堂

  • Be the first to comment

界面线索性设计

  1. 1. 界面线索性设计<br />大脸<br />
  2. 2. 目标导向设计vs过程体验设计<br />
  3. 3. 1.什么是界面线索性?<br />
  4. 4.
  5. 5. Contextual Environment<br />Prev.<br />Now<br />Next<br />How to Action<br />
  6. 6. 当他们操作时,他们知道下一步即将出现什么、怎么回去——即使是在第一次操作。<br />
  7. 7. 2.为什么是移动界面?<br />
  8. 8. 界面限制<br />没有任务栏,没有窗口管理<br />没有最小化,没有关闭,默认全屏<br />屏幕尺寸降低到原来的1/4<br />按钮增大两倍<br />
  9. 9. 界面限制<br />
  10. 10. 因各种限制导致的导航缺失,使得线索性设计成为移动应用界面导航的救命稻草。<br />
  11. 11. 其他原因<br />交互方式的拟真化<br />用户的移动场景需求<br />单任务思想<br />开发效率提高<br />竞争差异化<br />
  12. 12. 3.线索性设计内容<br />
  13. 13. 像素级拟物式外观<br />
  14. 14. 看一眼,我就知道你是干嘛的。<br />类似真实物体的外观和呈现,让人几乎是条件反射般理解客户端的作用。<br />
  15. 15. 即时反馈<br />
  16. 16. 快速熟悉手势与导航<br />触摸屏的方式降低了操作的学习成本,即时反馈则大大降低了操作与反馈之间的距离,提高用户学习的效率。<br />
  17. 17. 流动式动画<br />
  18. 18. 显示界面的流动信息,隐喻操作行为。<br />无需言语,给动画1秒钟的舞台,他就能解释清楚,他就能被理解。就这么简单。<br />
  19. 19. 有逻辑的物理空间<br />
  20. 20. Flipboard<br />封面<br />正文<br />目录<br />
  21. 21. 让界面富有空间感,立体化。<br />从三视图,到立体图的进化。<br />
  22. 22. 自圆其说的线索性<br />
  23. 23. 有来有往,有去也有回。<br />关注于界面如何向前流动,也应该让用户知道如何返回。<br />
  24. 24. 4.线索性设计展示<br />
  25. 25. iOS:瑕不掩瑜优秀的领先者<br />总体界面线索性设计的优秀,并不能掩盖其在多任务中的线索性的短板。<br />
  26. 26. Android:山寨仍需努力。<br />菜单,弹窗,易导致界面相互之间线索性的断裂。<br />
  27. 27. WP7:小伙子,我看好你哦。<br />革命性创新的线索性设计,全景视图让人惊艳。<br />
  28. 28. 5.练习:书籍目录设计<br />
  29. 29. 6.Q&A<br />
  30. 30. 结束,谢谢大家!<br />大脸:tolyer@gmail.com<br />
  31. 31. 彩蛋:这个PPT的线索性设计是如何?<br />答中有奖<br />
  32. 32. PPT线索性设计结构<br />封面<br />1.什么是线索性<br />…..<br />……<br />2.为什么是移动界面<br />…<br />3.线索性设计内容<br />….<br />4.线索性设计展示<br />…….<br />

×