毕业设计（论文）-基于iH5的商场导购系统.docx

盐城师范学院毕业设计盐 城 师 范 学 院毕业设计基于iH5的商场导购系统学生姓名 学 院 信息工程学院 专 业 数字媒体技术 班 级 12 （1） 学 号 指导教师 2016年5月16日基于iH5的商场导购系统摘 要 现代信息化社会，商场规模在日益扩大，但是对应的商场导购方式以及便捷程度却并没有跟上商场规模的脚步。传统的商场导购仅限于在商场入口放置商场布局图，已经不能满足顾客的要求。针对此情况，笔者开发了商场导购系统。本系统采用了ih5在线交互设计工具，是基于HTML5的在线交互导购系统，有较强的互动性、展示性。系统从交互和导购的人性化角度出发，让消费者足不出户事先了解商城的货物位置及价格等信息，同时也提供在线订购功能。这种线上线下互动的购物模式可能逐渐成为消费主流。本系统正迎合了人们的这种消费需求，具有较强的现实意义。【关键词】基于iH5；商场导购系统；交互性全套设计加扣 3012250582 Market navigation system based on iH5AbstractFor modern information society, the mall growing fast, but the mall shopping guide and convenient manner do not keep up with the pace of the mall. The mall shopping guide is limited to the entrance traditional mall, it has been unable to meet customer requirements. For this situation, the author developed the mall shopping guide system. This system uses ih5 online interactive design tools, the interactive shopping guide is based on online system HTML5, there is a strong interaction and demonstrative. The system come from a human point of view and interactive shopping guide of departure, so that consumers can know in advance information homes mall location and price of goods, it also ordering an online capability. This interactive online and offline shopping patterns may gradually become the mainstream consumer. This system is to meet the people of this consumer demand, with a strong practical significance.Key words iH5; shopping guidance ; interaction目 录1.绪论11.1 课题背景11.2 课题目的11.3 课题意义12.系统需求分析与总体设计22.1需求分析说明22.2 可行性分析22.3 系统主要功能23.系统开发环境及开发工具介绍33.1开发本系统所需要环境33.2相关技术33.2.1 ih533.2.2 Photoshop44.系统具体设计44.1 概要设计44.2 数据库设计55.系统功能的实现65.1 系统流程图65.2 对象树结构与用途75.3 注册部分75.3.1 注册部分设计75.3.2 注册部分实现85.4 登录部分85.4.1 登录部分设计85.4.2 登录部分实现95.5 商场导航部分105.5.1 导航整体设计与实现105.5.2 导航功能设计与实现115.6 订购功能设计与实现125.7 卖家信息提交设计与实现135.8 周边类设计与实现145.9 功能拓展156.系统的测试166.1 测试缘由及概述166.2 测试用例及测试结果167.总结18参考文献19致 谢201.绪论1.1 课题背景社会发展迅速，大型商场应运而生，大型商场商品种类数量繁多，极大的满足了人们购物的需求，但男人与女人在购物的时候心理上还是存在差别的。男人希望能够很快把目光从甲点直接移到乙点。逛街买东西时，希望迅速的成功地找到想买的物品，如果大型商城只配备简单的导购图，男人的视线在人群与商品间不断穿梭，这会导致他们感到极不自在。女人的视野较广，因此在拥挤的购物中心里逛街买东西不是件难事。我们常常看到这样情况，许多男性顾客在购买商品时，事先记好所要购买的商城、商品名、式样、规格等，如果商品符合他们的要求，则采取购买行动，否则，就放弃购买动机。但笔者在逛商城的时候发现了目前大型商场的导购方式过于传统，大多数商城只配备商城导购图而已，在交互性和便利性上都不能满足顾客、特别是男性顾客的需求，导致了他们不能及时找到所需物品；另外，大型商场一般都是线下购物，缺少网络购物平台，这样的情况跟不上顾客的消费理念与需求。大型商城导购图急需升级到信息化的商城购物导航系统。针对目前市面上关于信息化的商场导航系统较少1，商场网络购物不成熟的现况，笔者开发了网页版和手机版的都能使用的信息化的商场导购系统，该系统是基于ih5，使用一款全球领先的在线交互设计工具-VXPLO互动大师作为开发工具，（），VXPLO的诞生，源于孟智平2008年创办“世云多媒体”时的技术延伸。VXPLO是全球做交互功能最强大的一款，是纯云端工具，支持HTML5和Flash，能实现很好的效果，还可以一键分享到好友和朋友圈里面。打开浏览器就可制作基于HTML5互动内容（包括：创意广告，网页小游戏，PPT，互动视频，网络互动剧，网站，轻APP等），这些内容还可以放到微信中进行传播。有较强的互动性、展示性，在线性。基于iH5的商场导购系统是从交互和导购的人性化角度出发，让消费者足不出户事先了解各大商城的货物位置及价格等信息，同时也提供在线订购功能。1.2 课题目的笔者开发此系统，是基于市场目前信息化商场导航系统较少和线上购物不成熟的情况。为了避免这一尴尬现象，系统旨在帮助消费者提前了解商品情况，提供在线位置导航，提供商品网上订购功能，旨在进一步提升商场的服务质量。商场导购购物系统的优势体现在三个方面，一方面是在商场里，顾客能够根据系统提示，迅速找到需要的商品价格性能及位置所在，这一功能，对于想快速买到物品的顾客，有着极大的便利；另一方面，对于想提前了解信息的顾客，商场还提供在线订购功能，突破了地域限制，方便顾客在家订购，一定程度上为顾客带来极大的便利；最后，对于一些在商场附近游玩闲逛的顾客，系统还提供了周边类信息以及公交路线。1.3 课题意义课题主要探究交互性导航对于超市顾客的服务是否能吸引顾客，是否能增加超市人流量以及消费量。本商场导航系统在提供商品位置提示服务的同时，还提供在线订购功能，支持手机微信查看，方便顾客足不出户的购买商品。对于喜欢亲自逛商场的顾客来说，系统还提供了周边店铺信息以及附近公交路线，方便顾客往来。这种线上线下互动的商城导航系统方便了顾客特别是男性顾客购物心理，具有较强的现实意义和一定的商业运用价值。2.系统需求分析与总体设计2.1需求分析说明飞速发展的信息技术让高交互性导航系统成为受人们欢迎的焦点2，本系统旨在建立在线商场导航，为顾客提供人性化、具有交互性的商场导航，同时提供网页版以及手机版的订购服务，为顾客提供一个自主快捷的购物平台。本系统是在html5技术的基础上，使用ih5互动大师这个软件在线编辑制作具有交互性的动态网页，让顾客可以在线查看商品位置分布，并查询自己感兴趣商品，提高顾客购物的效率，更好的为顾客服务。2.2 可行性分析调研结果表明，与传统购物方式相比，在三个方面，在线商场导航购物存在优势，52.9%的人觉得送货上门很便利，51.1%的人认为网购更便宜，43.8%的人感觉网上购物能买到更多的物品。从经济角度分析，本系统基于零代码免费使用的iH5在线交互工具，对经济需求并不高。从技术角度分析，本系统iH5作为主要开发平台，全程零代码操作，同时使用photoshop作为辅助处理工具，完成整个系统的开发。从应用角度分析：第一，目前市场上关于商场导购类的系统并不常见，值得开发；第二，该系统无疑为商场购物带来了很大的便利，实用性非常强。2.3 系统主要功能a）注册模块功能：顾客注册登录进入系统，能够查看不同商品位置。顾客需要填写姓名手机号码等基本资料才能注册成为用户。系统默认手机号码为登录帐号。b）商品订购模块功能：顾客进入系统，通过鼠标滚轮转动，拉出商场整体导购模型和菜单栏，通过点击左侧菜单栏，调出对应介绍图片，通过点击图片，即可调出订购窗口。顾客可以在此窗口选择并订购商品。c）查看商品模块功能：顾客、管理员能够在线查看商场提供的已有商品。d）查看商品及各类实施所在位置功能：顾客通过点击所需物品的类别，来查看该类商品所在商场的位置，且会有订购提示框出现，方便顾客选择订购商品。e）查看周边类：顾客能够查看商场周边类店铺以及附近公车路线情况。3.系统开发环境及开发工具介绍3.1开发本系统所需要环境该系统在windows7系统下，基于html5，通过ih5互动大师进行编辑开发。软件环境图如图3-1所示。 图3-1软件环境 图3-2编辑环境3.2相关技术3.2.1 ih5iH5，原为VXPLO互动大师，是一套完全自主研发的设计工具，允许在线编辑网页交互内容，研发时间超过8年，有超过50项专利3。支持各种移动端设备和主流浏览器，能够设计制作出PPT、应用原型、数字贺卡、相册、简历、邀请函、广告视频等多种类型的交互内容4。ih5提供平台社交功能，包括各种类型工具的使用，用户能通过零代码实现对设计的在线编辑操作。除了零代码，ih5还提供专业的模版，还有各类移动交互设计样式。目前网络上的很多内容都还是以静态的展示为主，大多数的互动内容开发成本高，时间长，所以仍是互联网内容中的很小的一部分。VXPLO的价值就在于构建了一种全新的内容，并通过提供交互内容快速渗透到现有互联网行业中去。3.2.2 PhotoshopPS在我们生活中属于常见的软件之一，它在计算机图像设计领域的应用十分广泛，不论是3D动画软件、平面设计软件、网页制作软件、矢量图形软件、多媒体制作软件还是排版软件，Photoshop在每一个环节中都发挥着不可替代的重要作用5。PS在功能方面主要有以下几个部分，一是图像编辑，这是图像处理类软件的基础功能；二是图像合成，图像合成就是将软件中想处理的几个图像通过一些工具的使用，使其完美结合到一起，看起来自然真实；三是校色调色，PS能够通过选取所需要的区域，再通过背景色填充的方式，来方便快捷的调整图像的颜色，包括颜色的种类、明暗等，以满足不同的媒体需求；四是特效制作，通过通道、滤镜以及特殊效果等工具的搭配使用，完成图像的特殊创意和特殊效果。 4.系统具体设计4.1 概要设计本系统共分为三个部分：第一个是注册登录部分，包括用户的注册和用户的登录两个部分。顾客的注册的信息会被收集到对应的数据库中。顾客注册是登录进入主页面的必要前提。注册完毕后，顾客输入手机号以及密码，进行登录，访问商场主页面。第二个是商场导航部分，商场导航包括三大主要功能。第一个是商品位置指示功能，顾客通过点击左侧的菜单，来查看所需类别商品在商场中的地理位置。第二个是商品的订购功能，顾客通过点击右侧的对应商品的大类展示图片，来调出订购菜单，通过输入订购数量要求来订购商品，所有的订购信息会在后台数据库显示。管理员可以通过查看数据库来明确订购信息。第三个是申请卖家的功能，可以通过发布卖家需求来提交申请，相应信息会传到后台数据库6，管理员可以查看。第三个是周边部分，周边部分有外卖订购和附近路线两个，外卖订购类似于商品订购，附近路线则是可以通过超链接查看附近公交的路线介绍。系统模块如图4-1所示。 商品订购 申请卖家 注册 登录 商品位置 外卖订购 附近路线周边部分注册登录部分盐城商场导航商场导航部分 图4-1系统模块图4.2 数据库设计a)用户users表中记录了用户注册登录等信息，具体如表4-6所示表4-6 用户表users字段名称字段类型字段说明允许为nullidint（11）编号不允许phonevarchar（13）手机不允许passinvarchar（40）密码不允许namevarchar（40）姓名不允许b)商品product表中记录了商品购买的有关信息，具体如表4-7所示表4-7 用户表product字段名称字段类型字段说明允许为nullidint（11）编号不允许numberint（11）购买数量允许timeOrdertime时间不允许c)卖家sell表中记录了卖家有关信息，具体如表4-8所示表4-8卖家表sell字段名称字段类型字段说明允许为nullidint（11）编号不允许newsvarchar(100)卖家信息允许timeordertime时间不允许d)外卖订购order表中记录了外卖订购有关信息，具体如表4-9所示 表4-9外卖订购order字段名称字段类型字段说明允许为nullidint（11）编号不允许newsint（11）订购信息允许timeordertime时间不允许addressvarchar(100)地址允许5.系统功能的实现5.1 系统流程图 系统功能流程图如图5-1所示：图5-1系统功能流程图5.2 对象树结构与用途如图5-2所示，iH5为零代码在线交互软件，是通过在对象树中添加工具来实现系统的编辑。其中注册页面，登录页面和登录数据库是管理核实用户注册登录信息，页面3则是商场导航主页面，页面3新建完成后，在其中分出各类子类事件及工具，用来实现导航主页面的各个功能。舞台上还建立各类商品数据库和对应的数据变量，通过事件绑定将数据变量与数据库相连接，用来收集管理页面3中的各类商品输入信息。图5-2对象树结构5.3 注册部分5.3.1 注册部分设计用户通过浏览器或者微信扫描二维码打开页面进行注册，如图5-3和图5-4所示。用户在浏览器中通过输入网址进入网站，或者用微信扫描二维码进入系统，按照系统进行注册。当用户注册完毕，调用RegisterServlet7方法将姓名，13位手机号码，以及密码通过post请求传递到RegisterServlet层，将注册信息保存到数据库并查询。 图5-3注册页面网页版 图5-4注册页面手机版5.3.2 注册部分实现在注册页面添加相应提升文字和输入框等工具，并在文字“确定”处添加事件。设置事件触发条件为“轻触”，并将目标对象设置为“登录数据库”，把注册信息储存到“登录数据库”中。如图5-5所示。图5-5注册实现5.4 登录部分5.4.1 登录部分设计用户注册完毕，即可开始登录，如图5-6和图5-7所示。为了增加便利性，在注册完毕后系统会自动跳转到登录页面。用户在登录页面输入13位手机号码以及密码，点击确定即可进入商场导航的主页面。当用户开始登录，调用LoginServlet8方法将手机号码和密码通过post请求传递到LoginServlet层，在数据库中进行账号密码的校验操作。 图5-6登录页面网页版 图5-7登录页面手机版用户登录时，系统会有账户密码检测，当账户输入错误时，会提示“无此用户”；当密码输入错误时，则会提示“密码错误”， 如图5-8和图5-9所示。 图5-8用户名错误提示 图5-9密码错误提示5.4.2 登录部分实现登录页面除了添加文字和输入框等工具，还添加了密码判断计数器，在其下添加两个事件，分别对应触发值0和1。同时在舞台下添加变量，将添加的变量与对应输入框绑定，收集用户输入的数据，并通过与登录数据库中数据比对，来判断账户密码是否正确。当输入数据正确时，触发值0，成功跳转页面；当输入数据错误时，触发值1，根据登录错误原因进行提示，用户名错误时，提示“无此用户”；密码错误时，提示“密码不正确”。如图5-10所示。 图5-10登录部分实现5.5 商场导航部分5.5.1 导航整体设计与实现用户登录成功后页面，如图5-11所示。在html5的基础下，在ih5在线交互软件中，通过在登录编辑页面下添加密码判断计数器，并为它绑定compare变量9，同时在密码判断计数器下添加两组事件交互组件。在登录页面中，添加了相应的菜单组件，包括服装区、饰品区、批发区、海鲜区、干货区、青蔬区、办公室和厕所等。同时添加了一个时间轴和滑动时间轴，在不同的时间点下，设置菜单选项框不同的位置，来实现菜单滑动效果，以加深用户体验，添加整体的交互性。在页面3下添加事件一与事件二，两个事件的绑定目标对象为滑动时间轴，同时设置动作对象播放关键帧，以此实现鼠标滚轮滑动菜单效果。如图5-12所示。图5-11主页面图5-12主页面实现5.5.2 导航功能设计与实现商品导航功能显示，如图5-13和图5-14所示。在主页面设计中，添加时间轴，在各个按钮子目录下添加轨迹控件，设置转到主页时的运动轨迹，添加交互性。同时添加各个菜单按钮，在其下设置按钮具体形状样式，并给各个按钮添加区块显示控制器，在其中加上事件，设置当点击时隐藏同层控件。即点击某一个菜单按钮，其他按钮显示的内容会隐藏，保证页面简洁性。当点击按钮时，对应位置会出现颜色闪烁效果，提醒用户目标位置，并有对应介绍图片出现。如下图示例，点击蔬菜按钮，出现对应位置提示，并有对应介绍图片出现，让用户方便易懂，提升交互性。图5-13导航页面图5-14导航实现5.6 订购功能设计与实现商品购买功能，如图5-15和5-16所示。在介绍的图片下添加事件，设置目标对象为对应的购买窗口，目标动作为显示，实现当用户点击图片时，弹出购买窗口的效果。在购买窗口中添加两个对应按钮，一是关闭按钮，用来关闭购买窗口，点击透明按钮，在其中添加事件，设置目标动作为隐藏，当点击关闭按钮时候，隐藏整个窗口；二是购买成功提示窗口，在其中添加事件，链接到购买成功提示窗口，目标动作为显示，当用户点击购买按钮时候，显示对应窗口。在购买窗口中添加输入框，并于舞台建立商品数据库，在数据库中添加文本字段工具，文本字段工具绑定对应购买输入框，设置字段名称为number。在购买按钮中多加入一个事件，设置目标对象为商品数据库，目标动作为提交，当用户点击购买时候，不仅出现购买成功对话框，同时number变量10传递到商品数据库。图5-15订购页面图5-16订购成功5.7 卖家信息提交设计与实现卖家信息提交功能，如图5-17和5-18所示。卖家信息提交窗口包括一个输入框，和三个透明按钮。通过绑定商家数据库里的文本字段，把输入框内的输入内容存储到数据库中，存储的字段名称为news，字段类型为varchar(100) 11。图5-17发布页面图5-18发布实现5.8 周边类设计与实现周边类服务功能，如图5-19和图5-20所示。周边类功能包括两个部分，一是汽车站点提示，二是外卖订购。汽车站点提示下有添加超链接，用户点击时，会链接到公交路线说明。外卖订购窗口包括两个输入框和一个透明按钮，输入框绑定外卖信息数据库，用户输入完毕，点击提交按钮时，对应信息会传到外卖信息数据库并保存。图5-19周边页面图5-20周边实现5.9 功能拓展由于时间技术问题，一些设想的功能暂时没实现。本系统还可以添加如下功能：a) 在线支付功能，通过接入支付宝，提供物品的在线支付。b）商品添加入购物车功能，顾客能够将商品加入购物车。c）查看购物车功能，顾客可以通过查看购物车来了解自己订购物品详情，并对购物车商品进行添加和删除12。d) 商家接单显示功能，顾客可以看到商家是否确认订单。6.系统的测试6.1 测试缘由及概述为保证系统的正常运行，防止bug，特此开始系统的整体测试。此节主要内容为系统的各个部分的功能检测。本次测试环境为windows7操作系统，浏览器基于谷歌chromium内核13，基于html5的ih5互动大师在线编辑软件。 6.2 测试用例及测试结果 a）注册及登录功能：用户注册登录。表6-1注册登录功能测试测试编号No.1测试目的测试用户注册登录。测试过程打开注册页面，按要求注册，注册成功后按要求登录。预期结果1.注册、登录成功; 2.用户名填写错误时出现提示;3.当密码填写错误时出现相应提示。测试结果测试结果与预期相同，测试成功。b）商铺位置显示功能：显示不同类型商品位置。表6-2商铺位置显示功能测试编号No.2测试目的测试商品能否按设定的位置显示。测试过程点击对应商品，查看效果。预期结果1.按设定位置显示。测试结果测试结果与预期相同，测试成功。c）商品订购功能：用户通过网页或者手机订购商品。表6-3商品订购功能测试测试编号No.3测试目的测试用户订购完毕后，商品信息是否正确传输到后台数据库。测试过程打开订购菜单，填写数量，并确定。预期结果1.订购成功，商品订购数量成功传输后台。测试结果测试结果与预期相同，测试成功。d）卖家申请提交功能：卖家信息提交。表6-4卖家申请提交功能测试测试编号No.4测试目的测试用户订购完毕后，商品信息是否正确传输到后台数据库。测试过程打开我是卖家提交窗口，输入信息，并提交预期结果1.提交成功，相关卖家申请信息成功传输后台数据库测试结果测试结果与预期相同，测试成功。7.总结从开始做这个设计，到最后完工，感觉就像搭建一个城堡，从开始的一砖一瓦，到现在的参天大厦，在其中也投入了很多的心血。系统包含的各个功能，能在大体上满足商场的要求，但是很多部分因为自身技术略有欠缺，加上时间问题，完善程度还不够。能进一步拓展的地方还有很多。在功能方面，首先，对于数据库的整体结构完善有所欠缺，并且数据库对于大量数据的承受能力尚未知晓；其次，未添加管理类功能，用户无法知晓订购信息；最后，数据库中各个数据的联系性不够。在美工方面，部分图片处理和场景设计可以进一步加强，在一些细节上，可以有所提高。通过这次对毕业设计的创作研究，笔者不仅学到了新的交互软件的使用，还巩固了大学四年的知识，提升了笔者的学习和操作能力，让笔者为未来的社会工作打下基础，能让笔者更好的融入社会。参考文献1Koskinen. 移情设计产品设计中的用户体验M. 北京:中国建筑工业出版社，2011:3-18.2 李世国. 体验与挑战产品交互设计M. 南京：江苏美术出版社,2007:19-30.3 李璐. VXPLO互动大师：一款全球领先的在线交互设