基于Axure的圖書電商產(chǎn)品原型設(shè)計

李佳鍵，王風(fēng)碩

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

關(guān)鍵詞：Axure;多頁面;圖書

中圖分類號：TP311? ?文獻標(biāo)識碼：A

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

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

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

1 公用模塊設(shè)置

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

2 完成網(wǎng)站頁面設(shè)計需具備的能力

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

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

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

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

3 開發(fā)環(huán)境及開發(fā)工具及方法介紹

該軟件是在基于Windows10 的系統(tǒng)，利用Axure以RP軟件的形式為出體現(xiàn)將Axure自帶的HTML轉(zhuǎn)換器，將文件格式也可輸出為HTML格式。

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

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

4 設(shè)計與實現(xiàn)

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

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

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

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

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

5 結(jié)語

Axure所制作的是基于UI設(shè)計圖以及UE設(shè)計圖對于前端設(shè)計師對頁面的功能是一個必不可少的環(huán)節(jié)，也是在前端以及設(shè)計師兩方交互的理解方面起中間人的效果，是企業(yè)能在設(shè)計師能夠?qū)⒆约旱谋磉_完全運用于軟件上，同時也可以讓前端設(shè)計師能夠更好地理解到設(shè)計師的設(shè)計理念、交互作用，以及所對應(yīng)的功能。

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

參考文獻：

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

[2] 張樂，張凱.復(fù)旦大學(xué) 以Axure原型設(shè)計一站式服務(wù)系統(tǒng)[J].中國教育網(wǎng)絡(luò)，2020（Z1）：79-80.

[3] 尹文升. 基于Web平臺的ERP財務(wù)核算管理系統(tǒng)研究[D].大連理工大學(xué)，2005.

[4] 劉英. 基于Intranet的高校教務(wù)管理信息系統(tǒng)的研究[D].西安理工大學(xué)，2002.

[5] 汪滟. 一種敏捷的Web軟件快速開發(fā)工具的設(shè)計與實現(xiàn)[D].華中科技大學(xué)，2007.

【通聯(lián)編輯：梁書】