浅谈交互设计

1、.,浅谈交互设计,2011.9.22,.,跨专业培训：策划型PM小组内部培训资料 专业交互设计人员可绕行 也欢迎批评及建议，联系QQ：178822624,.,.,Part1_基础,什么是交互 交互设计定义 交互的发展历程 交互设计的范畴 理解交互设计 交互设计的可用性指标,.,什么是交互,.,交互： 本义：双方面互动。在计算机科学中意思为，参与活动的对象可以相互交流。 广义的交互。 人机交互(Human-Computer Interaction): 是一门计算机科学，主要研究关于设计、评价和实现供人们使用的交互计算系统，以及对有关这些现象进行研究的科学。强调人与机器相互信息交换。 狭义的交互。

2、 交互设计（Interaction Design）： 见下文,3个概念,.,交互设计定义（Interaction Design）,简单的说，交互设计是人工制品、环境和系统的行为，以及传达这种行为的外形元素的设计与定义。传统的设计学科主要关注形式、以及内容和内涵，而交互设计首先旨在规划和描述事物的行为方式，然后描述传达这种行为的最有效形式。 从用户角度来说，交互设计是一种如何让产品易用，有效而让人愉悦的技术，它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。交互设计还涉及到多个学科，以及

3、和多领域多背景人员的沟通。,.,VB之父 交互设计之父 微软视窗先锋奖软件梦幻奖得主 库伯交互设计公司创始人,艾兰.库珀(alan cooper),一位做了大约15年编程的交互设计师，Windows可视化设计工具的创意是来源于他。他创建了Cooper交互设计公司（,.,人机交互过程是一个输入和输出的过程，人通过人机界面向计算机输入指令，计算机经过处理后把输出结果呈现给用户。人和计算机之间的输入和输出的形式是多种多样的，因此交互的形式也是多样化的。,人机交互,.,交互的发展历程,旧石器时代 简单的 单一的 机器大工业时代 复杂的 繁琐的 出错率高的 危险的 信息时代 效率 易用性,.,MITS

4、Altair 8800（1975年）：第一台个人电脑 一个主板、一个英特尔8080 CPU和256字节的RAM,Mac：型号不详，出厂日期不详，配制不详。,.,学科 人类工程学 心理学 认知科学 信息学 工程学 计算机科学 软件工程 社会学 人类学 语言学 美学 ,设计 图形设计 产品设计 商业美术 电影产业 服务业 ,交互设计,人机交互 （HCI）,交互设计的范畴,.,1.交互设计是一门技术。 2.交互设计在现阶段的主要使命是提高产品的可用性。 3.通过对界面和操作行为的设计提高产品可用性。,理解交互设计,.,交互设计的可用性指标,ISO9241/11中的定义是：可用性是一个多因素概念，涉及

5、到容易学习、容易使用、系统的有效性、用户满意，以及把这些因素与实际使用环境联系在一起针对特定目标的评价。,.,平衡5E法,有效(Effective) 效率(Efficient) 易学(Easy To Learn) 吸引人(Engaging) 容错性(Error Tolrant),.,Part2_理论,交互设计的理论依据 心理模型是客观存在的 关于心理模型 另2个模型 如何探究用户的心理模型 交互设计的核心要素 UCD设计理想流程,.,交互设计的理论依据,一个构造复杂的工具，没有必要向用户完全解释清楚内部的工作原理，而用户在使用过程中却往往需要在某种程度上理解这个工具，以便更好的驾驭。 用户往往

6、会以自己的方式来理解这个产品。有可能用户的理解与产品实际的工作原理完全不符，但用户却可会通过自己的理解来预测产品的使用效果。用户的这种做法在交互设计中称之为用户的心理模型。,.,心理模型是客观存在的,.,关于心理模型,心理模型是存在于用户头脑中的关于一个产品应该具有的概念和行为的知识。这种知识可能来源于用户以前使用类似产品的经验，或者是用户根据使用该产品要达到的目标而对产品的概念和行为的一种期望。 心理模型是工具与用户操作之间的桥梁，借助这个桥梁，可以更容易的理解并使用工具。 心理模型会由于个体的差异而不同，心理模型多少会和以往的经验有关，譬如: 经历：教育、成长环境 习惯：同类产品培养的操作

7、习惯，会影响用户的认知 上下文：同一个产品上下文环境不同，用户的认知一会有所不同。,.,另2个模型,心理模型,表现模型,实现模型,容易使用，体验良好,记忆负担，体验较差,好的交互设计应符合大部分用户的心理模型。,.,一个例子,.,如何探究用户的心理模型,分析客户技术支持或客户投诉的历史数据，用户在新闻组上发表的对产品的评论等。从这些分析中往往可以看出有哪些用户的期望没有被得到满足。,在用户工作现场或将要使用产品的地方观察用户当前处理问题的方式，试图找出当前处理方式的问题或不足。,跟实际用户或潜在用户面对面交流，听取他们对产品的需求或期望。,跟实际用户或潜在用户面对面交流，听取他们对产品的需求或

8、期望。,.,交互的三个要素,.,交互设计所做的事情,.,交互设计的核心要素,精确描述我们的用户以及用户希望达到的目标，定义几个典型角色，并用故事的形式表达出来。,.,目标目标导向设计,目标是行动的驱动力，产品的功能和行为必须通过任务来解决目标 产品成功的关键是目标，而不是特性 成功的交互设计师应该对目标高度敏感,.,角色,简单的说，角色就是为我们的产品虚拟的一个典型用户。我们在设计是，就可以专门为“他”设计。 角色是一种强有力的交互设计工具 角色的确定给设计带来的好处： 该做什么 便于沟通 提高效率 解决边缘设计 ,.,一个角色的例子,.,一段经典对话,.,角色,一般不超过两个人，一男一女 一

9、般将用户定义为初级用户和中级用户。特殊产品才定义高级用户。 角色描述中应该包含： 一张相片 人物基本特征 于产品相关的性格、能力、爱好等介绍 会用到的产品、功能介绍,.,脚本,人和他们的活动组成的故事 使用具体的故事来构造模拟用户的可能行为或者讲述设计方案 关注人物角色以及其心智模型，目标和活动，有可能包括对环境的考虑,基于任务的脚本 基于场景的脚本,.,UCD设计理想流程,.,Part3_法则,十个不可不知的法则 一些现象，或许您经常遇到，但却不知道为什么？ 答案在这里,.,Flexibility-Usability Tradeoff 弹性-使用性权衡,法则1：弹性-实用性权衡,当弹性增加时

10、，单个功能的使用性就会降低。引发效率降低，复杂性、时间及开发成本的增加。,产品设计最终是偏向弹性还是偏向使用性，取决于用户是否对产品/功能有比较精确化的描述。,.,最佳实践：,为中间用户设计：让新手快速顺利成为中间用户，避免为专家级用户制作障碍；让中间用户感到愉快。,.,法则2：垃圾进，垃圾出,Garbage INGarbage Out 人机交互中，输入到系统的信息，如果本身就是垃圾，自然不能期待产生的内容是对用户有效的。,.,最佳实践,对于类别问题，可采用输入前事先告知，和输入时的内容限制来规避。 对于质量问题，可通过预先检查和确认等功能来避免。 用户已经填写的内容，最好直接导入，减少用户导

11、入信息的错误机率。,.,法则3：预期效应,Expectation Effect ：个人或他人的预期，会引发认知与行为的改变。事前一项可靠的描述，会在任何群体中，引发30%的期待。 值得提醒的是预期效应虽然会影响认知行为，但是这种改变是暂时的，经过一段时间后，行为和认知均会回复的基准线。,.,最佳实践,产品发布前，让用户有预期，无论是后期收集用户反馈，还是下个版本的推进都可以得到更针对性的反馈。 反之，当我们做用户研究访谈时，要采用适当的步骤，尽量避免因为预期效应而导致的偏见。,.,法则4：五帽架,Five Hat Racks:一种行之有效的信息架构理论：无论信息对象如何，都可以使用五种方法进行

12、资料组织。 1.字母： 最常见的组织方式，具有强烈的指示性，适用于非直线方式找到特定内容。 2.时间： 以时间为基准来组织资料，适用于时效性强的信息。,.,3.地点： 以地理或空间组织资料，适用于本身具有地理关联性的内容。 4.连续性： 按范围大小、最高到最低、最好到最坏等组织内容，适用于展示对比性信息。 5.种类： 用类似或相关性来组织资料，适用于多层级信息分解。,法则4：五帽架,.,法则5：费茨法则,Fittss Law:移动到一个目标的时间，跟目标尺寸及到目标的距离有关。,.,法则6：席克法则,Hicks Law：以英国心里学家William Edmund Hick命名，当选项增加时，下

13、决定的时间也增加。,.,法则7：古藤堡图表,Gutenberg Diagram：古藤堡把显示媒介分为5个区间，视觉流从左上到右下角。,.,最佳实践,当元素是平均分散、性质相同时，可以考虑用古藤堡表来协助设计格式和内容。 否则，应该以元素的重要性来吸引眼球的移动。,.,法则8：序列位置效果,Serial Position Effects：在列举项目中，排在前面与后面的物品，要比排在中间的物品更容易被人想起。,.,最佳实践,当列举的项目十视觉性质的，就把最重要的物件放在最前面。如果列举的项目是听觉性质的，就把最重要的物件放在最后面。,.,法则9：递进展开,Progessive Disclosure

14、：以递进展开的方式，展现信息内容，即只有在需要时，才会显示资料。 其思想核心是根据所面向的对象，将信息划分层级。对于初级用户，仅展示基础、简洁内容，保证操作流程顺畅。同时，针对熟练用户，也能快速的找到更多信息。 另一种思路：根据使用频率的不同，将常用的项目作为基础进行展示，不常用的递进展示。,.,最佳实践,.,法则10：处理深度,Depth of Processing:一种关于记忆的现象，被深层分析过的资讯，要比浅层分析过的资讯更容易记得。 一篇纯文本的文章，与图文并茂，并帮助他进行了初始的信息梳理和加工的专题来比，后者被容易记住和回想起。,.,最佳实践,.,Part4_原则,页面表达原则 常

15、用页面表达方式 信息架构原则 视觉表现规范 能切实地指导您进行交互设计,.,页面表达原则,1.更少的信息量更好。2. 结构化更易于理解。3. 信息的表达应该清楚、明确、直接。4. 操作可识别。5. 操作前，结果可预知。6. 操作时，操作有反馈。 7. 操作后，操作可撤销。,.,页面表达原则,8. 让用户知道身处何地。9. 避免内容看上去象广告。10. 不提供多余的功能。11. 相同的功能，在不同的页面中应保持一致性。12. 措辞统一。,.,常用的页面表达方式,1.从左到右，从上到下。 2.大字更突出。 3.图形更吸引人。 4.动画会被误认为是广告。 5.内容逻辑：并列关系；从属关系。,.,常用

16、的页面表达方式,6.多项并列的信息排列展示。 7.不同的排序方式VS筛选内容。,.,1. 一个页面一个主要内容。2. 个人信息&公共信息。3. 网页基本内容有两种：列表和文档。4. 更少的信息更好。5. 一个用户自己生成内容的document页，有两个状态：浏览状态&编辑状态。,信息架构的原则,.,6. 信息树应该尽量窄而浅，并且尽量保持平衡。,信息架构的原则,如何平衡？ 页面上可见菜单项的数目，与层级结构中级别的数据平衡。,.,7. 与现实生活经验相符 页面在网站中需要有一个固定的位置。 同等级的内容应表现成并列的样子。 8.导航标签彼此互斥，完全穷尽。,信息架构的原则,.,视觉表现规范,1. 滚动条看上去应该象滚动条2. 表单的对齐方式3. 重要的内容显