【《外卖订餐APP的设计与实现》9500字（论文）】

-PAGEII-摘要进入互联网时代以来，从衣食住行到消遣娱乐，互联网方便着我们，2003年团购点评软件崭露头角，人们开始接触了解到在线餐饮这一方式，直到2013年前后网上外卖在市场上受到了很多关注，线上外卖平台大量登场。例如，“美团外卖”、“大众评价”、“百度外卖”等，在资本支持下引发了“烧钱战争”，以补助金吸引用户以争夺市场，随着外卖热潮席卷全国，中国在线餐饮与外卖市场迅速发展壮大。现在订购外卖食品已经成为国民必备的生存技术。移动互联网，手机支付的普及也让外卖成为一种方便快捷的就餐方式。在外卖发展的十余年中，中国的手机网民从几千万扩大到9.4亿人，许多外卖平台在创立之初便上线了手机客平台，并随着移动互联网的发展朝气蓬勃，功能也在其间不断完善。截至2019年6月，中国线上外卖用户规模为4亿21万人，占全体网民的一半左右，但仅在十几年前，外卖食品还没有普及，甚至不是料理、餐饮以外的第三种用餐方式。外卖行业的发展预示着网络对我们日常生活的翻天覆地的变化，近几年来，外卖在不超过食物范围的时间内，可以配送鲜花、药品，还可以配送水果和蔬菜等，被人们称为“万物皆可配送”，为了解决不断激增的订单数量，满足特殊需求，国内部分平台无人机、开始尝试用机器人配送食物。业内推测，在未来一段时间内，将会出现人机配合的送餐形式。随着外卖与外卖软件深入人群，一日三餐，饮料蔬果，外卖软件无所不及，本软件本着服务于用户，满足用户日常生活需求的理念，在充分了解用户需求后进行设计与开发，融入创新的设计逻辑，争取做最懂用户的外卖软件，提升用户满意度。关键词：VUE；NODE；外卖目录1前言 -1-1.1本设计的背景 -1-1.2本设计的目的与意义 -1-1.3国内外发展概况 -2-1.4本设计的主要内容 -3-1.4论文组织结构 -4-2相关技术概述 -4-2.1VUE -4-2.2AXIOS -4-2.3MongoDB -4-2.4Webpack -5-3系统分析 -5-3.1概述 -5-3.2需求分析 -5-4系统的设计实现 -8-4.1登录模块功能设计
 -8-4.2首页模块功能设计 -8-4.3订单模块功能设计 -9-4.4服务模块功能设计 -9-5功能模块展示 -10-5.1首页 -10-5.2登录 -11-5.3商家首页 -12-5.4搜索界面 -13-5.5我的界面 -14-5.6加购界面 -15-5.6清空购物车 -16-5.7商家信息界面 -17-6结论 -17-参考文献 -19-1前言1.1本设计的背景外卖最早是叫“打包”，一直以客人预定时间，再到店自提的形式活跃于餐饮业。20世纪80年代，随着电话慢慢进入普通家庭，电话预定外卖的服务开始在国内普遍出现，一般是由顾客直接致电餐馆，预定餐品与预约时间，等待餐厅职员上门送餐，但这种外卖形式效率低下，顾客等待时间一般很长。当时，一些快餐连锁餐饮料牌，如肯德基、麦当劳还设置了专门的订餐呼叫中心，生意异常火爆。而如今，外卖已成为国人居家必备的一项“生存技能”。截至2019年6月，中国线上外卖用户规模为4亿21万人，占全体网民的一半左右，但仅在十几年前，外卖食品还没有普及，甚至不是料理、餐饮以外的第三种用餐方式。外卖行业的发展预示着网络对我们日常生活的翻天覆地的变化，近几年来，外卖在不超过食物范围的时间内，可以配送鲜花、药品，还可以配送水果和蔬菜等，被人们称为“万物皆可配送”，为了解决不断激增的订单数量，满足特殊需求，国内部分平台无人机、开始尝试用机器人配送食物。业内推测，在未来一段时间内，将会出现人机配合的送餐形式。随着生活节奏的加快，加之工作学习压力的加大，越来越多的上班族和学生族开始钟情于进行外卖订餐，外卖订餐APP就是主要针对上班族及学生族的需求进行开发的。手机的普及和移动互联网的快速发展，用户可以利用休息、上下班路上或是奔波途中等碎片化时间登录APP进行订餐。另外上班族在解决温饱的同时也追求美食，学生族在追求便捷的同时，也追求价格低廉。而外卖订餐APP恰好满足了这二者的追求，真正实现了足不出户一日三餐，增加了消费者的就餐选择，并可以进行价格比较，货比三家，大大提升了上班族和学生族的使用兴趣。移动互联网、移动支付的普及，也让外卖成为一种方便快捷的就餐方式。在线上外卖发展的十余年中，中国的手机网民从几千万扩大到8.47亿人，许多外卖平台在创立之初便上线了手机客户端，并随着移动互联网的发展迅速成长。支付方式方面，外卖平台率先接通了支付宝、微信支付系统，还提供平台自带的储蓄钱包，顾客点餐后选择不同的支付方式，无需输入银行卡号，几秒之内便能完成付款。此外，人口密度大、城市化进程加快、劳动力价格低廉也是推动外卖业发展的几个因素。城市外来务工人员增多，为外卖配送输送了大量劳动力，外卖配送员这一职业门槛较低，一条路线又可以同时运送多个订单，大大降低了人力配送成本。因此，中国外卖平台的佣金可以一直保持在15%至20%的低位，只有多数国外平台的一半。1.2本设计的目的与意义外卖APP承载了给予不同用户更加便捷生活、幸福生活的使命，逐渐成为现代人们日常生活中必不可少的一部分。随着可供性理论在产品与交互设计、视觉感受等领域的深化，用户在与外卖APP的界面交互过程中，对界面信息与功能的认知需求也愈加强烈。在体验经济的驱动下，如何设计出一款让用户一目了然，便于理解和操作的APP，用户体验的效果在很大程度上成为评价APP的重要标准。本设计以先行理论为基准，通过将可供性和用户体验设计相融合，提出研究方案和访谈问题。从可供性视角出发，力求对外卖APP的用户体验设计进行更为系统和具体的分析[1]。1.3国内外发展概况1.3.1国外发展概况智能手机就像私人电脑一样，具有独自的操作系统和独立运行内存空间，每个用户自行安装使用APP，智能手机又接入无线网络的能力、开放性的操作系统和触摸式操作等特点，通过移动通信网络来进行网络交互，随着5G时代的到来，智能手机更上一层楼，真正改变着人们生活。外卖是为不方便或不愿意外出就餐的人群提供的一项亲民服务，不方便主要是指条件有限或者外出的成本较高，而不愿意则多数是因为懒，两者的代表可以说分别是白领和大学生。高校市场具有一个不可比拟的优势即学生对配送环节要求不高，配送可以说是外卖O2O最难解决的一个问题，平台难以解决，商家自配送则需要负担额外的人力成本O2O,而大学生对配送要求不高，更注重廉价美食，所以可见大学附近外卖多以商家自行配与学生预定形式，以实现高效外卖。在线订餐模式最早在美国兴起，在美国兴起当然有它独特的文化优势，比如国外的人更喜欢提前预定用餐。纵观美国餐饮业百年发展史，行业发展离不开城市化进程、大众消费的崛起、连锁经营模式的创新等因素，但与国内的外卖场景不同的是，在国外提起外卖，更多得到的是人们的吐槽，外卖员晃晃悠、慢腾腾的步伐，不急不忙的送外卖的场景，或许只有当配送难题得以解决，国外的外卖行业才能真正兴起。1.3.2国内发展概况国内点餐APP发展前景可喜，外卖APP迎合其核心消费群体年轻人的新时尚，实现了手机移动网络订餐、选餐和共同订餐等多重服务功能，在各大平台的激烈竞争与大众使用感受中，外卖软件不只满足于外卖订餐领域，“遛狗了么”，“买菜了么”，将用户的生活照顾的无微不至。各外卖平台蓬勃发展随着移动互联网的快速发展，各大外卖订餐平台之间展开了激烈的商业竞争，纷纷使出浑身解数，争夺市场，吸引消费者。在众多的竞争者中，“饿了么”凭借自身高知名度和市场高占有率在竞争中脱颖而出，可以说是与美团两家独大。从一个日订单量10万的APP，仅仅拥有300人和12个城市的APP，发展到日订单量达到100万单，且拥有2500人和覆盖189个城市的APP。可以说，在O2O商业模式下，谁先占取了线上预订市场，对应的谁就能在线下获得更多的市场，取得更大的利润[2]。现存外卖平台“饿了么”设计优点1、明确的市场定位，“饿了么”自成立初期就将消费核心人群定位在学生一族，目标市场定位于二三线市场的中低档餐厅。这样避免了同当时的“大头”美团外卖、易淘食等外卖订餐平台在一线城市的正面交锋，而是选择在二三线城市的高校周边，迅速下沉抢占了市场，扩展业务。其次，“饿了么”经营模式首先以降低商家进入的门槛，从一开始的收费变免费，只为获得更多商源、扩大用户规模和覆盖范围，争取做一个足够“大”的订餐平台。2、简洁明了的视觉体验，“饿了么”的视觉设计采用扁平化设计，采用的是目前主流的设计风格，具有着年轻化时尚化的特点。在视觉上力争简洁，运用较少的修饰元素，界面简单但具有功能性，大大提高了订餐者在点外卖时的使用效率，提高用户使用幸福感。3、灵活高效的交互方式，APP的交互设计就是为用户创造更好的体验。只有很好地理解用户的使用目的，才能最简化用户的操作流程，并使之最直接、高效地完成相应任务。“饿了么”在交互方法上采用最简单的两种，一是采用页面“下拉”形式作为触发屏幕刷新功能的手势。二是采用的最简单的滚动视图。滚动试图在整个计算机史上都是最常见的元素，从人们拿起鼠标开始起就是采用的滚动视图。使用“饿了么”的用户，用一根手指上下滑动，便可搜索附近的外卖餐厅，查看商家、商品、订单等。这两种最简单的使用手法也是目前最实用的交互方法。不仅上手容易，无须指导即可上手，带来了良好的用户体验，更符合点外卖人群讲求时间和效率的用户需求，使用起来灵活高效，可以非常便利的搜索到适合的餐厅，大大增强了移动交互。4、新颖的内容功能设计，“饿了么”使用积分奖励制和饿了么会员卡来增加用户粘合度，同时提供优惠商品。用户每次在“饿了么”订购外卖都会有积分奖励，积分奖励可以在积分商城里兑换相应的奖品，如代金券、打折券等。消费者还可以购买饿了么会员卡即“吃货卡”，即可享受减免配送费和餐品优惠等会员特权。会员卡分月卡、季卡、年卡，采用“自动续费优惠”模式以吸引大量高黏性会员。另外还有添加了新功能“谁去拿外卖”，通过摇一摇，来决定谁去拿外卖。这一功能特别受到了学生一族的欢迎，同时增加了点外卖的乐趣。现存外卖平台“饿了么”设计缺陷1、订单配送管理混乱，“饿了么”日订单高达百万单，起初设计缺陷系统没有进入到餐厅后台，无法有效快速处理订单、处理餐品，使用饿了么专送等配送方式可时时监控订单进度。但在APP升级后，该问题得到解决，但仍存在订单一旦被商家配送，送出后监管困难，而订餐者催单费时费力，以上种种问题都是由于“饿了么”的线下的订单配送管理的不完善导致的问题，未能形成智能化管理所造成的，相信在不久的将来这一问题也能得到解决[3]。2、外卖品质监控难，“饿了么”虽然拥有的线上良好的用户体验，但外卖订餐APP需要一套能够解决线上线下一体化的方案[4]，而现有的设计不足以整体化的去解决这些问题。“饿了么”存在的一个缺点，就是外卖送至用户时偶尔存在配送服务或商品品质问题，近年3.15晚会不断爆出外卖商家品质问题，甚至有报道存在幽灵商家怪相，外卖品质难以严格把关，用户权益难以外维护，这一问题关乎用户权益及健康问题。1.4本设计的主要内容本设计是一款主打在线外卖、即时配送和餐饮供应链等业务的在线外卖订餐服务平台。与已有外卖平台同样的，用户可以通过订购外卖、购买零售商品等，满足多样的生活需求；商家可以通过入驻平台，吸引网络用户，扩大商家利润[5]。产品定位：为用户提供丰富多样、简单快捷的在线订餐服务，为不同类型的餐饮商户提供基于互联网技术的一体化运营。本设计力求在现有的外卖软件中寻求更适应用户使用习惯的交互与视觉，设计更加高效准确的软件算法，为用户提供简洁便利的使用感受[6]。1.4论文组织结构第一章引言，首先介绍外卖APP的开发背景和意义，然后进行国内外研究剖析，对国内外在外卖行业研究和发展做了一个简要概括，最后对课题中所做的只要工作进行了简单的总结和概述。第二章对相关技术进行简单介绍，主要介绍了本课题中涉及的相关技术。第三章进行客户端的系统分析，介绍了本课题客户端的用户需求、业务需求、功能需求等，致力于做方便用户的外卖软件。第四章客户端的设计与实现，对整个系统结构做了分析，进行了模块划分，针对各个模块进行详细设计和实现。第五章进行模块展示。第六章进行总结与展望，对课题研究的内容与所做的工作进行总结，对未来可以进行的功能提升进行展望。2相关技术概述2.1VUEVue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。这是官网给出的介绍，可能不是那么容易理解。总结来说Vue是一个视图层框架，帮助我们更好的构建应用，在设计使用了Vue全家桶，在使用过程中对技术框架进行了深刻的理解。使用用过程中，最大的体验就是使用Vue和原生JS差别巨大，Vue不再是对DOM直接进行操作，而是通过对数据进行操作，再改变页面，以数据流的形式进行更新，使软件使用起来更加流畅，更新更加迅速。使用Vue进行构建的页面，是由一个个的组件组成的，当组件中定义的数据发生变化时，组件的显示也会跟着变化，且此过程无需刷新页面，这使得用户使用感受更加流畅，同时节约了原本刷新带来的流量损耗，真正实现了为用户考虑。2.2AXIOSAxios是一个基于promise的HTTP库，简单的讲就是可以发送get、post请求。可以说axios的出现取代了jquery的使用，axios相当于连接桥，此桥是智能的，可以自定义浏览器与服务端请求与响应的方式，且相对于其他方式axios的使用更加简洁易懂。axios主要是用于向后台发起请求的，且在请求中做更多是可控功能。2.3MongoDBMongoDB是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。它支持的数据结构非常松散，是类似json的bson格式，因此可以存储比较复杂的数据类型。Mongo最大的特点就是它支持的查询语言非常强大，其语法类似于面向对象的查询语言，几乎可以实现类似关系数据库单表查询的绝大部分功能，而且还支持对数据建立索引。它的特点是高性能、易部署、易使用，存储数据非常方便。主要功能特性有：面向集合存储，易存储对象类型的数据；模式自由；支持动态查询；支持完全索引，包含内部对象；支持查询；支持复制和故障恢复；使用高效的二进制数据存储，包括大型对象（如视频等）；自动处理碎片，以支持云计算层次的扩展性；支持Golang，RUBY，PYTHON，JAVA，C++，PHP，C#等多种语言；文件存储格式为BSON（一种JSON的扩展）；可通过网络访问等。2.4Webpackwebpack是一个目前较为流行的前端项目构建工具，其可以解决当前web开发中所面临的困境。webpack提供了友好的模块化支持，以及代码压缩混淆、处理js版本兼容问题、性能优化等强大的功能，从而让程序员把工作的重心真正放到具体的功能实现上，提高开发效率和项目的可维护性。目前绝大多数企业中的前端项目，都是基于webpack进行打包构建的。这也是本设计使用webpack的主要原因。3系统分析3.1概述进行系统分析时需要按照相应的设计规划要求，对整个系统以及相关的子系统进行全面的分析，并对系统的功能设计进行确认。分析系统的业务流程并获取用户的各种需求信息，只有进行充分的系统分析，明确各个系统模块将要实现的功能和所需的语言及算法，除此之外还需要考虑系统的可行性，还有，系统程序做出来后对社会会产生怎样的影响，做出来后的系统维护、调试和运营所讲面对的问题该怎么解决，充分理解这些问题并解决，最后结合相应的系统开发理论和技术设计出一个完善且尽善美的计算机信息管理系统[7]。3.2需求分析需求分析是软件开发的基础，是极为重要的阶段，例如在该阶段发现一个错误，解决它需要用一小时的时间，到设计、编程、测试阶段，就要花几倍甚至更多的时间才能解决。因此对于系统而言，首先要进行需求分析。开发人员应该对用户的要求及现实环境进行调查和了解[8]。需求分析指的是对各种系统问题进行深入分析，了解问题的根本原因是关键所在，是需求分析之前必做的[9]。在软件工程中，需求分析是一个关键的过程，要不断认识和逐步细化，到可详细定义的程度。在这个过程中，确定客户需要，然后分析和寻找系统的解决方法。需求分析阶段的任务是确定软件系统功能[10]。3.2.1功能需求分析功能需求代表着开发人员需要在系统中装入什么样的功能模块，主要和用户的各种需求有关。用户需求文档详细说明了用户使用产品的主要目的。所有系统在进行开发时，首先都要对这个系统进行软件的需求分析，这是每一个软件开发过程中所必不可少的部分。需要对软件进行详细的分析，确定要做一个什么样的系统，搞清楚客户的需求，以及最终的软件要达到什么样的要求。需求分析是一个非常关键的过程，看清客户的需求，理解客户需要什么，应该实现哪些功能，达到何种效果[11]。所以，需求分析就是为了确定软件的功能。需求分析是在软件开发和设计过程中的一个不可或缺环节[12]。在本阶段，需求分析有助于理清楚开发思路，确定该系统的目标，对系统所需要的基本数据和数据的处理要求进行分析，从而确定管理人员的操作模式和用户的需求[13]。在经过应用商城评价解读，用户调研后列出如下需求场景：需求场景需求简介产品功能订外卖时不太清楚所在的具体的地址名称自动出现当前定位地址名称自动定位在家和公司定外卖地址不同同一用户设置不同的地址管理收货地址想吃某一种外卖搜索商家品类搜索功能没决定想吃的推荐商家，设置商家分类推荐功能、分类功能想要看看哪家销量最高，哪家均价最低商家排序筛选进行商家销量、均价、配送时间排序下单后忘记备注下单后增加备注下单前后备注功能想多个店的一起下单加入购物车，多选支付购物车功能发现点错、漏选订单取消、申请退款取消订单看看外卖送到哪里了跟进配送进度实时查看骑手距离、联系骑手好吃，向其他人推荐店家评价商家商品评价功能吃出异物，要求赔偿赔偿用户索赔功能综上所述，本项目的主要目标是:在现有外卖软件设计上，进行创新设计，致力于打造满足全年龄用户的视觉交互需求，解决现有外卖软件上存在的缺陷[14]：页面复杂繁多，外卖品质难以保障，用户权益难以维护等。3.2.2性能需求分析现在社会发展十分迅速，目前市场手机种类繁多，其中主要操作系统分为安卓与苹果IOS，在软件开发中，软件性能是不可避免的问题，尤其是多平台兼容问题，在以往的开发联系中曾遇见0.5像素兼容，200秒点击延迟，点透时间等问题，在本次开发中也要注重用户体验，确保设计的全面性。同时为保证用户体验，尽可能减少不必要的界面刷新，增加请求速度。1、实用性原则:发挥出手机网络优势，保证系统信息数据的准确性，进行用户准确定位[15]。2、可扩展与维护原则:为了日后进行系统扩展，软件也必须具备一定的可扩展性以及维护性[16]。系统可以根据需要进行适当的扩充和升级，既保证了现在的系统性能，也有利于系统将来的发展。3、安全可靠性原则:在软件使用过程中，注重用户隐私保护，避免用户信息数据的泄露。4、用户界面美观原则:界面设计会结合用户需求进行合理规划，并且也会对按键进行引导性规划，使用户在初次使用时，不需要进行学习。5、易用性原则:软件兼容优良，操作简单，界面简洁，保证用户使用时避免系统错误[17]。3.2.3界面需求分析界面布局和颜色应该根据用户需求进行设定，将实用性、简洁性、方便性、作为界面设计的主要要求[18]，一些控制按钮的位置应该符合用户的使用习惯，并且界面需要具有较高程度的可辨识设计元素，以提高用户体验感、满足用户需求作为第一要素，只有走进用户心里才被使用[19]。4系统的设计实现文件目录设计4.1登录模块功能设计
4.1.1登录模块1、注册:若用户初次使用未注册则必须进行注册，填写相关用户资料信息[20]，在检验用户信息符合标准后，信息将由客户端传至服务端，按照一定的存储方式存储在数据库中，并传回注册成功的结果，提示用户可以进行下一步登录。2、登录:初次使用的用户进行注册后，通过输入对应的用户名和密码后点击登录，客户端会将用户名密码发送至服务器，并在数据库中进行匹配，并将结果返回客户端，验证成功后即跳转在首页界面。4.1.2退出登录模块在用户使用完该系统后或需切换账号时，可以通过点击退出登录，系统保存当前用户的操作并退出当前账号，以便用户操作。4.2首页模块功能设计在登入成功后，系统会根据用户附近的商家的美食、商品，其默认综合排序，用户可根据销量与好评数率排列在首页上，方便用户直接快速选择热门美食与商品，加购下单。4.3订单模块功能设计1、选择美食加入购物车：商家的菜品将以图片的形式展示，更加直观可靠，同时用户可以看到其他用户近期的评价，用户可根据需要点击菜品添加至购物车2、支付:在再一次确认订单信息无误后，用户下一步即可选择“支付宝”或“微信”的方式进行付款。3、查看订单:在完成支付后，可以在订单中查看到当前订单的进度。4、取消订单:若用户取消订单，款项则会返回之前支付所使用的账户中。4.4服务模块功能设计1、订单追踪:可以查看到订单的当前状态，是否已发出，是否派送中，是否已送到。2、服务评价:用户可以根据本次订单的整体反馈，给商家进行评分，从而为其他用户之后的点餐提供帮助，同时也起到督促商家、维护平台的作用。3、用户信息:用户可以根据自己的需要，对注册时候的头像、名称、已经绑定的手机号进行修改，可以对地址进行修改或添加。5功能模块展示5.1首页5.2登录5.3商家首页5.4搜索界面5.5我的界面5.6加购界面5.6清空购物车5.7商家信息界面6结论为了更好的完成系统，需要系统分析，对系统进行功能、需求、性能、界面、可行性等很多方面进行具体、细致的分析了解[21]。在整个开发过程中，通过参考多方文件，阅读相应技术文章，学习了很多关于软件开发及性能优化问题，对日后的学习工作有很大的帮助。在系统程序构建的时候遇到很多问题，如使用axios请求数据存在报错，GET请求需要传参时，后台参数不对，没有接受到参数，通过网络的力量，查询实践，最后得以解决，类似的问题很多，在解决问题的同时也感受到了自己独立完成任务的能力的提升。系统分析是否合理完善和能否建立目标系统有着密切联系[22]，必须保证系统分析的准确性和全面性。在正式进行开发时，代码编程并不用着急，可以花费一定的时间用于进行分析并进行记录。之后按照要求进行代码编程，这样才能保证代码编写的正确性该软件采用目前比较前沿的技术Vue.js实现前端界面，目前本人正在某互联网公司实习，公司正在进行进行多端一致的研究，在此期间我将积极参与研究，努力学习知识，希望通过技术的提高实现一套代码多平台兼容的效果。参考文献[1]周锐,贺志华.基于可供性的外卖APP用户体验设计研究[J].安阳工学院学报,2021,20(02):38-42.[2]郑文静,殷俊.基于O2O模式的外卖订餐APP的设计研究[J].艺术与设计(理论