154845814.doc
文档修订摘要
亚信联创科技（中国）有限公司版权所有
文档中的全部内容属亚信联创科技（中国）有限公司所有， 未经允许，不可全部或部分发表、复制、使用于任何目的。
154845814.doc
目录
第1章 第2章
序言···················································································································································· 1 界面框架设计 ··································································································································· 2
2.1 页面分类 ··································································································································· 2
2.2 页面内容构成划分 ···················································································································· 2 2.2.1 主页 ··································································································································· 2 2.2.2 查询页 ······························································································································· 3 2.2.3 查询结果页 ························································································································ 3 2.2.4 出错提示页和用户信息提交成功页 ·················································································· 3 2.2.5 帮助页 ······························································································································· 3 第3章
界面元素设计 ··································································································································· 4
3.1 基本元素设计 ···························································································································· 4 3.1.1 页面用字规定 ···················································································································· 4 3.1.2 具体图像要求 ···················································································································· 5 3.2 控件设计 ··································································································································· 6 3.2.1 按钮设计要求 ···················································································································· 6 3.2.2 页面表单（FORM）及查询结果表格（TABLE）设计 ··················································· 7 第4章
界面设计指南 ··································································································································· 8
4.1 基本原则 ··································································································································· 8 4.2 界面标准评测表 ························································································································ 8 4.2.1 一致性 ······························································································································· 8 4.2.2 易用性 ······························································································································· 9 4.2.3 界面布局合理性（包含美观与协调性） ········································································ 10 4.2.4 错误信息处理 ·················································································································· 10 4.2.5 安全性 ····························································································································· 11 4.2.6 多窗口的应用与系统资源 ······························································································· 12 第5章 5.1 5.2
附件···················································································································································· 1 OPENBOSS-GUI界面现有问题简述 ······························································································ 1 OPENBOSS-GUI界面评测表 （仅供参考） ············································································· 1
ii
154845814.doc
第1章 序言
为适应目前产品页面制作的需要，规范页面制作，统一产品的风格，直接展示公司产品的特色，树立自己的产品形象。
对大多数人来说，用户界面就是软件本身。
1、 首先，用户界面越直观，就越易用；
2、 界面越好，培训用户就越容易，降低了培训成本； 3、 界面越出色，用户就越少求助，降低了客户支持成本；
4、界面越出色，用户就喜欢使用，增强了开发者工作的满意度。
5、设计合理的界面能给用户带来轻松愉悦的感受和成功的感觉，相反由于界面设计的失败，让用户容易产生有挫败感
总之，好的用户界面使得人们不用阅读用户手册或接受培训就能使用此应用软件。
1
154845814.doc
第2章 界面框架设计
2.1 页面分类
目前以每个产品为单位进行页面划分。
其层次如下
1． 主页页面----查询条件输入页面
2． 二级页面----查询结果页面，出错提示页面,用户信息提交成功页 3． 三级页面----查询结果详细情况页面 4． 其它深层次信息页面
页面种类可分为
1． 用户注册页 2． 查询页 3． 查询结果页 4． 出错提示页
5． 用户信息提交成功页
6． 帮助页统一的帮助页格式 制定统一模板 7． 其它
2.2 页面内容构成划分
2.2.1 主页
● 文件名：index.htm,产品分不同用户主页，使用不同的英文*.htm.
● 各产品可考虑加引导页备用 ● 采用分帧方式
● 采用两主帧方式,各帧所占百分比按需要决定。 ● 一.二次功能要直接列在左面一帧中
● 左面一帧文件名：left.htm,右面一帧文件名是产品介绍:应用 about.htm ● 左面一帧包括：当前选择的功能一定要用不同颜色在左帧中表示出来
亚信版权标志。（具体要求参见7.3） 帧边距设为“0”。 ● border设置为“0”。 ● 主页要设定标题文字
例如：AIACCOUNT主页里设置（TITLE=“AIACCOUNT”）。
● 主页设定颜色应体现亚信的产品风格体现兰色感觉，以兰色为主链结色。
2
154845814.doc
2.2.2 查询页
●
● ● ● ●
一般情况查询层次不多于4次,次级页面要有返回主页的链接 查询条件表单（具体要求参见6.1） 控制按钮（具体要求参见4.1） 标题图（具体要求参见7.1） 背景图（具体要求参见7.2）
2.2.3 查询结果页
● 查询结果表格（具体要求参见6.2）
● 背景（具体要求参见7.2） ● 标题图（具体要求参见7.1）
2.2.4 出错提示页和用户信息提交成功页
●
● ● ● ●
文件名：error.htm 和feedback.htm 要求：各产品采用同一风格出错提示页 出错文字提示（具体要求参见7.4） 示意性图（具体要求参见7.4） 背景（具体要求参见7.2）
2.2.5 帮助页
参照后面的示例
3
154845814.doc
第3章 界面元素设计
3.1 基本元素设计
3.1.1 页面用字规定
中文字
字体规定使用如下
黑体，隶书---------用于标题，同一产品不得变化。 宋体 ---------用于正文和注解（为浏览器默认字）
3.1.1.1 英文字
可选用以下两种之一
Arial 字体 Times New Roman 字体
3.1.1.2 字颜色
正文文字-------统一用黑色
链接文字------统一用兰色(如不要用Border="o")
访问过的链接文字-------统一用暗紫色(如不要用Border="o")
备注： 若使用特殊字体，可以适当考虑一种。
3.1.1.3 多个子系统的协调
若多个子系统由不同的人开发，且需要统一风格，则需要对系统中所需文字和其他元素进行统一定义（如有可能，使用宏定义）。
对文字的定义包括字体、字号、颜色、修饰等。 建议的文字定义列表包括：
4
154845814.doc
3.1.2 具体图像要求
3.1.2.1
页面用图通则
1、屏幕分辨率800*600，大字体。
2、页面所有图象的总和限制在100K以内。 3、图象格式要求（动画除外）
1）128色以下用GIF图。 2）128色以上用JPG图。
以保证图象占用空间最小。
4、 插入图像时要加上相应的代替文字,图象上有文字的按图象上的文字写，无文字的图不写替换文字。 5、 页面缺省背景设为白色，以避免浏览器间的差异。 6、 图像名及扩展名全部使用小写字母。
1） 同一产品图象应使用同一级的IMAGES 目录。 2） 图象命名规则：
a. 图象种类（英文名）---功能---编号。扩展名
b. 图象编号为“00”的图象为最终采用的图象，其他为备份
图象。
3） 图象种类有以下几种：
a. 标题图------banner b. 按扭--------button c. 插图--------picture d. 背景--------bg
举例如下：
背景图 button-first-00.gif
7、 尽量避免使用红色图标。
8、 button和message尽量不用.git图的形式出现
5
154845814.doc
3.1.2.2 标题图
1、 置于帧中最上面 2、 大小一致
3、 各产品风格统一
4、 颜色，位置，图象可以各异
3.1.2.3 背景图要求
同一产品背景图统一。
3.1.2.4 亚信公司标志图
文件名：asiainfologo-00.jpg或gif 均link到http://www.asiainfo.com。 一般为终端用户做的产品，只需声明文字＂由亚信公司提供＂。
3.1.2.5 出错提示图
所有产品采用同一风格的出错提示页。 插图：提示信息用统一的提示图。
3.1.2.6 成功提示图
所有产品采用同一风格的出成功示页。
● 如果数据库中有相应信息如：增加、删除、成功则提供出相应的不同于上次的数据结果。 ● 在删除数据时，应用统一的 Java script提示确实删除的提示信息。 ● 无数据库操作成功用统一的操作提示图。 对于其他情况的提示可以自定。
插图：在提示信息左右两边加统一的提示图。
3.2 控件设计
3.2.1 按钮设计要求
3.2.1.1
按钮种类
统一种类如下
● [确 定 ] BUTTON
6
154845814.doc
● ● ● ● ●
[清 空 ] BUTTON 在帧中中间对齐
确定和清空之间要保持两个空格的间隙
成为成品零件，避免同一意思而文字异样情况。
按钮上的文字，尽量使用以上两种，如不能明确表达意思，可选其他文字，当表达其它意思时尽量简单明了，例如：＂录入＂不要有＂录入用户＂。
在各产品中均应统一风格和样式，同一产品按钮尺寸一致、图像用字字体及颜色一致，作为零件提供。
3.2.2 页面表单（FORM）及查询结果表格（TABLE）设计
3.2.2.1
●
●
查询表单
表单放于表格中，排列整齐一致，以美观为主。
表单中的项目名称尽量保持字数一致，禁止使用＂冒号＂例如：＂项目名称＂禁止用＂项目名称：＂
3.2.2.2
● ●
查询结果表格
产品保持风格统一，以美观为主。
如不体现Border宽度设为Border="0", 如需体现出border的宽度， Talbe 中Border ="1" Cellspacing ="0" Cellpadding ="0" 如不太清晰配合 bgcolor="x"加以区分
7
第4章 界面设计指南
4.1 基本原则
● 一致性 ● 易用性
● 界面布局合理性（包括颜色、字体、对齐、排列、拥挤度、有效组合、……） ● 错误信息处理原则 ● 安全性
● 根据业务对象及其相应的界面对象去思考，而不是从应用软件本身去思考；
总的设计原则：
界面直观、对用户透明：用户接触软件后对界面上对应的功能一目了然、不需要多少培训就可以方便使用本应用系统。界面设计员应该明白软件中用户是所有处理的核心，不应该由应用程序来决定处理过程，所以用户界面应当由用户来控制应用如何工作、如何响应，而不是由开发者按自己的意愿把操作流程强加给用户。
4.2 界面标准评测表
4.2.1 一致性
4.2.2 易用性
同时支持生手和熟手。并非每个用户都是计算机的熟练用户，面对隐藏的层和特殊设计的菜单可能会抓瞎，用户不见得能明白双击左键能自动滚屏或者怎样能让自动滚屏停下来、直接看最下面的结果。交互设计师特别需要重视的就是系统的易用性。有条件的话，可以让不同的陌生用户从首页开始操作，不给予任何提示和帮助，观察用户的上手和熟练程度，记录并查找所有的陷阱和缺陷，加以改进。
4.2.3 界面布局合理性（包含美观与协调性）
布局力求简洁、有序、易于操作。注意在一个窗口内部所有控件的布局和信息组织的艺术性,使得用户界面美观。如：
在一个窗口中按tab键,移动聚焦的顺序不能杂乱无章； tab 的顺序是先从上至下、再从左至右；
4.2.4 错误信息处理
凡是软件都是有BUG的，因此对各种出错或异常状态给予用户一个友好的提示和帮助，并提示用户大概是由于什么原因，那么用户会愉快的多。
笔者遇到过一个用户注册系统，用户注册后希望修改密码，有的能做成功，而有些人怎么也改不了，检查了很长时间才发现由于密码设置的是不少于三位不大于八位，许多用户密码超过了八位，因此无法修改成功，但是由于没有提示出错原因，所以用户就不断拼命地提交，最后只好愤怒地去投诉。
再例如发布信息的时候，可能会因为填写时间过长，提交时被系统拒绝数据丢失，那么用户辛辛苦苦撰写的内容永远消失了，还有什么比这个更令用户沮丧的吗？在填写的输入部分给用户一个时间提示，或允许后退找回刚才的内容，至少可以让用户容易接受一些.
4.2.5 安全性
在界面上通过下列方式来控制出错几率，会大大减少系统因用户人为的错误引起的破坏。开发者应当尽量周全地考虑到各种可能发生的问题,使出错的可能降至最小。如应用出现保护性错误而退出系统,这种错误最容易使用户对软件失去信心。因为这意味着用户要中断思路,并费时费力地重新登录,而且已进行的操作也会因没有存盘而全部丢失。
4.2.6 多窗口的应用与系统资源
设计良好的软件不仅要有完备的功能，而且要尽可能的占用最底限度的资源.
第5章 附件
5.1 OpenBoss-GUI界面现有问题简述
通过以下问题简述，从一个侧面可以反映现有GUI设计标准的不完善性。没有标准与规范，无论测试或开发都会陷入一个没有标尺来衡量的处境，需要尽可能避免开发人员发挥个人风格与习惯来主导界面设计的情形。长远来看，只有标准与规范的建立，才能有利于一个优秀产品的诞生。
5.2 OpenBoss-GUI界面评测表 （仅供参考）
154845814.doc
文档修订摘要
亚信联创科技（中国）有限公司版权所有
文档中的全部内容属亚信联创科技（中国）有限公司所有， 未经允许，不可全部或部分发表、复制、使用于任何目的。
154845814.doc
目录
第1章 第2章
序言···················································································································································· 1 界面框架设计 ··································································································································· 2
2.1 页面分类 ··································································································································· 2
2.2 页面内容构成划分 ···················································································································· 2 2.2.1 主页 ··································································································································· 2 2.2.2 查询页 ······························································································································· 3 2.2.3 查询结果页 ························································································································ 3 2.2.4 出错提示页和用户信息提交成功页 ·················································································· 3 2.2.5 帮助页 ······························································································································· 3 第3章
界面元素设计 ··································································································································· 4
3.1 基本元素设计 ···························································································································· 4 3.1.1 页面用字规定 ···················································································································· 4 3.1.2 具体图像要求 ···················································································································· 5 3.2 控件设计 ··································································································································· 6 3.2.1 按钮设计要求 ···················································································································· 6 3.2.2 页面表单（FORM）及查询结果表格（TABLE）设计 ··················································· 7 第4章
界面设计指南 ··································································································································· 8
4.1 基本原则 ··································································································································· 8 4.2 界面标准评测表 ························································································································ 8 4.2.1 一致性 ······························································································································· 8 4.2.2 易用性 ······························································································································· 9 4.2.3 界面布局合理性（包含美观与协调性） ········································································ 10 4.2.4 错误信息处理 ·················································································································· 10 4.2.5 安全性 ····························································································································· 11 4.2.6 多窗口的应用与系统资源 ······························································································· 12 第5章 5.1 5.2
附件···················································································································································· 1 OPENBOSS-GUI界面现有问题简述 ······························································································ 1 OPENBOSS-GUI界面评测表 （仅供参考） ············································································· 1
ii
154845814.doc
第1章 序言
为适应目前产品页面制作的需要，规范页面制作，统一产品的风格，直接展示公司产品的特色，树立自己的产品形象。
对大多数人来说，用户界面就是软件本身。
1、 首先，用户界面越直观，就越易用；
2、 界面越好，培训用户就越容易，降低了培训成本； 3、 界面越出色，用户就越少求助，降低了客户支持成本；
4、界面越出色，用户就喜欢使用，增强了开发者工作的满意度。
5、设计合理的界面能给用户带来轻松愉悦的感受和成功的感觉，相反由于界面设计的失败，让用户容易产生有挫败感
总之，好的用户界面使得人们不用阅读用户手册或接受培训就能使用此应用软件。
1
154845814.doc
第2章 界面框架设计
2.1 页面分类
目前以每个产品为单位进行页面划分。
其层次如下
1． 主页页面----查询条件输入页面
2． 二级页面----查询结果页面，出错提示页面,用户信息提交成功页 3． 三级页面----查询结果详细情况页面 4． 其它深层次信息页面
页面种类可分为
1． 用户注册页 2． 查询页 3． 查询结果页 4． 出错提示页
5． 用户信息提交成功页
6． 帮助页统一的帮助页格式 制定统一模板 7． 其它
2.2 页面内容构成划分
2.2.1 主页
● 文件名：index.htm,产品分不同用户主页，使用不同的英文*.htm.
● 各产品可考虑加引导页备用 ● 采用分帧方式
● 采用两主帧方式,各帧所占百分比按需要决定。 ● 一.二次功能要直接列在左面一帧中
● 左面一帧文件名：left.htm,右面一帧文件名是产品介绍:应用 about.htm ● 左面一帧包括：当前选择的功能一定要用不同颜色在左帧中表示出来
亚信版权标志。（具体要求参见7.3） 帧边距设为“0”。 ● border设置为“0”。 ● 主页要设定标题文字
例如：AIACCOUNT主页里设置（TITLE=“AIACCOUNT”）。
● 主页设定颜色应体现亚信的产品风格体现兰色感觉，以兰色为主链结色。
2
154845814.doc
2.2.2 查询页
●
● ● ● ●
一般情况查询层次不多于4次,次级页面要有返回主页的链接 查询条件表单（具体要求参见6.1） 控制按钮（具体要求参见4.1） 标题图（具体要求参见7.1） 背景图（具体要求参见7.2）
2.2.3 查询结果页
● 查询结果表格（具体要求参见6.2）
● 背景（具体要求参见7.2） ● 标题图（具体要求参见7.1）
2.2.4 出错提示页和用户信息提交成功页
●
● ● ● ●
文件名：error.htm 和feedback.htm 要求：各产品采用同一风格出错提示页 出错文字提示（具体要求参见7.4） 示意性图（具体要求参见7.4） 背景（具体要求参见7.2）
2.2.5 帮助页
参照后面的示例
3
154845814.doc
第3章 界面元素设计
3.1 基本元素设计
3.1.1 页面用字规定
中文字
字体规定使用如下
黑体，隶书---------用于标题，同一产品不得变化。 宋体 ---------用于正文和注解（为浏览器默认字）
3.1.1.1 英文字
可选用以下两种之一
Arial 字体 Times New Roman 字体
3.1.1.2 字颜色
正文文字-------统一用黑色
链接文字------统一用兰色(如不要用Border="o")
访问过的链接文字-------统一用暗紫色(如不要用Border="o")
备注： 若使用特殊字体，可以适当考虑一种。
3.1.1.3 多个子系统的协调
若多个子系统由不同的人开发，且需要统一风格，则需要对系统中所需文字和其他元素进行统一定义（如有可能，使用宏定义）。
对文字的定义包括字体、字号、颜色、修饰等。 建议的文字定义列表包括：
4
154845814.doc
3.1.2 具体图像要求
3.1.2.1
页面用图通则
1、屏幕分辨率800*600，大字体。
2、页面所有图象的总和限制在100K以内。 3、图象格式要求（动画除外）
1）128色以下用GIF图。 2）128色以上用JPG图。
以保证图象占用空间最小。
4、 插入图像时要加上相应的代替文字,图象上有文字的按图象上的文字写，无文字的图不写替换文字。 5、 页面缺省背景设为白色，以避免浏览器间的差异。 6、 图像名及扩展名全部使用小写字母。
1） 同一产品图象应使用同一级的IMAGES 目录。 2） 图象命名规则：
a. 图象种类（英文名）---功能---编号。扩展名
b. 图象编号为“00”的图象为最终采用的图象，其他为备份
图象。
3） 图象种类有以下几种：
a. 标题图------banner b. 按扭--------button c. 插图--------picture d. 背景--------bg
举例如下：
背景图 button-first-00.gif
7、 尽量避免使用红色图标。
8、 button和message尽量不用.git图的形式出现
5
154845814.doc
3.1.2.2 标题图
1、 置于帧中最上面 2、 大小一致
3、 各产品风格统一
4、 颜色，位置，图象可以各异
3.1.2.3 背景图要求
同一产品背景图统一。
3.1.2.4 亚信公司标志图
文件名：asiainfologo-00.jpg或gif 均link到http://www.asiainfo.com。 一般为终端用户做的产品，只需声明文字＂由亚信公司提供＂。
3.1.2.5 出错提示图
所有产品采用同一风格的出错提示页。 插图：提示信息用统一的提示图。
3.1.2.6 成功提示图
所有产品采用同一风格的出成功示页。
● 如果数据库中有相应信息如：增加、删除、成功则提供出相应的不同于上次的数据结果。 ● 在删除数据时，应用统一的 Java script提示确实删除的提示信息。 ● 无数据库操作成功用统一的操作提示图。 对于其他情况的提示可以自定。
插图：在提示信息左右两边加统一的提示图。
3.2 控件设计
3.2.1 按钮设计要求
3.2.1.1
按钮种类
统一种类如下
● [确 定 ] BUTTON
6
154845814.doc
● ● ● ● ●
[清 空 ] BUTTON 在帧中中间对齐
确定和清空之间要保持两个空格的间隙
成为成品零件，避免同一意思而文字异样情况。
按钮上的文字，尽量使用以上两种，如不能明确表达意思，可选其他文字，当表达其它意思时尽量简单明了，例如：＂录入＂不要有＂录入用户＂。
在各产品中均应统一风格和样式，同一产品按钮尺寸一致、图像用字字体及颜色一致，作为零件提供。
3.2.2 页面表单（FORM）及查询结果表格（TABLE）设计
3.2.2.1
●
●
查询表单
表单放于表格中，排列整齐一致，以美观为主。
表单中的项目名称尽量保持字数一致，禁止使用＂冒号＂例如：＂项目名称＂禁止用＂项目名称：＂
3.2.2.2
● ●
查询结果表格
产品保持风格统一，以美观为主。
如不体现Border宽度设为Border="0", 如需体现出border的宽度， Talbe 中Border ="1" Cellspacing ="0" Cellpadding ="0" 如不太清晰配合 bgcolor="x"加以区分
7
第4章 界面设计指南
4.1 基本原则
● 一致性 ● 易用性
● 界面布局合理性（包括颜色、字体、对齐、排列、拥挤度、有效组合、……） ● 错误信息处理原则 ● 安全性
● 根据业务对象及其相应的界面对象去思考，而不是从应用软件本身去思考；
总的设计原则：
界面直观、对用户透明：用户接触软件后对界面上对应的功能一目了然、不需要多少培训就可以方便使用本应用系统。界面设计员应该明白软件中用户是所有处理的核心，不应该由应用程序来决定处理过程，所以用户界面应当由用户来控制应用如何工作、如何响应，而不是由开发者按自己的意愿把操作流程强加给用户。
4.2 界面标准评测表
4.2.1 一致性
4.2.2 易用性
同时支持生手和熟手。并非每个用户都是计算机的熟练用户，面对隐藏的层和特殊设计的菜单可能会抓瞎，用户不见得能明白双击左键能自动滚屏或者怎样能让自动滚屏停下来、直接看最下面的结果。交互设计师特别需要重视的就是系统的易用性。有条件的话，可以让不同的陌生用户从首页开始操作，不给予任何提示和帮助，观察用户的上手和熟练程度，记录并查找所有的陷阱和缺陷，加以改进。
4.2.3 界面布局合理性（包含美观与协调性）
布局力求简洁、有序、易于操作。注意在一个窗口内部所有控件的布局和信息组织的艺术性,使得用户界面美观。如：
在一个窗口中按tab键,移动聚焦的顺序不能杂乱无章； tab 的顺序是先从上至下、再从左至右；
4.2.4 错误信息处理
凡是软件都是有BUG的，因此对各种出错或异常状态给予用户一个友好的提示和帮助，并提示用户大概是由于什么原因，那么用户会愉快的多。
笔者遇到过一个用户注册系统，用户注册后希望修改密码，有的能做成功，而有些人怎么也改不了，检查了很长时间才发现由于密码设置的是不少于三位不大于八位，许多用户密码超过了八位，因此无法修改成功，但是由于没有提示出错原因，所以用户就不断拼命地提交，最后只好愤怒地去投诉。
再例如发布信息的时候，可能会因为填写时间过长，提交时被系统拒绝数据丢失，那么用户辛辛苦苦撰写的内容永远消失了，还有什么比这个更令用户沮丧的吗？在填写的输入部分给用户一个时间提示，或允许后退找回刚才的内容，至少可以让用户容易接受一些.
4.2.5 安全性
在界面上通过下列方式来控制出错几率，会大大减少系统因用户人为的错误引起的破坏。开发者应当尽量周全地考虑到各种可能发生的问题,使出错的可能降至最小。如应用出现保护性错误而退出系统,这种错误最容易使用户对软件失去信心。因为这意味着用户要中断思路,并费时费力地重新登录,而且已进行的操作也会因没有存盘而全部丢失。
4.2.6 多窗口的应用与系统资源
设计良好的软件不仅要有完备的功能，而且要尽可能的占用最底限度的资源.
第5章 附件
5.1 OpenBoss-GUI界面现有问题简述
通过以下问题简述，从一个侧面可以反映现有GUI设计标准的不完善性。没有标准与规范，无论测试或开发都会陷入一个没有标尺来衡量的处境，需要尽可能避免开发人员发挥个人风格与习惯来主导界面设计的情形。长远来看，只有标准与规范的建立，才能有利于一个优秀产品的诞生。
5.2 OpenBoss-GUI界面评测表 （仅供参考）