李嘉偉，陳淑紅，段　焰

(1. 湖南工程學(xué)院 計(jì)算機(jī)與通信學(xué)院，湘潭 411104; 2. 福州大學(xué) 物理與信息工程學(xué)院，福州 350116)

?

新型商業(yè)網(wǎng)站的設(shè)計(jì)探索

李嘉偉1，2，陳淑紅1，段焰1

(1. 湖南工程學(xué)院 計(jì)算機(jī)與通信學(xué)院，湘潭 411104; 2. 福州大學(xué) 物理與信息工程學(xué)院，福州 350116)

隨著網(wǎng)絡(luò)發(fā)展，新型商業(yè)網(wǎng)站在滿足用戶功能需求的同時(shí)，還需提升用戶體驗(yàn).從前臺(tái)交互式設(shè)計(jì)、后臺(tái)功能設(shè)計(jì)兩方面對(duì)現(xiàn)代新型商業(yè)網(wǎng)站的設(shè)計(jì)過(guò)程進(jìn)行探索.本網(wǎng)站網(wǎng)頁(yè)結(jié)構(gòu)簡(jiǎn)單、運(yùn)行穩(wěn)定、體積小巧、功能齊全、成本低、應(yīng)用靈活，成功展示給人們視覺(jué)沖擊與品牌魅力.網(wǎng)站基于J2EE平臺(tái)開(kāi)發(fā)，后臺(tái)采用Oracle數(shù)據(jù)庫(kù).

商業(yè)網(wǎng)站；用戶體驗(yàn)；J2EE

隨著智能手機(jī)等移動(dòng)設(shè)備等普及，通過(guò)移動(dòng)端網(wǎng)上購(gòu)物、支付成為最方便的交易方式，網(wǎng)上購(gòu)物方便快捷，成為年輕人購(gòu)物的首選方式.網(wǎng)上購(gòu)物的興起對(duì)不少品牌的實(shí)體店經(jīng)營(yíng)造成一定沖擊，也迫使很多品牌針對(duì)互聯(lián)網(wǎng)大環(huán)境下的經(jīng)營(yíng)模式進(jìn)行轉(zhuǎn)型.不少國(guó)際大牌、奢侈品牌的門店裝修靚麗、擺布奢華，其提供的奢華的購(gòu)物體驗(yàn)也是消費(fèi)成分的一部分.但是網(wǎng)絡(luò)化的門店如何帶給消費(fèi)者同樣的奢華體驗(yàn)并使消費(fèi)者為之買單，這就對(duì)傳統(tǒng)功能型網(wǎng)站提出了新的要求.新型商業(yè)網(wǎng)站不僅需要滿足用戶的功能需求，還要滿足消費(fèi)者的體驗(yàn)需求.提升用戶體驗(yàn)是新型商業(yè)網(wǎng)站的核心目的.

要提升用戶體驗(yàn)，需要做到兩個(gè)方面，一是舒適人性化的交互設(shè)計(jì)，二是具有品牌感染力、商業(yè)沖擊力的視覺(jué)設(shè)計(jì).新型商業(yè)網(wǎng)站在交互設(shè)計(jì)上要做到適應(yīng)不同設(shè)備的響應(yīng)式設(shè)計(jì)，尤其是在移動(dòng)設(shè)備上訪問(wèn)體驗(yàn)要舒適完美.視覺(jué)設(shè)計(jì)上要適應(yīng)現(xiàn)代設(shè)計(jì)趨勢(shì)，采用時(shí)尚簡(jiǎn)約的扁平化設(shè)計(jì).本文以虛擬品牌VESPERA商業(yè)網(wǎng)站的設(shè)計(jì)過(guò)程為例對(duì)現(xiàn)代新型商業(yè)網(wǎng)站的設(shè)計(jì)進(jìn)行探索.

1　系統(tǒng)方案

新型商業(yè)網(wǎng)站的設(shè)計(jì)是基于用戶體驗(yàn)的開(kāi)發(fā)過(guò)流程.用戶體驗(yàn)設(shè)計(jì)是指在產(chǎn)品設(shè)計(jì)、開(kāi)發(fā)、維護(hù)的過(guò)程中以用戶體驗(yàn)為核心、強(qiáng)調(diào)以用戶需求、體驗(yàn)為設(shè)計(jì)決策和開(kāi)發(fā)目的的開(kāi)發(fā)模式，而不是強(qiáng)制用戶去適應(yīng)產(chǎn)品[1].使用MindManager對(duì)網(wǎng)站進(jìn)行需求分析總結(jié)與需求凍結(jié)，然后進(jìn)行原型制作.使用AxureRP對(duì)網(wǎng)站進(jìn)行交互設(shè)計(jì)與原型制作，并通過(guò)用戶體驗(yàn)測(cè)試檢驗(yàn)原型與修改[2].前臺(tái)的美觀是企業(yè)網(wǎng)站必不可少的，本項(xiàng)目充分重視視覺(jué)管理，使用AdobePhotoshop、Illustrator等進(jìn)行l(wèi)ogo和網(wǎng)站的視覺(jué)設(shè)計(jì).為提升用戶體驗(yàn)，網(wǎng)站前端采用響應(yīng)式HTML5/CSS3代碼實(shí)現(xiàn).本項(xiàng)目基于J2EE平臺(tái)開(kāi)發(fā)，后臺(tái)采用Oracle數(shù)據(jù)庫(kù).

2　前臺(tái)交互設(shè)計(jì)

2.1扁平化設(shè)計(jì)

扁平化設(shè)計(jì)是指去掉設(shè)計(jì)元素的擬物化立體寫(xiě)實(shí)效果，而采用抽象、簡(jiǎn)單、符號(hào)化的設(shè)計(jì)風(fēng)格，讓“信息”本身作為核心被凸顯出來(lái)[3].

傳統(tǒng)導(dǎo)航欄都是以簡(jiǎn)單明了的文字為主體的，在導(dǎo)航欄子目錄較多的情況下尤其直接明了.但復(fù)雜的目錄結(jié)構(gòu)會(huì)使用戶厭煩，導(dǎo)航欄目錄結(jié)構(gòu)越簡(jiǎn)單越好.文字型導(dǎo)航欄一般只能使用一種語(yǔ)言，而將導(dǎo)航欄圖標(biāo)化后就不存在語(yǔ)種問(wèn)題了，只需一個(gè)版本的網(wǎng)頁(yè)便實(shí)現(xiàn)了網(wǎng)頁(yè)的國(guó)際化.文字型導(dǎo)航欄不適合手指操作點(diǎn)擊，還很容易誤觸其他鏈接.

本網(wǎng)站將導(dǎo)航欄結(jié)構(gòu)簡(jiǎn)化，只有一級(jí)菜單，不設(shè)二級(jí)菜單，并且將長(zhǎng)度縮短，簡(jiǎn)化為三個(gè)，同時(shí)將其圖標(biāo)化，使用a:hover的css樣式代碼，在鼠標(biāo)懸停在圖標(biāo)上時(shí)，圖標(biāo)將發(fā)生變化.圖標(biāo)化、簡(jiǎn)化后的導(dǎo)航欄不僅美觀大方，打破了語(yǔ)種限制，實(shí)現(xiàn)了頁(yè)面的國(guó)際化，特別是在移動(dòng)端訪問(wèn)頁(yè)面時(shí)，將會(huì)更方便手指觸碰.圖1給出了傳統(tǒng)文字型導(dǎo)航欄與圖標(biāo)化的導(dǎo)航欄的對(duì)比效果.

圖1　傳統(tǒng)文字型導(dǎo)航欄與圖標(biāo)化的導(dǎo)航欄對(duì)比

不但導(dǎo)航欄可以扁平化，其他例如收藏按鈕、訂閱按鈕、分享按鈕等眾多功能都可以使用符號(hào)化的圖標(biāo)使其變得通俗易懂，例如用戶一看到“愛(ài)心”、“信封”、“電話筒”形狀就馬上會(huì)聯(lián)想到“收藏”、“郵件”、“電話”等信息，用戶理解與獲取信息更快更準(zhǔn).

2.2響應(yīng)式設(shè)計(jì)

響應(yīng)式設(shè)計(jì)是指網(wǎng)頁(yè)的設(shè)計(jì)與開(kāi)發(fā)制作根據(jù)設(shè)備環(huán)境顯示屏幕尺寸與方向，對(duì)網(wǎng)頁(yè)的顯示布局進(jìn)行相對(duì)應(yīng)的響應(yīng)和調(diào)整[4].HTML5/CSS3是實(shí)現(xiàn)響應(yīng)式頁(yè)面的基礎(chǔ)語(yǔ)言.HTML5/CSS3增設(shè)了許多新的語(yǔ)句與功能，使以往需要使用圖片或JavaScript代碼實(shí)現(xiàn)的功能可以更簡(jiǎn)單的實(shí)現(xiàn)，減小項(xiàng)目文件體積和開(kāi)發(fā)成本.而如今大部分電腦與手持設(shè)備的瀏覽器與操作系統(tǒng)都已經(jīng)完全支持HTML5了，這也為響應(yīng)式設(shè)計(jì)的普及奠定了基礎(chǔ).

如圖2所示，本網(wǎng)站除了能在電腦上正常瀏覽外，在手機(jī)上瀏覽也同樣便捷.對(duì)于寬屏的電腦， 網(wǎng)頁(yè)可以顯示大分辨率橫屏效果，將屏幕鋪滿又不留空白，在手機(jī)上瀏覽時(shí)，網(wǎng)頁(yè)顯示小分辨率豎屏效果，為方便手指操作，在手機(jī)上瀏覽時(shí)，導(dǎo)航欄會(huì)縮小為一個(gè)“抽屜”圖標(biāo)，點(diǎn)開(kāi)“抽屜”圖標(biāo)，導(dǎo)航欄的三個(gè)圖標(biāo)會(huì)以縱向列表的方式完整的展示在用戶面前.

圖2　在電腦和手機(jī)上網(wǎng)頁(yè)的瀏覽效果

2.3界面創(chuàng)新與新媒體應(yīng)用

Bing是微軟新推出的搜索引擎，與谷歌百度相比是后起之秀，但卻能在競(jìng)爭(zhēng)激烈的搜索引擎領(lǐng)域取得一席之地，其原因很大程度得益于Bing美觀的設(shè)計(jì).Bing的搜索每天都會(huì)更新壁紙.現(xiàn)在大部分企業(yè)網(wǎng)站一打開(kāi)就是老套的廠字形結(jié)構(gòu)，千篇一律，毫無(wú)創(chuàng)新與亮點(diǎn)可言.

傳統(tǒng)廠字形網(wǎng)頁(yè)打開(kāi)后映入眼簾的便是上方大大的導(dǎo)航欄，左邊大大的菜單與目錄，右邊則是最新文章的列表.商業(yè)網(wǎng)站最新流行的布局方式為DIV+CSS樓層式布局[5].樓層式布局使得屬于不同頁(yè)面的內(nèi)容分布在不同樓層，結(jié)構(gòu)簡(jiǎn)單明了，對(duì)菜單與目錄的要求降低了.所以不同于廠字形網(wǎng)頁(yè)，菜單與目錄的占用空間將大大縮小.各樓層內(nèi)容分化，所以首頁(yè)無(wú)需過(guò)于復(fù)雜的導(dǎo)航與菜單目錄.可以將網(wǎng)頁(yè)頂層樓層設(shè)計(jì)為一個(gè)漂亮簡(jiǎn)約的歡迎界面.如圖3所示，本網(wǎng)站歡迎界面樓層鋪滿用戶顯示屏幕，背景圖片是可以定期更換的墻紙，墻紙可以是漂亮的風(fēng)景圖片，也可以是節(jié)日、活動(dòng)宣傳畫(huà)，或是企業(yè)最新產(chǎn)品的宣傳海報(bào).歡迎界面左上角是企業(yè)logo，右上角是圖標(biāo)化的導(dǎo)航欄，左下角是網(wǎng)頁(yè)分享按鈕，下方是新媒體(企業(yè)微博、微信)介紹與鏈接.歡迎界面布局清爽、簡(jiǎn)約、大方.這樣歡迎界面宛如是用戶電腦桌面，可以根據(jù)節(jié)日或活動(dòng)等不同需求自定義墻紙與色調(diào)風(fēng)格，給用戶帶來(lái)親切感與視覺(jué)沖擊力，既達(dá)到美觀的用戶體驗(yàn)又起到了企業(yè)宣傳的作用，一舉兩得[6].

圖3　可隨意更換的首頁(yè)墻紙

用戶喜歡分享好的東西給朋友，從朋友圈到微博無(wú)處不在.如果用戶喜歡企業(yè)的品牌、網(wǎng)頁(yè)、產(chǎn)品等，不妨給用戶一個(gè)更方便的分享途徑，這樣不僅提升了用戶體驗(yàn)，更是為企業(yè)宣傳做出了巨大貢獻(xiàn).所以歡迎界面的分享按鈕是十分必要的.現(xiàn)在的分享按鈕基本不需要開(kāi)發(fā)者自己制作了，網(wǎng)絡(luò)上已經(jīng)有許多代理商提供分享按鈕源代碼，本課題使用百度提供的分享按鈕.微博、微信這樣的新媒體是企業(yè)的宣傳利器，也是用戶熟知、喜愛(ài)的元素，新媒體介紹與鏈接自然也必不可少.適當(dāng)使用這樣的新媒體可以更貼近用戶的生活，增強(qiáng)互動(dòng)性，擴(kuò)大宣傳效果.本網(wǎng)站的新媒體鏈接提供企業(yè)微博、微信與淘寶網(wǎng)店的介紹與鏈接.

3　后臺(tái)功能設(shè)計(jì)

3.1商品上傳與管理

商品數(shù)據(jù)由商品名稱、價(jià)格、描述等數(shù)據(jù)組成，其中名稱、價(jià)格、描述、上市時(shí)間、尺碼、是否在售、圖片等信息需要展示在商品展示介紹頁(yè)面，名稱、價(jià)格、圖片則需要展示在商品列表和商品推薦欄.類別雖然沒(méi)有顯示，卻是商品分類顯示的重要依據(jù).上市時(shí)間、價(jià)格還會(huì)被用于商品列表的商品排序功能.是否在售分為三個(gè)選項(xiàng)：在售、售罄、即將上市.商品分類分為五個(gè)類別：飾品&配件、服飾&內(nèi)衣、化妝品&護(hù)膚品、生活用品&電子產(chǎn)品、其他.商品信息包括圖片信息與文字信息兩種，管理員在填寫(xiě)完商品信息并提交后，如果輸入格式正確，文字信息會(huì)立即保存至數(shù)據(jù)庫(kù)表，圖片會(huì)上傳至服務(wù)器，通過(guò)session傳遞參數(shù)生成html，并將圖片地址保存至數(shù)據(jù)庫(kù).管理員可以將已經(jīng)上傳的商品信息進(jìn)行刪除.管理員選中需要?jiǎng)h除的商品，后臺(tái)做出action請(qǐng)求，并將數(shù)據(jù)封裝到Pojo中，解析成json數(shù)據(jù)，jsp拿到數(shù)據(jù)反解析顯示[7]，根據(jù)商品id發(fā)出刪除請(qǐng)求，若商品存在則從數(shù)據(jù)庫(kù)中刪除.

圖4　商品列表設(shè)計(jì)

3.2商品列表與詳細(xì)介紹

如圖4所示，在商品列表，用戶可以通過(guò)單擊列表中某一商品，進(jìn)入該商品的詳細(xì)介紹頁(yè)面.當(dāng)用戶單擊列表中某一商品時(shí)，瀏覽器通過(guò)該商品的id請(qǐng)求該商品的數(shù)據(jù).若存在商品id，則將商品各類數(shù)據(jù)封裝于類，通過(guò)session傳遞參數(shù)，jsp頁(yè)面拿到服務(wù)器反饋的數(shù)據(jù)，在新的jsp頁(yè)面刷新顯示內(nèi)容.用戶可以分類別瀏覽商品，當(dāng)用戶單擊某一類別時(shí)，商品列表便只會(huì)顯示該類別的商品，與此同時(shí)，當(dāng)商品數(shù)量較多時(shí)，一頁(yè)無(wú)法全部顯示時(shí)，商品列表可以自動(dòng)分頁(yè).在分類的同時(shí)，用戶可以根據(jù)商品“id”或“上市時(shí)間”或“價(jià)格”對(duì)該類別商品進(jìn)行排序顯示.當(dāng)用戶單擊分類欄中某一類別時(shí)，瀏覽器通過(guò)該商品類別請(qǐng)求該類別商品的數(shù)據(jù).首先服務(wù)器根據(jù)商品類別檢查商品是否存在，若存在，則將商品各類數(shù)據(jù)封裝于類，通過(guò)session傳遞參數(shù)，jsp頁(yè)面拿到服務(wù)器反饋的數(shù)據(jù)，在原jsp頁(yè)面局部刷新顯示內(nèi)容.

商品分類顯示頁(yè)面的代碼實(shí)現(xiàn);

publicStringfenleiShangpin(){

if(this.ztshangpin.getShangpinliebie()!=null){

Stringname=null;

try{name=newString(this.ztshangpin.getShangpinliebie().getBytes("iso-8859-1"),"utf-8");}

catch(UnsupportedEncodingExceptione){

e.printStackTrace();}

System.out.println(name);

this.ztshangpin.setShangpinliebie(name);

this.listShangpin=this.tShangpinDao.getAllXfIantaiSHangpinLiebiao(ztshangpin);

ActionContext.getContext().getSession().put("listShangpin",listShangpin);

return"successGetShangpin";

}

return"failGetShangpin";

}

圖5　電腦與手機(jī)上的商品詳細(xì)介紹頁(yè)面顯示效果

3.3焦點(diǎn)圖與墻紙

焦點(diǎn)圖數(shù)據(jù)由背景圖片、新品名稱、新品價(jià)格、鏈接四個(gè)部分組成.墻紙只有圖片，但是為方便開(kāi)發(fā)和節(jié)省開(kāi)發(fā)成本，將焦點(diǎn)圖與墻紙數(shù)據(jù)庫(kù)表融合.墻紙除了圖片也擁有焦點(diǎn)圖的其他三個(gè)部分的數(shù)據(jù)，只是不顯示.焦點(diǎn)圖有三塊，每一塊的的背景圖片大小略有差異，排序也不同，所以用position字段標(biāo)注焦點(diǎn)圖位置，0表示墻紙，1表示第一張焦點(diǎn)圖，2表示第二張焦點(diǎn)圖，3表示第三張焦點(diǎn)圖.鏈接為焦點(diǎn)圖正中央按鈕的響應(yīng)跳轉(zhuǎn)鏈接，link字段接受任何文本，不限于網(wǎng)內(nèi)或網(wǎng)外地址.鏈接可以指向商品，也可以指向特定的活動(dòng)頁(yè)面，例如雙十一特惠活動(dòng)頁(yè)面等.普通網(wǎng)站常采用旋轉(zhuǎn)木馬式焦點(diǎn)圖，用戶往往只看到該焦點(diǎn)圖中首先顯示的前幾頁(yè)內(nèi)容，排在后面的被看到機(jī)率很小.一般用戶希望可以一次性瀏覽完焦點(diǎn)圖所有頁(yè)面的內(nèi)容，所以本網(wǎng)站焦點(diǎn)圖采用樓層式平鋪設(shè)計(jì).傳統(tǒng)焦點(diǎn)圖的JavaScript代碼十分影響網(wǎng)絡(luò)傳輸速度，瀏覽器兼容性也不好.

圖6　焦點(diǎn)圖設(shè)計(jì)

如圖6所示，本網(wǎng)站的三張焦點(diǎn)圖以平鋪樓層式的布局方式從上而下展示于首頁(yè)，同時(shí)焦點(diǎn)圖的背景圖片使用background-attachment:fixed的css語(yǔ)句，將背景圖片固定住，不隨鼠標(biāo)滾輪滑動(dòng)而滑動(dòng)，使瀏覽體驗(yàn)更佳.

4　結(jié)束語(yǔ)

隨著時(shí)代的發(fā)展，人們的審美觀日益提升，對(duì)商業(yè)網(wǎng)站等網(wǎng)絡(luò)產(chǎn)品的功能要求與體驗(yàn)需求越來(lái)越高.新型商業(yè)網(wǎng)站不僅需要功能齊全，更需要帶給用戶完美的瀏覽、購(gòu)物體驗(yàn)，達(dá)到和實(shí)體店消費(fèi)相同的服務(wù)效果.通過(guò)優(yōu)良的用戶體驗(yàn)設(shè)計(jì)，使企業(yè)網(wǎng)站把企業(yè)與品牌的宣傳效果達(dá)到最大化，是新型商業(yè)網(wǎng)站設(shè)計(jì)的最終目的.本文以用戶體驗(yàn)設(shè)計(jì)為核心，交互設(shè)計(jì)與視覺(jué)設(shè)計(jì)在實(shí)際應(yīng)用中取得了良好的效果，提升了用戶體驗(yàn)，而且網(wǎng)頁(yè)結(jié)構(gòu)簡(jiǎn)單、工作穩(wěn)定、可靠，體積小巧、功能齊全、成本低、應(yīng)用靈活、具有響應(yīng)式設(shè)計(jì)、扁平化設(shè)計(jì)，成功帶給人視覺(jué)沖擊力與品牌魅力.

[1]黃小牧.談智能便攜設(shè)備的“親和力”——從三大移動(dòng)平臺(tái)談自然用戶界面交互設(shè)計(jì)[J].中國(guó)新通信，2015(7)：3-5.

[2]許魯彥.基于交互設(shè)計(jì)的高校門戶網(wǎng)站設(shè)計(jì)[J].軟件導(dǎo)刊，2014，13(11)：87-89.

[3]余娜，張珂.扁平化在現(xiàn)代包裝設(shè)計(jì)中的應(yīng)用[J].包裝工程，2015，36(18)：41-44.

[4]蔣凌燕，查英華.基于HTML5的響應(yīng)式Web頁(yè)面重組適配技術(shù)研究[J].計(jì)算機(jī)與現(xiàn)代化，2015(2)：7-10.

[5]王聰，楊韶華.基于DIV+CSS技術(shù)網(wǎng)頁(yè)布局應(yīng)用與實(shí)踐[J].電腦知識(shí)與技術(shù)，2014，10(34)：8128-8132.

[6]李媛，李綸.淺析移動(dòng)端產(chǎn)品的交互設(shè)計(jì)[J].科教文匯，2013(6)：99-100.

[7]劉冰.基于J2EE和MVC的SSH研究與應(yīng)用[J].計(jì)算機(jī)與信息技術(shù)，2012(3)：32-33.

DesignandExplorationofNewCommercialWebsite

LIJia-wei1，2,CHENShu-hong1,DUANYan1

(1.CollegeofComputerandCommunication,HunanInstituteofEngineering,Xiangtan411104,China;2.CollegeofPhysicsandInformationEngineering,FuzhouUniversity,Fuzhou350116,China)

WiththedevelopmentoftheInternet,thenewtypecommercialwebsitenotonlyshouldmeetthefunctionneedsofusers,butalsoneedtoenhancetheuserexperience.Thispaperexploresthedesignprocessofanewtypecommercialwebsitefromtwoparts:interactionandvisualdesignofforegroundandfunctiondesignofbackground.Thiswebsitehastheadvantagesofsimplestructure,stablerunning,smallsize,full-featured,lowcostandflexibleapplication.Allthesebringpeoplevisualimpactandthecharmofthebrand.ThewebsitehasbeendevelopedbasedonJ2EEplatformandOracledatabase.

CommercialWebsite;userexperience;J2EE

2015-07-08

湖南省教育廳科學(xué)研究項(xiàng)目(14C0286)；湖南省教育廳科學(xué)研究項(xiàng)目(13c180).

李嘉偉(1993-)，男，研究方向：計(jì)算機(jī)網(wǎng)絡(luò)、人機(jī)交互.

陳淑紅(1975-)，女，博士，講師，研究方向：社會(huì)網(wǎng)絡(luò)分析、算法優(yōu)化.

TP393.0

A

1671-119X(2016)01-0041-04