软件用户界面设计规范

软件用户界面设计规范

1.导言

1.1 目的

为开发人员提供界面设计和开发的指南，引导开发人员设计简洁美观的用户界面；

1.2 适用范围

适用于xxxxxx。

2.软件界面设计的重要性

2.1 发展趋势

软件用户界面的发展经历了从简单到复杂、从低级到高级的过程，用户界面在软件系统中的价值比重越来越高。

2.2 开发竞争

得益于互联网的发展和普及，软件开发的技术门槛在不断下降，大部分软件企业的技术手段也趋向于雷同，“软件设计”变得越来越重要。当大家都掌握了相似的技术和需求信息后，企业之间的开发竞争“比的就是设计”。

–软件用户界面设计要综合考虑“易用性设计”、“艺术设计”和“技术实现”，很有挑战性。

2.3 用户挑剔

用户界面在很大程度上影响着软件的命运，因为广大用户对软件的评价主要来源于他们操作用户界面的感受。同类软件越多，选择余地越大，购买者对软件 第 1 页 共 12 页

用户界面就越挑剔。

3.软件界面设计的现状、问题及原因

3.1 不容乐观的现状

尽管国内有很多技术出色、聪明过人的软件工程师，但是不少人开发出来的软件产品却既难用又难看，客户很不满意。导致经常要修改软件的用户界面，造成极大的生产力浪费。

到处是用户界面设计缺陷：

–界面措辞含糊，甚至有错别字。连简单的消息框都设计不好，可能存在文不对题的语病。

–界面布局混乱，缺乏逻辑，凡是能放的东西都堆集上去，让用户不知从何下手。

–没有防错处理，不对用户输入的数据进行检验，不根据用户的权限自动隐藏或者禁用某些功能。执行破坏性的操作之前，不提醒用户确认。

–不提供进度条、动画来反映正在进行的比较耗时间的过程，对于重要的操作也不返回结果，让用户干着急。

3.2 问题和原因之一

由于国内没有开设软件界面设计的课程，大家对这部分知识没有深刻的意识，只是在工作中凭着个人的经验与感觉设计软件的用户界面，这样产生的界面往往得不到大众用户的认可。

3.3 问题及原因之二

开发人员在设计用户界面方面不仅存在先天的教育缺陷，更加糟糕的是还常常“错位”的毛病。他以为只要自己感觉用户界面漂亮、使用起来方便，那么用户也一定会满意。

3.4 问题及原因之三

第 2 页 共 12 页

Web软件和网站的运行环境和技术几乎完全相同，但是两者的用途和特征很不相同。

网站主要用于浏览信息，面向大众用户，主页面的内容随时会更新，不存在统一的网站用户界面格式。因此“个性化”和“不断变化”是网站的用户界面的特征。

Web软件本质是软件，只不过它在Web环境下运行、以页面的方式展示功能而已。软件用于处理有固定流程（逻辑）的业务，而不是仅仅让人们浏览信息用的。软件用户界面的设计要素有合适性、可理解、一致性、出错处理、及时反馈信息、最少操作步骤、合理的布局和色彩等等，所以软件与网站的用户界面的特征是有很大差异的。

4.用户眼中的好软件

4.1“好”的软件意味着“实用、易用、美观”

如果软件的功能不实用（不能为用户解决问题），那么不管该软件是否易用和美观，用户一般都不愿意购买该软件，除非用户没有选择余地。

如果两个软件的功能和价格都相似，那么用户会挑选更加易用的那个软件。

如果两个软件的功能、价格、易用性都差不多，那么用户会选择更加美观的那个软件。

4.2 谁来评价“好或差”

用户才真正有资格说软件“好或坏”。如果用户对软件很不满意，开发人员不要有逆反情绪：从哪里找来的笨蛋用户！

其实不是用户笨，是自己开发的软件太笨了。当用户真的感到软件很好用时，一股温暖的感觉油然而生，于是就用“界面友好”来表扬这个软件。

第 3 页 共 12 页

5.软件用户界面设计细则

5.1 操作性（易用性）

操作性（易用性）这是用户交互设计中最应关心的。

使用简洁的界面和简单的控制方法。除了快截的控制方式外， 迅速且合理的反馈也是同样重要的， 这也是操作性的一个组成部分。

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

易用性细则：

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

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

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

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

5):界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前，位置也应放在窗口上较醒目的位置。

6):同一界面上的控件数最好不要超过10个，多于10个时可以考虑使用分页界面显示。

7):分页界面要支持在页面间的快捷切换，常用组合快捷键Ctrl+Tab

8):默认按钮要支持Enter及选操作，即按Enter后自动执行默认按钮对应操作。

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

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

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

12):复选框和选项框要有默认选项，并支持Tab选择。

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

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

第 4 页 共 12 页

15):选项数较少时使用选项框，相反使用下拉列表框。

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

17):长时间的操作应提供进度指示和取消功能。

18):对于一些常用的输入，软件应具有记忆功能，以避免用户重复输入相同的内容。

19):所有的提示要清晰易懂，避免让用户去记大量无用的东西。

5.2 一致性（规范性）

这里主要讲软件与Windows系统设计和操作一致。

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

规范性细则：

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

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

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

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

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

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

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

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

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

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

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

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

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

14)：状态条要能显示用户切实需要的信息，常用的有：目前的操作、系统

状态、用户位置、用户信息、提示信息、错误信息等，如果某一操作需要的时间 第 5 页 共 12 页

较长，还应该显示进度条和进程提示。

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

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

17)：菜单和工具条要有清楚的界限;菜单要求凸出显示，这样在移走工具条时仍有立体感。

18)：菜单和状态条中通常使用5号字体。工具条一般比菜单要宽，但不要宽的太多，否则看起来很不协调。

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

20):使用操作系统提供的控件，不要改变其功能，避免将用户弄糊涂。

5.3 合理性

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

合理性细则：

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

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

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

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

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

6):与正在进行的操作无关的按钮应该加以屏蔽(Windows中用灰色显示，没法使用该按钮)。

7)：对可能造成数据无法恢复的操作必须提供确认信息，给用户放弃选择的机会。

8):非法的输入或操作应有足够的提示说明。

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

10):提示、警告、或错误说明应该清楚、明了、恰当。

第 6 页 共 12 页

11):窗体及控件大小合适，避免剩余控件过大或信息显示不全。

5.4 美观与协调性

界面应该大小适合美学观点，感觉协调舒适，能在有效的范围内吸引用户的注意力。

美观与协调性细则：

1)：长宽接近黄金点比例，切忌长宽比例失调、或宽度超过长度。

2)：布局要合理，不宜过于密集，也不能过于空旷，合理的利用空间。

3)：按钮大小基本相近，忌用太长的名称，免得占用过多的界面位置。

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

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

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

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

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

9)：如果使用其他颜色，主色要柔和，具有亲和力与磁力，坚决杜绝刺目的颜色。

10):大型系统常用的主色有"E1E1E1"、"EFEFEF"、"C0C0C0"等。

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

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

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

14)：通常父窗体支持缩放时，子窗体没有必要缩放。

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

5.5 菜单位置

第 7 页 共 12 页

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

菜单设测试细则：

1)：菜单通常采用“常用--主要--次要--工具--帮助”的位置排列，符合流行的Windows风格。

2):常用的有“文件”、“编辑”，“查看”等，几乎每个系统都有这些选项，当然要根据不同的系统有所取舍。

3):下拉菜单要根据菜单选项的含义进行分组，并切按照一定的规则进行排列，用横线隔开。

4)：一组菜单的使用有先后要求或有向导作用时，应该按先后次序排列。

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

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

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

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

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

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

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

12)：主菜单数目不应太多，最好为单排布置。

5.6 独特性

如果一味的遵循业界的界面标准，则会丧失自己的个性.在框架符合以上规范的情况下，设计具有自己独特风格的界面尤为重要。一个软件其实真正打动人的往往在一些细节、小的方面。

1):安装界面上应有单位介绍或产品介绍，并有自己的图标。

2):主界面，最好是大多数界面上要有公司图标。

3):登录界面上要有本产品的标志，同时包含公司图标。

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

5):公司的系列产品要保持一直的界面风格，如背景色、字体、菜单排列方 第 8 页 共 12 页

式、图标、安装过程、按钮用语等应该大体一致。

5.7 快捷方式的组合

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

菜单中：

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全选；Ctrl-C 拷贝；Ctrl-V 粘贴；Ctrl-X 剪切；Ctrl-Z撤消操作；Ctrl-Y恢复操作。

4):文件操作:

Ctrl-P 打印；Ctrl-W 关闭。

5):系统菜单

Alt-F文件；Alt-E编辑；Alt-T工具；Alt－W窗口；Alt－H帮助。

6):MS Windows保留键:

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

7):按钮中：

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

Alt-Y确定(是)；Alt-C取消；Alt-N 否；Alt-D删除；Alt-Q退出；Alt-A添加；Alt-E编辑；Alt-B浏览；Alt-R读；Alt-W写。

这些快捷键也可以作为开发中文应用软件的标准，但亦可使用汉语拼音的开头字母。

5.8 容错性考虑

第 9 页 共 12 页

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

容错性细则：

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

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

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

4)：当用户作出选择的可能性只有两个时，可以采用单选框。

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

6)：当选项特别多时，可以采用列表框，下拉式列表框。

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

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

9):对可能发生严重后果的操作要有补救措施。通过补救措施用户可以回到原来的正确状态。

10):对一些特殊符号的输入、与系统使用的符号相冲突的字符等进行判断并阻止用户输入该字符。

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

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

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

14)：特殊字符常有；;’”><，｀‘：“［”｛、|｝］+=)-(_*&&^%$#@!~，.。?/还有空格。

15)：与系统采用的保留字符冲突的要加以限制。

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

17)：有些读入数据库的字段不支持中间有空格，但用户切实需要输入中间 第 10 页 共 12 页

空格，这时要在程序中加以处理。

5.9 多窗口的应用于系统资源

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

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

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

3)：关闭所有窗体，系统退出后要释放所占的所有系统资源 ，除非是需要后台运行的系统。

4)：尽量防止对系统的独占使用。

5.10 帮助设施

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

帮助设施细则：

1)：帮助文档中的性能介绍与说明要与系统性能配套一致。(我们的系统帮助文档都是系统的祖先时期的说明，让人困惑)。

2)：打包新系统时，对作了修改的地方在帮助文档中要做相应的修改。

3)：操作时要提供及时调用系统帮助的功能。常用F1。

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

5)：帮助格式应使用CHM格式，避免使用以前的HLP格式，用起来不方便。

6)：用户可以用关键词在帮助索引中搜索所要的帮助，当然也应该提供帮助主题词。

7)：如果没有提供书面的帮助文档的话，最好有打印帮助的功能。

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

第 11 页 共 12 页

第 12 页 共 12 页