用户界面设计说明书.doc

耀邦科技有限公司

［项目名称］
用户界面设计说明书
版本 x.y
[文档ID] [vx.y]

修订历史
修订日期
版本
修订说明
作者
生效日期
2002-4—17
vx.y。z
做了哪些修改
谁修改的
批准日期

目录
1. 简介 2
1。1 背景 2
1。2 目标 2
1.3 参考资料 2
1。4 术语表 2
2。 用户界面需求 2
3. 界面总体风格 2
3。1 页面风格 2
3.2 按钮风格 2
3.3 文字风格 2
3。4 表单风格 2
3。5 图象风格 2
4。 用户界面清单 2
5。 用户界面图集 2
5。1 子系统一 2
5。1。1 界面一 2
用户界面设计说明书
注意：模板中蓝色字体为撰写本文档的说明或提示，请于文档完成时删除.
用户界面设计说明书(User Interface Design Specification，UIDS），对软件的用户界面风格、布局、操作流程等进行全面说明.
1. 简介
1.1 背景
简要说明待开发的软件系统的名称、版本和将要实现的功能.
1.2 目标
说明本用户界面设计所要达到的目标以及详细程度.
1.3 参考资料
列出与本文密切相关的参考资料,如:
² 属于本项目的其它已发表的文件，如需求规格说明书、总体设计说明书等；
² 本文件中各处引用的文件、资料，包括所要用到的软件开发标准。
名称
ID
版本
获取方式

1.4 术语表
列出本文件中用到的专门术语的定义和外文缩写的词组。
术语
解释

注意:1.3、1.4如果内容太多,可移至文档末尾
2. 用户界面需求
简要说明系统对用户界面的需求以及设计时的考虑.
本节对应软件需求中对用户界面的要求。
3. 界面总体风格
本节描述本产品所有界面必须统一采用的风格。对应于总体设计阶段的用户界面设计。
以下以Web界面的典型风格说明怎样进行总体风格设计。
3.1 页面风格
页面总体风格包括主色调、背景图(一个产品应该运用统一的背景图）、公司标志（在公司的多个标志中选择一个）、适用的图象分辨率、分帧等。
另外，对于不同的页面，应将可能出现的页面分类，并分别描述各类页面应包含的内容。分类的方式可以按照页面层次分，也可以按照页面种类分，例如：
按层次分：
² 一级页面——查询条件输入页
² 二级页面——查询结果输出页、查询出错提示页、用户信息提交成功页
² 三级页面——查询结果详细信息输出页
² 四级页面—-其它深层次页面
按种类分：
² 主页
² 用户注册页
² 查询页
² 查询结果页
² 出错提示页
² 用户信息提交成功页
² 帮助页
² 其它
3.2 按钮风格
按钮的颜色、大小、间距等.同样也可分成几类分别描述，如工具栏中的按钮、查询页中的按钮等。
3.3 文字风格
文字的大小、颜色、字体、间距等。可分为中文字、英文字；也可分为正文文字、按钮中文字、超链接文字等分别描述。
3.4 表单风格
如：
² 位于页面正中
² 是否适用“冒号”,如“项目名称”还是“项目名称：”
² 背景颜色，或不同颜色分别代表什么含义
² 边框是立体的还是平面的还是其它什么样的
² ……
3.5 图象风格
如：
² 图象大小限制(一般应有一上限）
² 图象格式（规定几种标准格式如.gif,。jpg等，一般最好不要用.bmp等）
² 图象命名（可以考虑先分类后命名，如bg—01，bg—02，banner-01,banner-02,button-open，button—close等）
4. 用户界面清单
本节及以下节对应详细设计阶段对用户界面的设计。
在此列出主要的用户界面文件并说明其用途及相关的组件/模块。
代码
名称
所属子系统
相关组件/模块
描述
UI1.1
logon。htm
/
/

UI1。2
index。htm
/
/

UI2。1
serv1。htm
SERV1
/
服务端子系统1登录
UI2.2
ddf。htm
SERV1
DDF管理
DDF设备信息录入
UI2。3
odf。htm
SERV1
ODF管理
ODF设备信息录入
5. 用户界面图集
以下按照各个子系统分别列出用户界面的图集。这部分可根据项目情况选择裁剪或后补。
5.1 子系统一
以图形形式表示本子系统各界面的处理流程。
5.1.1 界面一
Ó成都耀邦科技有限责任公司，2005 Page 6 of 6