林桂斌等

摘 要：針對目前網(wǎng)上超市建模困難的問題，對JQuery的無刷新異步加載、動(dòng)畫實(shí)現(xiàn)、拖拽素材等技術(shù)進(jìn)行了深入的研究，提出了一種可以快速可視化設(shè)計(jì)出與實(shí)體超市布局一致的網(wǎng)上超市模型的方法。實(shí)驗(yàn)結(jié)果表明，該方法操作簡單，設(shè)計(jì)出的網(wǎng)上超市模型可擴(kuò)展性強(qiáng)。

關(guān)鍵詞：JQuery；網(wǎng)上超市模型；可視化

中圖分類號：TP31.11 文獻(xiàn)標(biāo)識碼：A 文章編號：

Abstract： Modeling of online supermarket was difficult currently. Some techniques of JQuery， like no fresh asynchronous loading， animations， dragging， were researched. A visual design method was proposed， which could make an online supermarket model consistent with physical supermarket fast. Experimental results show that this method is simple and the online model is scalable.

Keywords： JQuery； Online Supermarket Model； Visualization

0 引 言

早在古希臘時(shí)代，人們就使用曲線來表示函數(shù)與變量之間的關(guān)系，這是人類使用可視化的開端，美國把計(jì)算機(jī)應(yīng)用于科學(xué)計(jì)算，并最早實(shí)現(xiàn)了計(jì)算結(jié)果的可視化[1]。隨著計(jì)算機(jī)領(lǐng)域的進(jìn)一步發(fā)展，互聯(lián)網(wǎng)已經(jīng)成為人們生活中的一部分。與互聯(lián)網(wǎng)對接將成為超市未來發(fā)展的趨勢。把現(xiàn)實(shí)生活中的實(shí)體超市移植到互聯(lián)網(wǎng)，讓消費(fèi)者能夠隨時(shí)隨地“逛”超市成為超市發(fā)展的目標(biāo)。實(shí)現(xiàn)該目標(biāo)的關(guān)鍵是如何方便、快速地建立與實(shí)體超市對應(yīng)的網(wǎng)上超市模型。目前已經(jīng)有類似的可視化頁面設(shè)計(jì)技術(shù)，但目前的技術(shù)大多屬于富客戶端技術(shù)，使用這些技術(shù)開發(fā)的可視化頁面一般都局限于訪問人數(shù)相對較少的企業(yè)內(nèi)部管理系統(tǒng)。網(wǎng)上超市需要面向大眾，人數(shù)多而且用戶訪問時(shí)間比較集中，加上網(wǎng)上超市頁面訪問時(shí)需要加載的內(nèi)容較多，在這種情況下使用富客戶端技術(shù)將會(huì)給服務(wù)器帶來較大的壓力。輕客戶端技術(shù)通常用JavaScript來實(shí)現(xiàn)。JavaScript的核心API設(shè)計(jì)得很簡單，但由于瀏覽器之間的不兼容性，導(dǎo)致客戶端的API過于復(fù)雜[2]。目前流行和廣泛采用的JQuery是彌補(bǔ)其不足的技術(shù)。JQuery由于其開源、易于使用、功能強(qiáng)大、展現(xiàn)優(yōu)雅、兼容性極佳等特點(diǎn)而迅速贏得了Web開發(fā)者的青睞[3]。從2006年發(fā)布到現(xiàn)在一直得到中大型互聯(lián)網(wǎng)企業(yè)的認(rèn)可和應(yīng)用，可以應(yīng)用其開發(fā)出輕客戶端技術(shù)的頁面，解決網(wǎng)上超市模型可視化設(shè)計(jì)的關(guān)鍵技術(shù)問題。

1 網(wǎng)上超市模型的可視化設(shè)計(jì)

隨著計(jì)算機(jī)可視化的完善和推廣，商業(yè)領(lǐng)域?qū)τ?jì)算機(jī)的可視化的依賴越來越大。通過可視化設(shè)計(jì)，將實(shí)體超市模型快速轉(zhuǎn)變?yōu)榕c實(shí)體超市一致的網(wǎng)上超市可以提高用戶體驗(yàn)，爭取到更多的顧客資源，提高超市的收益。

1.1 總體設(shè)計(jì)方案

網(wǎng)上超市模型可視化設(shè)計(jì)的方案最直觀的方法就是根據(jù)實(shí)體的超市來定制。但由于超市眾多，每個(gè)超市的規(guī)模風(fēng)格和布局各不相同，根據(jù)實(shí)體超市定制網(wǎng)上超市模型需要軟件開發(fā)商逐個(gè)超市去采集相關(guān)數(shù)據(jù)資料，這方式需要投入較多的勞動(dòng)力資源。而且，實(shí)體超市模型可能會(huì)隨著超市發(fā)展發(fā)生改變，一旦發(fā)生變化，這種方式需要通過修改代碼對頁面重新進(jìn)行設(shè)計(jì)，擴(kuò)展性差。

解決的辦法是軟件開發(fā)商提供一個(gè)平臺，超市經(jīng)營者通過該平臺的簡單操作，如拖拽、拉伸、旋轉(zhuǎn)，就可以很輕松的設(shè)計(jì)出自己的網(wǎng)上超市模型，不需要涉及到代碼操作。這種通用性可視化設(shè)計(jì)方式，既可以省下很多勞動(dòng)力資源，又可以提高設(shè)計(jì)效率。超市經(jīng)營者在不需要特定技術(shù)人員支持情況下就可以維護(hù)和修改網(wǎng)上模型，擴(kuò)展性強(qiáng)。

1.2 網(wǎng)上超市可視化建模的關(guān)鍵問題

網(wǎng)上超市模型平臺設(shè)計(jì)面臨最大的問題就是如何讓超市方便設(shè)計(jì)出網(wǎng)上超市模型并且取得良好的視覺效果。現(xiàn)今最著名的三維模型當(dāng)屬谷歌街景，但這種設(shè)計(jì)方法需要比較高的拍攝技巧，實(shí)現(xiàn)起來比較困難。但是它的一些設(shè)計(jì)理念是可以借鑒并加以修改完善。先將超市分割成不同的模塊，超市上傳各個(gè)模塊的圖片資料，然后通過計(jì)算機(jī)將各個(gè)模塊拼接成超市的網(wǎng)上超市模型。如果超市以后規(guī)模發(fā)生改變，只要替換掉該模塊的內(nèi)容或者修改模塊的擺放位置即可實(shí)現(xiàn)，而總體布局不會(huì)受到影響。

1.3 超市可視化建模流程

人是一種習(xí)慣性生物，操作是否流暢取決于其既有經(jīng)驗(yàn)和習(xí)慣，所以Web界面設(shè)計(jì)必須首先了解和尊重用戶的習(xí)慣[4]。設(shè)計(jì)網(wǎng)上超市模型可視化頁面的實(shí)現(xiàn)流程也必須符合人為的習(xí)慣，目前有一種網(wǎng)絡(luò)游戲通過拖拽家具來設(shè)計(jì)房屋內(nèi)景，取得良好的用戶體驗(yàn)效果，本設(shè)計(jì)采用類似的做法，讓超市經(jīng)營者自行設(shè)計(jì)出網(wǎng)上超市模型。模型最終都要轉(zhuǎn)化成數(shù)據(jù)記錄在數(shù)據(jù)庫里，因此要建立數(shù)據(jù)庫來記錄不同模塊的內(nèi)容和位置等數(shù)據(jù)。當(dāng)用戶打開頁面的時(shí)候系統(tǒng)從數(shù)據(jù)庫獲得數(shù)據(jù)后再根據(jù)這些數(shù)據(jù)生成模型。圖1為網(wǎng)上超市可視化建模的具體流程。

2 網(wǎng)上超市模型可視化設(shè)計(jì)的實(shí)現(xiàn)

視覺在人類認(rèn)知系統(tǒng)中具有很強(qiáng)的感知通道，可視化呈現(xiàn)和交互使得大規(guī)模數(shù)據(jù)訪問更容易[5]。設(shè)計(jì)出符合人視覺常識的可視化模型能夠方便超市經(jīng)營者通過日常思維設(shè)計(jì)網(wǎng)上超市模型，方便理解且降低操作錯(cuò)誤率。通過JQuery實(shí)現(xiàn)網(wǎng)上超市可視化設(shè)計(jì)的主要技術(shù)包括有素材菜單、拖拽與坐標(biāo)定位、個(gè)性化增刪查改等。

2.1 JQuery實(shí)現(xiàn)素材菜單

由于素材菜單不是常用的部分，如果把它固定位置會(huì)占用頁面空間，應(yīng)設(shè)計(jì)為用戶需要時(shí)才讓它顯示出來，當(dāng)不需要時(shí)將它隱藏。JQuery有豐富的頁面動(dòng)畫實(shí)現(xiàn)方法可以調(diào)用，通過show（speed，[callback]）和hide（speed，[callback]）方法可以實(shí)現(xiàn)動(dòng)畫顯示和動(dòng)畫隱藏，效果良好，還可以通過speed參數(shù)自定義動(dòng)畫時(shí)間和callback執(zhí)行成功回調(diào)。將動(dòng)畫事件綁定在菜單伸縮按鈕上，通過點(diǎn)擊該按鈕即可控制菜單欄的顯示和隱藏。圖2為素材菜單經(jīng)270度旋轉(zhuǎn)的效果圖，當(dāng)鼠標(biāo)移到方向箭頭時(shí)菜單會(huì)顯示出來，鼠標(biāo)離開該區(qū)域后會(huì)自動(dòng)隱藏起來。

2.2 JQuery實(shí)現(xiàn)元素拖拽效果與坐標(biāo)定位

傳統(tǒng)的B/S架構(gòu)網(wǎng)站都是由HTML、CSS和JavaScript構(gòu)成，都是設(shè)計(jì)成靜態(tài)頁面和一些相關(guān)的表單提交，要讓用戶移動(dòng)頁面元素是很難實(shí)現(xiàn)的事情。JQuery封裝了拖拽插件draggable，使得元素在頁面中實(shí)現(xiàn)拖拽變成一件簡單的事情，用選擇器獲得素材后調(diào)draggable方法即可。實(shí)現(xiàn)方法如下：

$（“”）.draggable（option）；

option為draggable可接受參數(shù)。當(dāng)剛開始拖拽時(shí)可以使用start回調(diào)函數(shù)使得被拖拽的元素發(fā)生一些形狀的變化以提示操作人員該元素正處于拖拽狀態(tài)當(dāng)中；當(dāng)拖拽完畢時(shí)可以使用stop回調(diào)函數(shù)，經(jīng)$（this）.offset（）.left和$（this）.offset（）.top分別獲得素材的橫坐標(biāo)和縱坐標(biāo)，然后和ajax結(jié)合異步將坐標(biāo)值提交寫入數(shù)據(jù)庫，實(shí)現(xiàn)無刷新頁面操作。無刷新的頁面增強(qiáng)了用戶和系統(tǒng)的交互性，改善了系統(tǒng)的刷新方式，讓更多有趣的前端功能成為可能[6]。圖3為超市布局變化前后的效果圖，可以看出中間2個(gè)素材的位置通過拖拽后修改了相應(yīng)位置。圖3（a）為原來的布局結(jié)構(gòu)，通過簡單的拖拽后變成圖3（b）的布局，修改后的位置信息在數(shù)據(jù)庫自動(dòng)進(jìn)行保存。修改完成后重新打開頁面將會(huì)呈現(xiàn)更新后圖3（b）的布局。

2.3 JQuery實(shí)現(xiàn)個(gè)性化增刪查改

可視化將隱藏的大量數(shù)據(jù)信息用相對直觀、易于領(lǐng)會(huì)的圖形和圖像來表征，從而加快獲取信息的速度[7]。大多數(shù)Web復(fù)雜的操作最終都將會(huì)轉(zhuǎn)化為對數(shù)據(jù)庫進(jìn)行增、刪、查、改操作，能夠?qū)⑦@些數(shù)據(jù)信息的操作轉(zhuǎn)變?yōu)榭梢暬瘓D像操作將方便于超市經(jīng)營者建模。數(shù)據(jù)映射成一種易于理解的表現(xiàn)形式，決定最后圖像中應(yīng)該看到什么，又如何把它表現(xiàn)出來[8]。對于一個(gè)平臺開發(fā)確定以什么樣的形式給用戶顯示可視化頁面十分重要。網(wǎng)上超市模型可視化設(shè)計(jì)也一樣。設(shè)計(jì)和修改模型的操作可以轉(zhuǎn)化成新增元素、修改元素、刪除元素；當(dāng)頁面打開時(shí)將模型加載出來是查詢元素。大多數(shù)用戶閱讀屏幕文字要比閱讀書本上的文字慢，并感到不適，同時(shí)大量的文字顯示會(huì)使用戶產(chǎn)生厭倦情緒[4]。傳統(tǒng)的增、刪、查、改都是通過表單操作，文字?jǐn)?shù)據(jù)較多，能夠把枯燥的文字?jǐn)?shù)據(jù)表單操作變成圖形化操作將大大提高用戶體驗(yàn)效果，同時(shí)也能提高建模效率。本設(shè)計(jì)中對這四種操作進(jìn)行了人性人改造。新增元素：通過用戶點(diǎn)擊菜單中的元素，調(diào)用append（）方法在頁面中增加一個(gè)新的元素圖標(biāo)，取代傳統(tǒng)表單操作中新增一條數(shù)據(jù)展示給用戶。修改元素：通過用戶拖拽元素，異步提交修改后的位置，取代傳統(tǒng)表單操作通過手動(dòng)修改數(shù)據(jù)來實(shí)現(xiàn)修改。刪除元素：通過用戶將元素拖拽到回收站或者通過右鍵菜單選擇刪除，同時(shí)調(diào)用remove（）方法將元素圖標(biāo)從頁面中移除，取代傳統(tǒng)表單操作刪除一條數(shù)據(jù)。查詢元素：通過異步加載獲得元素的數(shù)據(jù)，然后按照屬性名將元素?cái)?shù)據(jù)賦值給相應(yīng)的屬性，異步修改元素的位置、大小、表現(xiàn)形式來呈現(xiàn)元素?cái)?shù)據(jù)，取代傳統(tǒng)表單操作通過表單羅列數(shù)據(jù)的方法。通過個(gè)性化的增刪查改可以讓超市經(jīng)營者更方便實(shí)效操作網(wǎng)上超市。

3結(jié)束語

可視化改善了工作體驗(yàn)，提高了辦事效率，降低了錯(cuò)誤率[9]?；贘Query實(shí)現(xiàn)的可視化模型已經(jīng)很不錯(cuò)，在網(wǎng)上超市的設(shè)計(jì)與實(shí)現(xiàn)方面達(dá)到了一個(gè)較好的效果，但是離虛擬現(xiàn)實(shí)一樣逼真的境界還有一定差距。網(wǎng)上超市模型可視化設(shè)計(jì)會(huì)隨著技術(shù)進(jìn)步和消費(fèi)者的審美要求的提高繼續(xù)發(fā)展，或許不久的將來我們也可以把逛網(wǎng)上超市做到跟現(xiàn)今的客戶端3D游戲一般，這讓人期待。

參考文獻(xiàn)：

[1]趙麗華.聶建國.可視化技術(shù)在圖書館中的應(yīng)用[J].圖書館學(xué)刊，2011，（3）：111-114.

[2]David Flanagan.JavaScript權(quán)威指南[M].北京：機(jī)械工業(yè)出版社，2012.

[3]陶國榮.JQuery權(quán)威指南[M].北京：機(jī)械工業(yè)出版社，2013.

[4]高遠(yuǎn).基于Web的人員管理信息系統(tǒng)的界面設(shè)計(jì)與實(shí)現(xiàn)[J].福建電腦，2009，（9）：13-14.

[5]汪飛.李強(qiáng).左伍衡.可視化搜索用戶界面[J].計(jì)算機(jī)輔助設(shè)計(jì)與圖形學(xué)學(xué)報(bào)，2014，26（5）：708-716.

[6]李禹.基于Web的可視化考勤管理系統(tǒng)設(shè)計(jì)[J].吉首大學(xué)學(xué)報(bào)，2014，35（3）：49-53.

[7]米娜瓦爾·拉合買提.瑪依拉·別克強(qiáng)塔依哇.朱靜.Web應(yīng)用數(shù)據(jù)挖掘可視化界面布局的設(shè)計(jì)方法[J].計(jì)算機(jī)技術(shù)與發(fā)展，2011，21（8）：30-38.

[8]吳昊.基于Web的城市三維景觀可視化體系設(shè)計(jì)思路研究[J].科技創(chuàng)新導(dǎo)報(bào)，2010，（12）：11-13.

[9]張立成.張鴿.陳鑫.可視化Web控件開發(fā)及在設(shè)備管理系統(tǒng)中的應(yīng)用[J].實(shí)驗(yàn)室研究與探索，2014，33（6）：259-262.