交互设计基础课件.ppt

《交互设计基础课件.ppt》由会员分享，可在线阅读，更多相关《交互设计基础课件.ppt（149页珍藏版）》请在金锄头文库上搜索。

1、入知远工作室须知,上班时间,（除有课外） 周一到周五 上午：8:00 - 11：30 下午：13:30-17:00 指纹考勤 其它时间由指导教师和学生本人共同安排,工作室为你提供的,良好的学习氛围 必要的软硬件设备 优质的指导教师 项目机会,你为工作室贡献的,做好自我定位，努力学习知识技能 学会如何和他人合作，分享知识 努力营造一个良好的工作氛围（电话，QQ，游戏，卫生，活动） 将来 提供就业资讯 1年内返校一次,行动起来选举班委,班长 生活委员 卫生委员 纪律委员,Question ？,交互设计基础 梅成才 6369980QQ.com,温州电子信息研究院软件研究所,什么是“交互设计”,交互设

2、计是一种如何让产品易用，有效而让人愉悦的技术，它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。,关注,GUI-Graphical User Interface 即人机交互图形化用户界面设计,交互设计案例（1）,卖当劳的番茄酱,双汇火腿肠,交互设计案例（2）,失败的交互设计,失败的交互设计（1）,失败的交互设计（2）,失败的交互设计（3）,失败的交互设计（4）,教材： GUI设计禁忌2.0 【美】Jeff Johnson著，机械工业出版社，2009,参考书1：,参考2： About F

3、ace3.0 【美】Alan Cooper著，电子工业出版社，2008,课程考核,课程考核,平时表现50% 小组加减分+个人加减分（例） 期末成绩50%,行动起来,选举课代表（+） 成立小组（4人一组，共8组） 小组取名,请访问工贸学院各系部网站并仔细浏览。,1 该网站是否违背GUI设计禁忌中提到的9条原则，如果有请指出网站在何处违背了第几条原则，并按如下格式填写。 2 该网站是否存在使用了错误的控件或错误的使用控件的情况，如果有请指出并填写如下表格 3 该网站是否存在导航禁忌，如果有请指出并填写如下表格： 4 该网站是否存在响应性禁忌，如果有请指出并填写如下表格 5 请使用学过的网站可用性三

4、大定律进行分析，指出哪些页面需要改进？ 6 请你提一些对交互设计基础课程的建议和意见。,请大家一起来讨论以下的例子,例1,下面是软件或者网页中进度条的界面，你觉的如何？,McInerney and Li 2002列出了用于设计有效的进度指示器的一些指导原则,显示剩余的工作，而不是已完成的工作。不好的显示：已复制3个文件。好的显示：还剩4个文件未复制。 显示总体进度，而不是当前步骤的进度。不好的显示：此步骤还需5秒。好的显示：还需15秒。 对于百分比的完成，从1%开始，而不是0%。如果进度条在0%上停留超过1秒或2秒，用户会感到担忧。同理，100%的显示要短暂。如果进度条在100%上停留超过1秒

5、或2秒，用户会认为出了问题。 显示平滑的、线性的进度，而不要显示不规则的、突然变化的进度。 使用人们熟悉的精度，而不是计算机精度。不好的显示：27秒。好的显示：少于1分钟。,例2,例3,您认为以下几个对话框哪个比较恰当？,例4,例5,例6,4 . 基本原则,基本原则1： 关注用户任务，而不是技术 基本原则2： 首先考虑功能，然后才是表示 基本原则3： 与用户对任务的看法保持一致 基本原则4: 设计要符合常见情况 基本原则5： 不要分散用户对他们目标的注意力 基本原则6： 促进学习 基本原则7： 传递信息，而不仅仅是数据 基本原则8： 设计应满足响应需求 基本原则9： 通过用户试用发现错误，然后

6、修正它,基本原则1：关注用户及其任务，而不是技术,谁是目标用户？ 谁是目标客户？ 目标用户情况（对计算机的总体了解、任务知识、系统知识） 软件做什么？它能帮助用户解决什么问题？它将提供什么价值？,谁是用户？,客户,用户,用户的层次,永远的“中间用户”,不可避免的矛盾,商务因素影响产品偏重于初学者,开发人员影响产品偏重于专家,我们把中间用户搞丢了！,基本原则2： 首先考虑功能，然后才是表示,基本原则3： 与用户对任务的看法保持一致,争取自然 使用用户的词汇，而不是你自己的 找到正确的功能/复杂度平衡点 恰当的默认值 模板或者封装的解决方案 指南性的路径和向导 渐进式显示 通用命令 。,示例分析,

7、图5-6 . 软件人员经常编写出“劣质”的消息框，例如措词生硬、幼稚、蹩脚，甚至有文字、语法错误；消息文本、图形标志和命令按钮在语义上不一致。,好的,差的,基本原则4: 设计要符合常见情况,最少步骤、最高效率 越频繁使用的功能，需要的点击应越少 越多用户使用某功能，它就应该越明显 设计用户界面时应当尽可能地替用户着想，用户应当用最少的操作步骤完成某项操作任务，获得最高的使用效率。（手机充值）,基本原则5： 不要分散用户对他们目标的注意力,示例分析,图5-7(b) .不显眼的菜单排列，常被用户忽视。至少要让菜单排列和广告互换位置。,基本原则5： 不要分散用户对他们目标的注意力,点评：网站使用广告

8、的用意是为了配合营销活动的宣传，这样的布局更象是出于网站的目标，忽略了用户的目的，因此未必能达到预期的效果。,基本原则6： 促进学习,“从外到里”思考，而不是“从里到外“ 保持一致性 提供一个低风险的环境,允许用户犯错误,让用户可以撤销动作 在执行具体的破坏性操作中要求用户确认。,“用户界面风格一致”的最大好处就是能够减少用户的记忆量、减少出错几率，并且迅速积累操作经验。所以熟悉Word软件的人基本上不用翻阅手册就能使用PowerPoint软件，可谓“无师自通”。 软件的用户界面中同类的界面元素应当有相同的视感和相同的操作方式。例如命令按钮是最常见的界面元素，所有命令按钮的形状、色彩以及对鼠标

9、的响应方式都是一致的 同一类型软件的用户界面应当有一定程度的相似性。例如Microsoft公司的Office家族里有Word、Excel、PowerPoint、Outlook等软件，这些软件提供的“复制、剪切、粘贴”功能的操作方式都是相同的。,基本原则8：设计应满足响应需求,当用户进行某项操作后，如果过了一会儿（几秒钟）用户界面一点反应都没有，这将使用户感到迷茫和不安，因为他不知道是自己操作错了还是软件死机了。 及时反馈信息很重要，至少要让用户心里有数，知道该任务处理得怎么样了，有什么样的结果。 例如下载一个文件，界面上应当显示“百分比”或相关数字来表示下载的进度，否则人们不知道要等待多少时间

10、。如果某些事务处理不能提供进度等数据，那么至少要给出提示信息如“正在处理，请等待”。最好是提供合适的动画，让用户明白软件正在干活、没有死机。,第二章. 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：不恰当的默认值

11、 225禁忌12：反向复选框,一、混淆复选框和单选按钮,错误的用法： 单独的一个单选按钮。 把复选框当作单选按钮：两个具有相反值的单选按钮和一个复选框是等价的，所以不要把复选框当作单选按钮，从而出现相反值能同时选中的情况 。 互斥的复选框：复选框的各个选项之间是独立的，不存在互斥关系,用左右键和上下键移动，或以及鼠标单击选中。 单选框是一种多选一设置，可选数目在2-8之间。 当空间不够时，单选框可以用循环按钮、下拉菜单、滚动列表框来代替。,在框中用鼠标单击，或在文本上设置/取消设置，试着用空格键做这件事。 复选框和选项框按选择几率的高底而先后排列。 复选框和选项框要有默认选项，并支持Tab选择

12、。,二、在非开关设置中使用复选框,复选框用于从两个相反的值中选择一个，而不仅仅是二选一。所以，遇到“启用/禁用”,“可见/不可见”等明显相反的值时，可以使用复选框(也可以用具有两个值的单选按钮)。,三、把命令按钮当作开关,正确的做法是，用复选框当做开关，或者其他专门设计来做开关的控件。,四、把选项卡当作单选按钮,五、太多的选项卡,六、为永久只读数据提供输入控件,七、对于本应该有输入约束的字段使用普通文本框,GUI设计禁忌 之二 错误地使用了控件,一、动态菜单项,二 过于严格的数据字段,为了确保用户输入的内容是有效的，应用程序(包括Web表单)都会对一些字段进行各种检查，比如长度，字符组成等。有

13、时候检查过于严格，也是一种错误。程序员为了编程方便，约束用户的输入，比如某字段不能包含单引号或者另一个字段能输入的字符数不能超过16。这种要求是无理的。不能因为SQL中单引号是特殊字符，就不允许用户输入。 为用户提供稍微宽松的输入字段并不难： 使字段宽度和数据长度基本一致：字段的宽度足够容纳数据，但是也不要长出太多。这样用户不会无限制的填写内容。 对于一种数据所有常见的格式，都要尽量支持。这集中体现在日期和时间，以及小数的格式上。 如果大小写字母对数据来说无关紧要的话，就不要区分大小写。 为字段提供有效格式示例，放在字段后面，或者上方，或者通过某种技术让它出现在空白的字段中。 不要因为技术原因

14、对用户提出限制。技术问题应该自己解决，而不是交给用户解决。,三、没有默认值,有两种情况是可以不提供默认值的 没有合理的默认值：比如在“省市县”三级联动下拉菜单中，为“省”设置一个默认值的确不太好选择，除非该应用仅限某一省的用户使用。 宗教、政治或者法律原因，不能选择其中一项作为默认值。,四、不恰当的默认值,五、反向复选框,第3章 导航禁忌,禁忌13：未标识窗口或页面(1),禁忌13：未标识窗口或页面(2),在站点的导航栏中通过高亮等形式，标记当前页面的位置，或者在页面的明显位置，明确的标记当前页面的位置。,禁忌14：不同窗口使用同样的标题,禁忌15：窗口标题与命令或链接不符,禁忌16：使用户偏

15、离正确道路的按钮和链接,禁忌17：自身链接,禁忌18：对话框层次过多,禁忌19：互相竞争的搜索框,不管是什么理由让开发人员在页面上放了多个搜索框，都会让用户分散注意力。所以，一个页面应该只有一个搜索框，它应该出现在左上角logo下面，右上角或者左侧导航栏的下方。,禁忌20：搜索结果的浏览方式不佳,禁忌2l：干扰搜索结果,4.1.1 禁忌22：术语不一致,有些术语的概念很清楚，有些术语却模糊不清，如果开发项目时没有字典，就会出现术语和概念不能一一对应的情况。,4.1.2 禁忌23：含义不清的术语(1),4.1.2 禁忌23：含义不清的术语(2),4.1.3 禁忌24：书写不好,这类错误主要是指错

16、别字，语法错误，单词大小写错误，前后书写不一致，单复数(英文)等等。虽然这些问题不会影响软件的正确性，但是用户会觉得这个软件或者网站不够专业，进而怀疑这个软件是不是会给自己造成损失。 比如，有两个字段，一个要求输入表名，一个要求输入文件名，但是前者的标签是“表名”，后者的标签是“文件”。要么都加上“名”这个字，要么都不加这个字。再比如，有些简单的只有一句话的提示信息，有的地方加了句号，有的地方没有加句号。这样的细微的错误分布在系统各个角落。,4.1.4 禁忌25：文字过多,4.2.1 禁忌26：用词晦涩,4.2.2 禁忌27：在用户界面中将用户称为“user”,这个错误一般存在于英文系统。因为只有两个行业把他们的客户称为user，一个是计算机软件行业，一个是毒品行业。其他行业的客户都不叫做user。我们的客户可以叫做user，但是我们的user的客户，却不一定能