软件设计-6找你歌音乐盒--用户界面设计说明书.docx

《软件设计-6找你歌音乐盒--用户界面设计说明书.docx》由会员分享，可在线阅读，更多相关《软件设计-6找你歌音乐盒--用户界面设计说明书.docx（8页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、软件设计-6找你歌音乐盒-用户界面设计说明书 密级：普通 文档编号：2022104-SDD- 版次：第一版分册名称：第 1 册/共 1 册 找你歌音乐盒 Music Player system 2022104 界面设计说明书 编写：马红丽 校对：郑定明 审核：蒋辉 批准：蒋辉 文件修改控制 修改记录编号修改 状态 修改页码及条款修改人审核人批准人修改日期 1 修订 11页-界面的关系图和工 作流程图 马红丽蒋辉蒋辉2022-05-17 2 修订11-重要控件马红丽蒋辉蒋辉2022-05-17 1. 引言 (4) 1.1目的 (4) 1.2背景 (4) 1.3术语 (4) 1.4人员 (4) 1

2、.5参考资料 (4) 2. 界面设计规范 (6) 2.1标准色定义 (6) 3.页面介绍 (8) 3.1页面概要说明 (8) 3.2重要控件说明 (15) 4. 界面的关系图和工作流程图 (16) 5. 可重用子系统和模块 (18) 6. 总结与展望 (19) 1.引言 1.1目的 本文档的编写目的在于根据需求规格说明书设计软件人际界面，并说明界面设计中较为复杂的操作流程。 本文档的编制是为了让用户和软件开发者双方对该开发软件的UI初始规范有一个共同的理解，定义所要开发的“找你歌音乐播放系统”的用户界面布局、风格等设计目标。是整个项目中软件产品开发设计与实现的重要依据，也是软件产品的测试和验收

3、的依据。 该说明书的读者为使用该系统的客户以及项目开发人员。 1.2背景 项目名称：找你歌音乐盒 项目开发者：郑定明杨旋段检妹汪演增陈羽翔马红丽 项目用户：游客注册用户播放器管理员 1.3术语 UI(User Interface)：用户界面； 1.4人员 姓名职务 功能需求分析汪演增、马红丽 详细设计陈羽翔 数据库设计 杨旋 编码设计 杨旋 架构设计郑定明 软件开发计划 郑定明 原型杨旋 陈羽翔、郑定明、马红丽 软件测试 系统首页界面设计 陈羽翔 搜索歌曲显示结果页面设计 陈羽翔 1.5参考资料 软件工程导论（第五版）张海藩编著清华大学出版社2022年2月第5版 找你歌音乐盒需求分析说明书 找

4、你歌音乐盒架构设计说明书 找你歌音乐盒数据库设计说明书 2.界面设计规范 2.1标准色定义 主色： 蓝色#4DB6E7 灰色#EFEFEF 亮灰色系为主（45），蓝色系为辅（35），绿色（15），其它彩色（5）做点缀 2.2规格定义 使用IE10浏览器。 2.3信息显示的一致性 对于必填项，在字体左侧加上红色星号标志; 页面弹出提示框 页面提示框是浏览器自带的信息提示框，本项目中所有提示框如下所示 顶部导航栏 字体：Arial,Verdana,Helvitica,sans-serif，加粗、18px,white; 背景颜色：蓝色，当鼠标移至导航条目上时，切换为深蓝色，可以让用户更加醒目。 中间

5、嵌入txtbox文本框，用于输入搜索内容。 左侧导航栏 左侧导航条以图片为背景，与网站的基色协调。 在最顶部，是一个以淡蓝色为背景色，字体为黑粗宋体的标签，用来衬托类别的特殊用途。 在下面的列表分类中，用虚线分隔。当鼠标移到列表名时，加上灰色背景，用来做醒目的用途。 3.页面介绍 3.1页面概要说明 网站logo: 网站logo左上角是由3个音乐元素组成，第一个音符有Find的F的形状，第三个音符Ge中G的形状。 整个背景色是规范的主色，灰色和蓝色 系统首页(FirstPage.aspx)： 在首页中，右上角滚动的专辑图片，代表最热的专辑，点击图片可连搜索到该专辑中所有的歌曲。其余部分为不同种

6、类的歌曲，将鼠标移至分类出会显示该分类中的歌曲，每个歌 曲后面有一个试听图标，点击图标可试听歌曲，也可将鼠标移到歌曲名上，字体将会变大变蓝。 整个背景以灰色调为主，当点击歌曲或者试听图标连接到音乐播放页面。 登陆页面(Login.aspx): 登陆界面中的两个文本框空间是水印效果，Tab键可以切换两个文本框的输入，输入账户和密码，登陆按钮是透明绿色为背景色，白色字体的无圆角长方形。 右下角有注册连接，连接是带有下划线，符合一般用户的惯性思维。点击连接跳转到注册页面。 注册页面（Login.aspx）： 注册信息填写区域在虚线区域内，字体颜色是淡蓝色，用户名和昵称是使用了水印效果的文本框，中间有

7、一些提示文字。这项选项都是必填项。验证码是随机生成的图片。立即注册按钮依旧是绿色透明背景，黑色加粗的字体。整个设计很协调，清晰。 音乐播放页面(PlayPage.aspx)： 音乐播放页面分为三个模块，左侧为导航目录点击连接到不同目录下；中间是收藏夹下的音乐列表，列表中每条数据后有删除、下载，添加等操作按钮，当鼠标移至按钮是变化颜色，使用户的操作更加醒目。双击歌曲，歌曲行会变成经典蓝色，音乐播放条；右侧的专辑图片，歌词加载会随歌曲播放同步加载。并且歌词会进行蓝色高亮随音乐滚动，给用户更好的视觉和使用体验。 底部为黑色的音乐播放条，有播放、上一曲、下一曲按钮和进度条，音量调节条。已进行的进度用蓝色代表，总进度用灰色代替，符合本系统的色彩规范。当鼠标移至功能按钮是会切换成蓝色。 进度条上方为歌曲名。和歌曲当前播放时间和总时间。