淺談互聯網產品原型設計

廖家莉

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

關鍵詞：Axure;原型設計;項目開發流程;產品

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

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

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

1 項目開發流程

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

1.1 需求分析

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

1.2 項目開發

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

1.3 軟件測試

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

1.4 小結

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

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

2.1 產品原型體現方法

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

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

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

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

3 結束語

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

參考文獻：

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

[2]張曉景.Axure RP 8互聯網產品原型設計：微課版[M].北京：人民郵電出版社，2018.