交互设计基础课件.ppt

入知远工作室须知,上班时间,（除有课外） 周一到周五 上午：8:00 - 11：30 下午：13:30-17:00 指纹考勤 其它时间由指导教师和学生本人共同安排,工作室为你提供的,良好的学习氛围 必要的软硬件设备 优质的指导教师 项目机会,你为工作室贡献的,做好自我定位，努力学习知识技能 学会如何和他人合作，分享知识 努力营造一个良好的工作氛围（电话，QQ，游戏，卫生，活动） 将来 提供就业资讯 1年内返校一次,行动起来选举班委,班长 生活委员 卫生委员 纪律委员,Question ？,交互设计基础 梅成才 6369980QQ.com,温州电子信息研究院软件研究所,什么是“交互设计”,交互设计是一种如何让产品易用，有效而让人愉悦的技术，它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。,关注,GUI-Graphical User Interface 即人机交互图形化用户界面设计,交互设计案例（1）,卖当劳的番茄酱,双汇火腿肠,交互设计案例（2）,失败的交互设计,失败的交互设计（1）,失败的交互设计（2）,失败的交互设计（3）,失败的交互设计（4）,教材： GUI设计禁忌2.0 【美】Jeff Johnson著，机械工业出版社，2009,参考书1：,参考2： About Face3.0 【美】Alan Cooper著，电子工业出版社，2008,课程考核,课程考核,平时表现50% 小组加减分+个人加减分（例） 期末成绩50%,行动起来,选举课代表（+） 成立小组（4人一组，共8组） 小组取名,请访问工贸学院各系部网站并仔细浏览。,1 该网站是否违背GUI设计禁忌中提到的9条原则，如果有请指出网站在何处违背了第几条原则，并按如下格式填写。 2 该网站是否存在使用了错误的控件或错误的使用控件的情况，如果有请指出并填写如下表格 3 该网站是否存在导航禁忌，如果有请指出并填写如下表格： 4 该网站是否存在响应性禁忌，如果有请指出并填写如下表格 5 请使用学过的网站可用性三大定律进行分析，指出哪些页面需要改进？ 6 请你提一些对交互设计基础课程的建议和意见。,请大家一起来讨论以下的例子,例1,下面是软件或者网页中进度条的界面，你觉的如何？,McInerney and Li 2002列出了用于设计有效的进度指示器的一些指导原则,显示剩余的工作，而不是已完成的工作。不好的显示：已复制3个文件。好的显示：还剩4个文件未复制。 显示总体进度，而不是当前步骤的进度。不好的显示：此步骤还需5秒。好的显示：还需15秒。 对于百分比的完成，从1%开始，而不是0%。如果进度条在0%上停留超过1秒或2秒，用户会感到担忧。同理，100%的显示要短暂。如果进度条在100%上停留超过1秒或2秒，用户会认为出了问题。 显示平滑的、线性的进度，而不要显示不规则的、突然变化的进度。 使用人们熟悉的精度，而不是计算机精度。不好的显示：27秒。好的显示：少于1分钟。,例2,例3,您认为以下几个对话框哪个比较恰当？,例4,例5,例6,4 . 基本原则,基本原则1： 关注用户任务，而不是技术 基本原则2： 首先考虑功能，然后才是表示 基本原则3： 与用户对任务的看法保持一致 基本原则4: 设计要符合常见情况 基本原则5： 不要分散用户对他们目标的注意力 基本原则6： 促进学习 基本原则7： 传递信息，而不仅仅是数据 基本原则8： 设计应满足响应需求 基本原则9： 通过用户试用发现错误，然后修正它,基本原则1：关注用户及其任务，而不是技术,谁是目标用户？ 谁是目标客户？ 目标用户情况（对计算机的总体了解、任务知识、系统知识） 软件做什么？它能帮助用户解决什么问题？它将提供什么价值？,谁是用户？,客户,用户,用户的层次,永远的“中间用户”,不可避免的矛盾,商务因素影响产品偏重于初学者,开发人员影响产品偏重于专家,我们把中间用户搞丢了！,基本原则2： 首先考虑功能，然后才是表示,基本原则3： 与用户对任务的看法保持一致,争取自然 使用用户的词汇，而不是你自己的 找到正确的功能/复杂度平衡点 恰当的默认值 模板或者封装的解决方案 指南性的路径和向导 渐进式显示 通用命令 。,示例分析,图5-6 . 软件人员经常编写出“劣质”的消息框，例如措词生硬、幼稚、蹩脚，甚至有文字、语法错误；消息文本、图形标志和命令按钮在语义上不一致。,好的,差的,基本原则4: 设计要符合常见情况,最少步骤、最高效率 越频繁使用的功能，需要的点击应越少 越多用户使用某功能，它就应该越明显 设计用户界面时应当尽可能地替用户着想，用户应当用最少的操作步骤完成某项操作任务，获得最高的使用效率。（手机充值）,基本原则5： 不要分散用户对他们目标的注意力,示例分析,图5-7(b) .不显眼的菜单排列，常被用户忽视。至少要让菜单排列和广告互换位置。,基本原则5： 不要分散用户对他们目标的注意力,点评：网站使用广告的用意是为了配合营销活动的宣传，这样的布局更象是出于网站的目标，忽略了用户的目的，因此未必能达到预期的效果。,基本原则6： 促进学习,“从外到里”思考，而不是“从里到外“ 保持一致性 提供一个低风险的环境,允许用户犯错误,让用户可以撤销动作 在执行具体的破坏性操作中要求用户确认。,“用户界面风格一致”的最大好处就是能够减少用户的记忆量、减少出错几率，并且迅速积累操作经验。所以熟悉Word软件的人基本上不用翻阅手册就能使用PowerPoint软件，可谓“无师自通”。 软件的用户界面中同类的界面元素应当有相同的视感和相同的操作方式。例如命令按钮是最常见的界面元素，所有命令按钮的形状、色彩以及对鼠标的响应方式都是一致的 同一类型软件的用户界面应当有一定程度的相似性。例如Microsoft公司的Office家族里有Word、Excel、PowerPoint、Outlook等软件，这些软件提供的“复制、剪切、粘贴”功能的操作方式都是相同的。,基本原则8：设计应满足响应需求,当用户进行某项操作后，如果过了一会儿（几秒钟）用户界面一点反应都没有，这将使用户感到迷茫和不安，因为他不知道是自己操作错了还是软件死机了。 及时反馈信息很重要，至少要让用户心里有数，知道该任务处理得怎么样了，有什么样的结果。 例如下载一个文件，界面上应当显示“百分比”或相关数字来表示下载的进度，否则人们不知道要等待多少时间。如果某些事务处理不能提供进度等数据，那么至少要给出提示信息如“正在处理，请等待”。最好是提供合适的动画，让用户明白软件正在干活、没有死机。,第二章. GUI控件禁忌,21使用了错误的控件 211禁忌l：混淆复选框和单选按钮 212禁忌2：在非开/关设置中使用复选框 213禁忌3：使用命令按钮作为开关 214禁忌4：使用选项卡作为单选按钮 215禁忌5：太多选项卡 216禁忌6：为只读数据提供输入控件 217禁忌7：对于有约束的输入滥用文本框,22错误地使用控件 221禁忌8：动态菜单 222禁忌9：过于严格的数据字段 223禁忌10：没有默认值的输入字段和控件 224禁忌11：不恰当的默认值 225禁忌12：反向复选框,一、混淆复选框和单选按钮,错误的用法： 单独的一个单选按钮。 把复选框当作单选按钮：两个具有相反值的单选按钮和一个复选框是等价的，所以不要把复选框当作单选按钮，从而出现相反值能同时选中的情况 。 互斥的复选框：复选框的各个选项之间是独立的，不存在互斥关系,用左右键和上下键移动，或以及鼠标单击选中。 单选框是一种多选一设置，可选数目在2-8之间。 当空间不够时，单选框可以用循环按钮、下拉菜单、滚动列表框来代替。,在框中用鼠标单击，或在文本上设置/取消设置，试着用空格键做这件事。 复选框和选项框按选择几率的高底而先后排列。 复选框和选项框要有默认选项，并支持Tab选择。,二、在非开关设置中使用复选框,复选框用于从两个相反的值中选择一个，而不仅仅是二选一。所以，遇到“启用/禁用”,“可见/不可见”等明显相反的值时，可以使用复选框(也可以用具有两个值的单选按钮)。,三、把命令按钮当作开关,正确的做法是，用复选框当做开关，或者其他专门设计来做开关的控件。,四、把选项卡当作单选按钮,五、太多的选项卡,六、为永久只读数据提供输入控件,七、对于本应该有输入约束的字段使用普通文本框,GUI设计禁忌 之二 错误地使用了控件,一、动态菜单项,二 过于严格的数据字段,为了确保用户输入的内容是有效的，应用程序(包括Web表单)都会对一些字段进行各种检查，比如长度，字符组成等。有时候检查过于严格，也是一种错误。程序员为了编程方便，约束用户的输入，比如某字段不能包含单引号或者另一个字段能输入的字符数不能超过16。这种要求是无理的。不能因为SQL中单引号是特殊字符，就不允许用户输入。 为用户提供稍微宽松的输入字段并不难： 使字段宽度和数据长度基本一致：字段的宽度足够容纳数据，但是也不要长出太多。这样用户不会无限制的填写内容。 对于一种数据所有常见的格式，都要尽量支持。这集中体现在日期和时间，以及小数的格式上。 如果大小写字母对数据来说无关紧要的话，就不要区分大小写。 为字段提供有效格式示例，放在字段后面，或者上方，或者通过某种技术让它出现在空白的字段中。 不要因为技术原因对用户提出限制。技术问题应该自己解决，而不是交给用户解决。,三、没有默认值,有两种情况是可以不提供默认值的 没有合理的默认值：比如在“省市县”三级联动下拉菜单中，为“省”设置一个默认值的确不太好选择，除非该应用仅限某一省的用户使用。 宗教、政治或者法律原因，不能选择其中一项作为默认值。,四、不恰当的默认值,五、反向复选框,第3章 导航禁忌,禁忌13：未标识窗口或页面(1),禁忌13：未标识窗口或页面(2),在站点的导航栏中通过高亮等形式，标记当前页面的位置，或者在页面的明显位置，明确的标记当前页面的位置。,禁忌14：不同窗口使用同样的标题,禁忌15：窗口标题与命令或链接不符,禁忌16：使用户偏离正确道路的按钮和链接,禁忌17：自身链接,禁忌18：对话框层次过多,禁忌19：互相竞争的搜索框,不管是什么理由让开发人员在页面上放了多个搜索框，都会让用户分散注意力。所以，一个页面应该只有一个搜索框，它应该出现在左上角logo下面，右上角或者左侧导航栏的下方。,禁忌20：搜索结果的浏览方式不佳,禁忌2l：干扰搜索结果,4.1.1 禁忌22：术语不一致,有些术语的概念很清楚，有些术语却模糊不清，如果开发项目时没有字典，就会出现术语和概念不能一一对应的情况。,4.1.2 禁忌23：含义不清的术语(1),4.1.2 禁忌23：含义不清的术语(2),4.1.3 禁忌24：书写不好,这类错误主要是指错别字，语法错误，单词大小写错误，前后书写不一致，单复数(英文)等等。虽然这些问题不会影响软件的正确性，但是用户会觉得这个软件或者网站不够专业，进而怀疑这个软件是不是会给自己造成损失。 比如，有两个字段，一个要求输入表名，一个要求输入文件名，但是前者的标签是“表名”，后者的标签是“文件”。要么都加上“名”这个字，要么都不加这个字。再比如，有些简单的只有一句话的提示信息，有的地方加了句号，有的地方没有加句号。这样的细微的错误分布在系统各个角落。,4.1.4 禁忌25：文字过多,4.2.1 禁忌26：用词晦涩,4.2.2 禁忌27：在用户界面中将用户称为“user”,这个错误一般存在于英文系统。因为只有两个行业把他们的客户称为user，一个是计算机软件行业，一个是毒品行业。其他行业的客户都不叫做user。我们的客户可以叫做user，但是我们的user的客户，却不一定能再称为user。一般的替代词是member、guest等。,4.2.3 禁忌28：无用的错误消息,好的错误信息一定要告诉用户发生了什么，为什么会发生这个错误，以及用户该怎么处理。而且，错误信息一定要用和任务相关的词汇，不要把计算机术语给用户看。下面这个图显示的是使用360浏览器访问谷歌时出现错误的页面：,4.3.1 禁忌29：错误的消息,4.3.2 禁忌30：文字独立存在时有意义，但在GUI中引起误导,这种情况比较常见，在各个购物网站或者惠普、戴尔的官网经常出现“推荐产品”、“卖家热推”这类的字眼。其实这些词单独出现没有什么问题，不过在整个网页中，用户看了会想，其他产品是“不强力推荐”呢，还是“不推荐”呢，甚至是“强力不推荐”？,4.3.3 禁忌31：在命令标签中错误地使用或者不使用“” (1),省略号（.）最早是苹果公司的设计人员提出的。它用于区分立即执行的命令和先提示用户输入附加信息的命令。,4.3.3 禁忌31：在命令标签中错误地使用或者不使用“” (2),话框，就应该添加省略号，这是不对的。下面这个例子也是错误的：,第5章 图形设计和布局禁忌,5.1.1 禁忌32：容易忽略的信息,太小或者太普通：有些重要信息所在的区域非常非常小，或者它们的字体和颜色与其他内容一样，这样的信息将湮没在整个界面中。除非它们在移动或者非常亮。 信息位于用户关注区域之外：人类的视觉活动只有在视觉中心位置的一小块地方是敏锐的。把重要信息分散到页面各个角落，很容易让用户来回切换关注点。 大量雷同信息：比如下面这个例子中，两行文本中只有两个字不同，这让用户很难区分：,5.1.2 禁忌33：将对话框控制按钮与内容控制按钮混合放置,有很多对话框将标准按钮(确定、应用、关闭、取消、帮助、是、否、重试、放弃等)与控制特定数据或设置的按钮放在了一起。 这是一种错误。首先，控制特定数据的按钮和数据离得太远，很难发现其中的联系。其次，用于控制整个对话框的按钮和其他按钮没有外观上的区别。,5.1.3 禁忌34：不恰当地使用组合框 (1),5.1.3 禁忌34：不恰当地使用组合框 (2),5.1.4 禁忌35：单选按钮之间间隔太大,5.1.5 禁忌36：标签与数据字段距离太远,5.1.6 禁忌37：标签的对齐方式不一致,5.1.7 禁忌38：窗口初始位置不合适,在同一个坐标显示所有窗口 子窗口盖在父窗口上方 不在屏幕上显示子窗口,字体过小,第6章 交互禁忌,禁忌40：将实现暴露给用户,禁忌41：不必要的限制,禁忌42：令人混淆的概念(1),禁忌42：令人混淆的概念(2),禁忌43：向用户索取不必要的数据,禁忌45：无意义的选择 (1),禁忌45：无意义的选择 (2),禁忌46：很难记住的ID,禁忌47：长的说明信息消失过快(1),禁忌47：长的说明信息消失过快(2),禁忌48：不必要或效果不佳的标记模式,禁忌49：自动重排的显示,第七章响应性禁忌,响应性不好的原因,响应性是决定软件易用性的一个非常重要的因素（参见基本原则8）。注意这里的“响应性”不是“性能”或“速度”。 响应性与性能不同。性能是指软件计算和显示结果的速度。高性能软件很快就能给出用户所需的结果；低性能软件生成结果的速度很慢。 软件即使在低性能条件下也可以快速响应。,高响应性的软件(举例）,让用户立即知道他们的按键、鼠标移动和单击操作被接受了； 估算操作要花费多长时间； 允许用户在等待期间做其他事情； 巧妙地安排等待队列中的事件； 做一些整理操作或是处理计算机后台那些低优先级的任务； 还可以利用这段空闲时间估计一下将来可能的请求。,常见的响应性禁忌,禁忌52：光标跟不上用户；当操作系统处理鼠标 移动时光标四处跳动，当用户停止移动鼠标时它还在继续移动。 禁忌53：屏幕上的按钮响应鼠标点击的时间太长，或者根本不响应。 禁忌54：菜单、滑动条和滚动条的动作落后于用户操作，破坏了成功操作所需要的手眼动作配合。 禁忌55：移动和调整大小的操作跟不上用户的动作，也没有提供临时的进度显示（rubber-band）作为反馈。 禁忌56：应用程序没有指示它正处于繁忙状态，而是忽略了用户的存在。 禁忌57：当应用程序进行内部整理时经常（而且是不可预测地）不为用户提供响应。 禁忌58：冗长的操作不显示进度条。 禁忌59：冗长的操作不提供取消方式。 禁忌60：应用程序浪费空闲时间，而当用户最终发出一个可预期的命令时，却又要花费很长时间才去执行。 禁忌61：应用程序在挂起时不给出任何反馈，也不指明到底发生了什么事情。 禁忌62：Web站点包含很大的图像和动画，只有超高速的因特网连接才能看到。 禁忌63：Web站点总是重新加载整个页面来响应一些小的编辑操作。,长时间操作缺乏进度条,7.3.1 响应性七条原则,响应性原则之一：响应性不等同于性能 响应性原则之二：处理资源经常是有限的 响应性原则之三：用户界面是实时接口 响应性原则之四：任务对延迟的要求各异，软件不必立即做所有的事情 响应性原则之五：软件不必按照任务请求的顺序完成工作 响应性原则之六：软件不必执行所有请求的任务 响应性原则之七：用户是人而不是计算机程序,原则一 响应不等同于性能,举例： 修表师傅例子 与20年前相比，现在的个人计算机快了许多倍，但用户仍然等待很长时间而不知道正在发生什么事情，因此速度显然不是决定响应性的一切。现在大部分等待时间是由于网络延迟和大量的数据传输造成的。,原则二 处理资源经常是有限的,计算机越快，用户为之加载的软件就会越多：比如桌面附件/多个应用程序等和即时消息客户端应用程序。 即使拥有最新型号的计算机，也不一定就意味着某个应用程序可以使用更多的计算资源。,原则三：用户界面是实时接口,与人打交道的软件也需要满足实时性 约束。人类行为中反映的三个常量给 计算机系统响应性设立了必须要达到的目标,响应性原则之四：任务对延迟的要求各异，软件不必立即做所有的事情,对于特定的用户操作来说，即时的响应甚至可能是不需要的。更快不一定就更好。,7.3.4 响应性原则之四：任务对延迟的要求各异，软件不必立即做所有的事情,响应性原则之五：软件不必按照任务请求的顺序完成工作,明智地重新安排队列中的任务可以节省工作量和时间，进而提高响应性。对任务进行重排也可以使得高优先级的任务得到优先处理。,响应性原则之六：软件不必执行所有请求的任务,有时用户的请求是不必要的。例如，假定用户正在编辑文档，并指示软件将它保存。如果此文档自从上次保存直到现在没有做过任何改动，那就没有理由再让软件浪费时间来重复保存它。相反，软件可以只指示此文件已经保存过了。很多应用程序都是这样做的，但也有一些每次