用户界面设计规范1.简介软件用户界面的重要性。

软件用户界面的重要性。

一般地，成功的Web应用软件至少有三个卖点：1)应用软件的功能符合用户需求。

2)用户容易使用该软件。

3)用户觉得该软件界面美观。

基于第1项，是用户需求方面的事情，2和3都是用户界面的事情，可见用户界面对于一个软件是多么的重要！所以用户界面设计是Web应用软件开发过程中的关键工作之一，而不是次要工作。

1.1.目的本文档以用户界面(UI)设计理念和用户操作习惯为原则，为了保证界面设计的一致性、美观性、扩展性、安全性等，对WEB应用软件用户界面设计的原则、标准、约束和界面元素等内容提出详细要求，便于用户界面原形设计、用户界面开发、以及用户界面测试等角色使用和交流，并为以后的用户界面评估制定一套评价体系。

同时规范界面(UI)开发人员在设计、制作、开发用户界面行为，通过本文档来约束界面开发人员的随意性，避免造成页面效果不统一、不协调等问题。

1.2.范围本规范适用于Web应用系统用户界面(UI)的设计、开发和测试评估工作。

1.2.1.内容范围本规范严格定义了Web软件用户界面(UI)设计原则、要素和具体细则内容，并且对页面元素进的应用范围、样式进行了详细的定义。

1.2.2.适用范围本规范适用于Web应用系统项目中所有界面(UI)设计开发工作。

使用人员包括：界面设计人员、制作开发人员、界面测试评估人员。

1.3.术语释义1.3.1.用户界面用户界面是人与软件系统进行交互的接口，实现用户与计算机之间的通信，以控制计算机或进行用户和计算机之间的数据传送的系统部件，是用来接收信息和向用户展示信息的窗口，是软件系统成功与否的一个很重要因素。

1.3.2.UI即用户界面，又称用户接口1.4.文档约定本文档所指的页面，均基于1024×768的屏幕分辨率。

所有关于页面或控件的距离、大小描述，单位均是Pixel(像素),简写为PX。

1.5.参考资料1、《用户界面设计--有效的人机交互策略(第三版)》电子工业出版社2、《Web软件用户界面设计指南》电子工业出版社林锐等著3、《GUI设计禁忌》机械工业出版社4、《软件人机界面设计》高等教育出版社陈启安编2.页面设计思想本着"以用户为中心"的设计思路，Web软件用户界面的设计应将易用性放在首位，任何用户界面的设计都应从用户操作的角度出发，在最大限度内保证用户界面的易用性。

Web软件用户界面设计要求不同于网站页面的设计，Web用户界面不追求丰富多彩、绚丽多资的效果。

Web软件用户界面设计要求界面一致、美观，即系统中的所有页面应在布局、样式等达到统一。

对于软件开发者来说，则需要在前两点实现的同时，满足页面设计的复用性，即要求尽可能将页面元素、布局、样式和行为四大要素分离，以达到最大化的复用来降低开发和维护成本。

3.界面设计要点3.1.用户界面适合软件功能(适用性)用户界面的合适性是指界面与软件功能相融洽的程度。

软件功能是通过用户界面来展现的，所以用户界面一定要适合软件功能，这是最基本的要求，如果用户无法通过界面来使用软件，"易用性"根本就无从谈起。

"用户界面适合于软件的功能"提醒界面设计者不要片面追求界面外观漂亮而导致华而不实。

3.2.容易理解用户界面中的所有元素不能出现错误文字，也没有令人费解(二义性)的文字；图标按钮的含义一定要直观明了，最好图标加文字说明，防止用户误解；界面结构能够清晰地反映工作流程，以便用户按部就班地操作；3.3.及时反馈信息(提示信息)当用户进行了某项操作后，系统能够及时给出处理信息，例如，当某项操作进行时间较长，则应该提示"*操作正在处理，请等待"等信息。

3.4.防错处理提供对数据进行校验功能；对于在某些情况下不应该使用的菜单项、按钮应当将其"灰掉"(变成灰色，可见但不可用)；执行破坏性的操作之前，应当提供"用户确认对话框"来进行确认；3.5.合理的布局界面的总体布局应当有一定的逻辑性，最好能够与工作流程吻合；界面上的元素放置布局应当整齐清爽；3.6.合理的色彩同一界面不应使用过多数目的颜色，因为人们很难记住多种色彩；应当根据对象的重要性来选择颜色，重要的对象应当使用醒目的色彩表示；使用颜色时应当保持一致性；3.7.风格一致和必要的个性化在一个软件的用户界面中，同类的界面元素应当有相同的视觉和相同的操作方式。

例如命令按钮，要求所有的形状、色彩、对鼠标、键盘的响方式都是一致的；同一软件的用户界面应当有一定程度的相似性。

风格一致的界面可以减少用户的记忆量、减少出错几率、并且迅速积累操作经验。

3.8.最少操作步骤(最高效率)界面的设计应当根据用户需要求，在最少的操作少完成工作，以便提高工作效率。

3.9.可复用应当利用现成的界面组件，从而提高质量、提高开发效率和降低成本。

界面组件应有以下内容组成：(1)界面组件代码(2)应用示例(3)相关的文档4.界面设计原则用户界面的设计需要考虑以下原则(按照重要程度高底进行排列)。

4.1.以用户为中心原则始终牢记软件是为用户服务的，界面是用户与系统交互的接口，所以设计的界面首先要得到用户的认可。

4.2.界面美观、合理、一致性原则一个软件系统的所有界面应采用统一的布局和风格样式，比如：对齐、颜色、大小等。

页面布局要求结构清晰、层次分明，页面元素不应过于拥挤，也不应过于空旷。

4.3.操作易用性原则页面可具有很强的可操作性、符合用户操作习惯，主要体现在以下几个方面：(1)简单易学。

(2)合理的错误避免和纠正，如检验、警告等。

(3)灵活性，如提供快捷键、数字键盘录入等。

4.4.帮助引导性原则帮助是软件系统必不可少的内容，当用户不能进行操作时，要提供帮助支持，正确的引导用户进行操作。

4.5.界面模板化、组件化原则由于在软件系统中存在大量的页面，这些页面与页面有着共同特点的界面，页面之间存在着复杂的关联关系，为了快速开发和减少维护成本，同时也为了保持界面一致性，界面应采用页面模板和复用组件来定义。

5.界面设计一般性规范5.1.1.合理性细则1)父窗口或主窗口的中心位置应该在屏幕对角线焦点附近。

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

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

4)页面的尺寸要合适、界面元素不应放得太满，边界处需要留有一定的空间，也不可过于宽松，显得零乱。

5)界面元素需要一致的对齐方式，以避免参差不齐的视觉效果。

6)同类的界面元素尽量保侍大小一致，起码保持高度或宽度的致，逻辑相关的界面元素要就近放置，便于用户操作。

7)与正在进行的操作无关的按钮应该加以禁止(使其失去功能，但应显示)。

8)对可能造成数据无法恢复的操作必须提供确认操作对话框。

9)对运行过程中出现问题而引起错误的要有提示。

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

5.1.2.协调性细则1)页面长宽接近黄金点比例，切忌长宽比例失调、或宽度超过长度。

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

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

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

5)字体的大小要与界面的大小比例协调,通常使用的字体中宋体12px较为美观。

6)前景与背景色搭配合理协调，反差不宜太大，最好少用深色，如大红、大绿等。

常用颜色考虑使用Windows界面色调。

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

8)大型系统常用的主色有"R225,G225,B225″、"R239,G239,B239″、"R192,G192,B192″等。

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

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

5.1.3.易用性细则1)常用按钮要支持快捷方式。

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

3)按功能将界面划分局域块，并要有功能说明或标题。

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

5)界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口上较醒目的位置6)Tab键的顺序与控件排列顺序要一致，目前流行总体从上到下，同时行间从左到右的方式。

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

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

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

5.1.4.健壮性细则1)最重要的是排除可能会使应用非正常中止的错误。

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

3)对可能发生严重后果的操作要有补救措施，便于回到原来的正确状态。

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

特殊字符常有；；'",`'："["{、\|}]+=)-(_*&&^%$#@！~,.。

?/还有空格5)对错误操作最好支持可逆性处理，如取消系列操作。

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

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

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

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

6.界面布局规范(模板化)1)每个窗口都要使用相同的颜色搭配方案，例如滚动条的颜色，活动窗口的标题的颜色等。

2)每个窗口都应该遵守所在类别的同样的窗口模板。

6.1.软件主界面软件主界面设计是用户界面设计中最重要也是最难的工作。

主要包括：系统标识区、功能菜单区、内容及操作区、信息反馈区四个区域。

结构如下所示：(1)系统标识区(如：拓普税务管理信息系统2.0)当前用户打印/帮助/退出(2)功能菜单(3)内容及操作区(4)信息反馈区各功能区尺寸1)系统标识区：高度为70px。

2)功能菜单区：默认宽度200px，高，自动拉长。

3)业务操作区：宽800px，高，自动拉长。

4)信息反馈区：宽度，随屏幕的宽度，高度，30px。

各功能区说明1)系统标识提示界面元素有4项：软件系统的图标和名称。

鼠标点击将弹出About对话框(用来说明软件一些开发公司、版权，当前版本等软件信息)。

当前用户。

鼠标点击将弹出对话框，用户可以修改基本信息和密码。