食物口袋系统前端开发与设计

摘  要：食物口袋贴近现在“快”的时代。不仅节省了大家的时间，还为人们生活水平提高做出了贡献。相对较传统外卖软件，食物口袋更便利，0配送0起送以及最快30分钟送达，实时性强，食物充裕，发展潜力巨大。

    app开发采用了Axure和PS进行排版设计，有网站首页、分类、购物车、登录页、出售消息、求购消息、个人中心、会员页、后台管理等页面，界面设计以粉色为主，极强的表现了现代化慵懒生活。app版块多以卡通的形状作为基础设计，紧贴食物主题。布局丰富多彩，符合交互要求。app结合Axure、ps等的使用完成了注册登录、搜索、会员中心、后台管理等功能。Web端发采用了div+css开发技术，有首页、快乐工作、关于我们、加入我们四个页面，简单利落的概括了网站内容。我设计的项目将以实用和独特的想法呈现给用户便捷，贴心的交互体验。

关键词：DIV+CSS 外卖 PS 

 目 录



1 引言 1

1.1 食物口袋系统的开发背景 1

1.2 食物口袋系统的意义与设计目的 1

2 开发工具及环境介绍 2

2.1 食物口袋系统的开发环境 2

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

2.2.1 AxurePR8 3

2.2.2 Adobe Photoshop CS6 3

2.2.3 IE Tester 4

2.2.4 Adobe Illustrator CC 2017 4

2.3 本项目应用的主要开发技术 5

2.3.1 HBuilder 5

2.3.2 Adobe Dreamweaver CS6 6

3 项目概述 7

3.1 项目概述 7

3.2 项目风险 7

3.3 项目进度计划 7

4 项目需求分析 9

4.1 项目分析 9

4.1.1 APP 9

4.1.2 Web 9

4.2 概要设计 10

4.2.1 APP结构图 10

4.2.2 Web结构图 10

4.2.3 现行研究存在的问题及解决办法 11

5 APP设计 11

6 Web端设计 14

6.1 首页 14

6.2 关于我们界面 16

6.3 快乐工作界面 19

6.4 加入我们界面 21

6.4.1 项目文件命名规范 27

6.4.2 项目文件结构说明 27

7 测试 28

7.1 测试项目 28

7.2 测试例子及其结果 29

7.2.1 效果图测试 29

参考文献 33