用户界面设计规范
- 格式：docx
- 大小：36.90 KB
- 文档页数：28
用户界面设计规范
1. 简介
软件用户界面的重要性。
软件用户界面的重要性。
一般地，成功的Web应用软件至少有三个卖点：
1) 应用软件的功能符合用户需求。
2) 用户容易使用该软件。
3) 用户觉得该软件界面美观。
基于第1项，是用户需求方面的事情，2和3都是用户界面的事 情，可见用户界面对于一个软件是多么的重要！所以用户界面设计是Web 应用软件开发
过程中的关键工作之一，而不是次要工作。
1. 1.目的
本文档以用户界面(UI)设计理念和用户操作习惯为原则，为了保证 界面设计的一致性、美观性' 扩展性、安全性等，对WEB应用软件用户 界面设计的原贝I］、标准、约束和界面元素等内容提出详细要求，便于用户 界面原形设计' 用户界面开发' 以及用户界面测试等角色使用和交流，并 为以后的用户界面评估制定一套评价体系。
同时规范界面(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. 文档约定
本文档所指的页面，均基于1024X768的屏幕分辨率。
所有关于页面或控件的距离' 大小描述，单位均是Pixel (像素)，简写 为PXo
1.5. 参考资料
1、 《用户界面设计-有效的人机交互策略(第三版)》电子工业出版 社
2、 《Web软件用户界面设计指南》电子工业出版社林锐等著
3、 《GUI设计禁忌》机械工业出版社 4、《软件人机界面设计》高等教育出版社陈启安编2. 页面设计思想
本着"以用户为中心"的设计思路，Web软件用户界面的设计应将易 用性放在首位，任何用户界面的设计都应从用户操作的角度出发，在最大 限度内保证用户界面的易用性。
Web软件用户界面设计要求不同于网站页面的设计，Web用户界面不 追求丰富多彩' 绚丽多资的效果。Web软件用户界面设计要求界面一致、 美观，即系统中的所有页面应在布局、样式等达到统一。
对于软件开发者来说，则需要在前两点实现的同时，满足页面设计的复 用性，即要求尽可能将页面元素' 布局、样式和行为四大要素分离，以达 到最大化的复用来降低开发和维护成本。
3. 界面设计要点
3.1. 用户界面适合软件功能（适用性）
用户界面的合适性是指界面与软件功能相融洽的程度。软件功能是通过 用户界面来展现的，所以用户界面一定要适合软件功能，这是最基本的要 求，如果用户无法通过界面来使用软件，"易用性"根本就无从谈起。" 用户界面适合于软件的功能"提醒界面设计者不要片面追求界面外观漂亮 而导致华而不实。
3. 2.容易理解
用户界面中的所有元素不能出现错误文字，也没有令人费解（二义 性）的文字；图标按钮的含义一定要直观明了，最好图标加文字说明，防 止用户误解；界面结构能够清晰地反映工作流程，以便用户按部就班地操 作；
3.3. 及时反馈信息（提示信息）
当用户进行了某项操作后，系统能够及时给出处理信息，例如，当某项
操作进行时间较长，则应该提示操作正在处理，请等待"等信息。提供对数据进行校验功能；对于在某些情况下不应该使用的菜单项、 按钮应当将其”灰掉”（变成灰色，
可见但不可用）；
执行破坏性的操作之前，应当提供"用户确认对话框"来进行确认；
3. 5.合理的布局界面的总体布局应当有一定的逻辑性，最好能够与 工作流程吻合；界面上的元素放置布局应当整齐清爽；
3. 6.合理的色彩同一界面不应使用过多数目的颜色，因为人们很难 记住多种色彩；应当根据对象的重要性来选择颜色，重要的对象应当 使用醒目的色彩表示；使用颜色时应当保持一致性；
风格一致和必要的个性化在一个软件的用户界面中，同类的界
面元素应当有相同的视觉和相同的操
作方式。例如命令按钮，要求所有的形状\色彩' 对鼠标' 键盘的响方式都 是
一致的；同一软件的用户界面应当有一定程度的相似性。风格一致的界面可
以 减少用户的记忆量' 减少出错几率、并且迅速积累操作经验。
3.8.最少操作步骤（最高效率）界面的设计应当根据用户需要
求，在最少的操作少完成工作，以便提高工
作效率。
3.9.可复用应当利用现成的界面组件，从而提高质量、提高开发效 率和降低成本。界
面组件应有以下内容组成：3.7. 4. 4.帮助引导性原则
(1) 界面组件代码
(2) 应用示例
(3) 相关的文档
4. 界面设计原则
用户界面的设计需要考虑以下原则(按照重要程度高底进行排列)。
4.1. 以用户为中心原则始终牢记软件是为用户服务的，界面是用户 与系统交互的接口，所以设计
的界面首先要得到用户的认可。
4. 2.界面美观、合理' 一致性原则一个软件系统的所有界面应采用 统一的布局和风格样式，比如：对齐、颜
色、大小等。
页面布局要求结构清晰' 层次分明，页面元素不应过于拥挤，也不应过 于空旷。
4.3. 操作易用性原则页面可具有很强的可操作性、符合用户操作习 惯，主要体现在以下几个方
面：
CI)简单易学。
(2) 合理的错误避免和纠正，如检验、警告等。
(3) 灵活性，如提供快捷键' 数字键盘录入等。帮助是软件系统必不可少的内容，当用户不能进行操作时，要提供帮助支 持，正确的引导用户进行操作。
4.5.界面模板化、组件化原则
由于在软件系统中存在大量的页面，这些页面与页面有着共同特点的界 面，页面之间存在着复杂的关联关系，为了快速开发和减少维护成本，同时也 为了保持界面一致性，界面应采用页面模板和复用组件来定义。
5. 界面设计一般性规范
5. 1. 1.合理性细则
父窗口或主窗口的中心位置应该在屏幕对角线焦点附近。
3） 重要的命令按钮与使用较频繁的按钮要放在界面上注目的位置。
4） 页面的尺寸要合适、界面元素不应放得太满，边界处需要留有一定的空
间，也不可过于宽松，显得零乱。
5） 界面元素需要一致的对齐方式，以避免参差不齐的视觉效果。
6） 同类的界面元素尽量保侍大小一致，起码保持高度或宽度的致，逻辑相 关的界面元素要就近放置，便于用户操作。
7）与正在进行的操作无关的按钮应该加以禁止（使其失去功能，但应 显示）
8） 对可能造成数据无法恢复的操作必须提供确认操作对话框。
9） 对运行过程中出现问题而引起错误的要有提示。
10）提示、警告、或错误说明应该清楚、明了、恰当。
1）页面长宽接近黄金点比例，切忌长宽比例失调' 或宽度超过长度。
5.1.2.协调性细则 1)
2) 子窗口位置应该在主窗口的左上角或正中。 2） 按钮大小基本相近，忌用太长的名称，免得占用过多的界面位置。
3） 避免空旷的界面上放置很大的按钮。
4） 放置完控件后界面不应有很大的空缺位置。
5） 字体的大小要与界面的大小比例协调，通常使用的字体中宋体12px 较为美观。
6） 前景与背景色搭配合理协调，反差不宜太大，最好少用深色，如大红、 大绿等。常用颜色考虑使用Windows界面色调。
7） 如果使用其他颜色，主色要柔和，具有亲和力与磁力，坚决杜绝刺目的 颜色。
8） 大型系统常用的主色有”R225, G225, B225〃、
”R239, G239, B239〃、HR192,G192, B192,/ 等。效果如图所示
9）界面风格要保持一致，字的大小、颜色、字体要相同，除非是需要艺术
处理或有特殊要求的地方。
10）如果能给用户提供自定义界面风格则更好，由用户自己选择颜色、字
体等。
5. 1.3.易用性细则
1） 常用按钮要支持快捷方式。
2） 完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。
3） 按功能将界面划分局域块，并要有功能说明或标题。
界面要支持键盘自动浏览按钮功能，即按Tab键的自动切换功能 4) 界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前，位置5）
也应放在窗口上较醒目的位置 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）在读入用户所输入的信息时，根据需要选择是否去掉前后空格。
