观潮APP和网站的设计与制作

摘  要：随着当今社会运转速度和人们的生活节奏越来越快，信息流动的速度越来越快，碎片化的内容比长篇表达更适合阅读。而面对现代快节奏高压力，人们急剧上升的个人表达与倾诉沟通的需求和话语权也需要得到满足。但每个人对信息的需求都是个性化的，海量的信息会增加每个人寻找对自己有用信息的成本，因此急需一款能帮助人们制定自己个性化的信息源并使用户完成在海量信息中的重新组织的软件。在这里可以自由评论、自由观看、自由参与其他用户、商家、媒体等发表的动态、活动和话题，增加眼界，交流思想。也可以再平台上面认识与你一样有共同爱好、共同思想的其他用户，APP和网站的实用性和便捷性，是我们一直追求的方向。

该项目以HBuilder和Photoshop为主要的工具，首先我们先以Photoshop这款软件为我们的界面做设计，用Axure RP 8这款软件为我们实现交互图的转换，最后用HBuilder

这款软件制作我们前段的代码，实现基本的静态界面的代码和动效。

论文分为引言、开发工具及环境介绍、项目概述、需求分析、界面设计、交互图与原型图的设计、代码编写、总结和展望八个部分的组成。

关键词：随时随地  快速传播  信息交流  信息推广

目 录

1 引言 6

1.1 观潮APP和网站的开发背景 6

1.2 观潮APP和网站的意义和设计目的 6

2 开发工具及环境介绍 7

2.1 观潮APP和网站的开发环境 7

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

2.2.1 HBuilder 7

2.2.2 Adobe Photoshop 8

2.2.3 Axure RP 8 8

2.2.4 CSS+HTML 9

3 项目概述 10

3.1 项目概述 10

1）APP——loading和引导页 10

2）APP——首页 10

3）APP——视频页 10

3.2 项目风险 11

1) 项目进度 11

2) 技术水平不够 11

3) 项目需求不明确 11

3.3 项目进度 11

4 需求分析 13

4.1 功能性需求概述 13

4.1.1 APP和网站系统总功能结构图 13

4.1.2 主要功能概要说明 13

4.2 现行研究存在的问题及解决办法 13

5 APP和网站的设计 14

5.1 APP界面设计 14

5.2 Axure RP 8交互图和原型图制作 14

5.3 Wed端的制作 14

APP和网站的设计与制作 16

5.4 说明 16

5.4.1 项目文件命名规范 16

5.4.2 设计规范 16

5.4.3 项目的文件结构说明 16

5.5 APP界面设计展示 17

5.5.1 Loading页和引导页的介绍 17

5.5.2 登录注册页的介绍 17

5.5.3 首页介绍 18

5.5.4 视频页介绍 19

5.5.5 发现页介绍 21

5.5.6 消息页介绍 22

5.5.7 我的页介绍 23

5.5.8 原型图展示 26

5.6 网站的页面制作 26

5.6.1 LOGO的介绍 26

5.6.2 首页介绍 27

5.6.3 首页部分代码展示 29

5.6.4 热门动态页介绍 32

5.6.5 热门动态页部分代码展示 33

5.6.6 我的页介绍 40

5.6.7 我的页部分代码展示 41

5.6.8 亚洲好书榜实事趋势页介绍 48

5.6.9 亚洲好书榜实事趋势页部分代码展示 50

5.6.10 热门话题页介绍 63

5.6.11 热门话题页部分代码展示 64

5.6.12 登录注测页介绍 71

5.6.13 登录注册页部分代码展示 72

7.1APP设计 81

7.2网站的制作 82

致谢 83

参考文献与网站 84