淺談互聯(lián)網(wǎng)產(chǎn)品原型設計

廖家莉

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

關鍵詞：Axure;原型設計;項目開發(fā)流程;產(chǎn)品

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

文章編號：1009-3044（2020）03-0283-02

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

1 項目開發(fā)流程

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

1.1 需求分析

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

1.2 項目開發(fā)

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

1.3 軟件測試

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

1.4 小結

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

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

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

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

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

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

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

3 結束語

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

參考文獻：

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

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