校園購物網站下用戶體驗模型設計與實現

劉利琴

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

校園購物網站下用戶體驗模型設計與實現

劉利琴

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

隨著新型電子商務模式的迅速發展，實現線上、線下互動互通的零售模式對網站用戶體驗提出更高的要求.本文結合用戶體驗模型理論設計購物網站的業務層，提出以“用戶為中心”的購物網站可用性設計與優化的整體設計思想，并使用具體技術架構實現用戶體驗設計各種功能模塊.

用戶體驗；電子商務；可用性設計

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

1 技術框架

1.1 Bootstrap框架簡介

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

1.2 Ajax技術簡介

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

1.3 codefirst編碼技術

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

2 可用性功能設計

2.1 用戶的需求

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

2.2 高用戶體驗的界面設計

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

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

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

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

2.3 用戶體驗的表現層細節優化

2.3.1 圖片上傳異步實現

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

2.3.2 購物車設計優化

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

2.3.3 導航功能分析與設計

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

4 測試與分析

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

圖1 網頁響應時間

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

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

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

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

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

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

〔5〕趙瑨.混合型Web應用的用戶體驗設計[D].首都經濟貿易大學,2014.

TP393

A

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

2016-10-11

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