1、GUI设计与用户体验测试,学习目标,了解常用界面设计方法和界面规范。 掌握界面交互和用户体验测试方法。,福布斯日前刊出为什么乔布斯比盖茨更杰出一文，文中称苹果联合创始人乔布斯的崇拜者之多令人震惊，而他与爱迪生相似程度令人不可思议。,如果我当年去问顾客他们想要什么，他们肯定会告诉我“一匹更快的马”。 亨利福特,GUI,用户界面，通常称为GUI（Graphical user interface），因为现在的软件早已走过了“黑暗”的DOS时代，大部分是图形化的用户界面。 用户界面，也叫人机界面或人机交互，是计算机学科中最年轻的分支之一。是计算机科学和认知心理学两个学科相结合的产物。,界面工程师和研究
2、学者们不断创新，开发出各种新的用户界面交互技术。,微软的Outlook模式被广泛使用,几乎所有商业网站都认为：投资可用性是高回报的。,The ROI of Usability,阿里软件UCD流程图,概要设计阶段：用户体验师要把需求文档中抽象的功能转化为用户需求。 通过做概念图、信息架构（建立层次逻辑关系）、建立用户场景（了解服务的人群，更好审视产品）等方法来定产品的大方向。详细设计阶段：设计有完善交互流程的原型demo（这个阶段如果条件允许可以进行低保真demo的可用性测试，把产品交互上一些问题尽早的暴露出来。）在原型评审后跟进视觉设计。在前端完成页面后，最好进行次高保真的可用性测试，确保不会
3、在开发好后才发现产品有大问题。,应该把用户体验融入到整个研发过程中去,微软在每次发布一个大型的软件之前，都要发布一个或多个Beta版本让全世界的人们试用和参与测试，以便收集修改的意见，据说这项活动每年为微软节省的开发和测试费用高达数10亿美元。,用户体验测试方法,可用性测试的两种类型和方法,可用性测试结果甚至可能令经验丰富的设计人员都大为惊讶,6-8名被试人就能代表所有用户的问题了吗？,据维茨1992和尼尔森1993的统计表明，通过5名用户就能发现某产品中约80%的可用性问题了 弗克纳2003发现，测试5名用户平均发现85%的可用性问题，而测试10名用户平均发现95%的可用性问题，从6名到第1
4、0名用户新增问题几率只为10% 所以一般用户群测试均为6-8名被试。如果需要一个大的样本，可以考虑进行多次小测试，而非一次性测试许多被试人,完整的可用性测试步骤,1、准备测试启动会在该步骤中需求方和用研将进行详细的沟通，用研人员充分理解测试目标，定义用户群和方位，了解技术环境 2、进行测试启动会在会议中需要确定测试任务、测试形式、招募被试的标准等相关要素 3、招募被试可以根据产品需要来划分多个纬度进行筛选被试 4、准备测试材料材料分为文档部分、工具部分和礼品部分，文档部分一般要准备测试大纲、任务书、知情同意书、测试情景、问卷、记录表等，工具部分为测试电脑、录音、手表等，礼品部分自然是对被测的赠
5、礼，也可以现金代替 5、组织测试设备和角色这个步骤包含测试环境的安排既测试房间，各种测试用设备安排，角色为测试主持者、参与者，以及被试接待人员的安排 6、在以上环节做完后就可以进入测试了,启发式评估,启发式评估(Heuristic Evaluation)是让一小批评估人员评估用户界面以及判断这些界面是否符合已经确立的可用性(Usability)规则，以发现界面设计中的可用性问题，并把它们作为界面再设计过程中所重视问题的可用性方法。通过多人评估在提高效率的同时避免单个评估人员报告的局限性。,优秀UI需要具备的7个要素,符合标准和规范 直观 一致 灵活 舒适 正确 实用,-Ron Patton软件
6、测试,UI标准和规范,Mac标准 GUI标准HIGuidelines.pdf Windows标准 GUI标准WindowsUserExperience.pdf IBM标准 GUI标准 BM_UserInterfaceArchitecture.pdf,直观,用户界面是否洁净、不唐突、不拥挤？ UI的组织和布局合理吗？是否允许用户轻松地从一个功能转到另一个功能？下一步做什么明显吗？任何时刻都可以决定放弃、退回或退出吗？输入得到确认了吗？菜单或者窗口是否太深？ 有多余功能吗？软件整体或局部是否做得太多？是否有太多特性把工作复杂化了？是否感觉到信息太庞杂？,直观意味着能够一眼看到需要的信息,屏幕上高亮
7、显示的地方太多可能使用户很难将注意力集中到重要的信息上,是否允许用户轻松地从一个功能转到另一个功能？下一步做什么明显吗？,一致,记事本、写字板、Word：编辑-查找（CTRL+F）,一致的术语同一个元素在某个对话框中叫做“slot”，但是在另外一个对话框中叫“cell” 一般在需求规格说明书中明确定义术语、缩略语，以便统一,以物流管理为豪的世界500强DELL的物流部门使用的信息系统仍然是黑底绿字的界面。其物流部门的主管说，这套系统的用户大多是物流专业的，系统界面与纸质报表是高度统一的，这样无需专门的培训就能够很容易地学会操作。,用户身边充斥着计算机专业术语,用户操作步骤来源于用户实际业务工作
8、流。例如：入库单拷贝功能的界面设计，从计划单生成采购单的界面设计音量的输入方式。,遵循用户的使用习惯,为软件设计概念模型概念模型就是设计人员希望用户理解的应用程序模型。使用最少的概念来提供所需的功能。例如，在一个驾驶模拟游戏的设计中，“向东北转向”和“向西南转向”是否是需要的？或者“向左转”和“向右转”是否足够？,灵活,Windows计算器提供两种视图,网易新闻版面在底部提供了导航条和“返回顶部”的按钮,手机的接打电话功能是很基本的功能，在实现的时候似乎没有什么特别之处，但如果仔细对这些场景进行行为分析就会发现一些改进可用性的潜在机会点：行为1：用户在接打电话的时候，经常会遇到需要记录一些电话
9、号码、地址之类的信息的情景，相信对于“你等一下，我找下纸和笔”之类的回答并不陌生，但是这里就蕴藏着潜在的功能点：当接听电话时能够调出“便笺”，同时打开免提，这样用户就无需找纸和笔了。行为2：用户在接到询问某个人电话号码的电话时，用户可能就需要能够在通话状态中调出“通讯录”的功能。,分析目标用户的任务-提高系统可用性,ATM取款机的不同服务模式：-用户取完钱时直接退卡；-用户取完钱时转到服务选择，可以继续服务也可以选择退卡。通过分析用户行为，可能会发现存在更“智能”的解决方案： 单笔限额：用户通常不会继续取款 - 退卡= 单笔限额：用户有继续取款的可能 - 继续服务,分析目标用户的任务-提高系统
10、可用性,舒适,恰当（风格） 错误处理（警告、恢复） 性能（不能太快；持续反馈）,不要让用户解决额外问题例如：用户想将一幅TIFF图放到他的BLOG上，但是网站要求GIF或JPEG图片格式不要让用户通过排除法来推理例如：系统提供了一个复选框标注着“水平对齐图标”。那么如果不选中它会发生什么，图标会垂直对齐吗？或者它们只是不对齐？,正确,市场定位偏差（软件与销售材料比较） 语言和拼写错误 图标、图像、声音、视频,让界面设计易于理解，例如名为“DoIt”的按钮，在英文中容易让人误解为“Dolt”（傻瓜）图解不明确，例如某个“Transmit（传送）”功能的图示被误认为是酒杯,图标隐喻是否正确（恰当）
11、,WYSIWYG 输入“左转30度”来精确地控制汽车转弯？,正确 != 精确,实用,去掉华而不实的界面元素和操作,开发人员往往相信“选项越多、控件越多，功能越强大，就越好”。而事实上，大部分用户只是想要足够能完成他们工作的功能，不用更多，也不能少。80%的用户仅仅用到Office中的20%的功能,对用户的及时帮助作用,练习：OA系统界面及用户体验测试,GUI控件禁忌,使用了错误的控件 错误地使用控件,混淆复选框和单选按钮 -单独的单选按钮,国外某大学课程注册页面,混淆复选框和单选按钮 - 将复选框当作单选按钮,国外某大学的在线申请表,Word - 字体,混淆复选框和单选按钮 -互斥的复选框,在
12、非开/关设置中使用复选框,假设某个颜色的设置有两种可能的值：红色和绿色。有些开发人员可能使用复选框来表示，因为这样既容易又节省空间。问题在于用户看不出不选择这个复选框意味着什么。,使用命令按钮作为开关,命令按钮开关不是一种好的用户界面设计：它容易误导用户。用户无法通过观察它们来预测有什么行为，而必须进行尝试。,使用选项卡作为单选按钮,将选项卡错误地用作值的设置，而不只是用作导航,太多选项卡 - “因小失大”,选项卡太多使得每个面板的宽度大于其内容所需的宽度，浪费了空间,在左边添加选项卡，在右边添加选项卡，四周都有选项卡,太多选项卡 - 四周都有选项卡,选项卡太多，因此标签使用了缩写，用户必须琢
13、磨它们代表什么意思,太多选项卡 -缩短标签,太多选项卡 - 多行选项卡（“Dancing tabs”）,这会使用户感到短暂的迷惑。,网络管理产品NetScanTools的界面修改,为只读数据提供输入控件,不可编辑的文本框,应该用文本“标签”（Label）控件替代文本字段（Edit）,对于有约束的输入滥用文本框,时间、音量、日期、城市、邮编,错误的主要来源：TTY-GUI转换老式的glass teletype(TTY)用户界面在转换到GUI界面时过度地使用文本字段,菜单（Menu）,动态菜单,Microsoft Office 的“智能菜单”功能根据最近的使用来增加和移除菜单项,菜单排序试验,字母
14、排序 0.81s 功能排序 1.28s 随机排序 3.23s,菜单排序的基本原则,时间（按年代顺序排序） 数值排序（按升序或降序） 物理属性（按长度、面积、体积、温度、重量、速度等属性的递增或递减顺序）字母顺序 相关项分组（用空行或分界线分开） 最频繁使用的、最重要的选项放在最前面,菜单的层次,树型菜单：优先考虑广度而不是深度 层次在3层内,数据录入界面设计原则,逻辑分组和排列 “住地”-”家庭住址” TAB顺序 预防错误 立即反馈,过于严格的数据字段,易于编码，难于输入，例如：不允许输入带有空格的信用卡号。,没有默认值的输入字段和控件,不带默认值的单选按钮（虽然某个选项可能更常用）不带默认值
15、的下拉菜单,不恰当的默认值,斯坦福大学WEB书店：要求顾客指定所在的州，默认值是Alabama，但是访问此站点的大多数顾客来自加利弗尼亚州，因此大多数顾客不得不改变State的设置。,“Google Suggest”,不要多此一举,微软的Office助手（“曲别针”）,当键入像“Dear Joe”一样的普通信函开头时,Word会辨认出这是一封信函的开头并立即通过“Office助手”一步步提供关于创建信函的帮助Office2007中已经取消了“曲别针”,反向复选框,用户必须停下来思考这种“反向工作”的复选框，必须仔细阅读标签的说明文字。,导航禁忌,易用性分析师Jakob Nielsen指出，成功
16、的导航线索应该让人们知道：-他们在哪里-他们已经到过哪里-他们能去哪里 此外，还可以再添加一条：-目标是近还是远,现实世界中的导航,现实世界中的导航,网站的导航,网站的导航,网站导航栏设计,未标识窗口或页面,桌面应用程序：窗口没有标题 Web：未标识页面,和每个拐角都应该有一个路牌一样，每个页面都应该一个名称。,Firefox以前的一个版本中，Preferences窗口标题栏标识了当前首选项目录（“General”），而不是窗口名，如：Options。,新版本的 Firefox 修改了这个问题,不同窗口使用同样的标题,窗口的标题只标识了应用程序，而没有指明窗口。 程序员复制了代码，但是忘记了更
17、改标题 程序员不知道这个标题在其他地方被使用了 程序员认为这个标题对两个窗口都适用,窗口标题标识的是应用程序名，而不是指具体的窗口,不同的窗口拥有相同的功能标题,窗口标题与命名或链接不符,用户的第一反应：打开的不是他们想要的窗口。,英文版的Excel：Insert-Function 打开 “Paste Function”的窗口。“Paste”意味着前面有一次“Cut”操作，而“Insert”则没有，因此这种不对应将引起误解。,M的WebMail中单击“Add a folder”显示一个名为“Manage Folders”的窗口,使用户偏离正确道路的按钮和链接,旧网站：链接直接打开导航到另外一个
18、页面，需要按回退键，很多用户以为另外一个页面中的“Reservations”链接会返回刚才的页面，而实际上会导航到订票过程的开始页面。这可能会耽误销售，当用户非常不耐烦时甚至可能丢失客户。,新网站相比旧网站有了改进，弹出小窗口,“using secure connection”的链接容易让人误解。点击该处只是跳到页面底部的解释。而实际上用户只需要点击开始的“Begin Membership Renewal”就可以开始续约了。,自身链接,如果用户没有意识到自己目前处于主页面，而“Home”当前是可点击的话，就很可能诱使用户去点击它,在主页之外的页面标识上加上“Home”（主页）字样,导航没有文字
19、提示,如果当前用户没有意识到自己当前在浏览的页面是美国地区的子站点时，可能会去点击“United States”,“面包屑式”的导航中的自身链接HomeAbout UsPeople HomeAbout UsPeople,“面包屑路径”的名称来自于在穿越一块陆地时沿途撒面包屑的想法，目的是指明回去的路。面包屑结构的一个常见的错误是将当前页面显示为一个活动链接，例如： HomeAbout UsPeople,Google的导航条避免了自身链接,对话框是另一个房间，去之前要有个好理由。- About Face,对话框层次过多,Apple的Final Cut Pro（用于优化流媒体图像）中，从录像中导出
20、一幅图像需要通过5个层次的对话框的导航： 1、选择“Save As”菜单，出现“Save”对话框。输入文件名，将格式设置为“Still Image”，单击“Options” 2、显示“Export Image Sequence Settings”对话框，单击“Options” 3、显示“QuickTime Image Options”对话框，单击“Options” 4、显示“Compression Settings”对话框，单击“Options” 5、显示“Photo JPEG Options”对话框，终于出现了用于优化流媒体图像的设置。单击它，然后单击此对话框的“OK”按钮，再依次单击第4个
21、、第3个、第2个、第1个对话框上的“OK”按钮。,对话框层次过深有两个坏处： 1）它们分散了用户对原来的目标的注意力 2）用户分辨不出哪个“OK”和“Cancel”按钮是当前按钮。人们不能很好地处理较深的信息结构；当他们遇到的信息层次结构超过一定数目时，可能会分辨不清他们的位置，刚才做了什么以及如何返回。,将主要交互放在主窗口中,Normal downloading of e-mail required three windows to be opened.,避免模式对话框,Word的查找对话框（模态）,Adobe Reader的查找对话框（非模态）,对话框礼节,互相竞争的搜索框,左边的搜索框
22、用于搜索特定课程的课程目录，右边的搜索框用于搜索站点本身,改版后：,容易引起误解的搜索框,搜索结果的浏览方式不佳,IBM.com由于只提供了“Next”和“Back”，搜索结果很难浏览,文字禁忌,不利于交流的文字 以开发人员为中心的文字 引起误解的文字,术语不一致,Username - Member ID,含义不清的术语,书写不好,重启后继续？重启windows还是Adobe Reader？,errors - error numeric - number,infomation - information,文字过多,字体过小,某些网站的导航栏使用非常小的字体，而且显示为图像，用户无法在浏览器中调
23、整其字体大小。,文字显示不清楚,底部新闻标题字体过小，几乎难以识别,冗长的链接,Web站点中的文本链接如果过于冗长（特别是当出现在列表中时）就很难浏览，如果链接之间有重复文本，对浏览和易读性的影响更大。,用词晦涩,A secretary called the Compuserve customer support hotline to say that even though she did what the software told her to do, it didnt seem to work. Compuserves software had displayed an error d
24、ialog box containing the message:Type mismatchThe secretary said that when she saw this message, she typed “mismatch” several times, but it didnt help.,用专业术语来显示错误消息,显示了GUI工具包控件名称,在错误提示信息中暴露了代码,显示了GUI的行话术语“Modal Dialog”,如果按“确定”，安装程序是否会自动帮我安装SQL SERVER？还是说我应该按“取消”，先去安装SQL SERVER？,在用户界面中将用户称为“用户”,软件系统应
25、该从用户的角度进行设计，而不能从系统设计人员或开发人员的角度出发,使用访问者、客户、成员来代替“user”,无用的错误消息,在URL中显示了具体错误的类型，但是很少会有用户查看URL,某下载网站错误提示信息,错误的消息,其实按功能的设计，应该提示用户输入比当前日期早的日期。,在命令标签中错误地使用或者不使用“”,在需要更多信息的命令标签的末尾添加省略号，这条规则有助于用户预先判断一个命令是会立即执行还是会提示要求输入附加信息。,图形设计和布局禁忌,不好的布局和窗口放置 排版错误,先来看看好的设计,QQ迷你首页能在有限的空间显示尽可能丰富的信息，其中的布局设计起到了很关键的作用,第一屏的flas
26、h图片所占位置过大，而且半天“loading”不完，页面不能正常显示，用户体验不佳。,容易忽略的信息,太小或者太普通 不是用户注视的地方 淹没在大量雷同的信息当中,让重要信息变大 将重要信息放在用户正在注视的地方 使用颜色来高亮显示,将重要信息放在用户正在注视的地方,一般用户在输入账号和密码之后，注视的是哪里？,将对话框按钮与内容按钮混合放置,窗口控制按钮：确定、应用、关闭、取消、帮助 内容控制按钮：添加、删除,不恰当地使用组合框,单个设置外加组合框 组合框外再加组合框 整个窗口就是一个组合框,单选按钮之间间隔太大,有时单选按钮之间间隔太远，以至于不像是属于同一个设置：,当几个不同的单选按钮组
27、相邻时，用户可能会弄错它们的分组：,标签与数据字段距离太远,标签太靠左，而数据字段太靠右 标签与其他设置之间的距离比它们自己的距离还近,标签的对齐方式不一致,当标签（Label）放置在数据字段的左侧时，它们可以是左对齐或右对齐。一个非常普遍的错误是控件的标签或数据字段的对齐方式不一致：有些地方是左对齐，在另外一些地方则是右对齐。,窗口初始位置不合适,PowerPoint将“超链接到幻灯片”对话框显示在其父窗口“动作设置”对话框的上方。这种设计再加上对话框的布局，导致用户不知道应该点击哪个OK/Cancel按钮。,交互禁忌,偏离任务焦点 要求不必要的步骤 增加用户的记忆负担 夺走用户的控制权,将
28、实现暴露给用户,强迫用户像程序员一样思考,某程序提供一个图形显示功能，图形的横轴的间隔很奇怪，不是更自然的、对用户有意义的间隔，例如：0、100、200、300 开发人员的辩解是：将横轴的最大长度划分为10份，并且将间隔设置为每一份的数值，这样将使图形的编码更简单。,不必要的限制,Excel的256列限制,自从20世纪80年代中期Excel发布以来，它的电子表格就被限制为256列。限制是由个人计算机的有限内存决定的。但是现在这个限制仍然存在！ 为了创建一个用于在一年内记录每天股票价格的电子表格，每天使用一列是很自然的，但是Excel无法做到这点。,Excel不允许打开两个同名文件,Excel第
29、二个令人讨厌的限制是：用户不能打开两个同名的电子表格文件。如果你在不同文件夹中有一个电子表格的备份文件，无法同时打开它和原文件进行比较。,向用户索取不必要的数据,邮编可以从省市推算出 年龄可以从出生日期推算出 ,很难记住的ID,分配的、不可更改的密码,例如在 AdvancedQTP.com 进行用户注册后，它将发送一个分配的密码到用户指定的邮箱中。,Dont Make Me Think,从Windows 3.x到Windows XP,长的说明信息消失过快,“直升机舱门”：据说美国空军在越战中使用的一些直升飞机将撤退的一系列步骤印在门的内侧上，第一步就是把门打开。当士兵想从正在坠落的直升机中跳伞
30、时，却要读完所有说明，打开门并记住所有看不到的说明来完成撤退。,有些软件在安装时的第一个界面列出详细的指导步骤，但是后续的界面中缺乏指导的信息,自动重排的显示,如何令用户烦恼：重排他们的数据。- 例如在一棵对象树中显示数据，当用户修改或添加、删除其中一个数据时，整个对象树会自动重新加载，并且重新排列数据。,图形自动缩放纵轴：,移动控件-Yahoo以前的网页中，顶部放置广告，导航的Next和Previous在广告下面，由于广告高度各不相同，导致导航链接的上下位置变化，用户无法简单地把鼠标放在Next按钮上来导航和浏览页面。,06年改版后：,使用户陷入困境的对话框,没有“取消” 所有路径都是错误的
31、 不清楚的选择 没有选择,FindBugs 的错误信息提示框，超长,没有“取消”例如PhotoShop中，用户尝试打印一副图像，但是选中的打印机与打印设置不匹配，将出现警告，但是警告对话框中没有提供取消打印的方式。,所有路径都是错误的MacOS的用户如果在打印一份文档时没纸了，将得到一个警告信息：Out of paper警告对话框提供3个选项：Delete job、Stop All jobs 、Stop job但是就是不能让用户加纸，然后继续打印！,不清楚的选择某个股票交易程序有这样一个令人混淆的“Cancel Cancellation”（取消取消）对话框。对话框上有两个选项“OK”和“Can
32、cel”在正式的发布版本中，按钮名称改为“Cancel Order”（取消订单）和“Continue Order”（继续订单）,某个预约功能中的“取消取消”对话框：,已经是最后一步了，所以“下一步”应该“变灰”,Window Zip的问题：,这时候还需要按“下一步”吗？,取消按钮无法取消操作,用户希望单击“取消”按钮，让程序“忘掉”用户从打开对话框之后在对话框中做过的改动，但是有些“取消”按钮并不执行取消操作，而仅仅是关闭对话框。 对话框实时地编辑应用程序数据。 在选项卡之间切换将保存更改。 向导有一些副作用，“取消”按钮并不能取消这些副作用。,向导是一种多页面的对话框，它引导用户向一个目标前
33、进，将选择和决策细化为一系列简单的步骤，并且在整个过程中为用户提供指导。 向导的每个页面除了“Next”和“Back”之外，还应该有一个“Cancel”按钮。单击Cancel按钮关闭向导，并中止操作。然而，一些向导并没有取消用户在单击“Cancel”按钮之前所做的每个操作。,响应性禁忌,“响应性”不等于“性能”或“速度” 高响应性的软件具有以下特点：-让用户立即知道他们的按键、鼠标移动和单击操作被接受了-估算操作要花费多长时间-允许用户在等待期间做其他事情-巧妙地安排等待队列中的事件,常见响应性错误,光标跟不上用户：当操作系统处理鼠标移动时光标四处跳动，当用户停止鼠标移动时它还在继续移动。 屏
34、幕上的按钮响应鼠标点击的时间太长，或者根本不响应。 菜单、滑动条和滚动条的动作落后于用户操作，破坏了成功操作所需要的手眼动作配合。 移动和调整大小的操作跟不上用户的工作，也没有提供临时的进度显示作为反馈。 应用程序没有指示它正处于繁忙状态，忽略了用户的存在。 冗长的操作不显示进度条。 冗长的操作不提供取消方式。 应用程序在挂起时不给出任何反馈，也不指明到底发生了什么事情。 Web站点包含很大的图像和动画，只有在超高速的网路连接下才能看到。 Web站点总是重新加载整个页面来响应一些小的编辑操作。,响应性差的示例：对按下按钮、滚动条移动或对象操作的反馈延迟阻碍其他活动的费时操作且不能中止没有提供任
35、何线索来表示操作要持续多久忽动忽停的、难以跟上的动画WEB的响应性改进 - AJAX,好的进度条的设计例子,及时的反馈,改善软件的响应性不仅可以提高用户满意度，还可以提高用户效率,色彩设置,彩色显示能够吸引用户的注意力，并且通常能改善任务的执行情况，但是滥用色彩也很危险。 色彩设置具有很多意义： 吸引注意力 为乏味的显示增加情调 在复杂显示中，使对象易于分辨 强调信息的逻辑组织结构 增强警告信息的醒目性 激发人们喜悦、兴奋、恐惧或愤怒等强烈的情感反应,不恰当地使用颜色（1）,背景颜色导致文字很难看清楚,文字和背景之间的对比度太低,对比强烈,不恰当地使用颜色（2）,依赖颜色的差别来表达重要的信息
36、,色彩设计-限定色彩数量,4种标准色：红、黄、蓝、绿 如果菜单中12个菜单项分别用不同的颜色显示，那么会给人一种压抑的感觉。如果只用4种颜色显示，也仍然会使用户误以为颜色相同的菜单项是相关的。 不超过7种 许多设计指南指出，在只有字母和数字的显示中，色彩的数量不应超过4种；在全部的显示序列中，色彩数量应该被限定在7种之内。有经验的用户也许会从大量的色彩编码中受益，但是对于新手来说，色彩太多容易造成混乱。,色彩设计-颜色编码,恰当的颜色编码设计能促进认识 例如，在会计决算软件中，对账目中逾期超过30天的数据行用红色编码，用绿色表示没有逾期的账目。在空中交通管制系统中，标识高空飞行的飞机颜色可以不
37、同于低空飞行的飞机的颜色。,色彩设计-色盲,8%的男性和1%的女性，他们会把橙色或红色与绿色相混淆，或者是在黑色背景下看不到红点。 限制颜色的使用。 适当使用双色编码：使用在形状和颜色，或者是位置和颜色上变化的符号。 允许用户自定义颜色。,色彩设计-编码一致性,在整个系统中都要使用相同的色彩编码规则。 如果某些出错消息用红色显示，那么就要保证每一个出错消息都用红色显示；如果有一个出错消息变成了黄色显示，用户就可能认为信息的重要性发生了改变。 如果不同的设计人员或开发人员使用了不同的颜色，那么用户会试图寻求不同的颜色所表达的含义，感到困惑。,色彩设计-遵循习惯性,交通：红色表示停、危险；黄色表示
38、警告；绿色表示通行。 股市：红色表示损失、黑色表示获利。 化学：红色表示热，蓝色表示冷。 制图：蓝色表示水、绿色表示森林、黄色表示沙漠。,色彩设计-搭配问题,红色和蓝色是光谱的两端，若眼睛同时聚焦于两种对比明显的颜色，则眼部周围的肌肉会特别紧张。,在红色背景下显示蓝色文本会造成用户阅读困难,一项对24种色彩组合的测试发现，出错率范围大约为每阅读1000个字符有1到4个错误。出错率低：蓝色背景黑色显示、白色背景蓝色显示。出错率高：绿色背景紫红色显示、白色背景绿色显示。,练习,对比 Adobe Reader 的常用功能在不同版本的界面设计、用户操作等方面的区别。,用户模型,通常，我们看到的和接触到
39、的软件界面上的东西其实只是用户体验的冰山一角而已。在视觉效果和交互方式下面掩盖的是硕大的用户概念模型。,请尊重你的用户！- Alan Cooper,界面设计的三种模型,在界面设计中，通常有三种模型，包括：设计者模型、实现者模型和用户模型。而用户模型往往在用户界面的开发过程中被过多地忽略。,大部分的购书网站的搜索,AMAZON的搜索,界面开发过程应综合考虑三种模型,设计者模型通常关注的是对象、表现、交互过程等 用户模型通常关注目标、信心、情绪等 实现者模型则更多地关注数据结构、算法、库等界面实现时要考虑的问题。 由于很多软件项目缺乏界面设计阶段，或者是由开发人员在编码阶段即兴为之。结果往往导致的
40、是界面效果偏向于实现者模型。例如，我们会看到有些系统的界面会有很多冗余对象是用户不会用到的，而究其原因则是开发人员为了重用某个界面的设计，直接继承了界面父类，这些明显是过分考虑实现模型而导致的恶果。 用户界面最终要给用户使用，由用户判断界面的可用性、易用性、用户体验等，因此，我们在界面开发的过程中应该更多地关注用户概念模型。,基于用户概念模型的界面设计,因为每个用户的概念模型是由不同的经验所影响的，所以没有两个概念模型是一模一样的。每个用户在看到一个界面时的观点都会有略微不同。,界面设计者的问题是设计出界面能让不同的用户从不同的视角来使用界面的时候都是可预期的、直觉的。 为了尽可能靠近和匹配用
41、户的概念模型，设计者应该找到他们需要的尽可能多的关于用户技能、动机、任务、期望等的信息。这个过程包括以下迭代： 1、利用任务分析、调查、顾客访谈、用户需求列表等资源 2、把用户提供的信息融合到用户界面设计中去 3、执行可用性测试,自然映射,Cooper为Softek的Storage Manager设计的基于属性的检索工具对于数据库查询，这些控件产生自然语言输出，而不是接受自然语言输入。,F扫描,逻辑流,在遵循网格的同时，布局还要注意反映用户使用程序的逻辑路径，要考虑这样的事实：人们的眼睛习惯从上到下，从左到右转。,新手、专家和中间用户,有些软件系统在每次启动时默认都会有一个欢迎界面，在这个界面
42、提供系统的简介，帮助用户如何开始使用系统，帮助用户导航到联机帮助文档或例子，例如，下面是TestComplete启动后显示的Welcome界面。,但是，假设界面的左下角没有“Do not show again”这个选项的话，这个欢迎界面的设计就是个很糟糕的界面，因为它强迫用户每次启动软件系统后，都要看一下这个界面，然后要用户亲自关闭这个界面。,不要假设用户是很笨的，而是灵活地提供有效的暗示，用户在犹豫时能从这些暗示得到确认的信心，从而做出正确的决定。,表达能力强的图标、tool tips、输入框前面的简明的标题说明、状态栏中关于软件系统状态的说明等都是非常有效的为用户提供协助的方式。,用户建模
43、：人物角色和目标,If you try to design an automobile that pleases every possible driver, you end up with a car with every possible feature, but which pleases nobody. Software today is too often designed to please too many users, resulting in low user satisfaction.,By designing different cars for different pe
44、ople with different specific goals, we are able to create designs that other people with similar needs to our target drivers also find satisfying. The same holds true for the design of digital products and software.,In a hospital information system, the physicians and nurses have a mental model of p
45、atient information that derives from the patient records that they are used to manipulating in the real world. It therefore makes most sense to find patient information by using names of patients as an index. Each physician has certain patients, so it makes additional sense to filter the patients in
46、 the clinical interface so that each physician can choose from a list of her own patients, organized alphabetically by name. On the other hand, in the business office of the hospital, the clerks there are worried about overdue bills. They dont initially think about these bills in terms of who or wha
47、t the bill is for, but rather in terms of how late the bill is (and perhaps how big the bill is). Thus, for the business office interface, it makes sense to sort first by time overdue and perhaps by amount due, with patient names as a secondary organizational principle.,“射箭”原理,三大C2C网站的购买按钮设计,点评：图形、文
48、字、感叹号、水晶效果、立体效果统统用上，而相比之下，淘宝按钮在整体效果上更胜一筹。,按钮是网站界面中伴随着用户的点击行为的特殊图片，由于按钮点击行为是将用户引向顾客转化的重要步骤，因此按钮在设计上有较高的要求。按钮设计的基本要求是要达到“点击暗示”效果，凹凸感、阴影效果、水晶效果等均是这一原则的体现。同时，按钮中的可点击范围最好是整个按钮，而不仅限于按钮图片上的文本区。,减少用户的工作量,逻辑的工作量 逻辑工作量是用户理解界面所要付出的努力，例如对文本标题命名或术语的理解，对界面元素的组织结果的理解。 知觉的工作量 知觉工作量主要是用户在识别形状、大小、颜色和表达的视觉布局等方面要付出的努力。
49、 记忆的工作量 记忆工作量则主要表现在记忆密码、快捷键、数据对象和控件的名字、位置、对象之间的关系等方面要付出的努力。 物理工作量 物理工作量是指用户在使用界面时敲击键盘、移动鼠标、切换输入模式等方面的工作量。,消除附加工作,消除附加工作使得用户更加有效率,“纯粹”的附加工作,让用户告诉程序哪个COM端口能够使用,程序应该可以自动检测哪些端口被占用了,视觉附加工作,用户必须扭过头来看,导航附加工作,引起用户注意,亮度：两种亮度，使用高亮吸引注意力 标记：下划线、边框、箭头指示等 尺寸：4种，让大尺寸吸引更多注意力 字体：3种 反相显示：使用反相着色 闪烁：在有限的区域里谨慎地使用闪烁显示（24Hz）或者闪烁的颜色变化 颜色：4种标准色，其他的颜色在特殊场合下使用 音频：柔和的音调表示正常的积极反馈；刺耳的音调表示很少发生的紧急情况,无论你的界面有多酷，越少越好！- Alan Cooper,“少就是多”,好的界面设计应该是最简洁的界面设计，好的界面设计没有多余的元素。,软件的“姿态”,独占 暂时 精灵 辅助,独占姿态：全屏、长时间独占用户注意力,为中间用户优化 为全屏优化 使用保守的视觉风格 提供丰富的视觉反馈 支持灵活的输入方式,
