交互设计基础

交互设计基础第1页/共144页什么是“交互设计”交互设计是一种如何让产品易用，有效而让人愉悦的技术，它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。关注第2页/共144页GUI---GraphicalUserInterface

即人机交互图形化用户界面设计第3页/共144页第4页/共144页第5页/共144页第6页/共144页第7页/共144页第8页/共144页第9页/共144页第10页/共144页第11页/共144页交互设计案例（1）卖当劳的番茄酱双汇火腿肠第12页/共144页交互设计案例（2）第13页/共144页失败的交互设计第14页/共144页失败的交互设计（1）提供正确，甚至是精确，但是毫无帮助的信息第15页/共144页失败的交互设计（2）提供不知所云的信息提供不知所云的信息第16页/共144页失败的交互设计（3）提供正确，甚至是精确，但是毫无帮助的信息提供包含“恐吓”内容的信息第17页/共144页失败的交互设计（4）提供正确，甚至是精确，但是毫无帮助的信息让人反复体验挫折感让人反复体验挫折感第18页/共144页教材：《GUI设计禁忌2.0》

【美】JeffJohnson著，机械工业出版社，2009第19页/共144页参考书1：第20页/共144页参考2：《AboutFace3.0》

【美】AlanCooper著，电子工业出版社，2008第21页/共144页课程考核第22页/共144页课程考核平时表现50%小组加减分+个人加减分（例）期末成绩50%

牛牛文库文档分享第23页/共144页行动起来选举课代表（+）成立小组（4人一组，共8组）小组取名

牛牛文库文档分享第24页/共144页请访问工贸学院各系部网站并仔细浏览。组名负责部门信息传媒学院

经济与贸易学院轻工系电子工程系

汽车与机械工程学院管理学院成教学院技师学院

牛牛文库文档分享第25页/共144页1该网站是否违背《GUI设计禁忌》中提到的9条原则，如果有请指出网站在何处违背了第几条原则，并按如下格式填写。2该网站是否存在使用了错误的控件或错误的使用控件的情况，如果有请指出并填写如下表格3该网站是否存在导航禁忌，如果有请指出并填写如下表格：4该网站是否存在响应性禁忌，如果有请指出并填写如下表格5请使用学过的网站可用性三大定律进行分析，指出哪些页面需要改进？6请你提一些对交互设计基础课程的建议和意见。

牛牛文库文档分享第26页/共144页请大家一起来讨论以下的例子

牛牛文库文档分享第27页/共144页例1下面是软件或者网页中进度条的界面，你觉的如何？

牛牛文库文档分享第28页/共144页McInerneyandLi[2002]列出了用于设计有效的进度指示器的一些指导原则显示剩余的工作，而不是已完成的工作。不好的显示：已复制3个文件。好的显示：还剩4个文件未复制。显示总体进度，而不是当前步骤的进度。不好的显示：此步骤还需5秒。好的显示：还需15秒。对于百分比的完成，从1%开始，而不是0%。如果进度条在0%上停留超过1秒或2秒，用户会感到担忧。同理，100%的显示要短暂。如果进度条在100%上停留超过1秒或2秒，用户会认为出了问题。显示平滑的、线性的进度，而不要显示不规则的、突然变化的进度。使用人们熟悉的精度，而不是计算机精度。不好的显示：27秒。好的显示：少于1分钟。

牛牛文库文档分享第29页/共144页例2

牛牛文库文档分享第30页/共144页例3您认为以下几个对话框哪个比较恰当？

牛牛文库文档分享第31页/共144页例4

牛牛文库文档分享第32页/共144页例5

牛牛文库文档分享第33页/共144页例6

牛牛文库文档分享第34页/共144页4.基本原则基本原则1：关注用户任务，而不是技术基本原则2：首先考虑功能，然后才是表示基本原则3：与用户对任务的看法保持一致基本原则4:设计要符合常见情况基本原则5：不要分散用户对他们目标的注意力基本原则6：促进学习基本原则7：传递信息，而不仅仅是数据基本原则8：设计应满足响应需求基本原则9：通过用户试用发现错误，然后修正它第35页/共144页基本原则1：关注用户及其任务，而不是技术谁是目标用户？谁是目标客户？目标用户情况（对计算机的总体了解、任务知识、系统知识）软件做什么？它能帮助用户解决什么问题？它将提供什么价值？第36页/共144页谁是用户？客户用户第37页/共144页用户的层次第38页/共144页永远的“中间用户”用户数量初学者中间用户专家第39页/共144页不可避免的矛盾用户数量初学者中间用户专家用户数量初学者中间用户专家商务因素影响产品偏重于初学者开发人员影响产品偏重于专家用户数量初学者中间用户专家我们把中间用户搞丢了！第40页/共144页基本原则2：首先考虑功能，然后才是表示第41页/共144页基本原则3：与用户对任务的看法保持一致争取自然使用用户的词汇，而不是你自己的找到正确的功能/复杂度平衡点恰当的默认值模板或者封装的解决方案指南性的路径和向导渐进式显示通用命令。。。第42页/共144页第43页/共144页示例分析图5-6

.软件人员经常编写出“劣质”的消息框，例如措词生硬、幼稚、蹩脚，甚至有文字、语法错误；消息文本、图形标志和命令按钮在语义上不一致。

好的差的第44页/共144页基本原则4:设计要符合常见情况最少步骤、最高效率越频繁使用的功能，需要的点击应越少越多用户使用某功能，它就应该越明显设计用户界面时应当尽可能地替用户着想，用户应当用最少的操作步骤完成某项操作任务，获得最高的使用效率。（手机充值）第45页/共144页基本原则5：不要分散用户对他们目标的注意力示例分析图5-7(b)

.不显眼的菜单排列，常被用户忽视。至少要让菜单排列和广告互换位置。第46页/共144页基本原则5：不要分散用户对他们目标的注意力点评：网站使用广告的用意是为了配合营销活动的宣传，这样的布局更象是出于网站的目标，忽略了用户的目的，因此未必能达到预期的效果。

第47页/共144页基本原则6：促进学习“从外到里”思考，而不是“从里到外“保持一致性提供一个低风险的环境第48页/共144页第49页/共144页允许用户犯错误让用户可以撤销动作在执行具体的破坏性操作中要求用户确认。第50页/共144页“用户界面风格一致”的最大好处就是能够减少用户的记忆量、减少出错几率，并且迅速积累操作经验。所以熟悉Word软件的人基本上不用翻阅手册就能使用PowerPoint软件，可谓“无师自通”。软件的用户界面中同类的界面元素应当有相同的视感和相同的操作方式。例如命令按钮是最常见的界面元素，所有命令按钮的形状、色彩以及对鼠标的响应方式都是一致的同一类型软件的用户界面应当有一定程度的相似性。例如Microsoft公司的Office家族里有Word、Excel、PowerPoint、Outlook等软件，这些软件提供的“复制、剪切、粘贴”功能的操作方式都是相同的。第51页/共144页第52页/共144页第53页/共144页基本原则8：设计应满足响应需求当用户进行某项操作后，如果过了一会儿（几秒钟）用户界面一点反应都没有，这将使用户感到迷茫和不安，因为他不知道是自己操作错了还是软件死机了。及时反馈信息很重要，至少要让用户心里有数，知道该任务处理得怎么样了，有什么样的结果。例如下载一个文件，界面上应当显示“百分比”或相关数字来表示下载的进度，否则人们不知道要等待多少时间。如果某些事务处理不能提供进度等数据，那么至少要给出提示信息如“正在处理，请等待…”。最好是提供合适的动画，让用户明白软件正在干活、没有死机。第54页/共144页第二章.GUI控件禁忌2．1使用了错误的控件

2．1．1禁忌l：混淆复选框和单选按钮

2．1．2禁忌2：在非开/关设置中使用复选框

2．1．3禁忌3：使用命令按钮作为开关

2．1．4禁忌4：使用选项卡作为单选按钮

2．1．5禁忌5：太多选项卡

2．1．6禁忌6：为只读数据提供输入控件

2．1．7禁忌7：对于有约束的输入滥用文本框第55页/共144页2．2错误地使用控件

2．2．1禁忌8：动态菜单

2．2．2禁忌9：过于严格的数据字段

2．2．3禁忌10：没有默认值的输入字段和控件

2．2．4禁忌11：不恰当的默认值

2．2．5禁忌12：反向复选框第56页/共144页一、混淆复选框和单选按钮错误的用法：单独的一个单选按钮。把复选框当作单选按钮：两个具有相反值的单选按钮和一个复选框是等价的，所以不要把复选框当作单选按钮，从而出现相反值能同时选中的情况。互斥的复选框：复选框的各个选项之间是独立的，不存在互斥关系第57页/共144页用左右键和上下键移动，或以及鼠标单击选中。 单选框是一种多选一设置，可选数目在2-8之间。 当空间不够时，单选框可以用循环按钮、下拉菜单、滚动列表框来代替。第58页/共144页在框中用鼠标单击，或在文本上设置/取消设置，试着用空格键做这件事。复选框和选项框按选择几率的高底而先后排列。复选框和选项框要有默认选项，并支持Tab选择。第59页/共144页二、在非开关设置中使用复选框复选框用于从两个相反的值中选择一个，而不仅仅是二选一。所以，遇到“启用/禁用”,“可见/不可见”等明显相反的值时，可以使用复选框(也可以用具有两个值的单选按钮)。第60页/共144页三、把命令按钮当作开关正确的做法是，用复选框当做开关，或者其他专门设计来做开关的控件。第61页/共144页四、把选项卡当作单选按钮第62页/共144页五、太多的选项卡第63页/共144页六、为永久只读数据提供输入控件第64页/共144页七、对于本应该有输入约束的字段使用普通文本框第65页/共144页GUI设计禁忌之二——错误地使用了控件

第66页/共144页一、动态菜单项第67页/共144页二过于严格的数据字段为了确保用户输入的内容是有效的，应用程序(包括Web表单)都会对一些字段进行各种检查，比如长度，字符组成等。有时候检查过于严格，也是一种错误。程序员为了编程方便，约束用户的输入，比如某字段不能包含单引号或者另一个字段能输入的字符数不能超过16。这种要求是无理的。不能因为SQL中单引号是特殊字符，就不允许用户输入。为用户提供稍微宽松的输入字段并不难：使字段宽度和数据长度基本一致：字段的宽度足够容纳数据，但是也不要长出太多。这样用户不会无限制的填写内容。对于一种数据所有常见的格式，都要尽量支持。这集中体现在日期和时间，以及小数的格式上。如果大小写字母对数据来说无关紧要的话，就不要区分大小写。为字段提供有效格式示例，放在字段后面，或者上方，或者通过某种技术让它出现在空白的字段中。不要因为技术原因对用户提出限制。技术问题应该自己解决，而不是交给用户解决。第68页/共144页第69页/共144页三、没有默认值有两种情况是可以不提供默认值的没有合理的默认值：比如在“省市县”三级联动下拉菜单中，为“省”设置一个默认值的确不太好选择，除非该应用仅限某一省的用户使用。宗教、政治或者法律原因，不能选择其中一项作为默认值。第70页/共144页四、不恰当的默认值第71页/共144页五、反向复选框第72页/共144页第3章导航禁忌第73页/共144页禁忌13：未标识窗口或页面(1)第74页/共144页禁忌13：未标识窗口或页面(2)在站点的导航栏中通过高亮等形式，标记当前页面的位置，或者在页面的明显位置，明确的标记当前页面的位置。第75页/共144页禁忌14：不同窗口使用同样的标题第76页/共144页禁忌15：窗口标题与命令或链接不符第77页/共144页第78页/共144页禁忌16：使用户偏离正确道路的按钮和链接第79页/共144页禁忌17：自身链接第80页/共144页禁忌18：对话框层次过多第81页/共144页禁忌19：互相竞争的搜索框不管是什么理由让开发人员在页面上放了多个搜索框，都会让用户分散注意力。所以，一个页面应该只有一个搜索框，它应该出现在左上角logo下面，右上角或者左侧导航栏的下方。第82页/共144页禁忌20：搜索结果的浏览方式不佳第83页/共144页禁忌2l：干扰搜索结果第84页/共144页4.1.1禁忌22：术语不一致

有些术语的概念很清楚，有些术语却模糊不清，如果开发项目时没有字典，就会出现术语和概念不能一一对应的情况。第85页/共144页4.1.2禁忌23：含义不清的术语(1)第86页/共144页4.1.2禁忌23：含义不清的术语(2)第87页/共144页4.1.3禁忌24：书写不好

这类错误主要是指错别字，语法错误，单词大小写错误，前后书写不一致，单复数(英文)等等。虽然这些问题不会影响软件的正确性，但是用户会觉得这个软件或者网站不够专业，进而怀疑这个软件是不是会给自己造成损失。

比如，有两个字段，一个要求输入表名，一个要求输入文件名，但是前者的标签是“表名”，后者的标签是“文件”。要么都加上“名”这个字，要么都不加这个字。再比如，有些简单的只有一句话的提示信息，有的地方加了句号，有的地方没有加句号。这样的细微的错误分布在系统各个角落。第88页/共144页4.1.4禁忌25：文字过多第89页/共144页4.2.1禁忌26：用词晦涩第90页/共144页4.2.2禁忌27：在用户界面中将用户称为“user”这个错误一般存在于英文系统。因为只有两个行业把他们的客户称为user，一个是计算机软件行业，一个是毒品行业。其他行业的客户都不叫做user。我们的客户可以叫做user，但是我们的user的客户，却不一定能再称为user。一般的替代词是member、guest等。第91页/共144页4.2.3禁忌28：无用的错误消息

好的错误信息一定要告诉用户发生了什么，为什么会发生这个错误，以及用户该怎么处理。而且，错误信息一定要用和任务相关的词汇，不要把计算机术语给用户看。下面这个图显示的是使用360浏览器访问谷歌时出现错误的页面：第92页/共144页4.3.1禁忌29：错误的消息第93页/共144页4.3.2禁忌30：文字独立存在时有意义，但在GUI中引起误导这种情况比较常见，在各个购物网站或者惠普、戴尔的官网经常出现“推荐产品”、“卖家热推”这类的字眼。其实这些词单独出现没有什么问题，不过在整个网页中，用户看了会想，其他产品是“不强力推荐”呢，还是“不推荐”呢，甚至是“强力不推荐”？第94页/共144页4.3.3禁忌31：在命令标签中错误地使用或者不使用“…”(1)省略号（...）最早是苹果公司的设计人员提出的。它用于区分立即执行的命令和先提示用户输入附加信息的命令。第95页/共144页4.3.3禁忌31：在命令标签中错误地使用或者不使用“…”(2)话框，就应该添加省略号，这是不对的。下面这个例子也是错误的：

第96页/共144页

第5章图形设计和布局禁忌第97页/共144页5.1.1禁忌32：容易忽略的信息太小或者太普通：有些重要信息所在的区域非常非常小，或者它们的字体和颜色与其他内容一样，这样的信息将湮没在整个界面中。除非它们在移动或者非常亮。信息位于用户关注区域之外：人类的视觉活动只有在视觉中心位置的一小块地方是敏锐的。把重要信息分散到页面各个角落，很容易让用户来回切换关注点。大量雷同信息：比如下面这个例子中，两行文本中只有两个字不同，这让用户很难区分：第98页/共144页5.1.2禁忌33：将对话框控制按钮与内容控制按钮混合放置有很多对话框将标准按钮(确定、应用、关闭、取消、帮助、是、否、重试、放弃等)与控制特定数据或设置的按钮放在了一起。

这是一种错误。首先，控制特定数据的按钮和数据离得太远，很难发现其中的联系。其次，用于控制整个对话框的按钮和其他按钮没有外观上的区别。第99页/共144页5.1.3禁忌34：不恰当地使用组合框(1)第100页/共144页5.1.3禁忌34：不恰当地使用组合框(2)第101页/共144页5.1.4禁忌35：单选按钮之间间隔太大第102页/共144页5.1.5禁忌36：标签与数据字段距离太远第103页/共144页5.1.6禁忌37：标签的对齐方式不一致第104页/共144页5.1.7禁忌38：窗口初始位置不合适在同一个坐标显示所有窗口子窗口盖在父窗口上方不在屏幕上显示子窗口第105页/共144页字体过小

第106页/共144页第6章交互禁忌第107页/共144页禁忌40：将实现暴露给用户第108页/共144页禁忌41：不必要的限制第109页/共144页禁忌42：令人混淆的概念(1)第110页/共144页禁忌42：令人混淆的概念(2)第111页/共144页禁忌43：向用户索取不必要的数据第112页/共144页禁忌45：无意义的选择(1)第113页/共144页禁忌45：无意义的选择(2)第114页/共144页禁忌46：很难记住的ID第115页/共144页禁忌47：长的说明信息消失过快(1)第116页/共144页禁忌47：长的说明信息消失过快(2)第117页/共144页禁忌48：不必要或效果不佳的标记模式第118页/共144页禁忌49：自动重排的显示第119页/共144页第七章响应性禁忌

第120页/共144页响应性不好的原因

响应性是决定软件易用性的一个非常重要的因素（参见基本原则8）。注意这里的“响应性”不是“性能”或“速度”。响应性与性能不同。性能是指软件计算和显示结果的速度。高性能软件很快就能给出用户所需的结果；低性能软件生成结果的速度很慢。软件即使在低性能条件下也可以快速响应。第121页/共144页高响应性的软件(举例）让用户立即知道他们的按键、鼠标移动和单击操作被接受了；估算操作要花费多长时间；允许用户在等待期间做其他事情；巧妙地安排等待队列中的事件；做一些整理操作或是处理计算机后台那些低优先级的任务；还可以利用这段空闲时间估计一下将来可能的请求。第122页/共144页常见的响应性禁忌第123页/共144页禁忌52：光标跟不上用户；当操作系统处理鼠标移动时光标四处跳动，当用户停止移动鼠标时它还在继续移动。禁忌53：屏幕上的按钮响应鼠标点击的时间太长，或者根本不响应。禁忌54：菜单、滑动条和滚动条的动作落后于用户操作，破坏了成功操作所需要的手眼动作配合。禁忌55：移动和调整大小的操作跟不上用户的动作，也没有提供临时的进度显示（rubber-band）作为反馈。禁忌56：应用程序没有指示它正处于繁忙状态，而是忽略了用户的存在。禁忌57：当应用程序进行内部整理时经常（而且是不可预测地）不为用户提供响应。禁忌58：冗长的操作不显示进度条。禁忌59：冗长的操作不提供取消方式。禁忌60：应用程序浪费空闲时间，而当用户最终发出一个可预期的命令时，却又要花费很长时间才去执行。禁忌61：应用程序在挂起时不给出任何反馈，也不指明到底发生了什么事情。禁忌62：Web站点包含很大的图像和动画，只有超高速的因特网连接才能看到。禁忌63：Web站点总是重新加载整个页面来响应一些小的编辑操作。第124页/共144页长时间操作缺乏进度条第125页/共144页第126页/共144页第127页/共144页第128页/共144页第129页/共144页7.3.1响应性七条原则响应性原则之一：响应性不等同于性能

响应性原则之二：处理资源经常是有限的

响应性原则之三：用户界面是实时接口

响应性原则之四：任务对延迟的要求各异，软件不必立即做所有的事情

响应性原则之五：软件不必按照任务请求的顺序完成工作

响应性原则之六：软件不必执行所有请求的任务

响应性原则之七：用户是人而不是计算机程序

第130页/共144页原则一响应不等同于性能举例：修表师傅例子与20年前相比，现在的个人计算机快了许多倍，但用户仍然等待很长时间而不知道正在发生什么事情，因此速度显然不是决定响应性的一切。现在大部分等待时间是由于网络延迟和大量的数据传输造成的。

第131页/共144页原则二处理资源经常是有限的计算机越快，用户为之加载的软件就会越多：比如桌面附件/多个应用程序等和即时消息客户端应用程序。

即使拥有最新型号的计算机，也不一定就意味着某个应用程序可以使用更多的计算资源。第132页/共144页原则三：用户界面是实时接口与人打交道的软件也需要满足实时性约束。人类行为中反映的三个常量给计算机系统响应性设立了必须要达到的目标时间常量适用于人类行为的哪些方面在人机交互中的相关性0.1秒n

连续事件的感知n

因果关系的感知n

融合度的感知，例如，对平滑动画的感知＊n

成功的手眼协调反馈，例如，指针的移动、窗口的移动、尺寸调整以及绘画图操作n

按钮被点击的反馈n

显示“忙”指示器n

动画帧的最大帧间隔＊1秒n

对话中的轮替时间，例如，在一个说话之间的停顿n

对突发事件的最小反应时间n

显示进度指示器n

完成大部分用户请求的操作，例如，打开一个对话框n

完成未请求的操作，例如，自动保存10秒n

持续专注于一个任务的时间n

单元任务：完成较大任务的一个“单元”n

完成多步任务中的一步，例如，在文本编辑器中完成一次编辑、向查账程序中输入一个账号n

将用户输入付诸操作n

完成向导中的一步（一个多页对话框）第133页/共144页响应性原则之四：任务对延迟的要求各异，软件不必立即做所有的事情对于特定的用户操作来说，即时的响应甚至可能是不需要的。更快不一定就更好。第134页/共144页7.3.4响应性原则之四：任务对延迟的要求各异，软件不必立即做所有的事情第135页/共144页响应性原则之五：软件不必按照任务请求的顺序完成工作明智地重新安排队列中的任务可以节省工作量