乐耳APP的设计与制作

摘  要：音乐是反应人类情感一种艺术，在人类文明还没有具体的文字之前，人类就已经学会了如何使用音调和声音大小来表达自己心中的情绪了，而音乐的传播形式也在不断地变化，从最古老的口口相传，到后来发展成一种表演形式传颂下去，后来乐谱的发明死的音乐的流传程度得到了更多的保障，之后随着人类文明科学技术的颈部，CD、数字化的传播形式得以出现。得益于音乐对于人类情感抒发的重要性，音乐行业也随之蓬勃发展久经不衰，并在市面上出现了众多的音乐APP软件

该项目以Photoshop为主要的开发工具，原型图与交互效果使用Axure RP 8这款软件，该软件可以设置效果图的交互效果，使得用户有较好的体验感，使用HBuilder完成web一级栏目展示的静态官网。主要界面有起始登录页、引导页、首页（推荐页、音乐馆页、听书页、搜索页、歌单页、播放页）、视频（推荐页、音乐现场页、MV页、TME live页）、社区（广场页、关注页）、我的（我的页、消息中心页、更多页、本地页、粉丝页、个人信息页、我的歌单页、我的关注页、喜欢页）、用户的登录页面、注册页面等。

范文分为引言、开发工具及环境介绍、项目概述、需求分析、APP界面设计、WEB界面设计、前台代码测试、总结与展望和致谢十个部分的组成。

关键词：界面设计 交互设计 乐耳   

目 录

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 5

3 项目概述 6

3.1 项目概述 6

3.2 项目风险 6

3.3 项目进度 6

4 需求分析 7

4.1 用户需求 7

4.2 功能需求 7

4.3 同类型APP分析 8

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

5 APP基本要素 10

5.1 设计规范 10

5.2 LOGO设计步骤与含义 11

5.3 乐耳APP结构图 11

6 APP界面设计 13

6.1 APP原型图设计 13

6.1.1 首页 13

6.1.2 视频页面 14

6.1.3 社区页面 14

6.1.4 我的页面 15

6.1.5 音乐馆页面 16

6.1.6 听书页面 17

6.1.7 登录注册页面 18

6.2 APP界面实现 19

6.2.1 启动页 19

6.2.2 引导页 19

6.2.3 首页 22

6.2.4 视频 25

6.2.5 社区 27

6.2.6 我的 29

6.2.7 登录注册 34

7 WEB界面设计 37

7.1 WEB功能界面介绍 37

7.2 WEB界面布局介绍 37

7.3 WEB界面实现 37

7.3.1 首页 37

7.3.2 我的音乐 47

7.3.3 客户端 48

7.3.4 开放平台 49

7.3.5 搜索 51

总结与展望 52

致谢 53

参考文献 54