基于Axure的圖書電商產品原型設計

李佳鍵，王風碩

摘要：針對手機用戶有線上圖書推薦以及圖書購買的需求，本文以 Axure 作為運行環境，采用輸出為RP以及HTML文件為模板，進行多頁面圖書購買界面設計，實現用戶可以在本網站進行圖書詳情的查看，以及購買圖書。

關鍵詞：Axure;多頁面;圖書

中圖分類號：TP311? ?文獻標識碼：A

文章編號：1009-3044（2021）34-0145-02

隨著智能移動設備和移動互聯網的普及，移動互聯網在生活中的地位越來越重要。為了適應快速發展的前端技術以及更多的Web應用需求，同時用戶對于界面美化以及界面功能需求越來越大，在當今社會中基于HTML背景當中Axure軟件在平面設計中被大部分廣泛利用，可以作為前端進行設計以及功能實現的一個很好的模板進行，對于頁面的展示以及預覽。

本設計初衷是為了讓用戶更加快捷，更加方便，通過更完整的渠道去購買正版的圖書，讓用戶有更便捷的圖書選擇，更多的圖書分類分化，將圖書規整，詳細頁面將各個書本的價格進行透明化，讓用戶能夠在本頁面中進行更多的探索，將購買與瀏覽進行一個多方位的結合，實現類似于淘寶，京東等電子商城的功能實現，為了讓用戶更有更好的用戶體驗，參考了某些票據網站以及圖書網站將整個頁面加以優化，再進行完整的輸出同時需要一個龐大的數據庫來支撐，以及對于購買書籍資源的可靠性，出版社的詳情頁面所需要龐大的數據鏈，在本頁面中都可以完整地體現出來。

1 公用模塊設置

本網站是由注冊頁面、主頁、登錄頁面、詳情頁、個人界面等部分組成，有很多頁面進行相同的功能時，所用到的模塊是相同的。該公用模塊為整個主體程序的一部分，在編譯公用模塊時需要考慮每個模塊的適應性以及對于全局變量，對于頁面的影響，將模塊的全局變量設置得更為明顯、更加容易理解，將重要的兩個主體頁面的公用模塊：主頁以及詳情頁的兩個共用模塊串聯起來，進行頁面的跳轉相同的道理將注冊頁面和登錄界面以及個人中心給聯動起來，將注冊信息上面所填寫的個人信息傳遞到全局變量中，再從全局變量傳遞到登錄界面，以及將個人中心和登錄界面邏輯串聯，可由判斷來產生登錄條件進行，是否可以登錄的結果。

2 完成網站頁面設計需具備的能力

首先是對于界面的設計能有一個大概的了解，對前端某些技術實現方面比較統籌性的理解能力，能夠熟練運用Axure軟件，同時能夠明白機械語言對于條件的設定，對各個方面環境搭建的相關知識。

實現目的同時，為了讓整個界面顯得簡潔以及方便理解，在書寫每一個函數以及功能的同時，會優先考慮頁面編譯的簡潔化。為方便在團隊編程的同時，在優化代碼方面會從看似易懂的一個方向進行編譯。

本產品運用到了UE與頁面UI設計方面知識的相結合，進行對整個網站頁面的設計，同時，為了讓用戶能夠更加簡潔地在用戶中心中查詢到自己的瀏覽歷史，收件地址，購買信息及購物車將每一個獨立的功能建立多個對應的數據庫以作儲存。

用戶的主要體驗在個人中心中，前端功能在于能對自己的信息修改例如：瀏覽歷史刪除，收件地址的增添以及查看購買書籍的訂單詳情，在主頁中，我們可以將整個頁面設計步驟劃分為五個板塊，第一個板塊為對于整個頁面的統一設計要求，第二個板塊為區域作品劃分，第三個板塊為詳情頁面的顯示，第四個板塊為個性化推薦，第五個板塊為對于個人界面中對于用戶各方面信息的顯示及交互。

3 開發環境及開發工具及方法介紹

該軟件是在基于Windows10 的系統，利用Axure以RP軟件的形式為出體現將Axure自帶的HTML轉換器，將文件格式也可輸出為HTML格式。

Axure：Axure原型交互技術是解決網站及App等產品開發過程中快速實現產品原型的必備工具，Axure原型交互技術幾乎可以不用或少用代碼即實現網站及App等產品的功能展示，而Axure原型交互技術中視頻引用的功能展示是個值得探討的問題。因此，研究了從引用網絡視頻、引用本地視頻、引用自己編寫的demo. html文件完美解決Axure原型交互技術中視頻引用問題，研究中采用了比較研究法、實踐研究法等進行了實踐應用研究。

快速原型法，簡稱原型法，是慣用的軟件開發方式之一。它是指在投入大量資源進行開發之前，確認基本的需求定義，通過可視化的開發環境，快速創建出一個可供用戶測試的目標系統的初始版本。根據用戶的反饋意見進行相應的補充修改，經過和用戶反復溝通確認、版本修改，最終得到用戶滿意的原型版本。系統的原型能直觀展現用戶需求，可減少在系統開發過程中因需求改動而反復修改產生的工作量。而高保真原型設計能體現特定功能的交互，用戶可從多個維度入手對系統進行體驗，為系統的后期開發提供完善的設計流程和業務流程，有利于開發人員后期快速準確地開展工作。原型法的開發過程主要包括確定用戶的基本需求、設計初始原型、試運行和評價原型、修改和完善原型及提供相關文檔等階段。

4 設計與實現

首先，使用Axure里面的中繼器來編輯并作為傳遞載體，同時在MySQL當中所運用到的數據庫，使之能在Axure相關能連接的網頁中，能夠進行搜索以及進一步的詳情頁的選擇，同時篩選頁面也可以運用中繼器當中的數據進行排比，篩選每一個圖書分類，將小部分的數據導入中繼器中，并編寫每一個中繼器當中數據的價格種類，以及作者通過中繼器當中每一列的屬性，在篩選頁面中進行分類，關于頁面的制作，具體基礎界面圖如圖1所示。

其次是登錄和注冊界面，在登錄和注冊界面當中，我們首先使用注冊界面當中所有的函數參值，將所有的參值命名為全局變量，在登錄當中，需要將信息暫時存入輸入全局變量當中，注冊界面已傳入的量來確保能夠將賬號和密碼對應進行判別是否正確。登錄成功后，將會把注冊當中所用到的全局變量當中的某些信息顯示在個人頁面當中，在修改個人界面當中，優先度會將個人界面當中的優先度高于注冊界面，可將其歸納于中繼器當中進行儲存。每當用戶進行個人中心當中信息的更改時，會以新的全局變量出現，再加以修改，將其存入中繼器當中，每一個用戶能夠擁有自己單獨的個人信息，用中繼器來實現Axure當中更多的用戶體驗，能將不同的用戶信息同時儲存于頁面當中，有利于將來的區分以及不同的用戶更改以及購買。

再是主頁采用以中繼器為小單位，然后以動態面板為中繼單位來進行數據的傳遞，對于頁面的分割以及對于每個顯示在主頁上面的頁面設定主頁，也可直接跳轉詳情頁面，在主頁當中點擊的話，可以直接顯示篩選頁面，篩選頁面當中，點擊圖文，可以進入詳情頁面。

最后是購買界面，購買界面當中，用戶可以通過輸入自己的住址以及購買書籍數量進行付款，將自己的購買詳情以及地址歸納于個人中心當中，也是通過全局變量來進行調配，具體流程圖如圖2所示。

整個網站總共需要16個全局變量，以及各個頁面共72個局部變量。

5 結語

Axure所制作的是基于UI設計圖以及UE設計圖對于前端設計師對頁面的功能是一個必不可少的環節，也是在前端以及設計師兩方交互的理解方面起中間人的效果，是企業能在設計師能夠將自己的表達完全運用于軟件上，同時也可以讓前端設計師能夠更好地理解到設計師的設計理念、交互作用，以及所對應的功能。

本產品主要是在UI設計師設計到前端工程師編碼的過渡階段使用的。編寫出來的顯而易見，一個比較好的圖書售賣網站原型，并將每一個細節點能夠在此軟件上進行修改，便于后期前端工程師進行代碼的設計，以及方便于后期的更改。

參考文獻：

[1] 蘇文芝.Axure原型交互中內聯框架解決視頻引入的實踐研究[J].濟源職業技術學院學報，2021，20（1）：60-64，81.

[2] 張樂，張凱.復旦大學 以Axure原型設計一站式服務系統[J].中國教育網絡，2020（Z1）：79-80.

[3] 尹文升. 基于Web平臺的ERP財務核算管理系統研究[D].大連理工大學，2005.

[4] 劉英. 基于Intranet的高校教務管理信息系統的研究[D].西安理工大學，2002.

[5] 汪滟. 一種敏捷的Web軟件快速開發工具的設計與實現[D].華中科技大學，2007.

【通聯編輯：梁書】