浅谈交互设计

浅谈交互设计2011.9.22跨专业培训：策划型PM小组内部培训资料专业交互设计人员可绕行…也欢迎批评及建议，联系QQ：178822624P3.法则P1.基础P4.原则P2.理论浅谈交互设计Part1_基础什么是交互交互设计定义交互的发展历程交互设计的范畴理解交互设计交互设计的可用性指标什么是交互交互：本义：双方面互动。在计算机科学中意思为，参与活动的对象可以相互交流。广义的交互。人机交互(Human-ComputerInteraction):是一门计算机科学，主要研究关于设计、评价和实现供人们使用的交互计算系统，以及对有关这些现象进行研究的科学。强调人与机器相互信息交换。狭义的交互。交互设计（InteractionDesign）：见下文…3个概念交互设计定义（InteractionDesign）简单的说，交互设计是人工制品、环境和系统的行为，以及传达这种行为的外形元素的设计与定义。传统的设计学科主要关注形式、以及内容和内涵，而交互设计首先旨在规划和描述事物的行为方式，然后描述传达这种行为的最有效形式。从用户角度来说，交互设计是一种如何让产品易用，有效而让人愉悦的技术，它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。交互设计还涉及到多个学科，以及和多领域多背景人员的沟通。VB之父交互设计之父微软视窗先锋奖软件梦幻奖得主库伯交互设计公司创始人艾兰.库珀(alancooper)一位做了大约15年编程的交互设计师，Windows可视化设计工具的创意是来源于他。他创建了Cooper交互设计公司（）反复强调如何使“高科技”产品回归人性，明确指出，要设计出强大而令人愉悦的软件产品，必须在开始编制软件之前做好交互设计。人机交互过程是一个输入和输出的过程，人通过人机界面向计算机输入指令，计算机经过处理后把输出结果呈现给用户。人和计算机之间的输入和输出的形式是多种多样的，因此交互的形式也是多样化的。数据交互图像交互声音交互动作交互人机交互交互的发展历程•旧石器时代–简单的–单一的•机器大工业时代–复杂的–繁琐的–出错率高的–危险的•信息时代–效率–易用性MITSAltair8800（1975年）：第一台个人电脑一个主板、一个英特尔8080CPU和256字节的RAMMac：型号不详，出厂日期不详，配制不详。学科人类工程学心理学认知科学信息学工程学计算机科学软件工程社会学人类学语言学美学……设计图形设计产品设计商业美术电影产业服务业……交互设计人机交互（HCI）交互设计的范畴1.交互设计是一门技术。2.交互设计在现阶段的主要使命是提高产品的可用性。3.通过对界面和操作行为的设计提高产品可用性。理解交互设计交互设计的可用性指标易学习容易使用容错性有效性用户满意度安全性ISO9241/11中的定义是：可用性是一个多因素概念，涉及到容易学习、容易使用、系统的有效性、用户满意，以及把这些因素与实际使用环境联系在一起针对特定目标的评价。平衡5E法有效(Effective)效率(Efficient)易学(EasyToLearn)吸引人(Engaging)容错性(ErrorTolrant)Part2_理论交互设计的理论依据心理模型是客观存在的关于心理模型另2个模型如何探究用户的心理模型交互设计的核心要素UCD设计理想流程交互设计的理论依据一个构造复杂的工具，没有必要向用户完全解释清楚内部的工作原理，而用户在使用过程中却往往需要在某种程度上理解这个工具，以便更好的驾驭。用户往往会以自己的方式来理解这个产品。有可能用户的理解与产品实际的工作原理完全不符，但用户却可会通过自己的理解来预测产品的使用效果。用户的这种做法在交互设计中称之为用户的心理模型。心理模型是客观存在的关于心理模型心理模型是存在于用户头脑中的关于一个产品应该具有的概念和行为的知识。这种知识可能来源于用户以前使用类似产品的经验，或者是用户根据使用该产品要达到的目标而对产品的概念和行为的一种期望。心理模型是工具与用户操作之间的桥梁，借助这个桥梁，可以更容易的理解并使用工具。心理模型会由于个体的差异而不同，心理模型多少会和以往的经验有关，譬如:经历：教育、成长环境习惯：同类产品培养的操作习惯，会影响用户的认知上下文：同一个产品上下文环境不同，用户的认知一会有所不同。另2个模型心理模型表现模型实现模型容易使用，体验良好记忆负担，体验较差好的交互设计应符合大部分用户的心理模型。一个例子如何探究用户的心理模型用户心理模型用户访谈产品反馈用户现场观察竞争产品分析分析客户技术支持或客户投诉的历史数据，用户在新闻组上发表的对产品的评论等。从这些分析中往往可以看出有哪些用户的期望没有被得到满足。在用户工作现场或将要使用产品的地方观察用户当前处理问题的方式，试图找出当前处理方式的问题或不足。跟实际用户或潜在用户面对面交流，听取他们对产品的需求或期望。跟实际用户或潜在用户面对面交流，听取他们对产品的需求或期望。交互的三个要素人界面机器/系统交互设计所做的事情可识别的•形状•布局•尺寸•色彩可感知记忆的•语言的含义•色彩的隐喻•相对位置•层级、关系•……可物理衡量的•流程•点击次数•移动距离•姿势•转换方式•……交互设计的核心要素精确描述我们的用户以及用户希望达到的目标，定义几个典型角色，并用故事的形式表达出来。目标•用户•产品角色•筛选•分类脚本•任务•场景目标——目标导向设计•目标是行动的驱动力，产品的功能和行为必须通过任务来解决目标•产品成功的关键是目标，而不是特性•成功的交互设计师应该对目标高度敏感用户目标生活目标最终目标体验目标产品目标利润市场角色•简单的说，角色就是为我们的产品虚拟的一个典型用户。我们在设计是，就可以专门为“他”设计。•角色是一种强有力的交互设计工具•角色的确定给设计带来的好处：–该做什么–便于沟通–提高效率–解决边缘设计–……一个角色的例子小翠女22岁学历大学本科公司以及职业政府文员性格活泼，爱开玩笑，但很有礼貌爱好读书、旅行、写blog补充小翠的单位可以上网，他每天的工作比较轻松，经常上网看看电子版的小说、散文、诗歌等。她是文科的学生，对电脑知识了解很少，对网络的认识很浅。她喜欢交朋友，跟人属于自来熟的那种。一段经典对话定义角色之前•莫名（产品经理）：我想豆瓣用户需要打印功能•Numal：我想他们不会需要打印功能的，打印功能对豆瓣的用户没有什么意义吧•莫名：但是也许有人会希望要打印功能呢？•Numal：当然有这种可能，但是这种需求很少啊•……定义角色之后•莫名（产品经理）：我想豆瓣用户需要打印功能•Numal：小翠不需要打印功能•莫名（产品经理）：我想应该有人会用到打印功能的。•Numal：我们是为小翠设计的这个产品，不是为其他的人。我们不需要做这个功能。•莫名：哦，那好吧角色•一般不超过两个人，一男一女•一般将用户定义为初级用户和中级用户。特殊产品才定义高级用户。•角色描述中应该包含：–一张相片–人物基本特征–于产品相关的性格、能力、爱好等介绍–会用到的产品、功能介绍脚本人和他们的活动组成的故事使用具体的故事来构造模拟用户的可能行为或者讲述设计方案关注人物角色以及其心智模型，目标和活动，有可能包括对环境的考虑•基于任务的脚本•基于场景的脚本UCD设计理想流程Part3_法则十个不可不知的法则一些现象，或许您经常遇到，但却不知道为什么？答案在这里Flexibility-UsabilityTradeoff弹性-使用性权衡法则1：弹性-实用性权衡当弹性增加时，单个功能的使用性就会降低。引发效率降低，复杂性、时间及开发成本的增加。产品设计最终是偏向弹性还是偏向使用性，取决于用户是否对产品/功能有比较精确化的描述。最佳实践：为中间用户设计：让新手快速顺利成为中间用户，避免为专家级用户制作障碍；让中间用户感到愉快。法则2：垃圾进，垃圾出GarbageIN——GarbageOut人机交互中，输入到系统的信息，如果本身就是垃圾，自然不能期待产生的内容是对用户有效的。最佳实践对于类别问题，可采用输入前事先告知，和输入时的内容限制来规避。对于质量问题，可通过预先检查和确认等功能来避免。用户已经填写的内容，最好直接导入，减少用户导入信息的错误机率。法则3：预期效应ExpectationEffect：个人或他人的预期，会引发认知与行为的改变。事前一项可靠的描述，会在任何群体中，引发30%的期待。值得提醒的是预期效应虽然会影响认知行为，但是这种改变是暂时的，经过一段时间后，行为和认知均会回复的基准线。最佳实践产品发布前，让用户有预期，无论是后期收集用户反馈，还是下个版本的推进都可以得到更针对性的反馈。反之，当我们做用户研究访谈时，要采用适当的步骤，尽量避免因为预期效应而导致的偏见。法则4：五帽架FiveHatRacks:一种行之有效的信息架构理论：无论信息对象如何，都可以使用五种方法进行资料组织。1.字母：最常见的组织方式，具有强烈的指示性，适用于非直线方式找到特定内容。2.时间：以时间为基准来组织资料，适用于时效性强的信息。3.地点：以地理或空间组织资料，适用于本身具有地理关联性的内容。4.连续性：按范围大小、最高到最低、最好到最坏等组织内容，适用于展示对比性信息。5.种类：用类似或相关性来组织资料，适用于多层级信息分解。法则4：五帽架法则5：费茨法则Fitts’sLaw:移动到一个目标的时间，跟目标尺寸及到目标的距离有关。法则6：席克法则Hick’sLaw：以英国心里学家WilliamEdmundHick命名，当选项增加时，下决定的时间也增加。法则7：古藤堡图表GutenbergDiagram：古藤堡把显示媒介分为5个区间，视觉流从左上到右下角。最佳实践当元素是平均分散、性质相同时，可以考虑用古藤堡表来协助设计格式和内容。否则，应该以元素的重要性来吸引眼球的移动。法则8：序列位置效果SerialPositionEffects：在列举项目中，排在前面与后面的物品，要比排在中间的物品更容易被人想起。最佳实践当列举的项目十视觉性质的，就把最重要的物件放在最前面。如果列举的项目是听觉性质的，就把最重要的物件放在最后面。法则9：递进展开ProgessiveDisclosure：以递进展开的方式，展现信息内容，即只有在需要时，才会显示资料。其思想核心是根据所面向的对象，将信息划分层级。对于初级用户，仅展示基础、简洁内容，保证操作流程顺畅。同时，针对熟练用户，也能快速的找到更多信息。另一种思路：根据使用频率的不同，将常用的项目作为基础进行展示，不常用的递进展示。最佳实践法则10：处理深度DepthofProcessing:一种关于记忆的现象，被深层分析过的资讯，要比浅层分析过的资讯更容易记得。一篇纯文本的文章，与图文并茂，并帮助他进行了初始的信息梳理和加工的专题来比，后者被容易记住和回想起。最佳实践Part4_原则页面表达原则常用页面表达方式信息架构原则视觉表现规范能切实地指导您进行交互设计…页面表达原则1.更少的信息量更好。2.结构化更易于理解。3.信息的表达应该清楚、明确、直接。4.操作可识别。5.操作前，结果可预知。6.操作时，操作有反馈。7.操作后，操作可撤销。页面表达原则8.让用户知道身处何地。9.避免内容看上去象广告。10.不提供多余的功能。11.相同的功能，在不同的页面中应保持一致性。12.措辞统一。常用的页面表达方式1.从左到右，从上到下。2.大字更突出。3.图形更吸引人。4.动画会被误认为是广告。5.内容逻辑：并列关系；从属关系。常用的页面表达方式6.多项并列的信息排列展示。7.不同的排序方式VS筛选内容。1.一个页面一个主要内容。2.个人信息&公共信息。3.网页基本内容有两种：列表和文档。4.更少的信息更好。5.一个用户自己生成内