乐随享音乐APP设计与制作

摘  要：在当今社会的生活节奏正日益加快飞速发展，人们在忙碌烦闷的生活中最需要好的舒缓压力的方式之一就是聆听音乐，音乐可以给人们带来心灵上的享受，令人心旷神怡最重要的还是得要对得上自己的喜好。如今随着手机、电脑等移动设备的日益完善，我们大家都已经有了在手机、电脑上听自己喜欢的歌曲的习惯，并将自己喜欢的音乐下载到手机电脑里，要知道像往年的做法是大多是用数据线或者蓝牙等无线设备将PC上的歌曲复制几首到手机当中又或者是mp3等设备，反反复复的听，等到听厌了以后，再次装-些歌曲进去，如此反复，非常的麻烦。因此，如果在我们的手机上能实现在线听歌，这将会带来极大的方便。

本次项目是以PHOTOSHOP为主要设计软件设计效果图,以HBUILDER制作网页WEB端代码,交互效果和原型图使用AXUREUL设计。主要功能有引导页（欢迎页、广告页）、首页（每日推荐、猜你喜欢、乐库、排行榜、更多）、乐库（歌手、排行等）、发现（热门、关注）、我的（登录、注册、设置、我的消息、用户资料、个人信息、收藏、最近、下载、帮助）等31张页面。HTML代码编写静态页面有：首页、登录、注册、发现、热门、乐库6张网页版静态页面。

关键词：界面设计 交互设计 音乐播放器 应用程序 PHOTOSHOP HBUILDER  AXUREUL  

目 录

1 引言 1

1.1乐随享APP的开发背景 1

1.2 乐随享APP的意义和设计目的 1

2 开发工具及环境介绍 2

2.1 乐随享APP开发环境 2

2.2 本项目应用的主要开发工具 2

2.2.1 Photoshop CC 2017 2

2.2.2 Axure RP 8 3

2.2.3 HBuilder 9.0.6 3

2.2.4 XMind 7.5 Update 1 3

3 项目概述 4

3.1 项目概述 4

3.2 项目风险 4

3.3 项目进度 4

4 需求分析 5

4.1 用户需求 5

4.2 功能需求 6

4.3 同类型APP分析 8

4.4 现行研究存在的问题及解决办法 8

5 APP基本要素 9

5.1 设计规范 9

5.2 LOGO设计与含义 11

5.3 乐随享APP结构图 12

6 APP界面设计 13

6.1 APP原型图设计 14

6.1.1 首页 15

6.1.2 乐库页面 16

6.1.3 发现页面 17

6.1.4 我的 18

6.1.5 听书页面 19

6.1.6 设置页面 20

6.2 APP界面实现 21

6.2.1 个人页面 22

6.2.2 设置页面 23

6.2.3 登录页面 24

6.2.4 注册页面 25

6.2.5 启动页 26

6.2.6 引导1 27

6.2.7 引导2 28

6.2.8 引导3 32

6.2.9 首页 33

6.2.10 乐库 34

6.2.11 发现 35

6.2.12 我的 37

7 WEB界面设计 38

7.1 WEB功能界面介绍 39

7.2 WEB界面布局介绍 39

7.3 WEB界面实现 40

7.3.1 首页 41

7.3.2 乐库 42

7.3.3 发现 43

7.3.4 热门 44

7.3.5 注册 45

7.3.6 登录 47

总结与展望 50

致谢 51

参考文献 51