李嘉偉，陳淑紅，段　焰

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

?

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

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

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

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

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

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

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

1　系統(tǒng)方案

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

2　前臺交互設(shè)計

2.1扁平化設(shè)計

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

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

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

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

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

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

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

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

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

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

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

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

圖3　可隨意更換的首頁墻紙

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

3　后臺功能設(shè)計

3.1商品上傳與管理

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

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

3.2商品列表與詳細介紹

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

商品分類顯示頁面的代碼實現(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　電腦與手機上的商品詳細介紹頁面顯示效果

3.3焦點圖與墻紙

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

圖6　焦點圖設(shè)計

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

4　結(jié)束語

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

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

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

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

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

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

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

[7]劉冰.基于J2EE和MVC的SSH研究與應(yīng)用[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é)研究項目(14C0286)；湖南省教育廳科學(xué)研究項目(13c180).

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

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

TP393.0

A

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