用户界面设计

用户界面设计

简介

在人和机器的互动过程(Human Machine Interaction)中,有一个层面,即我们所说的界面(interface)。从心理学意义来分,界面可分为感觉(视觉、触觉、听觉等)和情感两个层次。用户界面设计是屏幕产品的重要组成部分。界面设计是一个复杂的有不同学科参与的工程,认知心理学、设计学、语言学等在此都扮演着重要的角色。用户界面设计的三大原则是:置界面于用户的控制之下;减少用户的记忆负担;保持界面的一致性。

用户界面是人与机之间交流、沟通的层面。从深度上分为两个层次:感觉的和情感的。感觉层次指人和机器之间的视觉、触觉、听觉层面;情感层次指人和机器之间由于沟通所达成的融洽关系。总之用户界面设计是以人为中心,使产品达到简单使用和愉悦使用的设计。 界面设计从流程上分为结构设计、交互设计和视觉设计三部分。

随着产品屏幕操作的不断普及,用户界面已经融入我们的日常生活。一个良好设计的用户界面,可以大大提高工作效率,使用户从中获得乐趣,减少由于界面问题而造成用户的咨询与投诉,减轻客户服务的压力,减少售后服务的成本。因此,用户界面设计对于任何产品/服务都极其重要。

在国外,用户界面设计人员有了一个新的称谓:Information Architecture,信息建筑师。它不仅仅是指美工,而是具有心理学、软件工程学、设计学等综合知识的人 用户界面设计工作流程

用户界面设计在工作流程上分为结构设计、交互设计、视觉设计三个部分。 · 结构设计 Structure Design

结构设计也成概念设计(Conceptual Design),是界面设计的骨架。通过对用户研究和任务分析,制定出产品的整体架构。基于纸质的的低保真原型(Paper Prototype)可提供用户测试并进行完善。在结构设计中,目录体系的逻辑分类和语词定义是用户易于理解和操作的重要前提。如西门子手机的设置闹钟的词条是“重要记事”,让用户很难找到。 · 交互设计 Interactive Design

交互设计的目的是使产品让用户能简单使用。任何产品功能的实现都是通过人和机器的交互来完成的。因此,人的因素应作为设计的核心被体现出来。交互设计的原则如下:

1) 有清楚的错误提示。误操作后,系统提供有针对性的提示。

2) 让用户控制界面。“下一步”、“完成”,面对不同层次提供多种选择,给不同层次的用户提供多种可能性。

3) 允许兼用鼠标和键盘。同一种功能,同时可以用鼠标和键盘。提供多种可能性。

4) 允许工作中断。例如用手机写新短信的时候,收到短信或电话,完成后回来仍能够

找到刚才正写的新短信。

5) 使用用户的语言,而非技术的语言。

6) 提供快速反馈。给用户心理上的暗示,避免用户焦急。

7) 方便退出。如手机的退出,是按一个键完全退出,还是一层一层的退出。提供两种可能性。

8)导航功能。随时转移功能,很容易从一个功能跳到另外一个功能。

9)让用户知道自己当前的位置,使其做出下一步行动的决定。

· 视觉设计 Visual Design

在结构设计的基础上,参照目标群体的心理模型和任务达成进行视觉设计。包括色彩、字体、页面等。视觉设计要达到用户愉悦使用的目的。视觉设计的原则如下:

1)界面清晰明了。允许用户定制界面。

2)减少短期记忆的负担。让计算机帮助记忆,例:User Name,、Password、IE进入界面地址可以让机器记住。

3)依赖认知而非记忆。如打印图标的记忆、下拉菜单列表中的选择

4)提供视觉线索。图形符号的视觉的刺激;GUI(图形界面设计):Where, What, Next Step

5)提供默认(default)、撤销(undo)、恢复(redo)的功能

6)提供界面的快捷方式

7)尽量使用真实世界的比喻。如:电话、打印机的图标设计,尊重用户以往的使用经验。

8)完善视觉的清晰度。条理清晰;图片、文字的布局和隐喻不要让用户去猜。

9)界面的协调一致。如手机界面按钮排放,左键肯定;右键否定;或按内容摆放。

10)同样功能用同样的图形。

11)色彩与内容。整体软件不超过5个色系,尽量少用红色、绿色。近似的颜色表示近似的意思。

用户界面规范

良好的用户界面一般都符合下列的用户界面规范:

1. 易用性原则

按钮名称应该易懂,用词准确,没有摸棱两可的字眼,要与同一界面上的其他按钮易于区分,如能望文知意最好。理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。

易用性细则:

完成相同或相近功能的按钮用Frame 框起来,常用按钮要支持快捷方式。

完成同一功能或任务的元素放在集中位置,减少鼠标移动的距离。

按功能将界面划分局域块,用Frame 框起来,并要有功能说明或标题。

界面要支持键盘自动浏览按钮功能,即按Tab 键的自动切换功能。

界面上首先应输入的信息和重要信息的控件在Tab 顺序中应当靠前,位置也应放在窗

口上较醒目的位置。

同一界面上的控件数最好不要超过10 个,多于10 个时可以考虑使用分页界面显示。 分页界面要支持在页面间的快捷切换,常用组合快捷键Ctrl+Tab

默认按钮要支持Enter 操作,即按Enter 后自动执行默认按钮对应操作。

可输入控件检测到非法输入后应给出说明信息并能自动获得焦点。

Tab 键的顺序与控件排列顺序要一直,目前流行总体从上到下,同时行间从左到右的方式。

复选框和选项框按选择几率的高底而先后排列。

复选框和选项框要有默认选项,并支持Tab 选择。

选项数相同时多用选项框而不用下拉列表框。

界面空间较小时使用下拉框而不用选项框。

选项数较少时使用选项框,相反使用下拉列表框。

专业性强的软件要使用相关的专业术语,通用性界面则提倡使用通用性词眼。

对于界面输入重复性高的情况,该界面应全面支持键盘操作,即在不使用鼠标的情况下采用键盘进行操作。

2. 规范性原则

通常界面设计都按Windows 界面的规范来设计,即包含“菜单条、工具栏、工具箱厢、状态栏、滚动条、右键快捷菜单”的标准格式,可以说:界面遵循规范化的程度越高,则易用性相应的就越好。小型软件一般不提供工具箱。

规范性细则:

常用菜单要有命令快捷方式。

完成相同或相近功能的菜单用横线隔开放在同一位置。

菜单前的图标能直观的代表要完成的操作。

菜单深度一般要求最多控制在三层以内。

工具栏要求可以根据用户的要求自己选择定制。

相同或相近功能的工具栏放在一起。

工具栏中的每一个按钮要有及时提示信息。

一条工具栏的长度最长不能超出屏幕宽度。

工具栏的图标能直观的代表要完成的操作。

系统常用的工具栏设置默认放置位置。

工具栏太多时可以考虑使用工具箱。

工具箱要具有可增减性,由用户自己根据需求定制。

工具箱的默认总宽度不要超过屏幕宽度的1/5。

状态条要能显示用户切实需要的信息,常用的有:目前的操作、系统状态、用户位置、用户信息、提示信息、错误信息、使用单位信息及软件开发商信息等,如果某一操作需要的时间较长,还应该显示进度条和进程提示。

滚动条的长度要根据显示信息的长度或宽度能及时变换,以利于用户了解显示信息的位置和百分比。

状态条的高度以放置五号字为宜,滚动条的宽度比状态条的略窄。

菜单和工具条要有清楚的界限;菜单要求凸出显示,这样在移走工具条时仍有立体感。 菜单和状态条中通常使用5 号字体。工具条一般比菜单要宽,但不要宽的太多,否则看起来很不协调。

右键快捷菜单采用与菜单相同的准则。

3. 帮助设施原则

系统应该提供详尽而可靠的帮助文档,在用户使用产生迷惑时可以自己寻求解决方法。 帮助设施细则:

帮助文档中的性能介绍与说明要与系统性能配套一致。

打包新系统时,对作了修改的地方在帮助文档中要做相应的修改,做到版本统一。 操作时要提供及时调用系统帮助的功能。常用F1。

在界面上调用帮助时应该能够及时定位到与该操作相对的帮助位置。也就是说帮助要有即时针对性。

最好提供目前流行的联机帮助格式或HTML 帮助格式。

用户可以用关键词在帮助索引中搜索所要的帮助,当然也应该提供帮助主题词。 如果没有提供书面的帮助文档的话,最好有打印帮助的功能。

在帮助中应该提供我们的技术支持方式,一旦用户难以自己解决可以方便的寻求新的帮助方式.

4. 合理性原则

屏幕对角线相交的位置是用户直视的地方,正上方四分之一处为易吸引用户注意力的位置,在放置窗体时要注意利用这两个位置。

合理性细则:

父窗体或主窗体的中心位置应该在对角线焦点附近。

子窗体位置应该在主窗体的左上角或正中。

多个子窗体弹出时应该依次向右下方偏移,以显示窗体出标题为宜。

重要的命令按钮与使用较频繁的按钮要放在界面上注目的位置。

错误使用容易引起界面退出或关闭的按钮不应该放在易点位置。横排开头或最后与竖排最后为易点位置。

与正在进行的操作无关的按钮应该加以屏蔽。

对可能造成数据无法恢复的操作必须提供确认信息,给用户放弃选择的机会。 非法的输入或操作应有足够的提示说明。

对运行过程中出现问题而引起错误的地方要有提示,让用户明白错误出处,避免形成无限期的等待。

提示、警告、或错误说明应该清楚、明了、恰当并且应避免英文提示的出现。

5. 美观与协调性原则

界面应该大小适合美学观点,感觉协调舒适,能在有效的范围内吸引用户的注意力。 美观与协调性细则: 长宽接近黄金点比例,切忌长宽比例失调、或宽度超过长度。 布局要合理,不宜过于密集,也不能过于空旷,合理的利用空间。 按钮大小基本相近,忌用太长的名称,免得占用过多的界面位置。

按钮的大小要与界面的大小和空间要协调。

避免空旷的界面上放置很大的按钮。

放置完控件后界面不应有很大的空缺位置。

字体的大小要与界面的大小比例协调,通常使用的字体中宋体9-12 较为美观,很少使用超过12号的字体。

前景与背景色搭配合理协调,反差不宜太大,最好少用深色,如大红、大绿等。常用色考虑使用Windows 界面色调。

如果使用其他颜色,主色要柔和,具有亲和力与磁力,坚决杜绝刺目的颜色。 大型系统常用的主色有"#E1E1E1"、"#EFEFEF"、"#C0C0C0"等。

界面风格要保持一致,字的大小、颜色、字体要相同,除非是需要艺术处理或有特殊要求的地方。

如果窗体支持最小化和最大化或放大时,窗体上的控件也要随着窗体而缩放;切忌只放大窗体而忽略控件的缩放。

对于含有按钮的界面一般不应该支持缩放,即右上角只有关闭功能。

通常父窗体支持缩放时,子窗体没有必要缩放。

如果能给用户提供自定义界面风格则更好,由用户自己选择颜色、字体等。

6. 菜单位置原则

菜单是界面上最重要的元素,菜单位置按照按功能来组织。

菜单设置细则:

菜单通常采用“常用--主要--次要--工具--帮助”的位置排列,符合流行的Windows 风格。 常用的有“文件”、“编辑”,“查看”等,几乎每个系统都有这些选项,当然要根据不同的系统有所取舍。

下拉菜单要根据菜单选项的含义进行分组,并切按照一定的规则进行排列,用横线隔开。 一组菜单的使用有先后要求或有向导作用时,应该按先后次序排列。

没有顺序要求的菜单项按使用频率和重要性排列,常用的放在开头,不常用的靠后放置;重要的放在开头,次要的放在后边。

如果菜单选项较多,应该采用加长菜单的长度而减少深度的原则排列。

菜单深度一般要求最多控制在三层以内。

对常用的菜单要有快捷命令方式,组合原则见8。

对与进行的操作无关的菜单要用屏蔽的方式加以处理,如果采用动态加载方式—即只有需要的菜单才显示—最好。

菜单前的图标不宜太大,与字高保持一直最好。

主菜单的宽度要接近,字数不应多于四个,每个菜单的字数能相同最好。

主菜单数目不应太多,最好为单排布置。

7. 独特性原则

如果一味的遵循业界的界面标准,则会丧失自己的个性。在框架符合以上规范的情况下,设计具有自己独特风格的界面尤为重要。尤其在商业软件流通中有着很好的迁移默化的广告效用。

独特性细则:

安装界面上应有单位介绍或产品介绍,并有自己的图标或徽标。

主界面,最好是大多数界面上要有公司图标或徽标。

登录界面上要有本产品的标志,同时包含公司图标或徽标。

帮助菜单的“关于”中应有版权和产品信息。

公司的系列产品要保持一直的界面风格,如背景色、字体、菜单排列方式、图标、安装过程、按钮用语等应该大体一致。

应为产品制作特有的图标并区别于公司图标或徽标

8. 快捷方式的组合原则

在菜单及按钮中使用快捷键可以让喜欢使用键盘的用户操作得更快一些在西文Windows 及其应用软件中快捷键的使用大多是一致的。

菜单中:

面向事务的组合有:Ctrl-D 删除;Ctrl-F 寻找;Ctrl –H 替换;Ctrl-I 插入;Ctrl-N 新记录;Ctrl-S 保存 Ctrl-O 打开。

列表:Ctrl-R ,Ctrl-G 定位;Ctrl-Tab 下一分页窗口或反序浏览同一页面控件;。

编辑:Ctrl-A 全选;Ctrl-C 拷贝;Ctrl-V 粘贴;Ctrl-X 剪切;Ctrl-Z 撤消操作;Ctrl-Y 恢复操作。

文件操作:Ctrl-P 打印;Ctrl-W 关闭。

系统菜单:Alt-A 文件;Alt-E 编辑;Alt-T 工具;Alt-W 窗口;Alt-H 帮助。

MS Windows 保留键:Ctrl-Esc 任务列表;Ctrl-F4 关闭窗口; Alt-F4 结束应用;Alt-Tab 下一应用;Enter 缺省按钮/确认操作;Esc取消按钮/取消操作;Shift-F1 上下文相关帮助。 按钮中:

可以根据系统需要而调节,以下只是常用的组合。

Alt-Y 确定(是);Alt-C 取消;Alt-N 否;Alt-D 删除;Alt-Q 退出;Alt-A 添加;Alt-E 编辑;Alt-B 浏览;Alt-R 读;Alt-W 写。这些快捷键也可以作为开发中文应用软件的标准,但亦可使用汉语拼音的开头字母。

9. 排错性考虑原则

在界面上通过下列方式来控制出错几率,会大大减少系统因用户人为的错误引起的破坏。开发者应当尽量周全地考虑到各种可能发生的问题,使出错的可能降至最小。如应用出现保护性错误而退出系统,这种错误最容易使用户对软件失去信心。因为这意味着用户要中断思路,并费时费力地重新登录,而且已进行的操作也会因没有存盘而全部丢失。

排错性细则:

最重要的是排除可能会使应用非正常中止的错误。

应当注意尽可能避免用户无意录入无效的数据。

采用相关控件限制用户输入值的种类。

当用户做出选择的可能性只有两个时,可以采用单选框。

当选择的可能再多一些时,可以采用复选框,每一种选择都是有效的,用户不可能输入任何一种无效的选择。

当选项特别多时,可以采用列表框,下拉式列表框。

在一个应用系统中,开发者应当避免用户做出未经授权或没有意义的操作。

对可能引起致命错误或系统出错的输入字符或动作要加限制或屏蔽。

对可能发生严重后果的操作要有补救措施。通过补救措施用户可以回到原来的正确状态。 对一些特殊符号的输入、与系统使用的符号相冲突的字符等进行判断并阻止用户输入该字符。

对错误操作最好支持可逆性处理,如取消系列操作。

在输入有效性字符之前应该阻止用户进行只有输入之后才可进行的操作。

对可能造成等待时间较长的操作应该提供取消功能。

特殊字符常有;;’”>

在读入用户所输入的信息时,根据需要选择是否去掉前后空格。

有些读入数据库的字段不支持中间有空格,但用户切实需要输入中间空格,这时要在程序中加以处理。

10. 多窗口的应用与系统资源原则

设计良好的软件不仅要有完备的功能,而且要尽可能的占用最底限度的资源。

在多窗口系统中,有些界面要求必须保持在最顶层,避免用户在打开多个窗口时,不停的切换甚至最小化其他窗口来显示该窗口。

在主界面载入完毕后自动卸出内存,让出所占用的WINDOWS 系统资源。

关闭所有窗体,系统退出后要释放所占的所有系统资源,除非是需要后台运行的系统。 尽量防止对系统的独占使用。

了解了良好的用户界面的规范,那么我们测试工作该如何下手?该注意那些方面呢?

1. 一致性

如果你可以在一个列表的项目上双击后能够弹出对话框,那么应该在任何列表中双击都能弹出对话框。要有统一的字体字号、统一的色调、统一的提示用词、窗口在统一的位置、按钮也在窗口的相同的位置。

2. 设置标准并遵循它

可以参数一些工业标准,如IBM的界面设计规范或MS的设计规则,它提供了90%你所需要的规范。

3. 设置向导

如果用户使用了一个功能后,不知道如何做下一个,他们就会放弃。如果*作流程和手工工作流程一致,用户就会努力去完成它。最好的方式来引导用户就是在桌面上设置一个流程向导。

4. 提示信息必须恰当且规范

提示信息必须容易理解并且口径统一,比如“您输入了错误的数据”、“用户数据不能超过8位”。一致的措词,提示信息还应该出现在一致的位置,如弹出提示窗口、窗口的上方或窗口的下方。对用户的称呼应该统一,比如有时提示“用户输入了错误的数据”,有时提示“您输入了错误的数据”,有时又提示“使用者输入了错误的数据”,这样会使用户无所适从。

5. 借鉴好的程序

多了解同类软件的界面,并加以分析与了解,直到能够区别好的用户界面与差的用户界面。但不能够简单的模仿别人的界面,而使得自己的软件没有特色

6. 功能的统一

有一些很常用的功能,如添加、修改、删除、查看,同一个软件中,这些功能应该有相同的处理方法。

7. 变灰的功能

有时一些功能不可用,最好不要删除这些按钮若项目,而是使他们变灰为不可用状态,这样有助于用户理解整个程序的功能。

8. 默认按钮

使用不具有破坏功能的默认按钮,在每个窗口中,为了方便用户,一般都定义了一个默认按钮,当用户敲回车键时可以快速执行某功能,但有时用户会不小心按错回车键,这时候执行了默认功能后,不能产生不可还原的操作,比如删除或保存。

按照上面的规范和测试的细则检验过被测试的软件。相信软件界面上能显得更加规范和容易被用户所接受。

用户界面测试用例

指标 检查项 测试人员评价 合适性 和正确性 用户界面是否与软件的功能相融洽? 是否所有界面元素的文字和状态都正确无误? 容易理解 对于常用的功能,用户能否不必阅读手册就能使用? 是否所有界面元素(例如图标)都不会让人误解? 是否所有界面元素提供了充分而必要的提示? 界面结构能够清晰地反映工作流程? 用户是否容易知道自己在界面中的位置,不会迷失方向? 有联机帮助吗? 风格一致 同类的界面元素是否有相同的视感和相同的操作方式? 字体是否一致? 是否符合广大用户使用同类软件的习惯? 及时反馈信息 是否提供进度条、动画等反映正在进行的比较耗时间的过程? 是否为重要的操作返回必要的结果信息? 出错处理 是否对重要的输入数据进行校验? 执行有风险的操作时,有“确认”、“放弃”等提示吗? 是否根据用户的权限自动屏蔽某些功能? 是否提供Undo功能用以撤销不期望的操作? 适应各种水平的用户 所有界面元素都具备充分必要的键盘操作和鼠标操作吗? 初学者和专家都有合适的方式操作这个界面吗? 色盲或者色弱的用户能正常使用该界面吗? 国际化 是否使用国际通行的图标和语言?

度量单位、日期格式、人的名字等是否符合国际惯例? 个性化 是否具有与众不同的、让用户记忆深刻的界面设计? 是否在具备必要的“一致性”的前提下突出“个性化”设计? 合理布局 和谐色彩 界面的布局符合软件的功能逻辑吗? 界面元素是否在水平或者垂直方向对齐? 界面元素的尺寸是否合理?行、列的间距是否保持一致? 是否恰当地利用窗体和控件的空白,以及分割线条? 窗口切换、移动、改变大小时,界面正常吗? 界面的色调是否让人感到和谐、满意? 重要的对象是否用醒目的色彩表示? 色彩使用是否符合行业的习惯?

图书信息

书名: 用户界面设计

作 者:施奈德曼(BenShneiderman)

出版社:电子工业出版社

出版时间: 2010年11月1日

ISBN: [1**********]25

开本: 16开

定价: 69.80元

内容简介

《用户界面设计:有效的人机交互策略(第5版)(英文版)》为了适应因特网和各种移动设备迅猛发展的形势,在第四版的基础上始终以基于Web、桌面和移动设备的设计作为内容主线。新的设计实例涉及电子商务、在线社区、电子政府、图片管理、购物、交通、游戏和移动电话,选材新颖实用,切合目前的应用实际。同时,新版本扩展了社会媒体参与和用户生成内容的介绍,代表了人机交互著作的主流发展趋势。

《用户界面设计:有效的人机交互策略(第5版)(英文版)》面向的读者极为广泛,具有计算机科学、心理学、社会学、工业工程学、信息科学、信息研究、信息系统、商业、教育和通信知识背景的读者,都可以在《用户界面设计:有效的人机交互策略(第5版)(英文版)》中发现新鲜的、有价值的信息。

作者简介

作者:(美国)施奈德曼(Ben Shneiderman)(美国)普莱萨特(Catherine Plaisant) 图书目录

PART 1 INTRODUCTION 1 CHAPTER 1 Usability of Interactive Systems 3 CHAPTER 2 Guidelines, Principles, and Theories 55 PART 2 DEVELOPMENT PROCESSES 95 CHAPTER 3 Managing Design Processes 97 CHAPTER 4 Evaluating Interface Designs 131 PART 3 INTERACTION STYLES 171 CHAPTER 5 Direct Manipulation and Virtual Environments 173 CHAPTER 6 Menu Selection, Form Fill-in, and Dialog Boxes 225 CHAPTER 7 Command and Natural Languages 271 CHAPTER 8 Interaction Devices 303 CHAPTER 9 Collaboration and Social Media Participation 359 PART 4 DESIGN ISSUES 403 CHAPTER 10 Quality of Service 405 CHAPTER 11 Balancing Function and Fashion 433 CHAPTER 12 User Documentation and Online Help 477 CHAPTER 13 Information Search 513 CHAPTER 14 Information Visualization 537 Afterword Societal and Individual Impact of User Interfaces 563

用户界面设计

简介

在人和机器的互动过程(Human Machine Interaction)中,有一个层面,即我们所说的界面(interface)。从心理学意义来分,界面可分为感觉(视觉、触觉、听觉等)和情感两个层次。用户界面设计是屏幕产品的重要组成部分。界面设计是一个复杂的有不同学科参与的工程,认知心理学、设计学、语言学等在此都扮演着重要的角色。用户界面设计的三大原则是:置界面于用户的控制之下;减少用户的记忆负担;保持界面的一致性。

用户界面是人与机之间交流、沟通的层面。从深度上分为两个层次:感觉的和情感的。感觉层次指人和机器之间的视觉、触觉、听觉层面;情感层次指人和机器之间由于沟通所达成的融洽关系。总之用户界面设计是以人为中心,使产品达到简单使用和愉悦使用的设计。 界面设计从流程上分为结构设计、交互设计和视觉设计三部分。

随着产品屏幕操作的不断普及,用户界面已经融入我们的日常生活。一个良好设计的用户界面,可以大大提高工作效率,使用户从中获得乐趣,减少由于界面问题而造成用户的咨询与投诉,减轻客户服务的压力,减少售后服务的成本。因此,用户界面设计对于任何产品/服务都极其重要。

在国外,用户界面设计人员有了一个新的称谓:Information Architecture,信息建筑师。它不仅仅是指美工,而是具有心理学、软件工程学、设计学等综合知识的人 用户界面设计工作流程

用户界面设计在工作流程上分为结构设计、交互设计、视觉设计三个部分。 · 结构设计 Structure Design

结构设计也成概念设计(Conceptual Design),是界面设计的骨架。通过对用户研究和任务分析,制定出产品的整体架构。基于纸质的的低保真原型(Paper Prototype)可提供用户测试并进行完善。在结构设计中,目录体系的逻辑分类和语词定义是用户易于理解和操作的重要前提。如西门子手机的设置闹钟的词条是“重要记事”,让用户很难找到。 · 交互设计 Interactive Design

交互设计的目的是使产品让用户能简单使用。任何产品功能的实现都是通过人和机器的交互来完成的。因此,人的因素应作为设计的核心被体现出来。交互设计的原则如下:

1) 有清楚的错误提示。误操作后,系统提供有针对性的提示。

2) 让用户控制界面。“下一步”、“完成”,面对不同层次提供多种选择,给不同层次的用户提供多种可能性。

3) 允许兼用鼠标和键盘。同一种功能,同时可以用鼠标和键盘。提供多种可能性。

4) 允许工作中断。例如用手机写新短信的时候,收到短信或电话,完成后回来仍能够

找到刚才正写的新短信。

5) 使用用户的语言,而非技术的语言。

6) 提供快速反馈。给用户心理上的暗示,避免用户焦急。

7) 方便退出。如手机的退出,是按一个键完全退出,还是一层一层的退出。提供两种可能性。

8)导航功能。随时转移功能,很容易从一个功能跳到另外一个功能。

9)让用户知道自己当前的位置,使其做出下一步行动的决定。

· 视觉设计 Visual Design

在结构设计的基础上,参照目标群体的心理模型和任务达成进行视觉设计。包括色彩、字体、页面等。视觉设计要达到用户愉悦使用的目的。视觉设计的原则如下:

1)界面清晰明了。允许用户定制界面。

2)减少短期记忆的负担。让计算机帮助记忆,例:User Name,、Password、IE进入界面地址可以让机器记住。

3)依赖认知而非记忆。如打印图标的记忆、下拉菜单列表中的选择

4)提供视觉线索。图形符号的视觉的刺激;GUI(图形界面设计):Where, What, Next Step

5)提供默认(default)、撤销(undo)、恢复(redo)的功能

6)提供界面的快捷方式

7)尽量使用真实世界的比喻。如:电话、打印机的图标设计,尊重用户以往的使用经验。

8)完善视觉的清晰度。条理清晰;图片、文字的布局和隐喻不要让用户去猜。

9)界面的协调一致。如手机界面按钮排放,左键肯定;右键否定;或按内容摆放。

10)同样功能用同样的图形。

11)色彩与内容。整体软件不超过5个色系,尽量少用红色、绿色。近似的颜色表示近似的意思。

用户界面规范

良好的用户界面一般都符合下列的用户界面规范:

1. 易用性原则

按钮名称应该易懂,用词准确,没有摸棱两可的字眼,要与同一界面上的其他按钮易于区分,如能望文知意最好。理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。

易用性细则:

完成相同或相近功能的按钮用Frame 框起来,常用按钮要支持快捷方式。

完成同一功能或任务的元素放在集中位置,减少鼠标移动的距离。

按功能将界面划分局域块,用Frame 框起来,并要有功能说明或标题。

界面要支持键盘自动浏览按钮功能,即按Tab 键的自动切换功能。

界面上首先应输入的信息和重要信息的控件在Tab 顺序中应当靠前,位置也应放在窗

口上较醒目的位置。

同一界面上的控件数最好不要超过10 个,多于10 个时可以考虑使用分页界面显示。 分页界面要支持在页面间的快捷切换,常用组合快捷键Ctrl+Tab

默认按钮要支持Enter 操作,即按Enter 后自动执行默认按钮对应操作。

可输入控件检测到非法输入后应给出说明信息并能自动获得焦点。

Tab 键的顺序与控件排列顺序要一直,目前流行总体从上到下,同时行间从左到右的方式。

复选框和选项框按选择几率的高底而先后排列。

复选框和选项框要有默认选项,并支持Tab 选择。

选项数相同时多用选项框而不用下拉列表框。

界面空间较小时使用下拉框而不用选项框。

选项数较少时使用选项框,相反使用下拉列表框。

专业性强的软件要使用相关的专业术语,通用性界面则提倡使用通用性词眼。

对于界面输入重复性高的情况,该界面应全面支持键盘操作,即在不使用鼠标的情况下采用键盘进行操作。

2. 规范性原则

通常界面设计都按Windows 界面的规范来设计,即包含“菜单条、工具栏、工具箱厢、状态栏、滚动条、右键快捷菜单”的标准格式,可以说:界面遵循规范化的程度越高,则易用性相应的就越好。小型软件一般不提供工具箱。

规范性细则:

常用菜单要有命令快捷方式。

完成相同或相近功能的菜单用横线隔开放在同一位置。

菜单前的图标能直观的代表要完成的操作。

菜单深度一般要求最多控制在三层以内。

工具栏要求可以根据用户的要求自己选择定制。

相同或相近功能的工具栏放在一起。

工具栏中的每一个按钮要有及时提示信息。

一条工具栏的长度最长不能超出屏幕宽度。

工具栏的图标能直观的代表要完成的操作。

系统常用的工具栏设置默认放置位置。

工具栏太多时可以考虑使用工具箱。

工具箱要具有可增减性,由用户自己根据需求定制。

工具箱的默认总宽度不要超过屏幕宽度的1/5。

状态条要能显示用户切实需要的信息,常用的有:目前的操作、系统状态、用户位置、用户信息、提示信息、错误信息、使用单位信息及软件开发商信息等,如果某一操作需要的时间较长,还应该显示进度条和进程提示。

滚动条的长度要根据显示信息的长度或宽度能及时变换,以利于用户了解显示信息的位置和百分比。

状态条的高度以放置五号字为宜,滚动条的宽度比状态条的略窄。

菜单和工具条要有清楚的界限;菜单要求凸出显示,这样在移走工具条时仍有立体感。 菜单和状态条中通常使用5 号字体。工具条一般比菜单要宽,但不要宽的太多,否则看起来很不协调。

右键快捷菜单采用与菜单相同的准则。

3. 帮助设施原则

系统应该提供详尽而可靠的帮助文档,在用户使用产生迷惑时可以自己寻求解决方法。 帮助设施细则:

帮助文档中的性能介绍与说明要与系统性能配套一致。

打包新系统时,对作了修改的地方在帮助文档中要做相应的修改,做到版本统一。 操作时要提供及时调用系统帮助的功能。常用F1。

在界面上调用帮助时应该能够及时定位到与该操作相对的帮助位置。也就是说帮助要有即时针对性。

最好提供目前流行的联机帮助格式或HTML 帮助格式。

用户可以用关键词在帮助索引中搜索所要的帮助,当然也应该提供帮助主题词。 如果没有提供书面的帮助文档的话,最好有打印帮助的功能。

在帮助中应该提供我们的技术支持方式,一旦用户难以自己解决可以方便的寻求新的帮助方式.

4. 合理性原则

屏幕对角线相交的位置是用户直视的地方,正上方四分之一处为易吸引用户注意力的位置,在放置窗体时要注意利用这两个位置。

合理性细则:

父窗体或主窗体的中心位置应该在对角线焦点附近。

子窗体位置应该在主窗体的左上角或正中。

多个子窗体弹出时应该依次向右下方偏移,以显示窗体出标题为宜。

重要的命令按钮与使用较频繁的按钮要放在界面上注目的位置。

错误使用容易引起界面退出或关闭的按钮不应该放在易点位置。横排开头或最后与竖排最后为易点位置。

与正在进行的操作无关的按钮应该加以屏蔽。

对可能造成数据无法恢复的操作必须提供确认信息,给用户放弃选择的机会。 非法的输入或操作应有足够的提示说明。

对运行过程中出现问题而引起错误的地方要有提示,让用户明白错误出处,避免形成无限期的等待。

提示、警告、或错误说明应该清楚、明了、恰当并且应避免英文提示的出现。

5. 美观与协调性原则

界面应该大小适合美学观点,感觉协调舒适,能在有效的范围内吸引用户的注意力。 美观与协调性细则: 长宽接近黄金点比例,切忌长宽比例失调、或宽度超过长度。 布局要合理,不宜过于密集,也不能过于空旷,合理的利用空间。 按钮大小基本相近,忌用太长的名称,免得占用过多的界面位置。

按钮的大小要与界面的大小和空间要协调。

避免空旷的界面上放置很大的按钮。

放置完控件后界面不应有很大的空缺位置。

字体的大小要与界面的大小比例协调,通常使用的字体中宋体9-12 较为美观,很少使用超过12号的字体。

前景与背景色搭配合理协调,反差不宜太大,最好少用深色,如大红、大绿等。常用色考虑使用Windows 界面色调。

如果使用其他颜色,主色要柔和,具有亲和力与磁力,坚决杜绝刺目的颜色。 大型系统常用的主色有"#E1E1E1"、"#EFEFEF"、"#C0C0C0"等。

界面风格要保持一致,字的大小、颜色、字体要相同,除非是需要艺术处理或有特殊要求的地方。

如果窗体支持最小化和最大化或放大时,窗体上的控件也要随着窗体而缩放;切忌只放大窗体而忽略控件的缩放。

对于含有按钮的界面一般不应该支持缩放,即右上角只有关闭功能。

通常父窗体支持缩放时,子窗体没有必要缩放。

如果能给用户提供自定义界面风格则更好,由用户自己选择颜色、字体等。

6. 菜单位置原则

菜单是界面上最重要的元素,菜单位置按照按功能来组织。

菜单设置细则:

菜单通常采用“常用--主要--次要--工具--帮助”的位置排列,符合流行的Windows 风格。 常用的有“文件”、“编辑”,“查看”等,几乎每个系统都有这些选项,当然要根据不同的系统有所取舍。

下拉菜单要根据菜单选项的含义进行分组,并切按照一定的规则进行排列,用横线隔开。 一组菜单的使用有先后要求或有向导作用时,应该按先后次序排列。

没有顺序要求的菜单项按使用频率和重要性排列,常用的放在开头,不常用的靠后放置;重要的放在开头,次要的放在后边。

如果菜单选项较多,应该采用加长菜单的长度而减少深度的原则排列。

菜单深度一般要求最多控制在三层以内。

对常用的菜单要有快捷命令方式,组合原则见8。

对与进行的操作无关的菜单要用屏蔽的方式加以处理,如果采用动态加载方式—即只有需要的菜单才显示—最好。

菜单前的图标不宜太大,与字高保持一直最好。

主菜单的宽度要接近,字数不应多于四个,每个菜单的字数能相同最好。

主菜单数目不应太多,最好为单排布置。

7. 独特性原则

如果一味的遵循业界的界面标准,则会丧失自己的个性。在框架符合以上规范的情况下,设计具有自己独特风格的界面尤为重要。尤其在商业软件流通中有着很好的迁移默化的广告效用。

独特性细则:

安装界面上应有单位介绍或产品介绍,并有自己的图标或徽标。

主界面,最好是大多数界面上要有公司图标或徽标。

登录界面上要有本产品的标志,同时包含公司图标或徽标。

帮助菜单的“关于”中应有版权和产品信息。

公司的系列产品要保持一直的界面风格,如背景色、字体、菜单排列方式、图标、安装过程、按钮用语等应该大体一致。

应为产品制作特有的图标并区别于公司图标或徽标

8. 快捷方式的组合原则

在菜单及按钮中使用快捷键可以让喜欢使用键盘的用户操作得更快一些在西文Windows 及其应用软件中快捷键的使用大多是一致的。

菜单中:

面向事务的组合有:Ctrl-D 删除;Ctrl-F 寻找;Ctrl –H 替换;Ctrl-I 插入;Ctrl-N 新记录;Ctrl-S 保存 Ctrl-O 打开。

列表:Ctrl-R ,Ctrl-G 定位;Ctrl-Tab 下一分页窗口或反序浏览同一页面控件;。

编辑:Ctrl-A 全选;Ctrl-C 拷贝;Ctrl-V 粘贴;Ctrl-X 剪切;Ctrl-Z 撤消操作;Ctrl-Y 恢复操作。

文件操作:Ctrl-P 打印;Ctrl-W 关闭。

系统菜单:Alt-A 文件;Alt-E 编辑;Alt-T 工具;Alt-W 窗口;Alt-H 帮助。

MS Windows 保留键:Ctrl-Esc 任务列表;Ctrl-F4 关闭窗口; Alt-F4 结束应用;Alt-Tab 下一应用;Enter 缺省按钮/确认操作;Esc取消按钮/取消操作;Shift-F1 上下文相关帮助。 按钮中:

可以根据系统需要而调节,以下只是常用的组合。

Alt-Y 确定(是);Alt-C 取消;Alt-N 否;Alt-D 删除;Alt-Q 退出;Alt-A 添加;Alt-E 编辑;Alt-B 浏览;Alt-R 读;Alt-W 写。这些快捷键也可以作为开发中文应用软件的标准,但亦可使用汉语拼音的开头字母。

9. 排错性考虑原则

在界面上通过下列方式来控制出错几率,会大大减少系统因用户人为的错误引起的破坏。开发者应当尽量周全地考虑到各种可能发生的问题,使出错的可能降至最小。如应用出现保护性错误而退出系统,这种错误最容易使用户对软件失去信心。因为这意味着用户要中断思路,并费时费力地重新登录,而且已进行的操作也会因没有存盘而全部丢失。

排错性细则:

最重要的是排除可能会使应用非正常中止的错误。

应当注意尽可能避免用户无意录入无效的数据。

采用相关控件限制用户输入值的种类。

当用户做出选择的可能性只有两个时,可以采用单选框。

当选择的可能再多一些时,可以采用复选框,每一种选择都是有效的,用户不可能输入任何一种无效的选择。

当选项特别多时,可以采用列表框,下拉式列表框。

在一个应用系统中,开发者应当避免用户做出未经授权或没有意义的操作。

对可能引起致命错误或系统出错的输入字符或动作要加限制或屏蔽。

对可能发生严重后果的操作要有补救措施。通过补救措施用户可以回到原来的正确状态。 对一些特殊符号的输入、与系统使用的符号相冲突的字符等进行判断并阻止用户输入该字符。

对错误操作最好支持可逆性处理,如取消系列操作。

在输入有效性字符之前应该阻止用户进行只有输入之后才可进行的操作。

对可能造成等待时间较长的操作应该提供取消功能。

特殊字符常有;;’”>

在读入用户所输入的信息时,根据需要选择是否去掉前后空格。

有些读入数据库的字段不支持中间有空格,但用户切实需要输入中间空格,这时要在程序中加以处理。

10. 多窗口的应用与系统资源原则

设计良好的软件不仅要有完备的功能,而且要尽可能的占用最底限度的资源。

在多窗口系统中,有些界面要求必须保持在最顶层,避免用户在打开多个窗口时,不停的切换甚至最小化其他窗口来显示该窗口。

在主界面载入完毕后自动卸出内存,让出所占用的WINDOWS 系统资源。

关闭所有窗体,系统退出后要释放所占的所有系统资源,除非是需要后台运行的系统。 尽量防止对系统的独占使用。

了解了良好的用户界面的规范,那么我们测试工作该如何下手?该注意那些方面呢?

1. 一致性

如果你可以在一个列表的项目上双击后能够弹出对话框,那么应该在任何列表中双击都能弹出对话框。要有统一的字体字号、统一的色调、统一的提示用词、窗口在统一的位置、按钮也在窗口的相同的位置。

2. 设置标准并遵循它

可以参数一些工业标准,如IBM的界面设计规范或MS的设计规则,它提供了90%你所需要的规范。

3. 设置向导

如果用户使用了一个功能后,不知道如何做下一个,他们就会放弃。如果*作流程和手工工作流程一致,用户就会努力去完成它。最好的方式来引导用户就是在桌面上设置一个流程向导。

4. 提示信息必须恰当且规范

提示信息必须容易理解并且口径统一,比如“您输入了错误的数据”、“用户数据不能超过8位”。一致的措词,提示信息还应该出现在一致的位置,如弹出提示窗口、窗口的上方或窗口的下方。对用户的称呼应该统一,比如有时提示“用户输入了错误的数据”,有时提示“您输入了错误的数据”,有时又提示“使用者输入了错误的数据”,这样会使用户无所适从。

5. 借鉴好的程序

多了解同类软件的界面,并加以分析与了解,直到能够区别好的用户界面与差的用户界面。但不能够简单的模仿别人的界面,而使得自己的软件没有特色

6. 功能的统一

有一些很常用的功能,如添加、修改、删除、查看,同一个软件中,这些功能应该有相同的处理方法。

7. 变灰的功能

有时一些功能不可用,最好不要删除这些按钮若项目,而是使他们变灰为不可用状态,这样有助于用户理解整个程序的功能。

8. 默认按钮

使用不具有破坏功能的默认按钮,在每个窗口中,为了方便用户,一般都定义了一个默认按钮,当用户敲回车键时可以快速执行某功能,但有时用户会不小心按错回车键,这时候执行了默认功能后,不能产生不可还原的操作,比如删除或保存。

按照上面的规范和测试的细则检验过被测试的软件。相信软件界面上能显得更加规范和容易被用户所接受。

用户界面测试用例

指标 检查项 测试人员评价 合适性 和正确性 用户界面是否与软件的功能相融洽? 是否所有界面元素的文字和状态都正确无误? 容易理解 对于常用的功能,用户能否不必阅读手册就能使用? 是否所有界面元素(例如图标)都不会让人误解? 是否所有界面元素提供了充分而必要的提示? 界面结构能够清晰地反映工作流程? 用户是否容易知道自己在界面中的位置,不会迷失方向? 有联机帮助吗? 风格一致 同类的界面元素是否有相同的视感和相同的操作方式? 字体是否一致? 是否符合广大用户使用同类软件的习惯? 及时反馈信息 是否提供进度条、动画等反映正在进行的比较耗时间的过程? 是否为重要的操作返回必要的结果信息? 出错处理 是否对重要的输入数据进行校验? 执行有风险的操作时,有“确认”、“放弃”等提示吗? 是否根据用户的权限自动屏蔽某些功能? 是否提供Undo功能用以撤销不期望的操作? 适应各种水平的用户 所有界面元素都具备充分必要的键盘操作和鼠标操作吗? 初学者和专家都有合适的方式操作这个界面吗? 色盲或者色弱的用户能正常使用该界面吗? 国际化 是否使用国际通行的图标和语言?

度量单位、日期格式、人的名字等是否符合国际惯例? 个性化 是否具有与众不同的、让用户记忆深刻的界面设计? 是否在具备必要的“一致性”的前提下突出“个性化”设计? 合理布局 和谐色彩 界面的布局符合软件的功能逻辑吗? 界面元素是否在水平或者垂直方向对齐? 界面元素的尺寸是否合理?行、列的间距是否保持一致? 是否恰当地利用窗体和控件的空白,以及分割线条? 窗口切换、移动、改变大小时,界面正常吗? 界面的色调是否让人感到和谐、满意? 重要的对象是否用醒目的色彩表示? 色彩使用是否符合行业的习惯?

图书信息

书名: 用户界面设计

作 者:施奈德曼(BenShneiderman)

出版社:电子工业出版社

出版时间: 2010年11月1日

ISBN: [1**********]25

开本: 16开

定价: 69.80元

内容简介

《用户界面设计:有效的人机交互策略(第5版)(英文版)》为了适应因特网和各种移动设备迅猛发展的形势,在第四版的基础上始终以基于Web、桌面和移动设备的设计作为内容主线。新的设计实例涉及电子商务、在线社区、电子政府、图片管理、购物、交通、游戏和移动电话,选材新颖实用,切合目前的应用实际。同时,新版本扩展了社会媒体参与和用户生成内容的介绍,代表了人机交互著作的主流发展趋势。

《用户界面设计:有效的人机交互策略(第5版)(英文版)》面向的读者极为广泛,具有计算机科学、心理学、社会学、工业工程学、信息科学、信息研究、信息系统、商业、教育和通信知识背景的读者,都可以在《用户界面设计:有效的人机交互策略(第5版)(英文版)》中发现新鲜的、有价值的信息。

作者简介

作者:(美国)施奈德曼(Ben Shneiderman)(美国)普莱萨特(Catherine Plaisant) 图书目录

PART 1 INTRODUCTION 1 CHAPTER 1 Usability of Interactive Systems 3 CHAPTER 2 Guidelines, Principles, and Theories 55 PART 2 DEVELOPMENT PROCESSES 95 CHAPTER 3 Managing Design Processes 97 CHAPTER 4 Evaluating Interface Designs 131 PART 3 INTERACTION STYLES 171 CHAPTER 5 Direct Manipulation and Virtual Environments 173 CHAPTER 6 Menu Selection, Form Fill-in, and Dialog Boxes 225 CHAPTER 7 Command and Natural Languages 271 CHAPTER 8 Interaction Devices 303 CHAPTER 9 Collaboration and Social Media Participation 359 PART 4 DESIGN ISSUES 403 CHAPTER 10 Quality of Service 405 CHAPTER 11 Balancing Function and Fashion 433 CHAPTER 12 User Documentation and Online Help 477 CHAPTER 13 Information Search 513 CHAPTER 14 Information Visualization 537 Afterword Societal and Individual Impact of User Interfaces 563


相关文章

  • 浅谈人机界面设计
  • 浅谈人机界面设计 摘要:近年来,随着计算机硬件的快速发展,新一代的计算机用户,在应用软件的可操作性以及软件操作的舒适性等方面对应用软件提出了更高的要求,除期望所用的软件拥有强大的功能外,更期望应用软件能尽可能的为他们提供一个轻松.愉快.感觉 ...查看


  • 触摸屏友好界面设计对策分析
  • 2013年度 申报助理工程师任职资格评审答辩论文 题 目 触摸屏友好界面设计的对策分析和实用原则 作者姓名 工作单位 工作部门 目 录 摘要 ................................................. ...查看


  • 人机界面设计
  • 自动化制造系统的人机界面设计 摘要:近年来,人机界面的设计理论已经更广泛地发展和应用到人一机一环境系统工程等领域,使工程技术设计与使用者的身心行为特点相适应,从而使人能够高效.舒适地工作与生活.为了使制造系统达到效率最大化.经济最优化,我们 ...查看


  • Mobileapp视觉传达的魅力
  • 时下移动开放平台众多,苹果.谷歌.微软.诺基亚都有自己的移动开发平台,想让自己的产品在众多的开放平台中留住用户,只靠品牌是不够的,产品用户体验比品牌更重要.我们可以充分的利用移动设备的特性,运用视觉传达的表现方式,去创造具有优秀的用户体验的 ...查看


  • 用户界面的需求分析与设计原则
  • 第30卷 第4期2004年11月 大连海事大学学报Journal of Dalian Maritime University Vol. 30, N o. 4N ov. , 2004 文章编号:1006-7736(2004) 04-0086- ...查看


  • 图形用户界面的外观设计专利保护
  • 图形用户界面的外观设计专利保护 刘利宾 路浩知识产权联盟 1.GUI概念及申请概况 图形用户界面(Graphic User Interface, 简称GUI)一般是指产品显示装置上以图形方式显示的界面,于2014年5月1日正式在中国获得保护 ...查看


  • 以用户体验为中心的产品概念设计
  • 以用户为中心的设计开发与整合 本章"设计开发与整合"主要讲述用户界面设计以及软硬件产品的整合设计. 7.1 用户界面设计 7.1.1 用户界面的定义 用户界面(User Interface)也称人机界面(Human-Ma ...查看


  • 触景生情_以用户为中心的情感化信息设计
  • "触景生情" --以用户为中心的情感化信息设计 刘 派(清华大学 美术学院,北京 100084) [摘 要]信息时代孕育了信息设计的产生,信息设计以其独特的魅力成为21世纪最具亮点的设计学科.本文着重探讨的是以用户为中心 ...查看


  • 用户登陆界面程序vb设计说明书
  • 工程学院 课程设计说明书 课 程 名 称: 计算机应用基础课程设计 课 程 代 码: 题 目: 用户登录界面程序设计 年级/专业/班: 学 生 姓 名: 学 号: 开 始 时 间: 2011 年 4 月 25 日 完 成 时 间: 2011 ...查看


热门内容