校園購物網(wǎng)站下用戶體驗模型設(shè)計與實現(xiàn)

劉利琴

（安徽新華學院，安徽 合肥 230088）

校園購物網(wǎng)站下用戶體驗模型設(shè)計與實現(xiàn)

劉利琴

（安徽新華學院，安徽 合肥 230088）

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

用戶體驗；電子商務；可用性設(shè)計

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

1 技術(shù)框架

1.1 Bootstrap框架簡介

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

1.2 Ajax技術(shù)簡介

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

1.3 codefirst編碼技術(shù)

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

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

2.1 用戶的需求

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

2.2 高用戶體驗的界面設(shè)計

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

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

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

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

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

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

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

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

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

2.3.3 導航功能分析與設(shè)計

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

4 測試與分析

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

圖1 網(wǎng)頁響應時間

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

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

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

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

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

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

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

TP393

A

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

2016-10-11

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