软件设计6找你歌音乐盒用户界面设计说明书.docx
- 文档编号:17517931
- 上传时间:2023-07-26
- 格式:DOCX
- 页数:16
- 大小:1.87MB
软件设计6找你歌音乐盒用户界面设计说明书.docx
《软件设计6找你歌音乐盒用户界面设计说明书.docx》由会员分享,可在线阅读,更多相关《软件设计6找你歌音乐盒用户界面设计说明书.docx(16页珍藏版)》请在冰点文库上搜索。
软件设计6找你歌音乐盒用户界面设计说明书
密级:
普通
文档编号:
2013104-SDD-版次:
第一版
分册名称:
第1册/共1册
找你歌音乐盒
MusicPlayersystem
2013104
界面设计说明书
编写
:
马红丽
校对
:
郑定明
审核
:
蒋辉
批准
:
蒋辉
生效日期
:
2013年05月14日
文件修改控制
修改记录编号
修改
状态
修改页码及条款
修改人
审核人
批准人
修改日期
1
修订
11页-界面的关系图和工作流程图
马红丽
蒋辉
蒋辉
2013-05-17
2
修订
11-重要控件
马红丽
蒋辉
蒋辉
2013-05-17
1.引言
1.1目的
本文档的编写目的在于根据需求规格说明书设计软件人际界面,并说明界面设计中较为复杂的操作流程。
本文档的编制是为了让用户和软件开发者双方对该开发软件的UI初始规范有一个共同的理解,定义所要开发的“找你歌音乐播放系统”的用户界面布局、风格等设计目标。
是整个项目中软件产品开发设计与实现的重要依据,也是软件产品的测试和验收的依据。
该说明书的读者为使用该系统的客户以及项目开发人员。
1.2背景
项目名称:
找你歌音乐盒
项目开发者:
郑定明杨旋段检妹汪演增陈羽翔马红丽
项目用户:
游客注册用户播放器管理员
1.3术语
UI(UserInterface):
用户界面;
1.4人员
姓名
职务
功能需求分析
汪演增、马红丽
详细设计
陈羽翔
数据库设计
杨旋
编码设计
杨旋
架构设计
郑定明
软件开发计划
郑定明
原型
杨旋
软件测试
陈羽翔、郑定明、马红丽
系统首页界面设计
陈羽翔
搜索歌曲显示结果页面设计
陈羽翔
1.5参考资料
《软件工程导论》(第五版)张海藩编著清华大学出版社2008年2月第5版
《找你歌音乐盒需求分析说明书》
《找你歌音乐盒架构设计说明书》
《找你歌音乐盒数据库设计说明书》
2.界面设计规范
2.1标准色定义
主色:
蓝色#4DB6E7
灰色#EFEFEF
亮灰色系为主(45%),蓝色系为辅(35%),绿色(15%),其它彩色(5%)做点缀
2.2规格定义
使用IE10浏览器。
2.3信息显示的一致性
●对于必填项,在字体左侧加上红色星号标志;
●页面弹出提示框
页面提示框是浏览器自带的信息提示框,本项目中所有提示框如下所示
●顶部导航栏
字体:
Arial,Verdana,Helvitica,sans-serif,加粗、18px,white;
背景颜色:
蓝色,当鼠标移至导航条目上时,切换为深蓝色,可以让用户更加醒目。
中间嵌入txtbox文本框,用于输入搜索内容。
●左侧导航栏
左侧导航条以图片为背景
,与网站的基色协调。
在最顶部,是一个以淡蓝色为背景色,字体为黑粗宋体的标签,用来衬托类别的特殊用途。
在下面的列表分类中,用虚线分隔。
当鼠标移到列表名时,加上灰色背景,用来做醒目的用途。
3.页面介绍
3.1页面概要说明
网站logo:
网站logo左上角是由3个音乐元素组成,第一个音符有Find的F的形状,第三个音符Ge中G的形状。
整个背景色是规范的主色,灰色和蓝色
系统首页(FirstPage.aspx):
在首页中,右上角滚动的专辑图片,代表最热的专辑,点击图片可连搜索到该专辑中所有的歌曲。
其余部分为不同种类的歌曲,将鼠标移至分类出会显示该分类中的歌曲,每个歌曲后面有一个试听图标,点击图标可试听歌曲,也可将鼠标移到歌曲名上,字体将会变大变蓝。
整个背景以灰色调为主,当点击歌曲或者试听图标连接到音乐播放页面。
登陆页面(Login.aspx):
登陆界面中的两个文本框空间是水印效果,Tab键可以切换两个文本框的输入,输入账户和密码,登陆按钮是透明绿色为背景色,白色字体的无圆角长方形。
右下角有注册连接,连接是带有下划线,符合一般用户的惯性思维。
点击连接跳转到注册页面。
注册页面(Login.aspx):
注册信息填写区域在虚线区域内,字体颜色是淡蓝色,用户名和昵称是使用了水印效果的文本框,中间有一些提示文字。
这项选项都是必填项。
验证码是随机生成的图片。
立即注册按钮依旧是绿色透明背景,黑色加粗的字体。
整个设计很协调,清晰。
音乐播放页面(PlayPage.aspx):
音乐播放页面分为三个模块,左侧为导航目录点击连接到不同目录下;中间是收藏夹下的音乐列表,列表中每条数据后有删除、下载,添加等操作按钮,当鼠标移至按钮是变化颜色,使用户的操作更加醒目。
双击歌曲,歌曲行会变成经典蓝色,音乐播放条;右侧的专辑图片,歌词加载会随歌曲播放同步加载。
并且歌词会进行蓝色高亮随音乐滚动,给用户更好的视觉和使用体验。
底部为黑色的音乐播放条,有播放、上一曲、下一曲按钮和进度条,音量调节条。
已进行的进度用蓝色代表,总进度用灰色代替,符合本系统的色彩规范。
当鼠标移至功能按钮是会切换成蓝色。
进度条上方为歌曲名。
和歌曲当前播放时间和总时间。
管理员页面:
在管理员页面中可以链接到三个子页面,分别是歌曲管理页面、歌曲上传页面、用户管理页面。
三个页面的设计和音乐播放页面类似,中间右边都属于编辑内容,编辑内容栏里大部分已灰调为主,必填项都是在标签前带有红色星号。
上传歌曲选择文件的按钮是灰色背景图,点击可以弹出文件选择对话框。
其中有三个下拉列表、来选择歌曲的类别与语种。
在歌曲管理页面中主要功能是删除歌曲和歌曲编辑功能,每条歌曲前面都有一个复选框,后面有一个删除图标,表头为灰色图片背景,表格内是白色背景,有两个对应功能的按钮,按钮是.NET自带灰色背景,有立体感的按钮。
字体都是12px子大小。
MV主页面(MVHomePage)
MV播放页面(MVPlayerPage)
在音乐播放页面中,按照网站的规范布局,上面是重用的logo和顶部导航条。
中间是MV播放器。
在底部是最近播放次数最多的MV的推荐。
MV播放器和导航栏与logo同宽,显得布局更加协调。
3.2重要控件说明
Repeater控件:
在本系统中,播放页面和管理员管理歌曲页面的数据绑定都是取用Repeater控件。
在Repeater控件中绑定后台数据,Repeater内容样式是小组成员自己设计,如下图所示,每一行都是Repeater控件中的一行,在控件中放置图片,这样绘制的样式比直接用Gridview更具美感。
4.界面的关系图和工作流程图
本项目中有如下页面:
1.音乐播放页面:
1.1.包含了最近播放列表(LatestPage.aspx);
1.2我的收藏列表(CollectionPage.aspx);
1.3下载列表(DownloadPage.aspx);
2.系统首页(FirstPage.aspx)
3.MV主页面(MVHomePage.aspx)
4.MV播放页面(MVPlayPage.aspx)
5.管理员页面
5.1歌曲管理页面(SongManagePage.aspx)
5.2用户管理页面(UserManagePage.aspx)
5.3歌曲上传页面(UploadSongPage.aspx)
用户和游客的界面关系图:
这里的所有页面中都包含了登陆与注册页面的链接,故将登陆与注册页面隔离开。
在首页中可以点击顶部导航栏链接到MV住页面和播放页面。
在MV页面中点击MV播放就可以跳转到MV播放页面。
在播放页面中可以游客可以链接到最近播放列表页面,已经登陆的用户可以跳转到收藏列表页面和下载列表页面。
管理员界面关系图:
如下所示,管理员一定要先登陆并且登陆成功后条转到管理员页面,使用管理员权限。
通过左侧的导航条目可以分别链接到上传歌曲页面进行上传歌曲、歌曲管理页面可以修改和删除歌曲、用户管理页面对用户的信息进行管理。
5.可重用子系统和模块
4.1MV播放器
在开发本系统时,MV播放器是可重用的控件,只要加入js文件。
这个控件通过更改就可符合别的系统的播放要求。
4.2Music播放器
在开发本系统时,已经绘制好本系统音乐播放条的界面,为了醒目以黑色为背景颜色,以灰色和蓝色最为按钮和进度条、音乐条的颜色。
并且已经将事件绑定,此模块可以提取重用,提供了一个通过传递音乐路径来播放音乐。
这个界面可以移至到任何一个音乐播放系统中。
6.总结与展望
该系统较之以前的所做的项目优点在于减少服务器的负载,在此之前的项目所有的空间都是取用服务器控件,有些在客户端可以完成的事件也后台实现。
该音乐播放系统在前端的UI设计和对服务器端的优化进行了很好的设计。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 软件设计 音乐盒 用户界面 设计 说明书