小毛旅行APP的设计与制作

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

该项目以Photoshop为主要的开发工具，原型图与交互效果使用Axure RP 8这款软件，该软件可以设置效果图的交互效果，使得用户有较好的体验感，使用HBuilder完成web一级栏目展示的静态官网。主要界面有启动页、引导页、首页、抢票页、订单页面、个人中心页面等。

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

3 项目概述 4

3.1 项目概述 4

3.2 项目风险 4

3.3 项目进度 5

4 需求分析 6

4.1 用户需求 6

4.2 功能需求 6

4.3 同类型APP分析 7

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

5 APP基本要素 9

5.1 设计规范 9

5.2 小毛旅行APP结构图 9

6 APP界面设计 10

6.1 APP原型图设计 10

6.1.1 首页 10

6.1.2 抢票页面 10

6.1.3 订单页面 11

6.1.4 个人中心页面 12

6.1.5 登录 13

6.1.6 账号设置 13

6.1.7 账号操作 14

6.1.8 启动页 15

6.1.9 引导页1 15

引导页2 16

6.1.10 引导页3 17

6.1.11 首页 18

6.1.12 订单页面 24

6.1.13 个人中心 24

6.1.14 设置页面 25

6.1.15 登录页面 28

7 WEB界面设计 30

7.1 WEB功能界面介绍 30

7.2 WEB界面布局介绍 31

7.3 WEB界面实现 31

7.3.1 首页 31

7.3.2 购票 32

7.3.3 设置页面 46

7.3.4 个人中心 49

7.3.5 修改账号 49

7.3.6 登录 50

8 设计原稿 30

参考文献 56