很多交互设计师朋友可能觉得交互作品既没有视觉作品高大上，又没有用研报告高科技，总是感觉不那么好看。其实不然，交互文档也是可以有档次的。这次我们就来解决这个问题。

既然聊精细原型，我们就暂时抛开最基本的栅格化等设计要素不谈，我们这次只是从原型本身的精细化来聊聊。下面说说个人觉得影响交互文档品质的几个维度，不一定对，随便看看就好：

一、浅色的主体

首先，交互设计师输出的是流程图，给开发以及产品经理沟通之用，所以有时候为了突出界面的层次和区域，有必要通过深浅灰色来进行区分，在我制图的过程中，基本上界面上70%都是白色为主，一个是为了看起来更加干净，再一个是如果有必要打印沟通，当然白色是比较好的。

二、性感的线条

在设计图中有很多线条，线条的粗细、虚实程度以及构成都有不同的意义，灵活的运用这些线条可以帮助自己的文档提高一个档次。

首先说线条怎么画出来，很多设计师通常使用矩形工具来为自己的界面提供线条，这样用起来最方便，但是如果在界面内的区域划分、条目列举等等情况下，众多矩形看起来会非常的没有重点，同时在两个矩形重叠处也非常不好处理，所以再界面内的区域划分这种情况使用适当的连接线工具还是非常好的，既避免的重叠的问题，又更好调节哪些是重点，哪些不是重点。

然后是线条的虚实，线条的虚实是配合上一条来使用，在页面内划分时候虚线配连接线会让界面更有层次。同时我喜欢用线条的粗细来做背景内容和界面内容的区别。

上面说的只是线条的几个维度，运用好可以做出非常性感的线条，同时也不会增加工作量。

三、敏感的颜色

首先，适当的颜色可以更好的达到黑白灰无法达到的效果，但是这个颜色不要太艳，所以再使用颜色时应该尽量使用纯度不高的颜色，可以适当调节一下透明度，目的就是不抢视觉，同时还能表达清楚我们的意思。

我们来看一下下面这个例子，对于删除这种操作，我选择使用20%透明度的红色来着色，首先它没有抢视觉，其次除了设计师本身之外，开发和PM都能很好的理解这是一个“红色”的操作。但是你想想，如果用黑白灰此处你应该如何表现呢？

与此同时，对于和自己公司的产品经理和开发者有着长期合作的设计师来说，给颜色赋予性格也是非常重要的一件事儿，红色代表删除，黄色代表选中，绿线代表前进，红线代表后退，等等诸如此类的颜色定义，在长期的使用和沟通中可以培养其他人员对你颜色的敏感，同时，除了线型，色块等等，你又多了一种表达含义的一种方式—-颜色。

说了这么多，其实不是否定前面的观点，而是提出其实交互文档可以更精致，可以更有“格调”。

要想创造更智能、更好的产品，如果用讲故事的方式反而是一个好方法。产品设计团队常犯的错误之一就是混淆了看起来美观和工作起来美观的的设计方案，虽然核心思想都是通过一系列的设计元素引导用户使用这个产品。

一. 设计不是在那里描蓝图

很多设计团队把UI设计看做一个描绘蓝图的过程，会在每一栏中标明属于它的元素，每一个屏幕都会显示产品在不同情形下的样子，但这些屏幕其实不是连接起来的。这样的问题是，通过图你可以理解这个产品看起来怎么样，却不知道工作的时候是怎么样的？用户互动的时候是怎么样的？所以这种方式严重限制了他们想象产品互动时的推理能力。

而最好的产品设计师是从构造用户互动故事开始的，然后故事构造完的时候就是他们开始在设计屏幕上讲故事的时候。

讲故事形式的设计展现，就像一帧一帧的幻灯片在滑过。设计师们会呈现用户解读的每一面，他们做的每一个交互动作，每一个系统产生屏幕得到的回应，整个下来就感觉用户是全程支持每一步的，下面就是一个例子。

对于工程师来说，这应该是很熟悉的。故事式的设计核心就跟以测试为驱动的开发过程一样的，不是为了写测试而敲代码；而是在用写故事的方法锻炼我们的设计能力，最后这个对团队的执行速度和产品质量也是非常有用的。

二. 如何讲故事式地设计？

白板故事：准备一个白板，画个一英尺大小的盒子放在白板上，在每个框填写你为用户打造的小互动，画出关键地方的副本。画出每个用户会点击或者滑动的地方（比如图片上面），一旦得到认可，团队工作起来会很快。

换掉你的老工具：许多设计工具是用来创造海报或书籍的，所以抛弃Photoshop，捡起Keynote, OmniGraffle, 或者Fireworks这些支持多页面、帮助你专注端到端设计流程的工具。

不对单个屏幕做批判：确保你的团队在审查的时候，是针对整个故事，如果你一个人你可以在房子里摆好所有的屏幕，如果你要以邮件的形式发给团队，把它们录制成一个连续的视屏。

最后，不得不说一下为什么讲故事式的设计方式是好的。

它模拟了用户体验： 每一步设计的时候都是在模拟用户体验：团队可在早期就发现问题，因为讲故事的时候加入了时间维度，所以不用等所有的草图画出来后才发现哪里错了、哪里不对劲。UI上那些不必要的步骤和死角也可以得到更快的注意，这些细节最终会导向更好的可用性和用户参与度。

前期就阐明了设计目标： 这个一开始的时候就迫使团队成员去思考所有的细节，草图一出来，团队就会发现设计师是否完成了预订目标。

它依据科学： 据BJ Fogg的行为理论，所有目标的完成都要遵循诱因、动机、能力的准则，而讲故事的设计方式是完全符合的，它的每一个因素都是在鼓励用户进行互动。

整体上加速了每一件事 ： 创建模型的形式可以用作用户研究的形式，同样的故事思路可以用在漏斗分析中，让我们发现是否用户在实际使用的时候和我们的预想是一样的。团队在发布新版本的时候也可以用这个方法检验产品的可行性。

[VIA：雷锋网]

每个人对网站的使用习惯不一样，功能要求也不一样，要做到最好的用户体验只能是照顾最主要目标受众的需求，因此要实现用户体验的优化，前提之一是必须对自己的目标受众了如指掌。因此，要有一个详细的背景调查，分析目标受众的属性，分析他们的需求和行为特征，这样才能有的放矢，实现网站用户体验优化的目的。

现在很多互联网行业的从业人员动不动就提“用户体验”，但是在看了很多同行的网站后，发现很多的网站不仅没有把用户体验这个最重要的部分处理好，并且对用户体验的概念都比较模糊，更不知道从何下手，尤其对于电子商务网站而言，直接的后果就是网站的转化率提不上去，销售额无法突破。每个人对网站的使用习惯不一样，功能要求也不一样，要做到最好的用户体验只能是照顾最主要目标受众的需求，因此要实现用户体验的优化，前提之一是必须对自己的目标受众了如指掌。因此，要有一个详细的背景调查，分析目标受众的属性，分析他们的需求和行为特征，这样才能有的放矢，实现网站用户体验优化的目的。

其实对一个网站做一次用户体验分析是很细很累的活，但是意义却很大，尤其对年销售额上千万级的电子商务网站而言，用户体验做好了，转化率能增加千分之一那就能促进数百上千万的销售额，你说用户体验重不重要?

网站用户体验的分类:

1、感官体验：呈现给用户视听上的体验，强调舒适性。

2、交互体验：呈现给用户操作上的体验，强调易用/可用性。

3、情感体验：呈现给用户心理上的体验，强调友好性。

4、浏览体验：呈现给用户浏览上的体验，强调吸引性。

5、信任体验：呈现给用户的信任体验，强调可靠性。

网站用户体验的76个要素:

一、感官体验：呈现给用户视听上的体验，强调舒适性

1. 设计风格：符合目标客户的审美习惯，并具有一定的引导性。

网站在设计之前，必须明确目标客户群体，并针对目标客户的审美喜好，进行分析，从而确定网站的总体设计风格。

2. 网站LOGO：确保logo的保护空间，确保品牌的清晰展示而又不占据过分空间。

3. 页面速度：正常情况下,尽量确保页面在5秒内打开。如果是大 型门户网站，必须考虑南北互通问题，进行必要的压力测试。

4. 页面布局：重点突出，主次分明，图文并茂。与企业的营销目标相结合，将目标客户最感兴趣的，最具有销售力的信息放置在最重要的位置。

5. 页面色彩：与品牌整体形象相统一，主色调+辅助色不超过三种颜色。以恰当的色彩明度和亮度，确保浏览者的浏览舒适度。

6. 动画效果：与主画面相协调，打开速度快，动画效果节奏适中，不干扰主画面浏览。

7. 页面导航：导航条清晰明了、突出，层级分明。

8. 页面大小：适合多数浏览器浏览(以15寸及17寸显示器为主)。

9. 图片展示：比例协调、不变形，图片清晰。图片排列既不过于密集，也不会过于疏远。

10. 图标使用：简洁、明了、易懂、准确，与页面整体风格统一。

11. 广告位：避免干扰视线，广告图片符合整体风格，避免喧宾夺主。

12. 背景音乐：与整体网站主题统一，文件要小，不能干扰阅读。要设置开关按钮及音量控制按钮。

二、交互体验：呈现给用户操作上的体验，强调易用/可用性

13. 会员申请：介绍清晰的会员权责，并提示用户确认已阅读条款。

14. 会员注册：流程清晰、简洁。待会员注册成功后，再详细完善资料。

15. 表单填写：尽量采用下拉选择，需填写部分需注明要填写内容，并对必填字段作出限制。(如手机位数、邮编等等，避免无效信息)

16. 表单提交：表单填写后需输入验证码，防止注水。提交成功后，应显示感谢提示。

17. 按钮设置：对于交互性的按钮必须清晰突出，以确保用户可以清楚地点击。

18. 点击提示：点击浏览过的信息颜色需要显示为不同的颜色，以区分于未阅读内容，避免重复阅读。

19. 错误提示：若表单填写错误，应指明填写错误之处，并保存原有填写内容，减少重复工作。

20. 在线问答：用户提问后后台要及时反馈，后台显示有新提问以确保回复及时。

21. 意见反馈：当用户在使用中发生任何问题，都可随时提供反馈意见。

22. 在线调查：为用户关注的问题设置调查，并显示调查结果，提高用户的参与度。

23. 在线搜索：搜索提交后，显示清晰列表，并对该搜索结果中的相关字符以不同颜色加以区分。

24. 页面刷新：尽量采用无刷新(AJAX)技术，以减少页面的刷新率。

Ajax是新兴的网络开发技术的象征。它将JavaScript和XML技术结合在一起，用户每次调用新数据时，无需反复向服务器发出请求，而是在浏览器的缓存区预先获取下次可能用到的数据，界面的响应速度因此得到了显著提升。

25. 新开窗口：尽量减少新开的窗口，以避免开过多的无效窗口，设置弹出窗口的关闭功能。

26. 资料安全：确保资料的安全保密，对于客户密码和资料进行加密保存。

27. 显示路径：无论用户浏览到哪一个层级，哪一个页面，都可以清楚知道看到该页面的路径。

三、浏览体验：呈现给用户浏览上的体验，强调吸引性

28. 栏目的命名：与栏目内容准确相关，简洁清晰，不宜过于深奥。

29. 栏目的层级：最多不超过三层，导航清晰，运用JAVAscrip等技术使得层级之间伸缩便利。

30. 内容的分类：同一栏目下，不同分类区隔清晰，不要互相包含或混淆。

31. 内容的丰富性：每一个栏目应确保足够的信息量，避免栏目无内容情况出现。

32. 内容的原创性：尽量多采用原创性内容，以确保内容的可读性。

33. 信息的更新频率：确保稳定的更新频率，以吸引浏览者经常浏览。

34. 信息的编写方式：段落标题加粗，以区别于内文。采用倒金字塔结构。

35. 新文章的标记：为新文章提供不同标识(如new)，吸引浏览者查看。

36. 文章导读：为重要内容在首页设立导读，使得浏览者可以了解到所需信息。文字截取字数准确，避免断章取义。

37. 精彩内容的推荐：在频道首页或文章左右侧，提供精彩内容推荐，吸引浏览者浏览。

38. 相关内容的推荐：在用户浏览文章的左右侧或下部，提供相关内容推荐，吸引浏览者浏览。

39. 收藏夹的设置：为会员设置收藏夹，对于喜爱的产品或信息，可进行收藏。

40. 栏目的订阅：提供Rss或邮件订阅功能

41. 信息的搜索：在页面的醒目位置，提供信息搜索框，便于查找到所需内容。

42. 页面打印：允许用户打印该页资料，以便于保存。

43. 文字排列：标题与正文明显区隔，段落清晰。

44. 文字字体：采用易于阅读的字体，避免文字过小或过密造成的阅读障碍。可对字体进行大中小设置，以满足不同的浏览习惯。

45. 页面底色：不能干扰主体页面的阅读。

46. 页面的长度：设置一定的页面长度，避免页面过长而影响阅读。

47. 分页浏览：对于长篇文章 进行分页浏览。

48. 语言版本：为面向不同国家的客户提供不同的浏览版本。

49. 快速通道：为有明确目的的用户提供快速入口。

四、情感体验：呈现给用户心理上的体验，强调友好性

50. 客户分类：将不同的浏览者进行划分(如消费者、经销商、内部员工)，为客户提供不同的服务。

51. 友好提示：对于每一个操作进行友好提示，以增加浏览者的亲和度。

52. 会员交流：提供便利的会员交流功能(如论坛)，增进会员感情。

53. 售后反馈：定期进行售后的反馈跟踪，提高客户满意度。

54. 会员优惠：定期举办会员优惠活动，让会员感觉到实实在在的利益。

55. 会员推荐：根据会员资料及购买习惯，为其推荐适合的产品或服务。

56. 鼓励用户参与：提供用户评论、投票等功能，让会员更多地参与进来。

57. 会员活动：定期举办网上会员活动，提供会员网下交流机会。

58. 专家答疑：为用户提出的疑问进行专业解答。

59. 邮件/短信问候：针对不同客户，为客户定期提供邮件/短信问候，增进与客户间感情。

60. 好友推荐：提供邮件推荐功能。

61. 网站地图：为用户提供清晰的网站指引。

五、信任体验：呈现给用户的信任体验，强调可靠性

62. 搜索引擎：查找相关内容可以显示在搜索引擎前列。

63. 公司介绍：真实可靠的信息发布，包括公司规模、发展状况、公司资质等。

64. 投资者关系：上市公司需为股民提供真实准确的年报，财务信息等。

65. 服务保障：将公司的服务保障清晰列出，增强客户信任。

66. 页面标题：准确地描述公司名称及相关内容。

67. 文章来源：为摘引的文章标注摘引来源，避免版权纠纷。

68. 文章编辑作者：为原创性文章注明编辑或作者，以提高文章的可信度。

69. 联系方式：准确有效的地址、电话等联系方式，便于查找。

70. 服务热线：将公司的服务热线列在醒目的地方，便于客户查找。

71. 有效的投诉途径：为客户提供投诉或建议邮箱或在线反馈。

72. 安全及隐私条款：对于交互式网站，注明安全及隐私条款可以减少客户顾虑，避免纠纷。

73. 法律声明：对于网站法律条款的声明可以避免企业陷入不必要的纠纷中。

74. 网站备案：让浏览者确认网站的合法性。

75. 相关链接：对于集团企业及相关企业的链接，应该具有相关性。

76. 帮助中心：对于流程较复杂的服务，必须具备帮助中心进行服务介绍。

一.交互设计是什么？

交互设计(Interaction Design 简称ID)是一门关注交互体验的新学科，在20世纪80年代产生，它由IDEO的一位创始人比尔莫格里奇（Bill Moggridge）在1984年一次设计会议上提出，他一开始给它命名为“SoftFace”，由于这个名字容易让人想起和当时流行的玩具“椰菜娃娃（Cabbage Patch doll）”，他后来把它更名为“Interaction Design”——交互设计。

1979年，Grid Compass 1109电脑问世，这是人类有史以来对笔记本电脑的第一次尝试制造。这款电脑是英国人William Moggridge在1979年为Grid公司设计的。这款电脑问世后的面向对象只是美国航空航天（NASA）领域，是人类历史上首次从扇贝上获取灵感制造的轻便电脑，普通民众是无法与其接触的。这台金属镁压模外壳的笔记本电脑采用了一个能折叠的电致发光显示屏，有340K Bubble内存。

IDEO设计公司方法论：

IDEO在早期致力于产品设计开发。无论何种产品，总是由了解终端用户开始，专注聆听他们的个人体验和故事，悉心观察他们的行为，从而揭示隐藏的需求和渴望，并以此为灵感踏上设计之旅。在设计思维的引导下，始终将用户放在首位，深入理解他们的感受，探索他们的潜在需求是创新的关键所在。

IDEO发现这样的方式同样可运用于产品之外领域的创新，无论是服务、界面、体验、空间还是企业转型。无论是何种创新，都是来自三个方面的最佳结合点：用户的需求性、商业的延续性以及科技的可行性。

《哈佛商业评论》“像设计师一样思考，不只能改变开发产品、服务与流程的做法，甚至能改变构思策略的方式。”——蒂姆·布朗

设计思维具备以下要素：

换位思考（充分了解设计所服务对象的感受和需求）
实验主义（动手实现创意，启发思考）
擅于合作（跨职能的通力合作）
乐观主义（无论问题多难，至少有一个潜在的解决方案优于现行方法）

交互设计定义：交互设计在于定义产品的行为方式(the “interaction”,即产品在特定场景下的反应方式)相关的界面。

交互设计的出发点在于研究人在和物交流（dialog）时候，人的心理模式和行为模式，并在此研究基础上，设计“物”的可提供的交互方式，来满足人对使用“物”的三个层次的需求（usefulness, usability and emotionality）。从这个角度看来，交互设计是设计方法，而界面设计是交互设计的自然结果。

交互设计是产品、环境和系统的行为，以及传达这种行为的外形元素的设计与定义。旨在规划和描述事物的行为方式，然后描述传达这种行为的最有效形式。

交互设计的范畴学科：人机工程学、心理学、认知科学、信息学、工程学、计算机科学、软件工程、社会学、人类学、语言学、美学等组成。

交互设计行业的发展：

初创期（1929年-1970年）

1959年，美国学者B.Shackel提供了人机界面的第一篇文献《关于计算机控制台设计的人机工程学》。
1960年，LikliderJCK首次提出人机紧密共栖的概念，被视为人机界面的启蒙观点。
1969年，召开了第一次人机系统国际大会，同年第一份专业杂志“国际人际研究（UMMS）”创刊。

奠基期（1970年-1979年）

从1970年到1973年出版了四本与计算机相关的人机工程学专著。
1970年成立了两个HCI研究中心：一个是英国的Loughboough大学的HUSAT研究中心，另一个是美国Xerox公司的PaloAlto研究中心。

发展期（1980年-1995年）

理论方面，从人机工程学独立出来，更加强调认知心理学以及行为学和社会学等学科的理论指导。
实践范畴方面，从人际界面拓延开来，强调计算机对于人的反馈交互作用。“人机界面”一词被“人机交互”所取代。HCI中的“I”，也由“Interface（界面/接口）”变成了“Interaction（交互）”。

提高期（1996年-）

人机交互的研究重点放到了智能化交互，多模态（多通道）-多媒体交互，虚拟交互以及人机协同交互等方面，也就是“以人为中心”的人机交互技术方面。

二.交互设计的目的是什么？为什么需要交互设计？

从用户角度来说，交互设计是一种如何让产品易用，有效而让人愉悦的技术，它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。交互设计还涉及到多个学科，以及和多领域多背景人员的沟通。通过对产品的界面和行为进行交互设计，让产品和它的使用者之间建立一种有机关系，从而可以有效达到使用者的目标，这就是交互设计的目的。

三.交互设计应用在什么条件下？交互设计内容？

交互设计是一门特别关注以下内容的学科：

1、定义与产品的行为和使用密切相关的产品形式。
2、预测产品的使用如何影响产品与用户的关系，以及用户对产品的理解。
3、探索产品、人和物质、文化、历史之间的对话。

交互设计从“目标导向”的角度解决产品设计：

1、要形成对人们希望的产品使用方式，以及人们为什么想用那个这种产品等问题的见解。
2、尊重用户及其目标。
3、对于产品特征与使用属性，要有一个完全的形态，而不能太简单。
4、展望未来，要看到产品可能的样子，它们并不必然就像当前这样。

交互设计原则：

可视性：功能可视性越好，越方便用户发现和了解使用方法
反馈：返回与活动相关的信息，以便用户能够继续下一步操作
限制：在特定时刻显示用户操作，以防误操作
映射：准确表达控制及其效果之间的关系
一致性：保证同一系统的同一功能的表现及操作一致
启发性：充分准确的操作提示

在使用网站，软件，消费产品，各种服务的时候（实际上是在同它们交互），使用过程中的感觉就是一种交互体验。随着网络和新技术的发展，各种新产品和交互方式越来越多，人们也越来越重视对交互的体验。当大型计算机刚刚研制出来的时候，可能为当初的使用者本身就是该行业的专家，没有人去关注使用者的感觉；相反，一切都围绕机器的需要来组织，程序员通过打孔卡片来输入机器语言，输出结果也是机器语言，那个时候同计算机交互的重心是机器本身。当计算机系统的用户越来越由普通大众组成的时候，对交互体验的关注也越来越迫切了。

Alan Cooper：“关键在于，让人去做他胜任的事情是一件非常好的事。让人做人擅长做的事情，而让计算机做计算机真正擅长的事情。”对交互对象的重视有利于让人和交互对象的关系更合理，从而得到人和交互对象相得益彰的相处方式。

四.交互设计的流程是什么？

1.用户调研：通过用户调研的手段(介入观察、非介入观察, 采访等), 交互设计师调查了解用户及其相关使用的场景，以便对其有深刻的认识(主要包括用户使用时候的心理模式和行为模式)，从而为后继设计提供良好的基础。

2.概念设计：通过综合考虑用户调研的结果、技术可行性、以及商业机会，交互设计师为设计的目标创建概念（目标可能是新的软件、产品、服务或者系统）。整个过程可能来回迭代进行多次，每个过程可能包含头脑风暴、交谈（无保留的交谈）、细化概念模型等活动。

3.创建用户模型：Scenarios/Personas/Profiles基于用户调用得到的用户行为模式，设计师创建场景或者用户故事或者storyboard来描绘设计中产品将来可能的形态。通常，设计师设计用户模型(persona)来作为创建场景的基础.

4.创建界面流程：通常，交互设计师采用wireframe来描述设计对象的功能和行为。在wireframe中，采用分页或者分屏的方式（夹带相关部分的注解），来描述系统的细节。界面流图主要用于描述系统的操作流程。

5.开发原型以及用户测试：交互设计师通过设计原型来测试设计方案。原型大致可分三类：功能测试的原型，感官测试原型以及实现测试原型；总之，这些原型用于测试用户和设计系统交互的质量。原型的可以是实物的，也可以是计算机模拟的；可以是高度仿真的，也可以是大致相似的。

6.修正实现：交互式设计师需要参与方案的实现，以确保方案实现是严格忠于原来的设计的；同时，也要准备进行必要的方案修改，以确保修改不伤害原有设计的完整概念。

7.系统测试：系统实现完毕的测试阶段，可能通过用户测试发现设计的缺陷；设计师需要根据情况对方案进行合理的修改。

交互设计工作内容：

1.用户建模：人物角色和目标，并用故事的形式表达出来
2.写用例：用户完成目标的方法和步骤
3.画流程图：描述用户完成每一个目标的流程，需要那些页面那些操作
4.低保真原型：将流程图中的页面转化成界面，一般为低保真线框图（Low-Fidelity Wireframe）
5.高保真原型：进一步细化，完善所有功能，精细度较高，一般为高保真线框图（High-Fidelity Wireframe）
6.视觉设计样稿（Mockup）：对高保真线框图中的典型页面做视觉设计
7.全部页面的视觉设计：包括所有的弹窗等，并且做标注，注明色值、间距、字体字号
8.前端制作（一般在Web开发中有此步骤）：用代码的形式来表达界面，比如Html+CSS等
9.开发：实现所有的功能
10.测试：包括功能测试、用户测试等

如何做好交互设计?

可用性：可用性(usability)是交互设计的基本而且重要的指标，它是对可用程度的总体评价。也是从用户角度衡量产品是否有效、易学、安全、高效、好记、少错的质量指标。ISO9241/11中的定义是：可用性是一个多因素概念，涉及到容易学习、容易使用、系统的有效性、用户满意，以及把这些因素与实际使用环境联系在一起针对特定目标的评价。

交互设计师通常需要参与到团队中不同的活动中，比如图形设计、程序设计、用户心理、用户测试，产品设计等等。因此，交互设计师需要对上述领域有相当理解，以便于和不同领域专家开展合作。

交互设计师通常在如下领域活动：软件界面设计、信息系统设计、网络设计、产品设计、环境设计、服务设计以及综合性的系统设计。上述领域各自需要自身的设计特征同时，也会用到通用的交互设计的原则和实践。

认知心理学为交互设计提供基础的设计原则。这些原则包括心智模型(mental model), 感知/现实映射原理(mapping)，比喻(metaphor)以及可操作暗示(affordance)。

设计者或其他相关工程人员，所共同设计的操作界面称为概念模型。用户并无法直接与“设计者”（Designer）进行对话，也鲜少通过说明书准确而有效地了解设计者的概念；通过与“界面”（Interface）的交互，进而对该设计产品的功能及操作所形成的了解，则称为用户对于该产品所形成的“心智模型”（User Mental Model）。一般而言，用户的心智模型是在使用中自然逐步形成的，同时，借由与“系统”（System）不断地交互，用户会不断修正其心智模型。如果到了最后，用户的心智模型与设计师的概念模型能一致或相当接近，那么，界面设计就算是相当成功了。

[请保留：后时代 http://www.houshidai.com/]

Persona交互设计用户模型建立：

一、什么是用户模型？

Persona（[pə:'səunə]）：(Persona是用户模型的的简称)是虚构出的一个用户用来代表一个用户群。一个persona可以比任何一个真实的个体都更有代表性。一个代表典型用户的persona的资料有性别、年纪、收入、地域、情感、所有浏览过的URL、以及这些URL包含的内容、关键词等等。一个产品通常会设计3～6个用户模型代表所有的用户群体。

用户模型（任人物角色）不是用户细分

用户模型看起来比较像用户市场细分。用户细分通常基于人口统计特征（如性别，年龄，职业，收入）和消费心理，分析消费者购买产品的行为。用户模型更加关注的是用户如何看待、使用产品，如何与产品互动，这是一个相对连续的过程，人口属性特征并不是影响用户行为的主要因素。用户模型是为了能够更好地解读用户需求，以及不同用户群体之间的差异。

用户模型（人物角色）不是平均用户

某个人物角色能代表多大比例的用户？首先，在每一个产品决策问题中，“多大比例”的前置条件是不一样的。是“好友数大于20的用户”？是“从不点击广告的用户”？不一样的具体问题，需要不一样的数据支持。人物角色并不是“平均用户”，也不是“用户平均”，我们关注的是“典型用户”或是“用户典型”。创建人物角色的目的，并不是为了得到一组能精确代表多少比例用户的定性数据，而是通过关注、研究用户的目标与行为模式，帮助我们识别、聚焦于目标用户群。

用户模型（人物角色）不是真实用户

人物角色实际上并不存在。我们不可能精确描述每一个用户是怎样的、喜欢什么，因为喜好非常容易受各种因素影响，甚至对问题不同的描述就会导致不同的答案。如果我们问用户“你喜不喜欢更快的马？”用户当然回答喜欢，虽然给ta一辆车才是更好的解决办法。所以，我们需要重点关注的，其实是一群用户他们需要什么、想做什么，通过描述他们的目标和行为特点，帮助我们分析需求、设计产品。

用户模型（人物模型）能够被创建出来、被设计团队和客户接受、被投入使用，一个非常重要的前提是：我们认同以用户为中心的设计理念。用户模型（人物角色）创建出来以后，能否真正发挥作用，也要看整个业务部门/设计团队/公司是否已经形成了UCD的思路和流程，是否愿意、是否自觉不自觉地将用户模型引入产品设计的方方面面，否则，用户模型始终是一个摆设、是一堆尘封的文档，纸上画画，墙上挂挂。

所以，在创建人物角色之前，我们需要明确几个问题：谁会使用这些用户模型？他们的态度如何？将会如何使用？做什么类型的决策？可以投入的成本有多少？明确这些问题，对用户模型的创建和使用都很关键。

二、为什么要创建用户模型？

创建用户模型的目的是：尽可能减少主观臆测，理解用户到底真正需要什么，从而知道如何更好为不同类型用户服务。

1.带来专注 人物角色的第一信条是“不可能建立一个适合所有人的网站”。成功的商业模式通常只针对特定的群体。一个团队再怎么强势，资源终究是有限的，要保证好钢用在刀刃上~

2.引起共鸣 感同身受，是产品设计的秘诀之一。

3.促成意见统一 帮助团队内部确立适当地期望值和目标，一起去创造一个精确的共享版本。人物角色帮助大家心往一处想，力往一处使，用理解代替无意义的PK~

4.创造效率 让每个人都优先考虑有关目标用户和功能的问题。确保从开始就是正确的，因为没有什么比无需求的产品更浪费资源和打击士气了。

5.带来更好的决策 与传统的市场细分不同，人物角色关注的是用户的目标、行为和观点。

三、什么时候可以用到人物角色？

在制定产品策略时
在讨论产品需求时
在项目优先级排序时
在进行任务分析时
在琢磨交互流程时
在选择设计风格时
在用研项目招募用户时
在锁定推广目标时
在完善运营方案时
 总之，在各种讨论、脑暴、pk时，在我们想冲口而出”用户xxx”的时候，用户模型都可以派上用场。

四、如何创建用户模型（人物角色）？

 按用研类型和分析方法来区分，人物角色可以分为：定性人物角色，经定量检验的定性人物角色，定量人物角色。三者的步骤、优缺点和适用性。

Alen Cooper的“七步人物角色法”：

界定用户行为变量
将访谈主题映射至行为变量
界定重要的行为模式
综合特征和相关目标
检查完整性
展开叙述
制定任务角色模型

Lene Nielsen的“十步人物角色法”：

1. Finding the users 发现用户
目标: 谁是用户？有多少？他们对品牌和系统做了什么？
使用方法: 数据资料分析
输入物: 报告

2. Building a hypothesis建立假设
目标: 用户之间的差异都有什么
使用方法: 查看一些材料，标记用户人群。
输出物: 大致描绘出目标人群。

3. Verifications调研
目标：关于persona调研（喜欢/不喜欢，内在需求，价值）。关于场景的调研（工作地环境、工作条件），关于剧情的调研（工作策略和目标、信息策略和目标）。
使用方法：数据资料收集。
输出物：报告。

4. Finding patterns发现共同模式
目标：是否抓住重要的标签？是否有更多的用户群？是否同等重要？
使用方法：分门别类。
输出物：分类描述。

5. Constructing personas构造虚构角色
目标：基本信息（姓名、性别、照片）。心理（外向、内向）。背景（职业）。对待技术的情绪与态度，其他需要了解的方面。个人特质等。
使用方法：分门别类。
输出物：类别描述。

6. Defining situations定义场景
目标：这种persona的需求适应哪种场景？
使用方法：寻找适合的场景。
输出物：需求和场景的分类。

7. Validation and buy-in复核与买进（可忽略）
Questions asked: Do you know someone like this?
Methods used: People who know (of) the personas read and comment on the persona descriptions

8. Dissemination of knowledge知识的散布（可忽略）
Questions asked: How can we share the personas with the organization?
Methods used: Fosters meetings, emails, campaigns of every sort, events.

9. Creating scenarios创建剧情
目标：在设定的场景中，既定的目标下，当persona使用品牌的技术的时候会发生什么？
使用方法：叙述式剧情，使用persona描述和场景形成剧情。
输出物：剧情、用户案例、需求规格说明

10. On-going development持续的发展
Questions asked: Does the new information alter the personas?
Methods used: Usability tests, new data
Documents produced: A person responsible for the persona input from everybody who meet the users.

五、如何使用用户模型？

用户模型（人物角色）清晰揭示用户目标，帮助我们把握关键需求、关键任务、关键流程，看到产品必须做的事，也知道产品不该做什么。人物角色不是精确的度量标准，它更重要的作用是作为一种决策、设计、沟通的可视化的交流工具。

丰满而有真实感的人物角色比正确的人物角色更有用。所谓正确的100%符合实际情况的角色是不存在的，我们应该尽可能丰富、形象化我们的目标用户群，让它在设计决策过程中发挥作用。

如何保持人物角色的活力？这个问题绝对不容忽视，尤其是当团队首次创建和使用用户模型。用户模型不只是未某个项目、某次特殊需求而创建的。持续使用和更新，将核心用户的形象融入到每个成员开发、设计思维中，才是人物角色的使命。我们需要不断地完善、展示、解释、使用它：

建立人用户模型文档
展示用户模型
与用户模型一起生活

[来源：用户模型分析]

iPhone客户端腾讯QQmusic界面设计，作者：CDCer 。

1. 写在前面

经过android QQmusic的洗礼后，我们将战场转到了iOS平台，这是一个更加封闭、竞争更加激烈、要求更为严格的战场。国际版图上，spodify、last.fm、pandora已酣战多时，大陆战场更有摸手、九天、豆瓣fm、虾米早早加入。姗姗来迟的iPhone QQmusic如何后来居上？这是我们继android后在iOS平台上的又一次尝试，我们总结了中间跌跌撞撞、折腾不息的过程，并希望以此积蓄经验和力量。

2. 调整产品定义

“一个可以不断自我完善的解决方案才能真正改善状况并得以更有效地执行。”从android QQmusic开始，我们就已经尝试引入“产品定义描述”（Application definiation statement），鼓励设计团队更早地切入整个产品设计过程。同样是解决移动场景的听歌问题，不同的生态系统会给产品定位与目标受众带来差异，一端是开放的android，一端是封闭的iOS，习惯了磁盘管理思维的中国用户在iTunes中难以适从。“丢掉那根可恶的数据线！”——这是我们整个团队对产品的再一次共鸣。

3. 深入场景 狠抓用户痛点

“细节决定成败。”除了更深入地理解一般性的“听歌”场景，我们还会更多地关注细微的用户痛点，分析用户在iTunes使用过程中遇到的不便：

（1） 家里和公司，iTunes列表难以统一管理；

（2） 追加少量歌曲不得不启动“牛刀“——iTunes；

（3） …

4. iPhone用户使用场景调查

5. iPhone 用户人群分布调查　

对用户痛点的精准把握以及行之有效的解决方案，使得这款app在需求层面就切合了用户真实的需要。

6. 餐巾纸式快速原型

“画几笔画比说一千句有效得多。”

经过前面对产品定位的讨论和需求分析，下一步应该是把“想法”表现出来。很多设计师喜欢马上打开各种原型工具，并“单打独斗”地画起图来，其实，要将一个想法转变为实际的产品形态，一支笔和一张白纸（或白板）就足够了。我们鼓励让产品经理一起参与绘制线框图，并即时表达各自的想法。在彼此碰撞中，我们会发现设计对产品的细微影响，这种逐渐培养起来的全局视野能帮助设计师更好地理解产品，当然，产品经理也得以更好地理解设计。

7. 视觉风格提案

交互定稿后正式进入视觉设计阶段。经过几番讨论后我们决定以蓝天白云为主题，打造一个温馨、轻松氛围的界面。

8. 视觉终稿界面展示

根据对于目标用户，属性特征，使用习惯，使用场景，使用时间，使用时的情感诉求，抽象情感的画面化等方面着手分析的两千多份有效问卷中表明：目标用户的教育程度和收入会比较好，爱好音乐的人们在精神上较之会比较感性。用户们在用iphone听歌的时候，80％是在使用耳机，主要使用场景是在路上或是睡前。用音乐作为陪伴，营造出一个自我的空间，在音乐里畅游，从中得获得心灵和情感上的抚慰与放松。因此我们希望，当早上您启动QQ music 的时候，金色阳光洒向云海，就像虽然我不在您身边，但依然在对您说：“ good morning，加油！又是美好一天的开始！”

动态的播放界面，深夜，带您到星辰中去漫步。也可以与您一起去深海里畅游。当悲伤的音乐响起，雨水打在玻璃上，让世界模糊起来。 我们无法触及您所有的感情，但期待与您的感情相会时刹那的交流与感动。（我们对给自己勾勒出的蓝图，也感觉到责任和压力的重大，但我们不畏惧奋起努力。最后做的还不够的地方还请海涵。）

9. 启动ICON

ICON为保持QQMusic一直的视觉识别采用了QQMusic的LOGO为主体配以界面的主色调蓝色。

10. 后记

在整个设计流程中，我们引入了一些细小的变化，成效不错。iPhone QQmusic在上架9个小时后就登上了免费app第一位，评分达到了史无前例的4.5颗星。成绩固然令人欣喜，不过问题同样存在，我们的性能还不够完美，体验还不够流畅，中间还因为对框架缺少深入的理解，导致了一次较大的调整，我们愿以此为鉴，继续前行。

[来源：腾讯CDC设计中心]

一款软件产品最先呈现给用户的是产品界面。良好的界面元素容易识别、易于理解、能够快速记忆，且较少出现误操作。   自1879年科学心理学诞生以来，心理学家开展了大量研究，对人类认知、情感、记忆等各方面的规律进行深入探讨。许多结论都能对产品设计提供理论支持，再次略作总结分享简，请各位看官不吝赐教。

1. 界面元素的编码特征  

• 可识别性

以费希纳、韦伯等最早一批心理学先驱就是以研究感知觉阈限为起点的，他们的研究指出人的视觉、听觉等只能加工特定强度范围的刺激。在界面设计过程中，应当注意元素的可识别性。例如文字的不能太小，颜色也不能太浅。  

某款手机浏览器打开web页面的效果  

• 可辨别性

知觉心理学研究表明，人的知觉能力存在差别阈限。两种刺激必须大于差别阈限，才能被辩论出来。不同界面元素（特别是近似的、相邻的）的视觉特征应能明显区分，防止用户需要努力辨别，增加认识资源。  

某款手机浏览器打开web页面的效果  

• 意义性

刺激必须是有意义的，能够被人理解。因此，文字表达上、符号图标的设计上，都应保证用户能够正确理解，不会出错。  

对图标意义性的可用性测试：先对用户进行测试，看正确识别的比率有多高；
过一段时间后，对相同用户进行再测，看正确率的维持情况。O表示original, R表示Retest。  

• 标准化

在不同条件下，刺激的意义需统一。例如，每个地方红灯都表示停止，绿灯是表示通行。对于同系列软件来说，不同平台的图标和控件样式，也应避免意义冲突。  

Android平台对话框样式的统一性问题   

2. 界面元素的兼容性  

刺激兼容性是指在不同场景、不同情境下的通用性。刺激的兼容性越好，学会的速度就越快、反应时间越少、错误越少、心理负荷越小。  

• 概念兼容性

例如，SOS、110、119这些缩写，概念兼容性都是极好的。再比如，红色表示停止、绿色表示通行和安全；选中使用“勾选”等等。  

• 动作兼容性

顺时值旋转与数值增加有关，如调节音量的旋钮；指针往上调节，表示数值增加，如温度计刻度。  

在某款手机播放器中，调节音量采用上下键，本身符合动作兼容性，但音量指示为左右方向，二者的心智模型发生冲突。  

• 方式兼容性

Wickens, Sandry, Vidulich(1983)的研究证实，在言语任务中，刺激以听觉形式呈现，以语言形式反应，反应时间最快；在空间任务中，刺激以图形呈现，以动作形式反应时，反应时间最快。  

3. 颜色的认知加工  

•  颜色与对比度

人眼对颜色对比度的知觉受空间布局的影响。如下图，两幅图的黑白颜色一样，但前者色块越大，对比度显得也更大。  

•  颜色与注意资源

同一屏幕内，如果使用过多的色彩，会分散注意，使用户无法快速找到目标。  

•  颜色性别差异

Newcastle 大学的神经科学专家AnyaHurlbert的研究（2007）发现，尽管被调查者都更喜欢蓝色，但女性的选择更靠近蓝色谱系中偏粉红色的一端。多项研究也得出了类似的结论（Silver，1988；Ellis & Ficek, 2000）  

2003年，Hallock, Joe开展了一项针对颜色偏好的专项调查（样本量230），结果如下。  

• 颜色的年龄差异

Adams , Russell研究发现儿童更喜欢波长长的颜色，例如红色、黄色。年龄较大的女性比男性更喜欢黑色和紫色(Silver & Ferrante, 1995)。Hemphill & Michael（1996 ）的研究也支持了这点。我国关于色彩偏好的研究也有此发现（陈立，1965）。  

Hallock, Joe的研究发现，随着年龄的增长，对蓝色的喜好非常稳定，越来越多的人不太喜欢橙色。  

•  颜色与情绪

色彩和情绪之间的关系与色彩偏好紧密相关，而色彩偏好和某种色彩是否会引出积极或消极的情绪有关（Naz, K., Helln, H., 2004）。  

Boyatzis和Varghese在1994年研究儿童的色彩情绪联系时发现，儿童趋向把积极情绪（例如高兴，强大）与亮颜色联系（例如蓝色、绿色），把消极情绪（例如悲伤、愤怒）与暗颜色联系（例如 黑色与灰色）。在一个对澳大利亚大学生的颜色情绪联系的研究中，Hemphill（1996）也发现亮颜色主要引出积极的情绪联想，而暗颜色主要引出的是消极的情绪联想。  

Camgoz, N., Yener, C.（2002）的研究发现颜色的色调、饱和度和明度三个属性对色彩偏好有非常重要的影响。被试最偏爱的是饱和度和明度最大的组合，随着明度和饱和度的增加，被试对颜色的喜好程度也随之增加。  

•  颜色的文化差异

不同的群体，颜色的文化内含也有差异。如下图，不同国家灭火器使用了不同的颜色，反映出颜色的文化差异。  

许多研究者和设计师都曾分析总结过不同国家的颜色内涵。这些文化差异是我们设计过程中需要注意的，尤其是对于产品的国际版本。  

整理自《The Zen of CSS Design: Visual Enlightenment for the Web》   

•  颜色错觉

有关颜色的错觉有很多种，有的错觉现象是设计过程中需要避免的，而有的则可加以利用。这里仅作初步分析，举例如下：  

避免红蓝重叠和红绿重叠，因为这样会引起视觉深度的错觉。如下图，蓝色色块像是显示在红色的上方。  

背景颜色对目标颜色的知觉会有影响。如下图，左右相同颜色的X，但由于背景不同，知觉的色彩出现明显差异。  

•  色盲

人群中色盲的发生率还是挺高的，男性为8%，女性为0.5%。  

在色盲人群眼中的世界，远没有正常人看到的精彩。红绿色盲的人可能会分不清交通红绿灯的差异（如下图）。我们在产品设计过程中，也需要注意这一点，尽量避免由于色盲原因而无法感知重要的变化信息。  

4. 字体的视觉加工  

•  字体粗细

有研究者推荐，理想阅读效果的字体粗细可设为：白底黑字1：6-1：8；黑底白字1：8-1：10。（注：1：6的意思是，笔划粗细为1，文字高度为6）  

随着亮度的下降，粗体字更容易被识别。如下图所示，左侧的文字较容易识别。  

在较低亮度或较低对比度的条件下，可使用粗一点的字体，如1：5；字体颜色很亮时，粗细可至1：12-1：20。  

•  文字和底色

黑底白字，文字的颜色会向黑色背景散射，这称为散射现象。如下图，同样粗细的字体，白颜色的字显得比黑颜色的字更粗一些。  

由于红色与蓝色对比影响知觉的原因，应避免红字蓝底或蓝字红底的情况出现（如下图）。  

有设计师曾总结出符合良好知觉效果的文字底色对比方案，具体如下：  

• 字母大小写

研究表明，小写字母更容易辩认，因为它的特征更容易被区别。  

• 文字信息的认知加工

一段文字怎样呈现，才最容易阅读？这不仅涉及到呈现的视觉效果，还跟行文风格、句子结构和内容有关。研究表明，句子类型和文字顺序都会影响文字加工的速度。  

句子类型：主动句、肯定句，比否定句、被动句更容易被理解 
文字顺序：应与动作顺序匹配，例如“先选1，后选2”的误操作比“选2之前先选1”更小  

5. 界面布局与认知加工  

•  信息密度

　　对于相同信息容量的内容，呈现的刺激密度越大，搜索时间越长，错误率越高。如下图，A的信息密度比B更大，信息搜索的难度也就更大。  

•  信息组合

如上图，A只有一个组合，B有多个组合。有研究表明，当一个组合的视角小于5度时（40CM视距，12-14个字，6-7行的高度），在组中搜索信息的时间较为固定，当视角超过5度时，搜索时间就显著增加。  

因此，理想的页面布局是，将信息设置为小于5度视角的多个组合，将最有利于用户快速搜索信息。  

•  复杂度

有研究发现，将文字按组块竖排，复杂度比横排更小，更易于搜索信息。如下图：（当然，图B的局部密度也较小，组块的视角也在5度左右）  

6. 图表与认知加工  

一幅好的图表比得上1000字的文字说明。但需要注意所使用的图表类型，避免引起误解。举例如下：  

看图1，给人感觉随着时间推进，A和B的差距越来越大，但图2告诉我们并非如此； 
看图3，给人感觉B约为A的3倍，C约为A的4倍，而图4告诉我们并非如此。  

7. 符号（图标）  

一般来说，符号的表现力会比文字更好，因为它不需要经过语义加工，直接是视觉加工。  

•  选择符号的标准

1.可识别性：具体做法可以是，将符号呈现给用户，请他说出是什么； 
2.匹配：给定系列符号和解释，要求将它们对应起来，记录并分析所用的时间及错误； 
3.偏好：询问用户喜好程度和意见  

•  如何检验符号的好坏？

方法1：再测法，即先对用户进行测试，看正确识别的比率有多高；过一段时间后，对相同用户进行再测，看正确率的维持情况。如下图，O表示original, R表示Retest，可以看出，第1个图标的再测正确率编低。  

方法2：反应时法，即同时给用户呈现（呈现时间很短）多个符号图标，要求用户以最快的速度判断它的意义。反应时最短、错误率最低的图标，为最理解的方案。  

•  符号标准化

如果需要在不同场景中使用同样符号，要保证符号的标准化，在各场景中的意义相同。 

[本文出自Tencent WSD Blog]

一、问题引发思考

前阵子与同事探讨一个小需求时又遇到了按钮表示“动作”和表示“状态”间矛盾问题。想想这个问题多年前已经开始讨论了，所以在此整理一下思路，与大家共享。

「图1」

具体案例是这样的：如上图所示，在“启用”和“停用”搜索定制功能时，这个按钮到底是表示“状态”还是表示“动作”呢？简单的说，上图中 1表示当前是停用状态，还是表示点击后为停用操作呢？答案显然是不清晰的。

怎样能够清晰的表达两者的差异，减少用户的误解呢？我们首先要从“动作”、“状态”的定义和两者的关系入手.

二、什么是动作，什么是状态

动作是指具有一定动机和目的并指向一定对象的运动。
状态指人或事物表现出来的形态。
结合来讲，动作是促使人或事物改变某一状态的运动，而状态是动作造成的结果表现。因此两者经常是紧密关联的，有时甚至是互为条件的。

比如“操作收音机”这件事，我需要扭动旋钮或按键等“打开”的动作来打开收音机，当动作完成后收音机的状态是“打开的”。而“关闭”收音机这个动作的前提，是一个“打开的”状态的收音机。
”听起来好复杂阿！“很多人都会这么认为。为什么我们在生活中天天面对类似的事却很少有这样的感觉呢？

下面来看看生活中的例子我们或许就能理解了。

三、生活中的例子

1、电灯开关

「图2」

单控开关，我们最常见的开关之一，设计极其简单，按下一边是开，另一边是关。至于到底那边是开那边是关，没有几个人会特别关心。因为我尝试两次总会作对操作，几乎没有什么成本。人们不会感觉什么不爽。

当然，现在还有更好的设计。

「图2」

2、Ipod HOLD

「图3」

苹果的Ipod播放器的按键锁定功能“HOLD”。当开关拨动到“HOLD”字样一边时，左侧便会露出红色。而拨动到另一边是没有颜色的。巧妙的运用了色彩对人们心里特征的影响区分出了hold的状态。

3、显示器

「图4」

显示器电源开关，又一个“动作”和“状态”结合的应用。使用按钮突出的形态，和开关的图形表现来表示可执行的动作（这里按下去是用来开关的），使用背景灯的暗与亮来表示开关状态（灯亮表示现在是开的状态）。

类似的应用非常多，我们可以看到其中具有的特点是：1、可以触摸、按动（拨动）的按钮 2、色彩的区分 3、有的还有明显的位置差异以及标识。

四、软件以及网站中的例子

软件或网站界面显然不具备可触摸的特点，不过我们的设计师也尽量会模拟出类似现实中物品的可以操作的形状和质感。

「图5」

播放器常用的UI。点击中间的“播放”与“暂停”键即可切换操作。可以看出，这里忽略了状态的表现，我无法直观的看到现在是播放还是暂停的状态。原因很简单，就像开关电灯一样，影片的打开与关闭是可以直接感知到的，不需要专门的状态提示。

「图6」

再来看列表的视图切换。图上箭头所示“切换到大图”功能也是此类应用，忽略了状态的表现。因为“切换到大图”动作执行后，界面的状态会明显的改变（大图模式），不需要专门的状态来标识。

再看另一种情况

「图7」

音乐播放器中的随机播放。因为“随机”与“按顺序”播放并不容易直观察觉，因此状态需要明确标识。而动作本身由于并不是核心功能被弱化了，仅仅依赖界面功能区块划分来表示此处的可操作性。

「图8」

还是音乐播放器，这次不同的是线性的状态表示。音量的大小并不只是“开、关”两个状态那么简单，而是由小到大线性变化的。上面那个UI通过左右两个喇叭的形状很好的表达了音量大小的两端，中间的圆钮既是动作的操纵杆又是音量大小的刻度标识。因为它和左侧很好的连接在一起形成水槽效果，填满部分的长短再一次反映了音量的大小，非常巧妙。而下面那个UI只在左侧放了音量大小标识，虽然不同因量大小时左侧图标也会相应改变，但相比之下初次使用会难理解很多。

「图9」

上面是某帐户管理的UI，将状态和操作（动作）明显的分两列标识，虽然显得有些啰唆，但也清楚的表达出了应有的含义。

最后我们来看一个手机界面的应用。 

「图10」

仿照物理拨动开关的质感与色彩表达，很好的”动作“与”状态“结合的例子。这样的设计你还会犯错么？

五、小结

前面作了很多应用的举例，那么到底怎样才能做好”动作“与”状态“结合的设计呢？

1、分离状态与动作的表示（如图9）。最直接，产生歧义的可能最小，但可能会占用大量空间，以及造成信息冗余。
2、忽略状态，突出动作（如图6）。当状态无需标识也能直观识别时适用。
3、忽略动作，突出状态（如图7）。当动作操作已经被划分指定区域，可以预期其可操作性时适用。
4、具象与仿生（如图10）。当与现实物品建立感官联系时，人们的学习成本会大大降低。此类运用不好定义其适用范围，留给大家探讨吧。

[阿里巴巴UED by  Tony Lee]