多享APP的设计与制作

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

该项目以Photoshop为主要的开发工具，原型图与交互效果使用Axure RP 9这款软件，该软件可以设置效果图的交互效果，使得用户有较好的体验感，使用Visual Studio Code完成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 2019 2

2.2.2 Axure RP 9 3

2.2.3 Visual Studio Code 3

2.2.4 WPS Office 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结构图 12

6 APP界面设计 13

6.1 APP原型图设计 13

6.1.1 首页 13

6.1.2 精选页面 14

6.1.3 商品详情页面 15

6.1.4 消息页面 16

6.1.5 我的设置 17

6.1.6 发布新的 18

6.1.7 设置信息 19

6.1.8 登录注册页面 20

6.2 APP界面实现 21

6.2.1 启动页 21

6.2.2 引导页1 22

6.2.3 引导页2 23

6.2.4 引导页3 24

6.2.5 引导页4 25

6.2.6 首页 26

6.2.7 精选 31

6.2.8 消息 39

6.2.9 团购 41

6.2.10 我的 42

6.2.11 登录注册 50

7 WEB界面设计 52

7.1 WEB功能界面介绍 52

7.2 WEB界面布局介绍 52

7.3 WEB界面实现 52

7.3.1 首页 52

7.3.2 厨房电器 54

7.3.3 婴童用品 56

7.3.4 床品 60

7.3.5 更多 62

7.3.6 登录 62

总结与展望 68

致谢 69

参考文献 70