“v青春校园短视频”APP的设计与制作

摘  要：项目概述——本app名为“V青春校园短视频”，面向大学生。旨在为大学生提供一个通过拍摄短视频来记录生活，分享生活，展现自我，互相交流的平台。用户可以也可以在“我的校园”查看自己高校正在流行的热门视频，及时参与自己校园的精彩。在“其他校园”看到全国高校校园热门视频，看看全国大学生的潮流；也可以基于地理位置发现附近高校的热门视频，发现附近高校的趣事；还可以在“话题圈”参与你感兴趣的话题，找到志同道合的新朋友。

该项目以Photoshop为主要的开发工具，原型图与交互效果使用Axure RP 8这款软件，该软件可以设置效果图的交互效果，使得用户有较好的体验感，使用HBuilder完成web一级栏目展示的静态官网。主要界面有启动页、引导页、首页（我的校园`、其他校园、话题圈）、关注（视频、评论、点赞、转发）、消息（粉丝、点赞、评论、通知）、我的（设置页面、账户设置页面、作品、喜欢）、用户的登录页面、注册页面等。

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

关键词： 校园短视频   

目 录

1 引言 4

1.1V青春校园短视频APP的开发背景 4

1.2V青春校园短视频APP的意义和设计目的 4

2 开发工具及环境介绍 4

2.1 V青春校园短视频APP开发环境 4

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

2.2.1 Photoshop CC 2017 5

2.2.2 Axure RP 8 5

2.2.3 HBuilder 9.0.6 6

2.2.4 XMind 7.5 Update 1 6

3 项目概述 6

3.1 项目概述 6

3.2 项目风险 6

3.3 项目进度 7

4 需求分析 8

4.1 用户需求 8

4.2 功能需求 8

4.3 同类型APP分析 10

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

5 APP基本要素 12

5.1 设计规范 12

5.2 LOGO展示与含义 12

5.3 V青春校园短视频APP结构图 13

5.4 APP原型图设计 14

5.4.1 首页 14

5.4.2 其他校园页面 15

5.4.3 话题圈页面 16

5.4.4 我的 17

5.4.5 设置页面 18

5.4.6 登录注册页面 19

5.5 APP界面实现 21

5.5.1 引导页1 21

5.5.2 引导页2 22

5.5.3 引导页3 23

5.5.4 首页 24

5.5.5 关注 27

5.5.6 拍摄 33

5.5.7 消息 34

5.5.8 我的 38

5.5.9 登录注册 44

6 WEB界面设计 46

6.1 WEB功能界面介绍 46

6.2 WEB界面布局介绍 46

6.3 WEB界面实现 46

6.3.1 首页 46

6.3.2 我的校园 49

6.3.3 其他校园 51

6.3.4 话题圈 53

6.3.5 登录 55

总结与展望 57