交互设计基础课件

Page1入知远工作室须知Page2上班时间（除有课外）周一到周五上午：8:00-11：30下午：13:30-17:00指纹考勤其它时间由指导教师和学生本人共同安排Page3工作室为你提供的良好的学习氛围必要的软硬件设备优质的指导教师项目机会Page4你为工作室贡献的做好自我定位，努力学习知识技能学会如何和他人合作，分享知识努力营造一个良好的工作氛围（电话，QQ，游戏，卫生，活动）将来提供就业资讯1年内返校一次Page5行动起来选举班委班长生活委员卫生委员纪律委员Page6Question？交互设计基础梅成才[e-mail]温州电子信息研究院软件研究所Page8什么是“交互设计”交互设计是一种如何让产品易用，有效而让人愉悦的技术，它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。关注Page9GUI---GraphicalUserInterface即人机交互图形化用户界面设计Page10Page11Page12Page13Page14Page15Page16Page17Page18交互设计案例（1）卖当劳的番茄酱双汇火腿肠Page19交互设计案例（2）Page20失败的交互设计Page21失败的交互设计（1）提供正确，甚至是精确，但是毫无帮助的信息Page22失败的交互设计（2）提供不知所云的信息提供不知所云的信息Page23失败的交互设计（3）提供正确，甚至是精确，但是毫无帮助的信息提供包含“恐吓”内容的信息Page24失败的交互设计（4）提供正确，甚至是精确，但是毫无帮助的信息让人反复体验挫折感让人反复体验挫折感Page25教材：《GUI设计禁忌2.0》【美】JeffJohnson著，机械工业出版社，2009Page26参考书1：Page27参考2：《AboutFace3.0》【美】AlanCooper著，电子工业出版社，2008Page28课程考核课程考核•平时表现50%•小组加减分+个人加减分（例）•期末成绩50%行动起来•选举课代表（+）•成立小组（4人一组，共8组）•小组取名•请访问工贸学院各系部网站并仔细浏览。组名负责部门信息传媒学院经济与贸易学院轻工系电子工程系汽车与机械工程学院管理学院成教学院技师学院•1该网站是否违背《GUI设计禁忌》中提到的9条原则，如果有请指出网站在何处违背了第几条原则，并按如下格式填写。•2该网站是否存在使用了错误的控件或错误的使用控件的情况，如果有请指出并填写如下表格•3该网站是否存在导航禁忌，如果有请指出并填写如下表格：4该网站是否存在响应性禁忌，如果有请指出并填写如下表格•5请使用学过的网站可用性三大定律进行分析，指出哪些页面需要改进？•6请你提一些对交互设计基础课程的建议和意见。请大家一起来讨论以下的例子例1•下面是软件或者网页中进度条的界面，你觉的如何？McInerneyandLi[2002]列出了用于设计有效的进度指示器的一些指导原则•显示剩余的工作，而不是已完成的工作。不好的显示：已复制3个文件。好的显示：还剩4个文件未复制。•显示总体进度，而不是当前步骤的进度。不好的显示：此步骤还需5秒。好的显示：还需15秒。•对于百分比的完成，从1%开始，而不是0%。如果进度条在0%上停留超过1秒或2秒，用户会感到担忧。同理，100%的显示要短暂。如果进度条在100%上停留超过1秒或2秒，用户会认为出了问题。•显示平滑的、线性的进度，而不要显示不规则的、突然变化的进度。•使用人们熟悉的精度，而不是计算机精度。不好的显示：27秒。好的显示：少于1分钟。例2例3•您认为以下几个对话框哪个比较恰当？例4例5例6Page414.基本原则基本原则1：关注用户任务，而不是技术基本原则2：首先考虑功能，然后才是表示基本原则3：与用户对任务的看法保持一致基本原则4:设计要符合常见情况基本原则5：不要分散用户对他们目标的注意力基本原则6：促进学习基本原则7：传递信息，而不仅仅是数据基本原则8：设计应满足响应需求基本原则9：通过用户试用发现错误，然后修正它Page42基本原则1：关注用户及其任务，而不是技术谁是目标用户？谁是目标客户？目标用户情况（对计算机的总体了解、任务知识、系统知识）软件做什么？它能帮助用户解决什么问题？它将提供什么价值？Page43谁是用户？客户用户Page44用户的层次Page45永远的“中间用户”用户数量初学者中间用户专家Page46不可避免的矛盾用户数量初学者中间用户专家用户数量初学者中间用户专家商务因素影响产品偏重于初学者开发人员影响产品偏重于专家用户数量初学者中间用户专家我们把中间用户搞丢了！Page47基本原则2：首先考虑功能，然后才是表示Page48基本原则3：与用户对任务的看法保持一致争取自然使用用户的词汇，而不是你自己的找到正确的功能/复杂度平衡点恰当的默认值模板或者封装的解决方案指南性的路径和向导渐进式显示通用命令。。。Page49Page50示例分析图5-6.软件人员经常编写出“劣质”的消息框，例如措词生硬、幼稚、蹩脚，甚至有文字、语法错误；消息文本、图形标志和命令按钮在语义上不一致。好的差的Page51基本原则4:设计要符合常见情况最少步骤、最高效率越频繁使用的功能，需要的点击应越少越多用户使用某功能，它就应该越明显设计用户界面时应当尽可能地替用户着想，用户应当用最少的操作步骤完成某项操作任务，获得最高的使用效率。（手机充值）Page52基本原则5：不要分散用户对他们目标的注意力示例分析图5-7(b).不显眼的菜单排列，常被用户忽视。至少要让菜单排列和广告互换位置。Page53基本原则5：不要分散用户对他们目标的注意力点评：网站使用广告的用意是为了配合营销活动的宣传，这样的布局更象是出于网站的目标，忽略了用户的目的，因此未必能达到预期的效果。Page54基本原则6：促进学习“从外到里”思考，而不是“从里到外“保持一致性提供一个低风险的环境Page55Page56允许用户犯错误让用户可以撤销动作在执行具体的破坏性操作中要求用户确认。Page57“用户界面风格一致”的最大好处就是能够减少用户的记忆量、减少出错几率，并且迅速积累操作经验。所以熟悉Word软件的人基本上不用翻阅手册就能使用PowerPoint软件，可谓“无师自通”。–软件的用户界面中同类的界面元素应当有相同的视感和相同的操作方式。例如命令按钮是最常见的界面元素，所有命令按钮的形状、色彩以及对鼠标的响应方式都是一致的–同一类型软件的用户界面应当有一定程度的相似性。例如Microsoft公司的Office家族里有Word、Excel、PowerPoint、Outlook等软件，这些软件提供的“复制、剪切、粘贴”功能的操作方式都是相同的。Page58Page59Page60基本原则8：设计应满足响应需求当用户进行某项操作后，如果过了一会儿（几秒钟）用户界面一点反应都没有，这将使用户感到迷茫和不安，因为他不知道是自己操作错了还是软件死机了。及时反馈信息很重要，至少要让用户心里有数，知道该任务处理得怎么样了，有什么样的结果。例如下载一个文件，界面上应当显示“百分比”或相关数字来表示下载的进度，否则人们不知道要等待多少时间。如果某些事务处理不能提供进度等数据，那么至少要给出提示信息如“正在处理，请等待…”。最好是提供合适的动画，让用户明白软件正在干活、没有死机。Page61第二章.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：对于有约束的输入滥用文本框Page622．2错误地使用控件2．2．1禁忌8：动态菜单2．2．2禁忌9：过于严格的数据字段2．2．3禁忌10：没有默认值的输入字段和控件2．2．4禁忌11：不恰当的默认值2．2．5禁忌12：反向复选框Page63一、混淆复选框和单选按钮错误的用法：1.单独的一个单选按钮。2.把复选框当作单选按钮：两个具有相反值的单选按钮和一个复选框是等价的，所以不要把复选框当作单选按钮，从而出现相反值能同时选中的情况。3.互斥的复选框：复选框的各个选项之间是独立的，不存在互斥关系Page64用左右键和上下键移动，或以及鼠标单击选中。单选框是一种多选一设置，可选数目在2-8之间。当空间不够时，单选框可以用循环按钮、下拉菜单、滚动列表框来代替。Page65在框中用鼠标单击，或在文本上设置/取消设置，试着用空格键做这件事。复选框和选项框按选择几率的高底而先后排列。复选框和选项框要有默认选项，并支持Tab选择。Page66二、在非开关设置中使用复选框复选框用于从两个相反的值中选择一个，而不仅仅是二选一。所以，遇到“启用/禁用”,“可见/不可见”等明显相反的值时，可以使用复选框(也可以用具有两个值的单选按钮)。Page67三、把命令按钮当作开关正确的做法是，用复选框当做开关，或者其他专门设计来做开关的控件。Page68四、把选项卡当作单选按钮Page69五、太多的选项卡Page70六、为永久只读数据提供输入控件Page71七、对于本应该有输入约束的字段使用普通文本框Page72GUI设计禁忌之二——错误地使用了控件Page73一、动态菜单项Page74二过于严格的数据字段为了确保用户输入的内容是有效的，应用程序(包括Web表单)都会对一些字段进行各种检查，比如长度，字符组成等。有时候检查过于严格，也是一种错误。程序员为了编程方便，约束用户的输入，比如某字段不能包含单引号或者另一个字段能输入的字符数不能超过16。这种要求是无理的。不能因为SQL中单引号是特殊字符，就不允许用户输入。为用户提供稍微宽松的输入字段并不难：使字段宽度和数据长度基本一致：字段的宽度足够容纳数据，但是也不要长出太多。这样用户不会无限制的填写内容。对于一种数据所有常见的格式，都要尽量支持。这集中体现在日期和时间，以及小数的格式上。如果大小写字母对数据来说无关紧要的话，就不要区分大小写。为字段提供有效格式示例，放在字段后面，或者上方，或者通过某种技术让它出现在空白的字段中。不要因为技术原因对用户提出限制。技术问题应该自己解决，而不是交给用户解决。Page75Page76三、没有默认值有两种情况是可以不提供默认值的没有合理的默认值：比如在“省市县”三级联动下拉菜单中，为“省”设置一个默认值的确不太好选择，除非该应用仅限某一省的用户使用。宗教、政治或者法律原因，不能选择其中一项作为默认值。Page77四、不恰当的默认值Page78五、反向复选框Page79第3章导航禁忌Page80禁忌13：未标识窗口或页面(1)Page81禁忌13：未标识窗口或页面(2)在站点的导航栏中通过高亮等形式，标记当前页面的位置，或者在页面的明显位置，明确的标记当前页面的位置。Page82禁忌14：不同窗口使用同样的标题Page83禁忌15：窗口标题与命令或链接不符Page84Page85禁忌16：使用户偏离正确道路的按钮和链接Page86禁忌17：自身链接Page87禁忌18：对话框层次过多Page88禁忌19：互相竞争的搜索框不管是什么理由让开发人员在页面上放了多个搜索框，都会让用户分散注意力。所以，一个页面应该只有一个搜索框，它应该出现在左上角logo下面，右上角或者左侧导航栏的下方。Page89禁忌20：搜索结果的浏览方式不佳Page90禁忌2l：干扰搜索结果Page914.1.1禁忌22：术语不一致有些术语的概念很清楚，有些术语却模糊不清，如果开发项目时没有字典，就会出现术语和概念不能一一对应的情况。Page924.1.2禁忌23：含义不清的术语(1)Page934.1.2禁忌23：含义不清的术语(2)Page944.1.3禁忌24