一款音乐产品的设计与应用

摘  要：现阶段，随着信息化的快速发展，互联网络技术与移动通信技术发展逐渐成熟，使得智能手机在世界上逐渐普及。当今，越来越多的音乐网站受到人们的喜爱，以音乐为主题的互联网产品需求越来越大。本课题设计了一款同时支持Web端与移动端功能的音乐产品。其中，鉴于Android系统的开源性，本课题移动端功能以Android系统下为例进行设计。

经过对大多数音乐网站的分析，本次作品完成了app的高保真交互稿设计和Web端的页面搭建。该项目采用了HBuilder、PhotoShop和Adobe illustrator界面设计等相关软件技术实现。移动端产品功能包括创建、收藏、分享歌单，；本网站主要页面有网站首页、朋友页面、动态页面，发现页面、下载客户端、创作者中心及我的音乐页面。并且，本网站实现了部分动态效果，给用户带来更好的体验。

关键词：音乐产品 PhotoShop Android系统 HBuilder 

             

目 录

1 引言1

1.1 开发背景1

1.2 意义与设计目的1

2 开发工具及环境介绍3

2.1 开发环境3

2.2 主要开发工具及技术3

2.2.1 Adobe PhotoShop CC3

2.2.2 HBuilder-X4

2.2.3 Axure RP 84

2.2.4 Adobe illustrator CC 20184

2.2.5 XMind ZEN5

2.2.6 DIV+CSS5

3 项目概述7

3.1 app端概述7

3.2 Web端概述7

3.3 项目风险8

3.4 项目进度计划8

4 项目需求分析9

4.1 典型用户分析9

4.2 同类型app分析9

4.2.1 网易云音乐9

4.2.2 酷狗音乐9

4.3 产品用户分析10

4.4 业务流程分析11

4.5 现行研究存在的问题及解决办法12

5 WEB一级栏目展示的静态官网视觉设计概述13

5.1 产品定位与用户群体喜好分析13

5.2 主题色设计13

5.3 Logo设计13

6 APP设计与应用15

6.1 app功能结构15

6.2 app主要设计尺寸15

6.3 app页面设计15

6.3.1 首页设计15

6.3.2 K歌模块设计16

6.3.3 发现模块设计17

6.3.4 视频模块设计17

6.3.5 我的页面模块设计18

6.3.6 登录页面模块设计19

6.4 App的界面交互效果20

7 网站设计与应用21

7.1 网站的设计规范21

7.2 网站的页面结构图21

7.3 网站页面的展示22

7.3.1 首页22

7.3.2 我的音乐页面23

7.3.3 朋友页面24

7.3.4 客户端页面25

8 课题验证27

8.1 课题验证方案27

8.2 测试用例及其结果27

9 总结与展望29

致谢30

参考文献31