劉利琴

（安徽新華學(xué)院，安徽 合肥 230088）

校園購物網(wǎng)站下用戶體驗(yàn)?zāi)Ｐ驮O(shè)計(jì)與實(shí)現(xiàn)

劉利琴

（安徽新華學(xué)院，安徽 合肥 230088）

隨著新型電子商務(wù)模式的迅速發(fā)展，實(shí)現(xiàn)線上、線下互動(dòng)互通的零售模式對網(wǎng)站用戶體驗(yàn)提出更高的要求.本文結(jié)合用戶體驗(yàn)?zāi)Ｐ屠碚撛O(shè)計(jì)購物網(wǎng)站的業(yè)務(wù)層，提出以“用戶為中心”的購物網(wǎng)站可用性設(shè)計(jì)與優(yōu)化的整體設(shè)計(jì)思想，并使用具體技術(shù)架構(gòu)實(shí)現(xiàn)用戶體驗(yàn)設(shè)計(jì)各種功能模塊.

用戶體驗(yàn)；電子商務(wù)；可用性設(shè)計(jì)

校園C2C是一種專門針對高校校園學(xué)生交易的一種電子商務(wù)模式，良好用戶體驗(yàn)的網(wǎng)站能贏得獲得諸多的用戶，更能帶來一批又一批的忠實(shí)用戶，提高活躍用戶的數(shù)量和瀏覽量.結(jié)合James Garrett用戶體驗(yàn)?zāi)Ｐ椭械慕Y(jié)構(gòu)層、框架層、表現(xiàn)層的分析，設(shè)計(jì)線上、線下互動(dòng)互通的零售渠道，提倡“以用戶為中心”進(jìn)行產(chǎn)品功能和界面設(shè)計(jì)可用性的設(shè)計(jì)，達(dá)到消費(fèi)者便利購物的目的.

1 技術(shù)框架

1.1 Bootstrap框架簡介

UI層使用Bootstrap框架響應(yīng)式設(shè)計(jì)，它由MARK OTTO和Jacob Thornton所設(shè)計(jì)和建立，在github上開源之后，迅速流行起來.大量的優(yōu)秀工程師為該項(xiàng)目踴躍貢獻(xiàn)代碼，社區(qū)活躍用戶眾多，因此代碼版本進(jìn)化非?？焖伲俜轿臋n質(zhì)量優(yōu)雅，同時(shí)互聯(lián)網(wǎng)上涌現(xiàn)了許多基于Bootstrap建設(shè)的網(wǎng)站.它們都有些共同的特點(diǎn)：界面清新、簡潔、要素排版利落大方.Bootstrap簡單靈活可用于架構(gòu)流行的用戶界面和交互接口的html，css，javascript工具集.它具有大量的誘人特性：友好的學(xué)習(xí)曲線，卓越的兼容性，響應(yīng)式設(shè)計(jì)，12列格網(wǎng)，樣式向?qū)臋n，自定義JQuery插件，完整的類庫，基于Less等.此外還提供了響應(yīng)式設(shè)計(jì)，可以通過單個(gè)文件支持各種手持設(shè)備，自適應(yīng)不同的設(shè)備和屏幕變化，這些在如今移動(dòng)設(shè)備普及的年代，有著無與倫比的優(yōu)勢，在不同的移動(dòng)設(shè)備上顯示都非常出色，是基于用戶體驗(yàn)網(wǎng)站的前端框架優(yōu)先選擇之一.

1.2 Ajax技術(shù)簡介

BLL層使用Ajax處理客戶端請求，返回結(jié)果.Ajax是Web2.0階段系列技術(shù)和相關(guān)產(chǎn)品服務(wù)中非常重要的一種技術(shù).Ajax直接相關(guān)的幾個(gè)技術(shù)點(diǎn)是異步、JavaScript和XML，很好解決了借助異步JavaScript實(shí)現(xiàn)瀏覽器和服務(wù)器之間的異步交互，無需重新裝載整個(gè)頁面就可以向服務(wù)器發(fā)送請求，并接受響應(yīng).同時(shí)對XML文檔的解析和處理.

1.3 codefirst編碼技術(shù)

DAL使用Entity Framework操作數(shù)據(jù)，該框架中的Code First可以在還沒有建立數(shù)據(jù)庫的情況下就開始編碼，然后通過代碼來生成數(shù)據(jù)庫，方便以后的維護(hù)和擴(kuò)展，擴(kuò)展只需要更改核心代碼，而不必去重復(fù)的寫底層操作數(shù)據(jù)庫的代碼，大大節(jié)約了開發(fā)時(shí)間，提高了代碼質(zhì)量.

2 可用性功能設(shè)計(jì)

2.1 用戶的需求

基于用戶體驗(yàn)的信息資源整合直接面對用戶，突出需求和服務(wù)，將用戶需求與服務(wù)機(jī)構(gòu)的策略、環(huán)境方面的要求進(jìn)行協(xié)調(diào)，然后轉(zhuǎn)入用戶體驗(yàn)構(gòu)建的設(shè)計(jì)階段.為了提供用戶清晰化和可理解的信息，界面設(shè)計(jì)在信息構(gòu)建的基礎(chǔ)上，合理安排界面要素，區(qū)分信息重要程度，實(shí)現(xiàn)人機(jī)交互的易用性.該平臺面向買賣雙方的WEB服務(wù)集，通過移動(dòng)設(shè)備、PC機(jī)訪問網(wǎng)站處理業(yè)務(wù)、及時(shí)查詢商品信息、訂單狀態(tài)、購物環(huán)節(jié)評價(jià)等.系統(tǒng)綜合應(yīng)用了網(wǎng)絡(luò)編程技術(shù)（ASP.NET）、數(shù)據(jù)庫軟件的應(yīng)用（Microsoft SQL Server 2008）、C#等技術(shù)完成了該交易平臺的建設(shè).

2.2 高用戶體驗(yàn)的界面設(shè)計(jì)

用戶輸入用戶名登錄網(wǎng)站，每輸入一個(gè)字符，系統(tǒng)就會判斷當(dāng)前的用戶名在系統(tǒng)中是否存在，及時(shí)反饋給用戶，減少用戶登錄和注冊失敗的可能.在用戶登錄后，網(wǎng)站將用戶登錄信息存儲到cookie中，保存三天，減少用戶重復(fù)登錄.

合理的界面布局，可以減少用戶注意力的分散，突出視圖重點(diǎn).在系統(tǒng)的主界面中，圖標(biāo)或菜單通常布局在視圖區(qū)域的頂部和底部或是四角，減少用戶注意力分散.其中圖標(biāo)設(shè)計(jì)遵循約定俗成和簡約的規(guī)則,減輕用戶的認(rèn)知負(fù)擔(dān)，提高用戶的認(rèn)知效率.前端是用戶體驗(yàn)當(dāng)中非常重要的一部分，移動(dòng)設(shè)備上訪問傳統(tǒng)網(wǎng)站信息，由于移動(dòng)端屏幕過小導(dǎo)致頁面內(nèi)容都堆積在一起，用戶不好點(diǎn)擊到需要點(diǎn)擊的鏈接，容易點(diǎn)錯(cuò)，用戶體驗(yàn)很差.在設(shè)計(jì)前端使用Bootstrap框架，能夠根據(jù)不同設(shè)備的屏幕寬度調(diào)整頁面顯示內(nèi)容.

為了滿足不同用戶對網(wǎng)站整體顏色的喜好，網(wǎng)站整體上以白色為底，在網(wǎng)站右側(cè)增加了一個(gè)浮動(dòng)的按鈕，用來切換網(wǎng)站的整體顏色，共有十六種顏色可供選擇，主要通過加載不同CSS樣式表，控制網(wǎng)站整體顏色，選擇不同的顏色加載不同的CSS樣式表.

用戶在瀏覽商品時(shí)，鼠標(biāo)放到商品上的時(shí)候，會對此商品的重要信息進(jìn)行遮罩，凸顯出商品的重要信息，預(yù)防用戶錯(cuò)選.用戶填寫信息時(shí)候，會對用戶當(dāng)前填寫的文本框，進(jìn)行邊框發(fā)光效果，使得用戶及時(shí)的知道自己填到什么地方了.在用戶界面的設(shè)計(jì)中凸顯重要信息Hover效果，有利于購物平臺體驗(yàn)的的提升.

2.3 用戶體驗(yàn)的表現(xiàn)層細(xì)節(jié)優(yōu)化

2.3.1 圖片上傳異步實(shí)現(xiàn)

購物平臺頁面中會有大量的商品圖片，因此會影響到網(wǎng)站的加載速度.在數(shù)據(jù)存儲部分，為了減少數(shù)據(jù)庫的大小，商品圖片僅僅存儲一個(gè)路徑，沒有將圖片存儲到數(shù)據(jù)庫中，這樣可以加速商品圖片數(shù)據(jù)的讀取速度.在商品圖片上傳部分，使用Ajax和HTML5的技術(shù)實(shí)現(xiàn)了商品的多圖片異步上傳，上傳完成后會及時(shí)的顯示在頁面.在后臺部分，系統(tǒng)會根據(jù)用戶上傳的圖片得到一個(gè)MD5校驗(yàn)碼，系統(tǒng)根據(jù)每個(gè)文件的MD5判斷這張圖片是不是存在于服務(wù)器中，如果存在的話，就不進(jìn)行圖片的物理保存操作，直接返回一個(gè)現(xiàn)在圖片的地址，沒有的話就將此圖片進(jìn)行壓縮處理，將圖片路徑和相對應(yīng)的MD5值存入數(shù)據(jù)庫中，以供下次匹對.這樣做可以有效減小圖片大小，加快頁面的加載速度，同時(shí)統(tǒng)一了圖片的尺寸，頁面顯示效果更佳.

2.3.2 購物車設(shè)計(jì)優(yōu)化

每個(gè)頁面頭部都會有一個(gè)購物車的圖標(biāo)，圖標(biāo)上會顯示用戶購物車中有幾種商品，用戶點(diǎn)擊后，出現(xiàn)動(dòng)畫效果，頁面整體右移，在左側(cè)會出現(xiàn)購物車的明細(xì).使用jQuery UI技術(shù)實(shí)現(xiàn)查詢過程不用進(jìn)行頁面跳轉(zhuǎn)，減少用戶加載頁面的時(shí)間，購物車信息反應(yīng)及時(shí).用戶修改商品庫存時(shí)，點(diǎn)擊修改庫存，會彈出一個(gè)填寫剩余數(shù)量的對話框，用戶只需輸入當(dāng)時(shí)的庫存數(shù)量，其他的信息由系統(tǒng)自動(dòng)完成.由于傳統(tǒng)購物網(wǎng)站的購物車會使用Session進(jìn)行存儲，這樣就導(dǎo)致用戶在關(guān)閉當(dāng)前瀏覽器窗口或者停留時(shí)間過長后，就會導(dǎo)致購物車信息的丟失，必須重新購物，用戶體驗(yàn)差.為了避免同樣的問題，在設(shè)計(jì)網(wǎng)站時(shí)，購物車的存儲使用了cookie加數(shù)據(jù)庫的方式，不管用戶關(guān)閉了瀏覽器還是停留了很長時(shí)間，購物車的信息依舊會保存下來.此外對購物車的信息也進(jìn)行了加密處理，保護(hù)用戶的隱私.

2.3.3 導(dǎo)航功能分析與設(shè)計(jì)

設(shè)計(jì)導(dǎo)航條在購物過程中對需要商品進(jìn)行篩選，能讓用戶體驗(yàn)度大大增加.商品展示頁面上部是一個(gè)導(dǎo)航條，根據(jù)用戶的選擇分類不同，顯示不同.整個(gè)頁面在篩選和分頁中大量使用了Ajax技術(shù)，整個(gè)頁面根據(jù)用戶選擇的不同條件只會更新商品列表部分，其他不會發(fā)生改變，減少了頁面跳轉(zhuǎn)和用戶的等待時(shí)間.這樣使用戶的操作更加的及時(shí)，高效，也讓整個(gè)頁面的顯示效果更好.

4 測試與分析

為保證多人在線購買的環(huán)境下能順利通過，保證網(wǎng)站整體頁面的加載速度，確定在用戶量過大的時(shí)候系統(tǒng)能夠正常運(yùn)行.在開發(fā)的最后對系統(tǒng)進(jìn)行了負(fù)壓測試.利用微軟的Application Center Test進(jìn)行測試.選取了首頁，商品分類頁，商品詳細(xì)頁，購物車頁這幾個(gè)用戶最常使用的頁面，模擬500個(gè)用戶同時(shí)在線進(jìn)行購物，進(jìn)行了測試.

圖1 網(wǎng)頁響應(yīng)時(shí)間

從圖1中可知，500人同時(shí)在線，系統(tǒng)能夠正常運(yùn)行，并反饋結(jié).隨著用戶數(shù)量的增加，網(wǎng)頁響應(yīng)時(shí)間有所增加，在7-8分鐘趨于平穩(wěn)，未超過1s，滿足需求.

文章使用ASP.NET+Ajax開發(fā)購物平臺，UI層使用Bootstrap框架響應(yīng)式的設(shè)計(jì)、DAL層使用Entity Framework操作數(shù)據(jù)、BLL層處理客戶端請求，返回結(jié)果.很好的解決了PC與手機(jī)終端的巨量信息獲取體驗(yàn)問題，同時(shí)提高頁面加載速度，用戶使用體驗(yàn)得到進(jìn)一步提升.

〔1〕郭文波.基于用戶體驗(yàn)的標(biāo)準(zhǔn)化網(wǎng)站設(shè)計(jì)與開發(fā)流程研究[D].上海師范大學(xué),2012.

〔2〕李雪蓮,楊真,許佳.C2C電子商務(wù)平臺用戶體驗(yàn)設(shè)計(jì)研究[J].美術(shù)界,2013（06）:102.

〔3〕楊莉莉.以用戶體驗(yàn)為導(dǎo)向的電商購物網(wǎng)站界面設(shè)計(jì)研究[D].華東理工大學(xué),2014.

〔4〕汪強(qiáng).校園C2C網(wǎng)上交易平臺的應(yīng)用研究[J].中國科技信息,2010（23）:92-93.

〔5〕趙瑨.混合型Web應(yīng)用的用戶體驗(yàn)設(shè)計(jì)[D].首都經(jīng)濟(jì)貿(mào)易大學(xué),2014.

TP393

A

1673-260X（2017）03-0020-02

2016-10-11

安徽省質(zhì)量工程項(xiàng)目：軟件工程綜合實(shí)踐教育中心（2014sxzx021）；安徽新華學(xué)院校級質(zhì)量工程項(xiàng)目（2014jgkcx02）