2009数字媒体创新课程-7班X组
xxxxxx 系统
用户界面设计说明书
第I页 共24页
2009数字媒体创新课程-7班X组
文档信息:
文档名称
描述
负责人
状态
文档变更历史:
“XXXXXXX 系统”用户界面设计说明书
本文档对系统界面的布局、设计风格、交互部分进行描述,包括界面
原型的展示。用户对界面设计的需求参考《需求分析说明书》;与艺
术设计相关的其他动态部分(例如项目需要用到的 flash 制作的互动动
画、影视以及音乐等非静态媒体)详细说明另参考《UI 动态设计》。
江海
0.9 版
时间
版本号 修改人
章节
描述
2009-9-5
0.9
江海
所有章节
用户界面设计说明书(样稿)-初稿
文档路径:
审核结果:
第2页 共24页
2009数字媒体创新课程-7班X组
审核人
审核时间
意见
签名档
备注
第3页 共24页
2009数字媒体创新课程-7班X组
目 录
1. 引言..................................................................................................................................... 7
1.1 编写目的....................................................................................................................................7
1.2 背景............................................................................................................................................7
1.3 定义............................................................................................................................................7
1.4 参考资料....................................................................................................................................8
2. 任务概述............................................................................................................................. 9
2.1 目标............................................................................................................................................9
2.2 项目描述....................................................................................................................................9
2.3 用户特点.....................................................................................................................................9
3. 用户界面设计规范............................................................................................................10
3.1 用户界面设计原则..................................................................................................................10
3.2 界面一致性...............................................................................................................................10
3.2.1 显示信息一致性标准....................................................................................................10
3.2.2 布局合理化原则............................................................................................................11
3.2.3 鼠标与键盘对应原则....................................................................................................11
3.2.4 快捷键............................................................................................................................11
3.3 向导(WIZARD)使用原则..................................................................................................... 13
3.4 系统响应时间的界面表现.......................................................................................................13
3.5 用户帮助设施...........................................................................................................................14
3.6 出错信息和警告.......................................................................................................................14
第4页 共24页
2009数字媒体创新课程-7班X组
3.7 命令交互...................................................................................................................................15
3.8 一般交互原则...........................................................................................................................15
3.9 信息显示原则...........................................................................................................................15
3.10 数据输入原则.........................................................................................................................16
4 用户界面设计更改和追加说明............................................................................................. 17
4.1 更改说明...................................................................................................................................17
4.2 追加说明...................................................................................................................................17
5. 用户界面设计....................................................................................................................17
5.1 全局用户界面设计..................................................................................................................17
5.1.1 结构布局........................................................................................................................17
5.1.2 整体风格........................................................................................................................18
5.2 首页界面设计..........................................................................................................................19
5.1.1 结构布局........................................................................................................................19
5.1.2 动漫作品部分设计........................................................................................................19
5.1.3 原创歌曲排名部分设计................................................................................................19
5.1.4 合作区部分设计............................................................................................................20
5.1.5 粉丝团活动部分设计....................................................................................................20
5.2 歌曲征集活动界面设计..........................................................................................................20
5.2.1 歌曲征集母版页设计....................................................................................................20
5.2.2 歌曲征集首页设计........................................................................................................23
5.2.3 歌曲征集歌曲播放页设计............................................................................................23
5.2.4 歌曲征集最新歌曲列表页设计....................................................................................23
5.2.5 歌曲征集投票排行页设计............................................................................................23
第5页 共24页
2009数字媒体创新课程-7班X组
6. 附录与说明.......................................................................................................................... 23
第6页 共24页
2009数字媒体创新课程-7班X组
1. 引言
本文档对系统界面的布局、设计风格、交互部分进行描述,包括界面原型的展示。用户对
界面设计的需求参考《需求分析说明书》;与艺术设计相关的其他动态部分(例如项目需要用到
的 flash 制作的互动动画、影视以及音乐等非静态媒体)详细说明另参考《UI 动态设计》。
1.1 编写目的
本文档的编制是为了让用户和软件开发者双方对该开发软件的 UI(User Interface)初始规定
有一个共同的理解,定义所要开发的“XXXXXXX 系统”的用户界面布局、风格等设计目标。是
整个项目中软件产品开发设计与实现的重要根据,也是软件产品的测试和验收的依据。
该说明书的读者为该项目的客户以及项目开发人员。
1.2 背景
1. 本系统名称:XXXXXXX 系统;
2. 本系统的需求提出者:指导老师;
本系统开发单位:数字媒体 07 级 7 班 X 组
本系统的用户:
3. 客户要求浏览器为 MS IE 浏览器,版本为 6.0 及以上。
4. 本系统为 Windows 平台下 B/S 模式网络版。
1.3 定义
定义关键词如下:
1. UI:User Interface 用户界面,又称人机界面,实现用户与计算机之间得通信,以控制计
算机或进行用户和计算机之间的数据传送的系统部件。
2. GUI:即图形用户界面,一种可视化得用户界面,它使用图形界面代替正文界面。
第7页 共24页
2009数字媒体创新课程-7班X组
3. HTTP:Hyper Text Transfer Protocol (超文本传输协议)
4. HTML:Hyper Text Markup Language (超文本标记语言)
5. Web Browser:万维网浏览器
6. DateBase:数据库
7. ODBC:开放数据库连接
8. IPO:Input & Process & Output(输入、处理、输出)
9. B/S:服务器/浏览器模式
10. XML:扩展标记语言。
11. SQL:结构化查询语言。
12. Ajax:Asynchronous JavaScript + XML(异步的 XML 和 JavaScript)
1.4 参考资料
[1] GB/T 11457:软件工程术语
[2] GB/T 8566 —1995:计算机软件开发规范
[3] GB 8567:计算机软件产品开发文件编制指南
第8页 共24页