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

摘  要：现阶段，随着信息化的快速发展，互联网络技术与移动通信技术发展逐渐成熟，使得智能手机在世界上逐渐普及。当今，越来越多的音乐网站受到人们的喜爱，以音乐为主题的互联网产品需求越来越大。本课题设计了一款同时支持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 CC 3

2.2.2 HBuilder-X 4

2.2.3 Axure RP 8 4

2.2.4 Adobe illustrator CC 2018 4

2.2.5 XMind ZEN 5

2.2.6 DIV+CSS 5

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