界面线索性设计

3,164 views

Published on

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

0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,164
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
134
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide
  • 互联网里还傻逼样有理想的设计师。 极简主义,革新,消除欲望。 外向接触本能受挫焦虑症患者。 人格残缺的高智商低收入男性。 88年,Geek,爱电影大家好,今天的课题<线索性设计>,属于我自己的自己的一个名词创意。首先我想调查一下:这里有几个苹果粉丝,这里有几个微软粉丝,请你们说说,你觉得苹果产品,最优秀的一点是什么,或者说,用一个词,形容你在使用他们产品的心情的时候,你会怎么形容。我个人来说,我是微软粉丝,我不喜欢苹果的产品,但是我很欣赏。我一直不服气的一个大众的认同理论:苹果的体验做得比微软好。我通常会抵触说,那你为什么离不开微软?我自己也一直在思考这个问题。
  • 然后,我接触两种设计方法:目标导向设计&过程体验设计。而正是因为这两种设计方式,表现了两家公司不同的设计风格。那么今天,我是来解释我自己对这个理论的一点认识的,这个理论就是,为什么苹果公司的体验更好?第二个问题,就不在这个话题的讨论中。首先举个例子,大家看ipad,有人告诉我,我怎么让文件夹回到上面的位置。
  • 我们不得不否认的一点是,界面与界面之间其实是应该纯在联系的,我指的这种联系是说,空间感。存在相互之间的层级和逻辑关系的,而且这种关系,月符合现实的,越好。越容易让别人理解,越来越不用让别人学习。
  • 比如,我们在网页中,常使用的tab的导航,实际上就是tab notebook的一种变化。
  • 那么在,界面设计当中,我们除了关注当前界面之外,还应该去关注上一个界面,与下一个界面。以及他们之间的过渡。建立一个上下文空间。因为,他们能够非常容易帮你解答一个问题,how to action?尤其是在触摸屏上。
  • 线索性给人以可预测性。这是一种掌握的感觉,是一种控制的感觉。
  • 直接触摸,而不是借助其他工具翻译命令。因此,界面的线索性也要建立起来。推箱子的例子。用户随时在移动,常被打断,恢复的时候,用户需要知道当前的位置。单任务思想,一个界面只完成一项任务,卡片式界面,让界面相互之间富有逻辑。
  • 桌面图标的立体效果拍照,开锁的声音书架日历外形
  • iPad文件夹打开操作,iPad双击Home的效果。
  • 我记得很久以前xp是这么设计的,当你拖动窗口的时候,窗口并不会和你一起动,和你动的是一个虚框。他只会表达一个移动状态。按钮状态。滑块,声音,滑动,缩放,弹性列表(无法获得真实力学反馈而采用的视觉模拟)
  • 如果一个错误行为,你需要半年后才能得到教训,和你马上得到教训,这有什么区别?即时反馈,降低了用户的的犯错所导致的等待成本,以及他所引起的挫败感。
  • 几乎任何的页面翻转,都有动画效果。卡片式滚动,逻辑界面,一个页面,一项任务。
  • iPad文件夹打开操作,iPad双击Home的效果。
  • 通过动画,视觉外观,建立符合真实逻辑的物理空间。演示Flipboard的物理空间与杂志的关系。浮层与下侧界面的空间关系。
  • 通过动画,视觉外观,建立符合真实逻辑的物理空间。演示Flipboard的物理空间与杂志的关系。
  • iPad文件夹打开操作,iPad双击Home的效果。
  • Safari的多窗口切换,ibooks的书籍返回,iphoto的界面返回。Flipboard阴影的变化。
  • Flipboard的杂志化,卡片式的逻辑界面,层级过深,但是界面确富有逻辑。多任务时,应用切换障碍。
  • 展示wifi设置内,android界面的变态:菜单弹窗。
  • 展示Windows phone 的旋转切换.
  • iPad文件夹打开操作,iPad双击Home的效果。
  • iPad文件夹打开操作,iPad双击Home的效果。
  • 界面线索性设计

    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 />

    ×