校園C2C的電子商務購物網站建設,大學論文內容摘要：隨著新型電子商務形式的迅速發(fā)展，實現線上、線下互動互通的零售形式對網站用戶體驗提出更高層次的要求。本文結合用戶體驗模型理論設計購物網站的業(yè)務層，提出以用戶為中心的購物網站可用性設計與優(yōu)化的整體設計思想，并使用詳細技術架構實現用戶體驗設計各種功能模塊。本文關鍵詞語：用戶體驗；電子商務；可用性設計；校園C2C是一種專門針對高校校園學生交易的一種電子商務形式，良好用戶體驗的網站能博得獲得眾多的用戶，更能帶來一批又一批的忠實用戶，提高活潑踴躍用戶的數量和閱讀量。結合JamesGarrett用戶體驗模型中的構造層、框架層、表現層的分析，設計線上、線下互動互通的零售渠道，提倡以用戶為中心進行產品功能和界面設計可用性的設計，到達消費者便利購物的目的。1技術框架1.1Bootstrap框架簡介UI層使用Bootstrap框架響應式設計，它由MARKOT-TO和JacobThornton所設計和建立，在github上開源之后，迅速流行起來。大量的優(yōu)秀工程師為該項目踴躍奉獻代碼，社區(qū)活潑踴躍用戶諸多，因而代碼版本進化非?？焖伲俜轿臋n質量優(yōu)雅，同時互聯網上涌現了很多基于Bootstrap建設的網站。它們都有些共同的特點：界面清新、簡潔、要素排版利落大方。Bootstrap簡單靈敏可用于架構流行的用戶界面和交互接口的,css,javascript工具集。它具有大量的誘人特性：友好的學習曲線，卓越的兼容性，響應式設計，12列格網，樣式向導文檔，自定義JQuery插件，完好的類庫，基于Less等。除此之外還提供了響應式設計，能夠通過單個文件支持各種手持設備，自適應不同的設備和屏幕變化，這些在如今移動設備普及的年代，有著無與倫比的優(yōu)勢，在不同的移動設備上顯示都非常出色，是基于用戶體驗網站的前端框架優(yōu)先選擇之一。1.2Ajax技術簡介BLL層使用Ajax處理客戶端請求，返回結果。Ajax是Web2.0階段系列技術和相關產品服務中非常重要的一種技術。Ajax直接相關的幾個技術點是異步、JavaScript和XML,很好解決了借助異步JavaScript實現閱讀器和服務器之間的異步交互，無需重新裝載整個頁面就能夠向服務器發(fā)送請求，并接受響應。同時對XML文檔的解析和處理。1.3codefirst編碼技術DAL使用EntityFramework操作數據，該框架中的CodeFirst能夠在還沒有建立數據庫的情況下就開場編碼，然后通過代碼來生成數據庫，方便以后的維護和擴展，擴展只需要更改核心代碼，而不必去重復的寫底層操作數據庫的代碼，大大節(jié)約了開發(fā)時間，提高了代碼質量。2可用性功能設計2.1用戶的需求基于用戶體驗的信息資源整合直接面對用戶，突出需求和服務，將用戶需求與服務機構的策略、環(huán)境方面的要求進行協調，然后轉入用戶體驗構建的設計階段。為了提供用戶清楚明晰化和可理解的信息，界面設計在信息構建的基礎上，合理布置界面要素，區(qū)分信息重要程度，實現人機交互的易用性。該平臺面向買賣雙方的WEB服務集，通過移動設備、PC機訪問網站處理業(yè)務、及時查詢商品信息、訂單狀態(tài)、購物環(huán)節(jié)評價等。系統綜合應用了網絡編程技術〔ASP.NET〕、數據庫軟件的應用〔MicrosoftSQLServer2008〕、C#等技術完成了該交易平臺的建設。2.2高用戶體驗的界面設計用戶輸入用戶名登錄網站，每輸入一個字符，系統就會判定當下的用戶名在系統中能否存在，及時反應給用戶，減少用戶登錄和注冊失敗的可能。在用戶登錄后，網站將用戶登錄信息存儲到cookie中，保存三天，減少用戶重復登錄。合理的界面布局，能夠減少用戶注意力的分散，突出視圖重點。在系統的主界面中，圖標或菜單通常布局在視圖區(qū)域的頂部和底部或是四角，減少用戶注意力分散。華而不實圖標設計遵循約定俗成和簡約的規(guī)則，減輕用戶的認知負擔，提高用戶的認知效率。前端是用戶體驗當中非常重要的一部分，移動設備上訪問傳統網站信息，由于移動端屏幕過小導致頁面內容都堆積在一起，用戶不好點擊到需重點擊的鏈接，容易點錯，用戶體驗很差。在設計前端使用Bootstrap框架，能夠根據不同設備的屏幕寬度調整頁面顯示內容。為了知足不同用戶對網站整體顏色的愛好，網站整體上以白色為底，在網站右側增加了一個浮動的按鈕，用來切換網站的整體顏色，共有十六種顏色可供選擇，主要通過加載不同CSS樣式表，控制網站整體顏色，選擇不同的顏色加載不同的CSS樣式表。用戶在閱讀商品時，鼠標放到商品上的時候，會對此商品的重要信息進行遮罩，凸顯出商品的重要信息，預防用戶錯選。用戶填寫信息時候，會對用戶當下填寫的文本框，進行邊框發(fā)光效果，使得用戶及時的知道自個填到什么地方了。在用戶界面的設計中凸顯重要信息Hover效果，有利于購物平臺體驗的的提升。2.3用戶體驗的表現層細節(jié)優(yōu)化2.3.1圖片上傳異步實現購物平臺頁面中會有大量的商品圖片，因而會影響到網站的加載速度。在數據存儲部分，為了減少數據庫的大小，商品圖片僅僅存儲一個途徑，沒有將圖片存儲到數據庫中，這樣能夠加速商品圖片數據的讀取速度。在商品圖片上傳部分，使用Ajax和5的技術實現了商品的多圖片異步上傳，上傳完成后會及時的顯示在頁面。在后臺部分，系統會根據用戶上傳的圖片得到一個MD5校驗碼，系統根據每個文件的MD5判定這張圖片是不是存在于服務器中，假如存在的話，就不進行圖片的物理保存操作，直接返回一個如今圖片的地址，沒有的話就將此圖片進行壓縮處理，將圖片途徑和相對應的MD5值存入數據庫中，以供下次匹對。這樣做能夠有效減小圖片大小，加快頁面的加載速度，同時統一了圖片的尺寸，頁面顯示效果更佳。2.3.2購物車設計優(yōu)化每個頁面頭部都會有一個購物車的圖標，圖標上會顯示用戶購物車中有幾種商品，用戶點擊后，出現動畫效果，頁面整體右移，在左側會出現購物車的明細。使用jQueryUI技術實現查詢經過不用進行頁面跳轉，減少用戶加載頁面的時間，購物車信息反響及時。用戶修改商品庫存時，點擊修改庫存，會彈出一個填寫剩余數量的對話框，用戶只需輸入當時的庫存數量，其他的信息由系統自動完成。由于傳統購物網站的購物車會使用Session進行存儲，這樣就導致用戶在關閉當下閱讀器窗口或者停留時間過長后，就會導致購物車信息的丟失，必須重新購物，用戶體驗差。為了避免同樣的問題，在設計網站時，購物車的存儲使用了cookie加數據庫的方式，不管用戶關閉了閱讀器還是停留了很長時間，購物車的信息還是那樣會保存下來。除此之外對購物車的信息也進行了加密處理，保衛(wèi)用戶的隱私。2.3.3導航功能分析與設計設計導航條在購物經過中對需要商品進行挑選，能讓用戶體驗度大大增加。商品展示頁面上部是一個導航條，根據用戶的選擇分類不同，顯示不同。整個頁面在挑選和分頁中大量使用了Ajax技術，整個頁面根據用戶選擇的不同條件只會更新商品列表部分，其他不會發(fā)生改變，減少了頁面跳轉和用戶的等待時間。這樣使用戶的操作愈加的及時，高效，也讓整個頁面的顯示效果更好。4測試與分析為保證多人在線購買的環(huán)境下能順利通過，保證網站整體頁面的加載速度，確定在用戶量過大的時候系統能夠正常運行。在開發(fā)的最后對系統進行了負壓測試。利用微軟的ApplicationCenterTest進行測試。選取了首頁，商品分類頁，商品具體頁，購物車頁這幾個用戶最常使用的頁面，模擬500個用戶同時在線進行購物，進行了測試。圖1網頁響應時間從圖1中可知，500人同時在線，系統能夠正常運行，并反應結。隨著用戶數量的增加，網頁響應時間有所增加，在7-8分鐘趨于平穩(wěn)，未超過1s,知足需求。文章使用ASP.NET+Ajax開發(fā)購物平臺，UI層使用Bootstrap框架響應式的設計、DAL層使用EntityFramework操作數據、BLL層處理客戶端請求，返回結果。很好的解決了PC與手機終端的巨量信息獲取體驗問題，同時提高頁面加載速度，用戶使用體驗得到進一步提升。以下為參考文獻[1]郭文波?；谟脩趔w驗的標準化網站設計與開發(fā)流程研究[D].上海師范大學，2020.[2]李雪蓮，楊真，