用户界面设计说明书模板样本.doc

用户界面设计说明书模板

9
2020年4月19日
文档仅供参考，不当之处，请联系改正。
机构图标

{ 项目名称 }

用户界面设计报告

文件状态：
[√] 草稿
[ ] 正式发布
[ ] 正在修改
文件标识：
Company-Project-SD-UI
当前版本：
x.x
作 者：
xx
完成日期：
-06-10

机构公开信息

版 本 历 史

版本/状态
作者
参与者
起止日期
备注

目 录
0. 文档介绍 4
0.1 文档目的 4
0.2 文档范围 4
0.3 读者对象 4
0.4 参考文献 4
0.5 术语与缩写解释 4
1. 应当遵循的界面设计规范 5
2. 界面的关系图和工作流程图 5
3. 主界面 5
4. 子界面A 5
5. 子界面B 5
6. 美学设计 6
7. 界面资源设计 6
8. 其它 6
0. 文档介绍
文档目的
（1）确定用户界面的整体风格，初步设计软件的框架结构，为项目的详细设计、实现、测试和维护提供依据
（2）帮助用户和设计人员了解程序界面设计的原理,
0.1 文档范围
用户界面主界面、各个从界面以及各种图标背景等资源的初步设计。 用户软件使用流程的概要设计。
0.3读者对象
用户、界面设计人员、程序设计人员

0.4 参考文献
例如：
[AAA] 作者，《立项建议书》，机构名称，日期
[SPP-PROC-SD] SEPG，系统设计规范，机构名称，日期
0.5 术语与缩写解释
缩写、术语
解 释
SPP
精简并行过程，Simplified Parallel Process
SD
系统设计，System Design

…

1. 应当遵循的界面设计规范
界面应遵循简洁、友好、全面展示信息的原则
2. 界面的关系图和工作流程图
（1） 给所有界面视图分配唯一的标识符。

（2）绘制各个界面之间的关系图和工作流程图。

3. 主界面
（1） 绘制主界面的视图；

（2）说明主界面中所有对象的功能和操作方式；

4. 子界面A
（1）绘制子界面A的视图；

（2）说明子界面A中所有对象的功能和操作方式；
经过点击主界面的菜单按钮进入子界面A，包含登陆注销功能、开启关闭录像功能和发送哭笑脸功能。

5. 美学设计

（1）主界面采用上下两层布局，上层展示采集到的画面，使用户更直观的获得驾驶信息；底层采用四宫格的基础上，增加中心点，将用户最关注的信息放在最容易获得的地方，极大的方便用户获取所需信息。
（2）界面采用扁平化的设计风格，并采用白蓝两种色彩为基本格调。用简洁友好的界面向用户展现更多的有用信息。

6. 界面资源设计
7.1 图标资源
7.2 图像资源
7.3 界面组件

略

7. 其它