用户界面设计规范

用户界面设计规范

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.帮助引导性原则