ppt for industrial student simple introduction of interaction design

1. DESIGN INTERACTION 交互设计介绍 hereiswzm@hotmail.com

2. DESIGN INTERACTION 一个数字产品的诞生过程

3. DESIGN INTERACTION 什么是交互设计？

4. 传统设计所注重的是 ·视觉 --- 就此衍生了平面设计，工业设计 设计中较感性的一面

5. 传统设计所注重的是 ·触觉 --- 就此衍生了人机工程学，当然除了生理，人机工程学还要考虑心理因素。 设计中较理性的一面

6. 设计的三个层面 在NORMAN的《情感化设计》中提到，视觉和触觉都是设计三个层面中的第一个层面：本能设计(Visceral). 它涉及的是感受知觉的作用，比如味觉、嗅觉、触觉、听觉和视觉上的体验。 本能层就是给人带来的感官刺激的一层

7. 设计的三个层面 它们三者对应的产品特点是这样 本能水平的设计(Visceral) > 外形 行为水平的设计(Behavioral) > 使用的乐趣和效率 反思水平的设计(Reflective) > 自我形象、个人满意、记忆

8. 设计的三个层面 一个较为通俗的说法 本能水平的设计主要着重于使用者对产品的第一感觉，比如美观

9. 设计的三个层面 一个较为通俗的说法 行为水平的设计主要着重于在使用过程中的体验，比如功能设置，易用性 vs. Wii的胜利很大程度上是 新的交互方式使用的胜利

10. 设计的三个层面 一个较为通俗的说法 反思水平的设计主要着重于在使用产品之后给人的感觉，比如使用者会因为这个产品而产生乐趣，产生满足感等。

11. 设计的三个层面 一个好的产品设计会囊括这三个方面的设计，会使人感觉到 美观 实用 愉快 交互设计就是设计层面中的第二层：行为设计

12. 设计的三个层面 当然，上面的说法不是正确的，这三个水平设计对使用者的影响是一直贯穿在产品的整个使用过程中的，并且它们也相互影响。 这里翻译成“层面”而不是“层次”，就是因为这三者是一样的重要的。

13. 交互设计的定义： 简单的说，交互设计是人工制品、环境和系统的行为，以及传达这种行为的外形元素的设计与定义。 不像传统的设计学科主要关注形式，交互设计则是关注内容和内涵，而交互设计首先旨在规划和描述事物的行为方式，然后描述传达这种行为的最有效形式。

14. 当然，还有更简单的说法： 在我的理解中，交互设计是通过对用户行为的研究和分析，设计人与产品交互的过程，帮助用户更好的达到目标。

15. 注意：交互不是仅仅在说功能，Norman的书中说的是行为设计(Behavioral) ，而不是功能设计（function）。 因为我们说功能，就很狭义的当做机器上一个新的按钮键，软件上一个新的用途。行为设计是指用户在使用的一整个过程的体验。用户关注的不是产品的功能是否强大，而是产品是否帮助他快速有效地达到了他的目的。

16. DESIGN INTERACTION 交互设计案例

17. 案例 任务：在这个播放器中找出正在播放的曲目

18. 案例 任务：在这个播放器中找出正在播放的曲目 这首？ 这首？ 这首？ 这首？ 实际是这首，但是你能快速地找到它在右栏播放列表的位置吗？

19. 对比这个播放器，你不是能一眼就看出它的播放曲目了呢

20. 眯眼测试（squint test） 就是一直眼睛闭上，眯着另一只眼睛看屏幕，用于测试平面的布局是否清晰，正确，在模糊中是否能区分出突出元素，次要元素。

21. 三大区域：播放区，列表区，功能视窗区 右边的播放器布局更为区分明显一些

22. 面对被模仿致敬的Media player ，这个播放器并没有抓住其中关于交互的细节精髓。 当然这个播放器还是有优点的，比如造型独特，有歌曲去重的功能，播放速度快，乐库广泛等等。

23. 讲到这里你或许会问了， 难到交互设计就是这些细节性的问题吗？ ----不，不是的，这里讨论的不是细节，而是在人们使用产品的过程中因为细小的问题考虑不周到而影响了使用的体验。 细小到就如播放器上某个小图标的设置是否合理 搜狗浏览器中，专门将不常用的菜单放置在浏览器右边，为的是不和浏览器左边常用功能混淆，减低出错性，增加易用度 火狐浏览器中，将添加到收藏夹的按钮放在url旁边，位置显眼，而且省下了至少一个步骤

24. 讲到这里你或许会问了， 难到交互设计就是这些细节性的问题吗？ ----不，不是的，这里讨论的不是细节，而是在人们使用产品的过程中因为细小的问题考虑不周到而影响了使用的体验。 细小到就如播放器上某个小图标的设置是否合理 搜狗浏览器中，专门将不常用的菜单放置在浏览器右边，为的是不和浏览器左边常用功能混淆，减低出错性，增加易用度。 同时，因为宽屏电脑的使用，这样做也可以增大垂直的空间

25. 大到整个流程的设计 进入活动首页，点击预定或者查询 Qq会员登录验证，弹出登录框 腾讯深航合作项目预订机票简单流程图 加粗字体为按钮 非会员，弹出框中提示，更换qq号码 成为会员 （弹出框可以关闭） 会员，跳转页面进入深航页面，选择机票（头等舱和商务舱都无座），下一步 填写旅客信息和人数，显示机票价格，上一步 下一步 生成订单，上一步财付通支付 Qq会员登录验证

26. 上一个太简单，摘录一个比较复杂的 来自http://www.ui123.com/blog/2007/07/11/wapshili/ 网盘下载流程分析

27. 直到最后的将内容和流程翻译成界面语言---框架图

28. 当你理解交互是一个过程设计的时候，你就应该明白任何产品都需要交互设计，无论是互联网数字产品还是工业产品，只不过它因为偏重方向的不同而可能换了名字，人机交互，可用性，感性工程等等。 案例：博物馆的交互设计 MIXMIX 来源http://projects.domusacademy.net/bnm/?cat=6

35. DESIGN INTERACTION 用户体验和可用性

36. 用户体验 当我们提到交互设计的时候，我们总会联系到用户体验 用户体验的定义之一：是一种纯主观的在用户使用一个产品（服务）的过程中建立起来的心理感受 他们之间的关系是：交互设计是为了支持更好的用户体验

37. 基于用户体验的数字产品设计会包括这三个方面的关注：形式，内容，行为 形式 工业设计师 图形设计师 内容 信息架构师 文字编写者 动画制作师 声音分析师 行为 交互设计师

38. 可用性 可用性也是人机交互领域的一个常见的词语 在《可用性工程》中，可用性被总结为与这五个属性相联系： ·可学习性（learnability） --易学 ·效率（efficient）--高效 ·可记忆性（memorablity）--好记 ·出错（errors）--少错 ·满意度 （satification）--令人满意的程度

39. 可用性目标是交互设计的核心，但不是交互设计的全部。 交互设计在满足可用性的同时，还要满足用户期望 令人满足 情感满足 工作效率高 使用有效果 令人愉快 成就感 用法易记 可用性目标 引人入胜 激发创造性 使用安全 易学 良好的实用性 富美感 有用 富有启发性

40. 从用户的角度来说，交互设计是一种如何让产品易用，有效而让人愉悦的技术。 一个只是很好用的产品并不能完全满足人们的需求，有的时候，人们会因为忍受一时的不变，如果这个产品能带给他们更多的乐趣。 更有趣 更实用

41. 所有的产品都是一种服务，帮助使用者更好的达到目的的服务。 帮助清洁 帮助交流

42. 用一个服务行业的例子来类比产品，比如：移动大厅接待的服务员，做为顾客，你对她的期望 1.着装整洁，漂亮 2.办事高效 3.态度温柔诚恳（不要冷冰冰） 4.耐心 5.说话简单易懂（不要一堆专业术语） 6. 不出错 …

43. 期望还有很多很多，但是你希望你从营业厅走出来的时候，把要处理的事情正确地处理好，并且心情愉快。 这也是你在使用一个产品之后所要的感觉，只有这样，才能留住用户。

44. DESIGN INTERACTION 交互设计--理性（可用性）和感性（用户期望）并重的设计 入门书籍推荐

45. DESIGN INTERACTION Quiz 根据自己的经验和回忆，画出一个新用户注册流程图

46. DESIGN INTERACTION THANKS, THE END…. Wendy 2009.9.14