鲸之声APP的设计与制作

摘  要：界面设计——在漫长的软件发展中，界面设计工作一直没有受到设计师的关注。用户界面作为关键的交互平台,如何建构更有效的界面风格体系,如何建构更好体现产品性能的特定体系成为智能手机全面开发的重点。当手机用户的需求越来越多,当手机界面操作越来越复杂,对界面设计也提出了更高的要求。界面设计从最初的拟物化设计转变为如今的扁平化设计,逐渐朝着贴近用户的需求、偏好、习惯等方向发展。

该项目以Photoshop为主要的开发工具，原型图与交互效果使用Axure RP 8这款软件，该软件可以设置效果图的交互效果，使得用户有较好的体验感，使用HBuilder完成web一级栏目展示的静态官网。主要界面有启动页、首页（推荐页面、音乐页面、小说页面、搜索页面、分类页面、猜你喜欢页面）、电台（排行榜页面、午夜电台页面、情感电台页面、热门音乐页面、热门小说页面）、播放（电台详情页面、找相似页面）、听书（今日推荐页面、VIP专场页面、精选书籍页面、热门搜索页面、全部分类页面）、我的（设置页面、消息页面、我的收藏页面、历史记录页面、离线缓存页面）、用户的登录页面、注册页面等。

论文分为引言、开发工具及环境介绍、项目概述、需求分析、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 3

3 项目概述 4

3.1 项目概述 4

3.2 项目风险 4

3.3 项目进度 4

4 需求分析 5

4.1 用户需求 5

4.2 功能需求 5

4.3 同类型APP分析 7

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

5 APP基本要素 9

5.1 设计规范 9

5.2 LOGO设计步骤与含义 11

5.3 鲸之声APP结构图 11

6 APP界面设计 12

6.1 APP原型图设计 12

6.1.1 首页 12

6.1.2 电台页面 13

6.1.3 播放页面 14

6.1.4 听书页面 15

6.1.5 我的 16

6.1.6 APP设置 17

6.1.7 登录注册页面 18

6.1.8 登录注册页面 19

6.2 APP界面实现 20

6.2.1 启动页 20

6.2.2 首页 21

6.2.3 电台 27

6.2.4 播放 33

6.2.5 听书 36

6.2.6 我的 42

6.2. 登录注册 48

7 WEB界面设计 50

7.1 WEB功能界面介绍 50

7.2 WEB界面布局介绍 50

7.3 WEB界面实现 50

7.3.1 首页 50

7.3.2 电台 54

7.3.3 音乐 58

7.3.4 听书 63

7.3.5 注册 64

7.3.6 登录 65

总结与展望 70

致谢 71

参考文献 72