用户界面设计规范

用户界面设计规范

16、使用控件，虽然控件可以设置成只读，并用来显示文本，但Label控件通常更适用于该目的。在为控件设置属性时要保持一致性，如果在一个地方可编辑的文本使用白色背景，除非有很好的理由，否则不要在别的地方又使用灰色。 在应用程序中不同的窗体之间保持一致性对其可用性有非常重要的作用。如果在一个窗体上使用了灰色背景以及三维效果，而在另一个窗体上使用白色背景及二维效果，则这两个窗体就显得毫不相干。5、空白空间有的用户界面中使用空白空间有助于突出元素和改善可 用性。一个窗体上有太多的控件会导致界面杂乱无章，使得寻找一个字段或者控件非常困难，在设计中需要插入空白空间来突出设计元素。 各控件之间一致的

17、间隔以及垂直与水平方向元素的对齐可以使设计更可用。就像杂志中的文本那样，安排得行列整齐、行距一致，整齐的界面也会使其容易阅读。 提供了几个工具，使得控件的间距、排列和尺寸的调整非常容易。“排列”、“按相同大小制作”、“水平间距”、“垂直间距”和“在窗体中央”等命令都可以在“格式”菜单中找到。 6、颜色在界面上使用颜色可以增加视觉上的感染力，少量明亮色彩也可以有效地引起人们对重要区域的注意。但是，应当尽量限制应用程序所用颜色的种类，而且色调也应该保持一致。如果可能的话，最好坚持标准的16色调色板。 7、图像和图标 图片与图标的使用也可以增加应用程序在视觉上的趣味，但是，细心

18、的设计也是必不可少的，如果用户不能很容易地识别图标所表示的功能，就会很糟糕。在设计工具栏图标时，应查一下其他的应用程序以了解已经创建了什么样的标准。例如，许多应用程序用一张角上有卷 边的纸来表示“新建文件”图标。也许还有更好的比喻来表示这一功能。但改用其他的表示方法会引起用户的混淆。 8、字体 字体也是用户界面的重要部分，因为它们常常给用户传递重要的信息。需要选取在不同的分辨率和不同类型的显示器上都能容易阅读的字体。应当尽量使用标准字体，如Arial、或者。如果使用了非标准的字体 ，那么当用户的系统中没有包含指定的字体时，系统会使用替代的字体

19、，其结果可能与设想的完全不一样。 还有，在选取字体时，设计的一致性非常重要。大多数情况下，不应当在应用程序中使用两种以上的字体。9、错误处理用户在使用程序的时候总会出现这样那样的问题。程序设计人员在设计用户界面时，应尽量全面地考虑可能出现的错误，并判断哪一个需要用户交互作用 ，哪一个可以按事先安排的方案解决。 1、创建容易理解的对话框偶尔应用程序中会出现错误，需要为解决这种情况做出判断。这通常作为代码的分支出现If.Then语句或者Case语句。如果这个判断要与用户交互，此问题通常用对话框来提交给用户。 相信任何程序员都会使用对话框与用户交互，关键问题是要采取用户容易理解的语言。比如这样的消息

20、、“硬盘C的扇区被损坏或不能访问。中止、重试、忽略？”，这对一般的用户而言不大好理解。更好的表达可以是“在C盘上存文件有问题，请把文件存于A盘。存 不存文件？” 当为应用程序创建对话框时软件界面设计规范，应想着用户。这个消息给用户传达了有用的信息吗？它容易理解吗？命令按钮表示的选择明确吗？这个选择适合给定的条件吗？ 2、不用对放大框的错误处理 当错误出现时不一定要打断用户。有时更可取的是不通知用户而用代码来处理错误，或者以不停止用户工作流程的方法来提醒用户。很好的例子是中的“自动更正”功能、如果普通单词拼错了，Word自动修改它；如果不常用单词拼错了 ，在其下划一条红线提醒用户以后改

21、正。10、有大量的技巧可以采用（1）、在“编辑”菜单中添加“撤消”功能。对于删除等情况，与其用“确定”对话框来打断用户，还不如确保他们做出正确的决定，并提供“撤消”功能以备他们以后改变主意。 （2）、在状态栏或图标上显示消息。如果错误不影响用户当前的任务，不要停止应用程序。使用状态栏或亮色警告图标来警告用户当他们准备好后可以处理该问题。 （3）、直接改正问题。有时错误的解决办法很显然，例如，当用户试图存文件时磁盘已满，则在其他驱动器中检查寻找空间。如果空间可用，则保存该文件；在状态栏中显示一条消息告诉用户做了些什么。11.设计完善的帮助体系 不论用户界面设计得多么好，有时用户总需要帮助。应根据

22、操作的难易程度和用户的类别，为程序设计层次不同但相对完善的帮助体系，可以采用的方法包括建立联机帮助、工具提示、状态条、“这是什么”帮助等。 1.联机帮助 联机帮助是任何应用程序的重要部分，它通常是用户有问题时最先查看的地方。甚至简单的应用程序也应该提供“帮助”。 在设计“联机帮助”时，要记住它的主要目的是回答问题。创建主题名称与索引条目时尽量用用户的术语，例如，“我如何格式化页面？”比“编辑”、“页格式”菜单更容易找到主题。 很多情况下，还要提供上下文相关的帮助，如果用户按下F1键后，屏幕上立刻出现了相关的帮助画面，用户会感到非常满意。 2.工具提示 工具提示是个小标签，当鼠标指针在控件上停留

23、时即显示相关帮助信息。当用户在用户界面上搜索时，工具提示是一种向他们显示信息的好方法。 大多数控件都包含用来显示工具提示的属性，可以用这个属性为控件提供工具提示，如、.“打印文档” 3.状态显示 状态显示是提供那些不太适合工具提示的指令或消息的一种好方法，包括在的专业版与企业版中的状态条控件能很好地显示消息，Label控件也能用作状态显示。 在状态显示中显示的文本可以用以下两种方法之一来更新、用控件或窗体的事件，或者用事件。 4.“这是什么”帮助 “这是什么

24、”帮助是指当用户选取窗体右上角的小问号并单击控件，或者直接在控件上按下鼠标右键时，出现的帮助信息。“这是什么”帮助提供了和弹出式“帮助”主题的链接，稍复杂的应用程序就应该提供这种帮助形式。三、有关界面设计与测试的规范我在工作中总结了一些有关界面设计与测试的规范，与大家共享。 界面设计与测试规则 界面是软件与用户交互的最直接的层，界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成相应的操作，起到向导的作用。同时界面如同人的面孔，具有吸引用户的直接优势。设坪侠淼慕缑婺芨没辞崴捎湓玫母惺芎统晒母芯酰喾从 捎诮缑嫔杓频氖埽糜没写彀芨校偈涤们看蟮墓芏伎赡茉谟没奈肪逵敕牌懈吨疃鳌壳

25、敖缑娴纳杓埔鹑砑杓迫嗽钡闹厥拥某潭然乖对恫还唬钡阶罱持谱鞯男似穑攀艿阶业那囗疑杓屏己玫慕缑嬗捎谛枰哂幸帐趺赖奶旄扯饩芫?目前流行的界面风格有三种方式、多窗体、单窗体以及资源管理器风格，无论那种风格，以下规则是应该被重视的。1、易用性：按钮名称应该易懂，用词准确，屏弃没楞两可的字眼，要与同一界面上的其他按钮易于区分，能望文知意最好。理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。 易用性细则： 1)、完成相同或相近功能的按钮用Frame框起来，常用按钮要支持快捷方式。 2)、完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。 3)、按功能将界面划分局域块，用Fram

26、e框括起来,并要有功能说明或标题。 4)、界面要支持键盘自动浏览按钮功能，即按Tab键的自动切换功能。 5)、界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。6)、同一界面上的控件数最好不要超过10个，多于10个时可以考虑使用分页界面显示。 7)、分页界面要支持在页面间的快捷切换软件界面设计规范，常用组合快捷键Ctrl+Tab 8)、默认按钮要支持Enter及选操作，即按Enter后自动执行默认按钮对应操作。 9)、可写控件检测到非法输入后应给出说明并能自动获得焦点。 10)、Tab键的顺序与控件排列顺序要一直，目前流行总体从上到下，同时行间从左到右的方式。 11)、

27、复选框和选项框按选择几率的高底而先后排列。 12)、复选框和选项框要有默认选项，并支持Tab选择。 13)、选项数相同时多用选项框而不用下拉列表框。 14)、界面空间较小时使用下拉框而不用选项框。 15)、选项数叫少时使用选项框，相反使用下拉列表框。 16)、专业性强的软件要使用相关的专业术语，通用性界面则提倡使用通用性词眼。2、 规范性：通常界面设计都按界面的规范来设计，即包含“菜单条、工具栏、工具厢、状态栏、滚动条、右键快捷菜单”的标准格式，可以说、界面遵循规范化的程度越高，则易用性相应的就越好。小型软件一般不提供工具厢。 规范性细则：1)、常用菜单要有命令快捷方式。 2)、

28、完成相同或相近功能的菜单用横线隔开放在同一位置。 3)、菜单前的图标能直观的代表要完成的操作。 4)、菜单深度一般要求最多控制在三层以内。 5)、工具栏要求可以根据用户的要求自己选择定制。 6)、相同或相近功能的工具栏放在一起。 7)、工具栏中的每一个按钮要有及时提示信息。 8)、一条工具栏的长度最长不能超出屏幕宽度。 9)、 工具栏的图标能直观的代表要完成的操作。 10)、系统常用的工具栏设置默认放置位置。 11)、工具栏太多时可以考虑使用工具厢。 12)、工具厢要具有可增减性，由用户自己根据需求定制。 13)、工具厢的默认总宽度不要超过屏幕宽度的1/5。 14)、 状态条要能显示用户切实需

29、要的信息，常用的有、 目前的操作、系统状态、用户位置、用户信息、提示信息、错误信息等，如果某一操作需要的时间较长，还应该显示进度条和进程提示。 15)、滚动条的长度要根据显示信息的长度或宽度能及时变换，以利于用户了解显示信息的位置和百分比。 16)、状态条的高度以放置五好字为宜，滚动条的宽度比状态条的略窄。 17)、菜单和工具条要有清楚的界限;菜单要求凸出显示，这样在移走工具条时仍有立体感。 18)、菜单和状态条中通常使用5号字体。工具条一般比菜单要宽，但不要宽的太多，否则看起来很不协调。 19)、右键快捷菜单采用与菜单相同的准则。3、帮助设施：系统应该提供详尽而可靠的帮助文档，在用户使用产生

30、迷惑时可以自己寻求解决方法。 帮助设施细则。 1)、帮助文档中的性能介绍与说明要与系统性能配套一致。(我们的系统帮助文档都是系统的祖先时期的说明，让人困惑)。 2)、打包新系统时，对作了修改的地方在帮助文档中要做相应的修改。 3)、操作时要提供及时调用系统帮助的功能。常用F1。 4)、在界面上调用帮助时应该能够及时定位到与该操作相对的帮助位置。也就是说帮助要有即时针对性。 5)、最好提供目前流行的联机帮助格式或HTML帮助格式。 6)、用户可以用关键词在帮助索引中搜索所要的帮助用户界面设计规范，当然也应该提供帮助主题词。 7)、如果没有提供书面的帮助文档的话，最好有打印帮助的功能。 8 )、在帮助中应该提供我

31、们的技术支持方式，一旦用户难以自己解决可以方便的寻求新的帮助方式。 4、合理性：屏幕对角线相交的位置是用户直视的地方用户界面设计规范，正上方四分之一处为易吸引用户注意力的位置，在放置窗体时要注意利用这两个位置。 合理性细则。 1)、父窗体或主窗体的中心位置应该在对角线焦点附近。 2)、子窗体位置应该在主窗体的左上角或正中。 3)、多个子窗体弹出时应该依次向右下方偏移，以显示窗体出标题为宜。 4)、重要的命令按钮与使用较频繁的按钮要放在界面上注目的位置。 5)、错误使用容易引起界面退出或关闭的按钮不应该放在易点位置。横排开头或最后与竖排最后为易点位置。 6)、与正在进行的操作无关的按钮应该加以屏蔽(

32、s中用灰色显示，没法使用该按钮)。 7)、对可能造成数据无法恢复的操作必须提供确认信息,给用户放弃选择的机会。 8)、非法的输入或操作应有足够的提示说明。 9)、 对运行过程中出现问题而引起错误的地方要有提示，让用户明白错误出处，避免形成无限期的等待。 10)、提示、警告、或错误说明应该清楚、明了、恰当。 5、美观与协调性： 界面应该大小适合美学观点，感觉协调舒适，能在有效的范围内吸引用户的注意力。美观与协调性细则。 1)、 长宽接近黄金点比例，切忌长宽比例失调、或宽度超过长度。 2)、 布局要合理,不宜过于密集，也不能过于空旷，合理的利用空间。 3)、 按钮大小基本相近，忌用太长的名称，免得

33、占用过多的界面位置。 4)、 按钮的大小要与界面的大小和空间要协调。 5)、 避免空旷的界面上放置很大的按钮。 6)、放置完控件后界面不应有很大的空缺位置。 7)、 字体的大小要与界面的大小比例协调, 通常使用的字体中宋体9-12较为美观，很少使用超过12号的字体。 8)、 前景与背景色搭配合理协调，反差不宜太大，最好少用深色，如大红、大绿等。常用色考虑使用界面色调。 9)、 如果使用其他颜色，主色要柔和，具有亲和力与磁力，坚决杜绝刺目的颜色。 10)、 大型系统常用的主色有”#”、”#”、”#

34、”等。 11)、 界面风格要保持一致，字的大小、颜色、字体要相同，除非是需要艺术处理或有特殊要求的地方。 12)、 如果窗体支持最小化和最大化或放大时，窗体上的控件也要随着窗体而缩放；切忌只放大窗体而忽略控件的缩放。 13)、对于含有按钮的界面一般不应该支持缩放，即右上角只有关闭功能。 14)、 通常父窗体支持缩放时，子窗体没有必要缩放。 15)、如果能给用户提供自定义界面风格则更好，由用户自己选择颜色、字体等。 6、菜单位置：菜单是界面上最重要的元素，菜单位置按照按功能来组织。 菜单设测试细则：1)、菜单通常采用“常用-主要-次要-工具-帮助”的位置排列，符合流行的风

35、格。 2)、常用的有“文件”、“编辑”，“查看”等，几乎每个系统都有这些选项，当然要根据不同的系统有所取舍。 3)、下拉菜单要根据菜单选项的含义进行分组，并切按照一定的规则进行排列，用横线隔开。 4)、 一组菜单的使用有先后要求或有向导作用时，应该按先后次序排列。 5)、 没有顺序要求的菜单项按使用频率和重要性排列，常用的放在开头， 不常用的靠后放置；重要的放在开头，次要的放在后边。 6)、 如果菜单选项较多，应该采用加长菜单的长度而减少深度的原则排列。 7)、 菜单深度一般要求最多控制在三层以内。 8)、 对常用的菜单要有快捷命令方式，组合原则见8。 9)、对与进行的操作无关的菜单要用屏蔽的

36、方式加以处理，如果采用动态加载方式即只有需要的菜单才显示最好。 10)、菜单前的图标不宜太大，与字高保持一直最好。 11)、主菜单的宽度要接近，字数不应多于四个，每个菜单的字数能相同最好。 12)、主菜单数目不应太多，最好为单排布置。7、独特性：如果一味的遵循业界的界面标准，则会丧失自己的个性.在框架符合以上规范的情况下，设计具有自己独特风格的界面尤为重要。尤其在商业软件流通中有着很好的迁移默化的广告效用。 1)、安装界面上应有单位介绍或产品介绍，并有自己的图标。 2)、主界面，最好是大多数界面上要有公司图标。 3)、登录界面上要有本产品的标志，同时包含公司图标。 4)、帮助菜单的“关于”中应

37、有版权和产品信息。 5)、公司的系列产品要保持一直的界面风格软件界面设计规范，如背景色、字体、菜单排列方式、图标、安装过程、按钮用语等应该大体一致。 8、快捷方式的组合 在菜单及按钮中使用快捷键可以让喜欢使用键盘的用户操作得更快一些 在西文及其应用软件中快捷键的使用大多是一致的。菜单中、 1)、面向事务的组合有：Ctrl-D 删除 ；Ctrl-F 寻找 ；Ctrl H替换；Ctrl-I 插入 ；Ctrl-N 新记录 ；Ctrl-S 保存 Ctrl- O 打开。 2)、列表：Ctrl-R ，Ctrl-G定位；Ctrl-Tab下一分页窗口或反序浏览同一页面控件；。 3)、编辑、 Ctrl-A全选；C

38、trl-C 拷贝；Ctrl-V 粘贴；Ctrl-X 剪切；Ctrl-Z撤消操作；Ctrl-Y恢复操作。 4)文件操作：Ctrl-P 打印；Ctrl-W 关闭。 5)、系统菜单： Alt-A文件；Alt-E编辑；Alt-T工具；AltW窗口；AltH帮助。 6)、MS 保留键： Ctrl-Esc 任务列表 ；Ctrl-F4 关闭窗口； Alt-F4 结束应用；Alt-Tab 下一应用 ；Enter 缺省按钮/确认操作 ；Esc 取消按钮/取消操作 ；Shift-F1 上下文相关帮助 。 按钮中： 可以根据系统需要而调节，以下只是常用的组合。 Alt-Y确定(是)；Alt-C取消；A

39、lt-N 否；Alt-D删除；Alt-Q退出；Alt-A添加；Alt-E编辑；Alt-B浏览；Alt-R读；Alt-W写。 这些快捷键也可以作为开发中文应用软件的标准,但亦可使用汉语拼音的开头字母。9、安全性考虑：在界面上通过下列方式来控制出错几率，会大大减少系统因用户人为的错误引起的破坏。开发者应当尽量周全地考虑到各种可能发生的问题,使出错的可能降至最小。如应用出现保护性错误而退出系统,这种错误最容易使用户对软件失去信心。因为这意味着用户要中断思路 ,并费时费力地重新登录,而且已进行的操作也会因没有存盘而全部丢失。 安全性细则： 1)、最重要的是排除可能会使应用非正常中止的错误。 2)、应当

40、注意尽可能避免用户无意录入无效的数据。 3)、采用相关控件限制用户输入值的种类。 4)、当用户作出选择的可能性只有两个时,可以采用单选框。5)、当选择的可能再多一些时,可以采用复选框,每一种选择都是有效的,用户不可能输入任何一种无效的选择。 6)、当选项特别多时，可以采用列表框，下拉式列表框。 7)、在一个应用系统中,开发者应当避免用户作出未经授权或没有意义的操作。 8)、对可能引起致命错误或系统出错的输入字符或动作要加限制或屏蔽。 9)、对可能发生严重后果的操作要有补救措施。通过补救措施用户可以回到原来的正确状态。 10)、对一些特殊符号的输入、与系统使用的符号相冲突的字符等进行判断并阻止用

41、户输入该字符。 11)、对错误操作最好支持可逆性处理，如取消系列操作。 12)、在输入有效性字符之前应该阻止用户进行只有输入之后才可进行的操作。 13)、对可能造成等待时间较长的操作应该提供取消功能。 14)、特殊字符常有；;”>