基于HTML5的线上试衣间APP设计与实现

打开文本图片集

摘  要：随着现代电子商务的迅猛发展，服装网购市场规模加速增长，越来越多的消费者享受到了网络购衣带来的便利快捷。然而，现有电商模式下线上服装展示和线下用户之间的“距离感”始终限制了用户在线采购服装的真实感和沉浸度。基于HTML5标准，针对线上购衣体验环节的短板设计“线上试衣间”APP，包括“女士时尚”“试衣间”“时尚资讯”“在线留言”“联系我们”五大功能模块，从购衣、试穿、交流等方面全方位的提升用户网购服装时的拟真体验，同时在DCloud平台下运用Web App开发类似轻应用APP，强化数据的及时更新，进一步适配用户随时随地查看最新服装信息的购物需求。

关键词：HTML5;电子商务;线上试衣间;DCloud

中图分类号：TP520.4040     文献标识码：A

Abstract：With the rapid development of modern e-commerce，the scale of online clothing  market continues to boom，bringing more and more consumers convenient and quick shopping experience.However，the sense of distance between online clothing display and offline users in the existing e-commerce model has always limited the sense of reality and immersion of users in online clothing procurement.Based on the HTML5 standard，the online fitting room APP includes the five functional modules of Lady Fashion，Fitting Room，Fashion Information，Online Message and Contact Us，so as to fully improve users" online shopping experience from purchasing，fitting communication and other aspects.At the same time，a similar light application App is developed under the platform of DCloud by using Web App，which enhances data updating and further adapts to users’ shopping demands to check the latest clothing information anytime and anywhere.

Keywords：HTML5;e-commerce;online fitting room;DCloud

1   引言（Introduction）

近年來，现代电子商务快速发展，依托互联网的在线营销模式以其省时、省钱、省力的优势受到大众追捧，尤其是服装类型的网购市场容量逐年攀升。消费者在初期享受线上购衣带来的便利后逐渐对线上购衣体验的“真实度”产生更高的期望。当今时代，人们更希望服装是可看性强，突出个性化。同时，人们也更注重根据个人体型特征挑选服饰[1]。消费者对在线购衣拟真度日益增长的需求与当前服装电商网站内容简陋、功能单一、交互体验较差的购物体验之间无疑存在着巨大的间隙。

针对这一问题，研究团队通过设计和开发“线上试衣间”APP——模拟试衣系统，助力现代线上服装销售模式的转型升级。“线上试衣间”APP能实现线上购衣、仿真人体建模、虚拟试衣、在线交互等功能，既可以让用户体验网上商城购衣的便利性，同时又可以将线上服装与个人形体进行“虚拟”匹配，享受线下实体店购衣般的“真实”购物体验。对于在线营销人员来说，这将是一个增强其市场的好工具[2]。

2   HTML5介绍（Introduction to HTML5）

HTML5是指万维网核心语言——标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改，于2014年9月正式发布。HTML5是万维网联盟历经8年的艰苦努力，无数次的修改、调整才最终问世，在世界范围内引起了广泛关注。它所展示的技术进步和应用优势更加明显：①HTML5技术可以跨平台使用，基于HTML5技术开发出来的软件APP可以轻松的移植到其他的开放平台或者是游戏中心等;②“自适应网页设计”，简单来说就是设计者只需要设计一次，其他的移植变动可以根据新环境自动调节;③及时更新，等待更新的时长会大幅度缩短，基于HTML5的软件更新像页面刷新一样，简单、快速。

“线上试衣间”APP选择在HTML5的基础上开发，是利用了它的简洁性和灵活性。首先，HTML5相对于HTML4.01添加了更多的新元素和新功能，例如：<audio>定义音频内容;<video>定义视频等，给未来用户在APP使用时提供更多的使用乐趣，增强体验感;其次，HTML5的设计调试阶段，开发人员不用再花费大量的精力面对代码，开发环境，不断地进行调试运行，而是可以直接的应用HTML5的标准化进行规范，便于后期的测试、修改和维护。

3 “线上试衣间”APP的可行性分析（Feasibility study of the online fitting room APP）

根据《2018年中国正品电商白皮书》（下文简称《白皮书》）显示：网络购物市场规模持续增长，预计2019年同比增长率会达到20.8%，网购的市场规模会达到9.1万亿元。在线电商的未来发展前景是十分可观，迅速扩大的市场规模有利于“线上试衣间”APP的发展。同时，《白皮书》也指出：超过七成的用户网购频率会达到每周一次以上，网购用户最爱购买服装鞋帽。“线上试衣间”APP的未来发展有着巨大的用户基础和市场空间。为了创造一个接近现实的购物环境，一些公司现在在他们的网站上提出虚拟试衣间[3]。例如英国的网上试衣店Fist.me在上线使用后，各类单品的退货率都降低了40%—70%[4]，取得了良好的市场反馈。

值得注意的是，服装网购市场还存在着一些问题。例如：网购服装通过包装、运输送达消费者时，后续服务却难以跟上，形成网购“后遗症”。导致消费者满意度下降的根本原因在于线上服装展示与线下实物试穿的“距离感”。网上的图片和实物在外形上存在较大差异，消费者会进行反复比较，难以抉择。一旦出现判断错误或者选择误差，购买的商品不合适或者和消费者主观印象有差异，换货、退货等环节都对消费者造成不小的困难。此类问题不仅浪费了消费者的时间、精力、金钱，降低用户体验，还会形成过度包装的环境污染问题和运输消耗的资源浪费问题。

通过开发“线上试衣间”APP将线上服装与个人形体进行“虚拟”匹配，让消费者享受线下实体店购衣般的“真实”购物体验，是提升服装在线营销效能，增强用户体验的有效途径。

4 “线上试衣间”APP的设计（Design of the online fitting room APP）

4.1   功能结构设计

根据现有消费者的消费习惯和对众多线上软件的购物调查研究，“线上试衣间”APP设立了五大模块来提升用户的使用舒适度，分别是“女士时尚”“试衣间”“时尚资讯”“留言板”“联系我们”。系统框架结构图如图1所示。

（1）“女士时尚”模块：提供当前流行的服装款式。这个模块的主要功能是为用户提供流行服装，带给用户四个操作选择：①浏览主推产品：上衣/下装/其他;②在找到自己心仪的产品后，可以点击查看相关数据：尺码/颜色/价格/相关产品推荐;③转跳第二模块“试衣间”，进行适合度比对;④当一切都合乎用户的心意后，用户点击加入购物车/购买：朋友代付、自己付。

（2）“试衣间”模块：数据、图片上传，形成效果模型。该模块的主要功能是根据用户上传的数据和图片，合成模拟试衣效果模型并展示。其中的子功能操作有：①选择自己要试穿的类型：上衣/下装/全身;②上传自己的数据：身高/体重/三围等;③上传选择的服装：图片/数据;④系统合成效果模型，以供用户观察。

（3）“时尚资讯”模块：提供最新的时尚讯息。这个模块会提供近期的关于穿着打扮或者流行元素的资讯。在这個模块用户可以看到：信息的点击量/更新文章。

（4）“在线留言”模块：收集用户反馈信息。用户可以填写自己的基本信息：姓名/邮箱/电话/反馈内容;在填写好想要反映的内容，以及确定好基本信息无误之后就点击提交按钮;留言的内容和回复会出现在留言板并保留下来。

（5）“联系我们”模块：方便用户联系运营商来解决疑惑。在这里有三种方式方便用户能准确地联系到运营商，分别是电话、短讯、邮箱。

4.2   数据库设计

随着计算机技术的广泛应用与发展，无论是在数据库的基础理论、数据库技术应用、数据库系统开发，还是数据库商品软件推出方面，数据库技术都有着长足的、迅速的进步与发展[5]。“线上试衣间”APP采用的是SQL sever，便于进行数据库系统数据的维护。根据软件系统开发的需要，将产生几张表，分别是：“clothes”表、“users”表、“feedback”表。

“clothes”表是用来记录在“女士时尚”模块上架的服装信息，其主键是“服装编号”;“users”表的作用是收集使用过此款APP用户的基本信息，主键是“用户名”（用户名唯一且不能为空）;“feedback”表记录和存储用户通过“在线留言”模块或者是“联系我们”模块反馈的内容。这三张表的基本内容如表1所示。

5 “线上试衣间”APP的实现（Implementation of the online fitting room APP）

5.1   开发平台与前端框架选择

当前，开发APP的主流框架有三种：Web App（网页应用）、Hybrid App（混合应用）、Native App（原生应用）。根据实际需求分析，“线上试衣间”APP选择使用Web App来进行开发。Web App是基于Web的应用，更有利于与HTML5的结合使用。利用Web App开发的APP不需要下载安装，一个二维码便可以随时打开，不像下载的APP那么占内存，更类似于轻应用。

在选择好开发方式后，进一步就要对我们所需要的开发平台进行选择。市面上的主流开发平台主要有Cordova、AppCan、DCloud、APICloud。Cordova的前身是PhoneGap，该框架下的目标用户群体是原生态开发者，也就是开发者需要安装形成原生开发环境;AppCan成立于2010年，它并不是一个开源的平台，并且其中一些功能需要收费;DCloud是W3C的会员单位，旗下的产品都是用来弥补HTML5的一些特性产品;APICloud提供原生的应用模块，通过js调试、调用。

“线上试衣间”APP选择使用DCloud，因为这个开发平台致力于解决HTML5的一些性能、工具、能力等方面的问题，并且它使用的MUI前端框架能更快地加速，更适合“线上试衣间”APP的功能需求。

5.2   功能模块的设计与展示

五个主要的功能模块分别是：“女士时尚”模块、“试衣间”模块、“时尚资讯”模块、“在线留言”模块、“联系我们”模块。这五个模块之间是相互联系并且可以随意跳转，达到随心所欲的用户体验感。

5.2.1  “女士时尚”模块

“女士时尚”模块主要的功能就是提供不同的服装选择，用户可以通过浏览APP提供的有限选项来观察，也可以在看到合适的服装后直接购买。同时这个模块也会运用页面转跳的功能。HTML5一般有三种转跳方式：①定时转跳或者原地刷新;②js手动替换转跳;③历史记录跳转。此模块选择的是链接按钮的页面跳转，用户在挑选了一些服装并且想在软件的第二模块——“试衣间”模块中进行“试穿”时，点击按钮图形，触发链接跳转到“试衣间”模块的应用页面，同时这一跳转会保留用户所选试穿服装的相关数据，简化操作，增加便捷度。HTML5的关键代码如下：

5.2.2  “试衣间”模块

“试衣间”模块是这款APP最主要的功能模块。在此模块下，APP可以展示现实和虚拟的结合，实现向三维的转换，用立体的视觉感受给用户更直接的产品信息。用户仅需提供自己的身高、体重、三围等数据就可以供内部程序模拟出仿真用户的3D人体模型，同时用户填写或上传要试穿的服装的数据（尺码、颜色等）与3D人体模型结合。或者系统通过自定义上传的照片获取自定义体型数据，构建虚拟拟合模型[6]。仿真人体3D模型可以通过3D-MAX、MAY、SOLIDWORKS等软件来实现，并利用虚拟现实技术对试衣的环境进行模拟，增加顾客的代入感和沉浸感：利用OpenGI技术虚拟顾客在不同的场所、不同的时刻着衣的场景[7]。

5.2.3  “时尚资讯”模块

“时尚资讯”模块主要是向用户提供服装方面的潮流动向。初期階段，开发者以程序管理员的身份来进行图文的编辑发表。在APP的后续运营过程中，用户可以自己编辑时尚潮流的相关信息发表，由管理员在后台进行监管和筛选。APP运行时会在文章下显示浏览量和点赞量，激发用户参与的热情。

5.2.4  “在线留言”模块和“联系我们”模块

“在线留言”模块和“联系我们”模块都是用于用户和管理员，以及开发者之间的交互。“在线留言”模块中，用户在内容框中填写信息，确认无误后提交，管理员会在24小时内进行回复，完成一次线上的交流。同时这样的留言也会出现在留言分享版块，方便其他用户查看回复，形成用户间的良性互动。“联系我们”模块可以点击“电话咨询”“短信咨询”“在线地图”选择其一或者多选，与运营人员和开发人员直接交互。

6   结论（Conclusion）

HTML5技术已成为微信应用开发、手机APP开发、各大主流网站开发的主流技术，能在视觉与交互体验方面给用户带来新鲜的刺激感[8]。针对当前服装网购模式下用户体验不佳的问题，基于HTML5技术设计和开发“线上试衣间”APP，通过“女士时尚”“试衣间”“时尚资讯”“在线留言”“联系我们”五大功能模块，从购衣、试穿、交流等方面全方位的提升用户网购服装时的拟真体验，助力线上服装销售模式的转型升级和可持续发展。

参考文献（References）

[1] 牛霞.虚拟现实在展示设计中的应用研究[D].西北大学，2014.

[2] Srinivasan K，Vivek S.Implementation of virtual fitting room using image processing[C].International Conference on Computer，IEEE，2017.

[3] Beck M，Crié，Dominique.I virtually try it…I want it ！ Virtual Fitting Room：A tool to increase on-line and off-line exploratory behavior，patronage and purchase intentions[J].Journal of Retailing and Consumer Services，2018（40）：279-286.

[4] VILPPONEN A.Fits.me Launches-eCommerce Sites，TakeNotice[EB/OL].http：///2010/06/01/fits-me-launches-ecommercesites-take-notice，2010-06-01/2019-05-15.

[5] 王预.数据库原理及应用教程[M].北京：清华大学出版社，2017：1.

[6] Hu Z，Li X，Wang L，et al.Study on generation algorithm of virtual fitting room based on RS mode[C].IEEE International Conference on Computer-aided Industrial Design & Conceptual Design，IEEE，2011.

[7] 曾凡涛.基于OpenGL的纹理映射技术[J].电脑知识与技术，2007，1（3）：230-231.

[8] 苏雨鸿，姚兴华.基于HTML5的大学生二手物品交易APP设计[J].软件导刊，2017（10）：84-88.

推荐访问:线上 试衣间 设计 HTML5 APP