人机交互界面设计规范
（讨论稿）
文档状态：[√] 草稿[ ] 正式发布[ ] 正在修改文档标识：Hygrand-LNSP-RD-REQ 当前版本： 1.0
作者：赵云飞
完成日期：2007-10-23
Hygrand
上海华冠电子设备有限责任公司
Hygrand Electronic Equipment CO., LTD.Shanghai
1. 必须在编码之前完成，否则就成花架子了。

2. GUI规范不是一蹴而就，它和设计相互迭代，彼此补充，相互完善。

3. GUI规范的内容70％是通用原则，涉及产品图形控件的基本属性和构建的基本参数和原则，30％
是与项目或产品特点相适应的内容，这部分内容就是在设计过程中迭代产生。

1.概述
<目的、适用项目、基本风格>
2.通用指导原则
2.1.易用性
理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。

如按钮名称应该易懂，用词准确，要与同一界面上的其他按钮易于区分。

<补充易用性细则>
➢完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。

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

➢……
2.2.规范性
通常界面设计按Windows界面的规范，即包含“菜单条、工具栏、状态栏、滚动条、右键快捷菜单”等的标准格式，界面遵循规范化的程度越高，则易用性相应的就越好。

<补充规范性细则>
➢工具栏的图标能直观的代表要完成的操作。

➢标签提示：字体为加重、宋体、黑色、无边框。

➢对齐方式：左对齐、一般文字、单个数字、日期等。

➢等待过程：在需等待时间较短(0-10秒)的情况下应将鼠标显示成为沙漏；当需10秒以上时，要显示进度条等。

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

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

<补充美观与协调性细则>
➢父窗体或主窗体的中心位置应该在对角线焦点附近。

➢按钮的大小要与界面的大小和空间要协调。

➢……
2.4.独特性
在框架符合以上规范的情况下，设计具有自己独特风格的界面尤为重要。

尤其在商业软件流通中有着很好的迁移默化的广告效用。

<补充独特性细则>
➢安装界面上应有单位介绍或产品介绍，并有自己的图标。

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

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

<补充快捷方式细则>
➢文件操作：如打印、关闭相应的快捷键。

➢系统菜单：如工具、帮助等的快捷键。

➢……
2.6.安全性
在界面上通过下列方式来控制出错几率，会大大减少系统因用户人为的错误引起的破坏。

<补充安全性性细则>
➢应当注意尽可能避免用户无意录入无效的数据。

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

➢……
3.整体界面设计规范
3.1.整体框架设计
3.1.1.典型页面
<布局说明>
➢整体页面在浏览器中的位置说明，即长、宽、高（px）；
➢页面基本框架构成及位置说明：如系统logo、菜单、导航、查询、内容显示区、页脚等；
➢页面显示最佳分辨率说明；
➢……
<简要布局图>
整体页面框架的简要布局图
3.1.2.登录页面
<布局说明>
➢整体页面在浏览器中的位置说明，即长、宽、高（px）；
➢页面基本框架构成及位置说明：如系统logo、登录区、公告区等、页脚等；
➢页面显示最佳分辨率说明；
➢……
<简要布局图>
整体页面框架的简要布局图
3.1.3.系统首页
<布局说明>
➢整体页面在浏览器中的位置说明，即长、宽、高（px）；
➢页面基本框架构成及位置说明：如系统logo、菜单、网站管理区、内容显示区、超链区；
➢页面显示最佳分辨率说明；
➢……
<简要布局图>
整体页面框架的简要布局图
3.2.配色方案
<配色说明>
➢系统配色基本原则；
➢系统主体背景配色；
➢系统辅助配色。

<配色图例>
用具体颜色示意系统背景主体、辅助配色
3.3.字体设计
<系统主体字体说明>
➢系统主体采用的字体类型，包括汉字、英文字等
➢字体大小；
➢字体颜色；正常、有超链的、激活后的等。

<主体字体图例>
给出具体各类主体字体。

3.4.信息提示
<信息提示说明>
➢必添项提示：包括必添项前的标示、字体、输入框颜色等；
➢等待提示：提示形式，如进度条等。

➢删除提示：统一文字说明内容，字体，大小，颜色等。

➢保存提示：统一文字说明内容，字体，大小，颜色等。

<系统信息提示说明>
给出具体项事例。

4.界面元素设计规范
4.1.logo图标与标题
< logo图标与标题>
➢标题字体、大小、颜色、定位等。

<系统logo事例>
项目标题，公司图片等
4.2.导航
<系统导航说明>
➢导航条的位置、背景颜色、字体大小、字体颜色、字体类型、导航形式等。

<系统导航事例>
具体的导航事例图。

4.3.菜单
<系统菜单说明>
➢菜单位置、菜单分级数、菜单展开风格，边框颜色、背景、字体位置等
➢各级菜单说明：激活前、激活后字体、颜色、大小等。

<系统菜单事例>
具体的菜单图。

4.4.表格
<系统表格说明>
➢表格标题：标题单元背景、字体、大小、颜色、位置等
➢表格行：行高、背景颜色、一页显示行数等
➢表格单元格：单元格间距
➢数据单位位置：展示方式等。

➢表格主体内容：正常的字体、大小、颜色；有链接的……；
➢翻页及总体页数表述：
<系统表格事例>
具体的表格图示意。

4.5.图表
4.6.按钮
4.7.文本框
4.8.下拉框
4.9.单选框
4.10.复选框
4.11.弹出窗口4.12.脚本
4.13.其他
5.补充说明
<说明1：>
<说明2：>。