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

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

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

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

中圖分類號(hào)：TP311? ?文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2021）34-0145-02

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

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

1 公用模塊設(shè)置

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5 結(jié)語(yǔ)

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

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

參考文獻(xiàn)：

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

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

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

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

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

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