廖家莉

摘要：信息化高速發(fā)展的今天，越來(lái)越多的互聯(lián)網(wǎng)產(chǎn)品，以前有軟件用就非常知足了，現(xiàn)在不僅有很多軟件用還可以自己定制軟件。定制軟件前我們一般先進(jìn)行原型設(shè)計(jì)，就像飛機(jī)、房屋的建設(shè)成本都比較高，在建之前我們一般會(huì)先畫(huà)模型，做模型。產(chǎn)品原型是產(chǎn)品面市之前的一個(gè)框架設(shè)計(jì)，是利用紙筆或者工具快速勾勒出的產(chǎn)品的大致結(jié)構(gòu)。產(chǎn)品原型設(shè)計(jì)可以非常快速地完成頁(yè)面的排版布局，有一個(gè)大致的頁(yè)面效果，再加一些交互動(dòng)作可以使之更加形象生動(dòng)。原型設(shè)計(jì)方便和用戶以及開(kāi)發(fā)人員之間的交流，不僅可以提高項(xiàng)目開(kāi)發(fā)的工作效率和降低成本，還可以有效地避免重要元素被忽略，也可以阻止一些不合理的假設(shè)。不管是大型項(xiàng)目還是小型項(xiàng)目，項(xiàng)目開(kāi)發(fā)流程都是先進(jìn)行需求分析，再研發(fā)并測(cè)試。以前進(jìn)行需求分析的稱為需求分析師，主要出相關(guān)文檔;近幾年稱為產(chǎn)品經(jīng)理，產(chǎn)品經(jīng)理的職責(zé)非常多，開(kāi)發(fā)前期需要負(fù)責(zé)市場(chǎng)分析、用戶需求分析、綜合各部分的意見(jiàn)和建議，畫(huà)出產(chǎn)品原型;開(kāi)發(fā)中期需要跟進(jìn)產(chǎn)品與技術(shù)部緊密交流，確保產(chǎn)品實(shí)現(xiàn)進(jìn)度和質(zhì)量;開(kāi)發(fā)后期需要進(jìn)行產(chǎn)品服務(wù)、協(xié)調(diào)相關(guān)部門(mén)進(jìn)行網(wǎng)站的維護(hù)、產(chǎn)品優(yōu)化以及市場(chǎng)營(yíng)銷等。該文主要講述項(xiàng)目開(kāi)發(fā)流程、產(chǎn)品原型體現(xiàn)方法、Axure RP8工作界面及主要功能。

關(guān)鍵詞：Axure;原型設(shè)計(jì);項(xiàng)目開(kāi)發(fā)流程;產(chǎn)品

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

文章編號(hào)：1009-3044（2020）03-0283-02

產(chǎn)品原型是將頁(yè)面的基本結(jié)構(gòu)、頁(yè)面的排版布局、功能模塊、元素、人機(jī)交互的動(dòng)作等，通過(guò)線框描述的方法在紙上或者使用工具畫(huà)出來(lái)，可以更具體、更生動(dòng)地表現(xiàn)出來(lái)。現(xiàn)在客戶有了更多需求，想用更獨(dú)特的方式實(shí)現(xiàn)，但只用語(yǔ)言溝通交流做出來(lái)的產(chǎn)品可能達(dá)不到客戶預(yù)期的效果還需要返工。我們可以使用產(chǎn)品的原型設(shè)計(jì)向客戶演示，更直觀地向客戶講解產(chǎn)品原型的預(yù)期效果，可以快速地挖掘出用戶的真實(shí)需求，再做項(xiàng)目，這樣做出來(lái)的項(xiàng)目和客戶預(yù)期的更接近，可以降低開(kāi)發(fā)成本。項(xiàng)目開(kāi)發(fā)人員也可以根據(jù)設(shè)計(jì)原型進(jìn)行溝通，明確項(xiàng)目需求，可以提高開(kāi)發(fā)效率。但產(chǎn)品原型并不是一個(gè)可以投入使用的軟件，只有基本的效果而已。產(chǎn)品原型又分為草圖原型、低保真原型、高保真原型。草圖原型就是在紙上畫(huà)出大概的需求，沒(méi)有交互，不便于交流。低保真原型美觀上和交互效果上還很欠缺，但可以快速構(gòu)建產(chǎn)品大致結(jié)構(gòu)，提供基本交互效果，方便和用戶以及開(kāi)發(fā)人員之間的交流。高保真原型就是和真實(shí)產(chǎn)品很接近，可以模擬出真實(shí)軟件的界面及交互效果，只是不是連接的數(shù)據(jù)庫(kù)，但可以模擬數(shù)據(jù)的增刪改查。高保真原型需要投入大量的時(shí)間和精力。接下來(lái)，我淺談一下項(xiàng)目開(kāi)發(fā)流程、Axure RP8工作界面及主要功能。

1 項(xiàng)目開(kāi)發(fā)流程

項(xiàng)目開(kāi)發(fā)會(huì)涉及很多成員，如需求分析師、產(chǎn)品經(jīng)理、美工、UI設(shè)計(jì)師、前端開(kāi)發(fā)人員、后臺(tái)開(kāi)發(fā)人員、架構(gòu)師、軟件測(cè)試員、技術(shù)總監(jiān)等。一般項(xiàng)目開(kāi)發(fā)分為三大步，需求分析、項(xiàng)目開(kāi)發(fā)、軟件測(cè)試。下面我簡(jiǎn)單描述下這三個(gè)環(huán)節(jié)：

1.1 需求分析

需求分析是非常重要的環(huán)節(jié)，需求分析又分很多步驟。第一步，需求分析，先和客戶交流，了解客戶需求，了解產(chǎn)品需要實(shí)現(xiàn)哪些功能及主要任務(wù)流程，并寫(xiě)相關(guān)需求文檔。如果是公司內(nèi)部研發(fā)就頭腦風(fēng)暴，進(jìn)行市場(chǎng)分析，分析將研發(fā)的產(chǎn)品需要實(shí)現(xiàn)哪些功能及主要流程。第二步，畫(huà)思維導(dǎo)圖，將用戶描述的信息用圖呈現(xiàn)出來(lái)，主要包含產(chǎn)品的各個(gè)功能模塊及其邏輯關(guān)系等。第三步，畫(huà)流程圖，畫(huà)出每一步具體是怎么操作實(shí)現(xiàn)的，可以阻止一些不切實(shí)際的想法。第四步，頁(yè)面架構(gòu)設(shè)計(jì)，也就是整個(gè)項(xiàng)目需要有哪些頁(yè)面。第五步，頁(yè)面布局設(shè)計(jì)，頁(yè)面布局設(shè)計(jì)又分為總體結(jié)構(gòu)布局設(shè)計(jì)和導(dǎo)航設(shè)計(jì)。首先確定總體結(jié)構(gòu)布局設(shè)計(jì)，然后確定導(dǎo)航是水平導(dǎo)航還是垂直導(dǎo)航，最后確定每一個(gè)功能模塊放置的位置。第六步，低保真原型設(shè)計(jì)，低保真原型設(shè)計(jì)就是利用相關(guān)設(shè)計(jì)工具制作出簡(jiǎn)單的軟件原型。其實(shí)，需求分析前還有一步非常重要的過(guò)程就是競(jìng)品分析，分析同行做得比較好，比較成熟的部分，分析同行有哪些功能，怎么實(shí)現(xiàn)的。第七步，原型評(píng)審，項(xiàng)目組成員都需要參加，開(kāi)會(huì)討論該原型是否符合要求。不同角色關(guān)注的問(wèn)題都不同，前端關(guān)注的是美觀、如何操作簡(jiǎn)單，后臺(tái)開(kāi)發(fā)人員關(guān)注的是怎么實(shí)現(xiàn)更簡(jiǎn)單，總監(jiān)關(guān)注的是產(chǎn)品周期，測(cè)試人員關(guān)注的是項(xiàng)目的功能是否齊全，所以產(chǎn)品經(jīng)理一定要考慮周全。一般原型評(píng)審?fù)ㄟ^(guò)后需求分析階段就結(jié)束了，簽署相關(guān)文件就進(jìn)入下一階段項(xiàng)目開(kāi)發(fā)。但有些客戶還會(huì)要求畫(huà)高保真原型。

1.2 項(xiàng)目開(kāi)發(fā)

項(xiàng)目開(kāi)發(fā)又分前端設(shè)計(jì)和后臺(tái)開(kāi)發(fā)，以前前端設(shè)計(jì)根據(jù)美工使用Photoshop出的設(shè)計(jì)圖做相應(yīng)的靜態(tài)網(wǎng)頁(yè)，現(xiàn)在有原型設(shè)計(jì)，可以直接按照產(chǎn)品原型做靜態(tài)網(wǎng)頁(yè)?，F(xiàn)在前端有很多框架，前端設(shè)計(jì)之前一定要考慮好用什么框架，一般框架確定之后都不會(huì)再更改，如果想更改會(huì)非常麻煩?？蚣芫拖裥薹孔訒r(shí)的基本架構(gòu)，架構(gòu)都搭建好了，后面還想更改的話，一般情況下都是推倒重建。現(xiàn)在不僅有很多瀏覽器，移動(dòng)設(shè)備也普及了，前端開(kāi)發(fā)還得考慮兼容性和響應(yīng)式布局。前端做好后，再是后臺(tái)開(kāi)發(fā)，后臺(tái)開(kāi)發(fā)分很多語(yǔ)言，有asp.net、php、Java等，先選擇用什么技術(shù)，再選擇用什么框架。后臺(tái)開(kāi)發(fā)也有很多框架，一般先搭好框架，再分配每個(gè)成員做哪一個(gè)模塊，督促整個(gè)項(xiàng)目開(kāi)發(fā)周期。團(tuán)隊(duì)項(xiàng)目開(kāi)發(fā)過(guò)程會(huì)涉及項(xiàng)目整合，可以用SVN，SVN可以將所有成員的代碼自動(dòng)整合在一起，能看到每次是誰(shuí)更新了，更新的內(nèi)容可以高亮顯示出來(lái)。如果出錯(cuò)了，還可以還原到某個(gè)節(jié)點(diǎn)。項(xiàng)目開(kāi)發(fā)完成后是軟件測(cè)試。

1.3 軟件測(cè)試

軟件測(cè)試也是非常重要的環(huán)節(jié)，軟件測(cè)試是保證軟件質(zhì)量的重要手段。軟件測(cè)試不僅僅是找錯(cuò)誤，還需要分析錯(cuò)誤產(chǎn)生的原因，如何進(jìn)行改進(jìn)。一般軟件測(cè)試都不讓開(kāi)發(fā)人員測(cè)試，由于思維定式開(kāi)發(fā)人員很難找到自己的錯(cuò)誤。測(cè)試需要有測(cè)試需求分析、業(yè)務(wù)流程分析、測(cè)試用例設(shè)計(jì)、測(cè)試用例評(píng)審、測(cè)試用例的更新和完善。軟件測(cè)試又分黑盒測(cè)試和白盒測(cè)試。黑盒測(cè)試也就是功能測(cè)試，白盒測(cè)試就是內(nèi)部結(jié)構(gòu)測(cè)試、邏輯測(cè)試。有些項(xiàng)目開(kāi)發(fā)測(cè)試周期比開(kāi)發(fā)周期都長(zhǎng)。

1.4 小結(jié)

實(shí)際開(kāi)發(fā)過(guò)程中，一個(gè)公司一般會(huì)幾個(gè)項(xiàng)目同時(shí)推進(jìn)，由于項(xiàng)目的開(kāi)發(fā)周期短，人手等問(wèn)題。有時(shí)會(huì)由多人共同完成一個(gè)產(chǎn)品原型，需求分析階段主要由產(chǎn)品經(jīng)理和美工設(shè)計(jì)交流，出產(chǎn)品原型和需求文檔。開(kāi)發(fā)人員等不及需求文檔，直接看產(chǎn)品原型就進(jìn)行后續(xù)開(kāi)發(fā)。需求階段其實(shí)還應(yīng)該有數(shù)據(jù)分析，寫(xiě)數(shù)據(jù)字典，有些產(chǎn)品經(jīng)理或需求分析師可能對(duì)數(shù)據(jù)庫(kù)不太了解，會(huì)讓后臺(tái)開(kāi)發(fā)人員完成。開(kāi)發(fā)完成后，測(cè)試工作可能還會(huì)交給產(chǎn)品經(jīng)理來(lái)做。

2 Axure RP8工作界面及主要功能

2.1 產(chǎn)品原型體現(xiàn)方法

產(chǎn)品原型的體現(xiàn)方法有很多，主要可以通過(guò)紙質(zhì)、word、Vl-SiO、Axure等工具來(lái)實(shí)現(xiàn)。其中用紙質(zhì)實(shí)現(xiàn)的話，可以快速地畫(huà)出頁(yè)面的大致效果，還可以用來(lái)記錄設(shè)計(jì)師的瞬間靈感，但紙質(zhì)的原型可能只有設(shè)計(jì)師本人才看得懂，不適于向客戶進(jìn)行展示，不便于后續(xù)的交流討論、研發(fā)設(shè)計(jì)、備案等，還得轉(zhuǎn)換成電子文檔，比較麻煩。因此紙質(zhì)的原型適合項(xiàng)目小、工期短、用戶需求少的產(chǎn)品;使用Word進(jìn)行原型設(shè)計(jì)的話，可以使用文本框、圖片、形狀、圖表等工具，畫(huà)出一個(gè)簡(jiǎn)單的產(chǎn)品原型。Word簡(jiǎn)單，使用方便，效果豐富，但word畫(huà)出的原型交互效果不好，幾乎沒(méi)有任何的交互效果;VISiO的話，也可以畫(huà)原型，但更適合畫(huà)流程圖;一般畫(huà)原型都使用的是原型設(shè)計(jì)的專用工具，比如Axure、墨刀、mockup screen等。用專用工具不僅有豐富的控件，還可以做出更好的交互效果。其中Axure RP是其中的佼佼者。

2.2 Axure RP8工作界面及主要功能

Axure RP是一款快速實(shí)現(xiàn)、準(zhǔn)確表達(dá)、帶有交互效果且容易上手的原型設(shè)計(jì)工具。一旦掌握了一定的開(kāi)發(fā)技巧后，加上一個(gè)良好的規(guī)劃，那么很多東西都可以信手拈來(lái)。Axure的主要功能為：繪制網(wǎng)站架構(gòu)圖、繪制流程圖、使用元件繪制出簡(jiǎn)單的原型、可以添加交互用例及樣式、輸出HTML網(wǎng)站、輸出word規(guī)格文檔等。其中word文檔中包含目錄、網(wǎng)頁(yè)原型、注釋等很多內(nèi)容。

Axure RP8軟件界面大致可以分為8個(gè)區(qū)域，分別為菜單欄、工具欄、工作區(qū)域、頁(yè)面面板、元件面板、母版面板、檢視面板、概要面板。其中文件菜單除了有新建、保存、打開(kāi)等基本功能，還可以新建團(tuán)隊(duì)項(xiàng)目。發(fā)布菜單可以生成HTML文件和Word說(shuō)明書(shū)。工具欄非?？旖莘奖?，工具欄中可以自定義工具欄，工具欄中有鋼筆工具和Photoshop的類似，可以繪制路徑、形狀等，工具欄中還有對(duì)齊方式，樣式工具欄等。頁(yè)面面板用來(lái)顯示軟件頁(yè)面，可以看到產(chǎn)品的大致結(jié)構(gòu)及頁(yè)面間的關(guān)系。頁(yè)面結(jié)構(gòu)采用樹(shù)形菜單，層級(jí)分明，結(jié)構(gòu)清晰，可以對(duì)頁(yè)面進(jìn)行增加、移動(dòng)、刪除等基本操作，還可以自動(dòng)生成網(wǎng)站的架構(gòu)圖。元件面板又分基本元件、表單元件、菜單和表格元件、標(biāo)記元件、流程圖元件、圖標(biāo)元件。元件面板可以自定義元件庫(kù)以及載人外部元件庫(kù)?；驹亲畛Ｓ玫模匦卧梢钥焖倮L制網(wǎng)頁(yè)布局。動(dòng)態(tài)面板用得非常多，可以用來(lái)實(shí)現(xiàn)簡(jiǎn)單的交互效果。中繼器可以綁定數(shù)據(jù)，用來(lái)實(shí)現(xiàn)數(shù)據(jù)的增刪改查功能。表單元件可以配合變量使用，實(shí)現(xiàn)值的傳遞等。流程圖元件可以和工具欄中的連接及箭頭使用繪制出流程圖。還有很多的圖標(biāo)元件也都非常實(shí)用。母版面板可以設(shè)計(jì)共用部分，重復(fù)利用，提高開(kāi)發(fā)效率。比如導(dǎo)航、版權(quán)信息等可以使用母版實(shí)現(xiàn)，還可以將母版一鍵添加到所有頁(yè)面中，或刪除母版，以及控制母版位置等。檢視面板可以給元件命名、添加交互效果、注釋，以及編輯樣式和交互樣式設(shè)置等。其中交互效果有很多事件，如載入時(shí)、鼠標(biāo)單擊、移入、移出等事件。配置的動(dòng)作也有很多，如打開(kāi)鏈接、設(shè)置顯示隱藏、設(shè)置文本、設(shè)置圖片、設(shè)置啟用禁用、設(shè)置元件樣式大小等動(dòng)作，還可以添加變量、使用表達(dá)式、使用函數(shù)，添加條件等。概要面板不僅可以看到頁(yè)面使用了哪些元件，還可以管理動(dòng)態(tài)面板，如快速添加、復(fù)制、刪除動(dòng)態(tài)面板狀態(tài)等。

3 結(jié)束語(yǔ)

Axure RP就其本身而言，其實(shí)僅僅是一個(gè)工具，大部分人都可以很快學(xué)習(xí)并掌握之，但要畫(huà)出好的原型，會(huì)用只是一個(gè)最基本要求，關(guān)鍵是要有良好的原型開(kāi)發(fā)思維。也就是說(shuō)畫(huà)原型的重點(diǎn)不是技術(shù)，而是思維，除了要有整體規(guī)劃之外，還需要充分結(jié)合實(shí)際業(yè)務(wù)需求，在理解需求的基礎(chǔ)上進(jìn)行開(kāi)發(fā)。畫(huà)產(chǎn)品原型前一定要對(duì)行業(yè)非常了解，市場(chǎng)分析很重要，現(xiàn)在互聯(lián)網(wǎng)產(chǎn)品太多了，市場(chǎng)分析可以體現(xiàn)產(chǎn)品的價(jià)值。在公司產(chǎn)品經(jīng)理的地位是比較高的，很多人說(shuō)公司里最大的產(chǎn)品經(jīng)理是老板。產(chǎn)品經(jīng)理分不同的級(jí)別，初級(jí)的是產(chǎn)品助理，主要畫(huà)原型設(shè)計(jì);中級(jí)的是產(chǎn)品經(jīng)理，會(huì)負(fù)責(zé)原型評(píng)審會(huì)議的組織;高級(jí)的則是產(chǎn)品總監(jiān)，會(huì)負(fù)責(zé)多條產(chǎn)品開(kāi)發(fā)的進(jìn)度。在開(kāi)發(fā)項(xiàng)目過(guò)程中，需求分析是最重要的，需求分析就像修房子時(shí)打的地基，地基都不穩(wěn)的話，后面修得再高再好都有可能塌。地基不好的話，我們可以重新打，如果地基都沒(méi)打好就開(kāi)始修的話，后面維護(hù)起來(lái)非常麻煩，到時(shí)再重建的話成本就不是一般的高。地基打好修好后還需要檢查是否安全以免人員傷亡。所以說(shuō)項(xiàng)目開(kāi)發(fā)時(shí)，需求分析是第一步也是最重要的一步，如果沒(méi)有需求分析直接開(kāi)發(fā)，開(kāi)發(fā)效率將非常慢，會(huì)出現(xiàn)邊做邊改，邊做邊想的現(xiàn)象。如果需求分析都出錯(cuò)了，對(duì)于后續(xù)開(kāi)發(fā)會(huì)有很大影響，很有可能返工，不僅會(huì)提高成本，還可能使得項(xiàng)目延期上線。需求分析可以降低開(kāi)發(fā)成本及提高開(kāi)發(fā)效率。需求分析后是項(xiàng)目開(kāi)發(fā)，項(xiàng)目開(kāi)發(fā)完成后還需要進(jìn)行測(cè)試再上線使用。

參考文獻(xiàn)：

[l]劉剛.Axure RP8原型設(shè)計(jì)圖解視頻教程：Web+App[M].北京：人民郵電出版社，2017.

[2]張曉景.Axure RP 8互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計(jì)：微課版[M].北京：人民郵電出版社，2018.