記得老大交給我第一個任務的時候，我特別興奮的打開Axure，然后畫了好久好久，什么都沒有憋出來，以為自己能力很強，能夠把一句話的需求，分分鐘轉換為一紙原型圖。每次回顧上一次的工作時，都會在想，正確的且適合自己的原型設計方法應該是什么樣子的呢，每次都有一些改進，但是沒有進行完整的總結，只因為我比較懶，現在就總結一下啦~

原型設計前，我們到底應該要準備哪一些工作呢？

假如現在老大拋一個需求給你，那你該怎么辦？

首先，該需求是屬于已有產品的，還是需要設計一個新的產品呢？

其次，需求對應的業務流程又是什么樣子的、使用的用戶群體有哪一些

然后，提供線上處理的話，需要支持哪一些功能、包括的信息有哪一些

最后，繪制一份線框圖，線框圖看起來麻煩的話，可以加上功能流程圖，拿給相關人員進行驗證咯~

之前看過很多大神的分析，真的只是看過，等到自己實戰的時候，才發現：白看了那么多干貨，別人的經驗總結是別人的經驗總結，和我有什么關系，我也只能感嘆一聲“噢~好強大、就是這樣子的喲~”所以說，看再多的干貨都是無用的，需要自己去實踐，在實踐中檢驗別人的真理！

假定需求明確的前提條件下，比較全面的原型設計工作包括：

第一，業務&規則

1.梳理涉及到業務相關的人、事、物（和當前項目有利益關系的）

2.用例圖

說明：前兩點主要是為了讓我們理清業務的涉及對象，產品功能的業務范圍。

3.規則設計：產品的使用范圍、產品設計的主要的目的，在規劃產品功能的時候，有一定的指導作用

第二，功能&信息

1.梳理產品結構圖（功能結構圖）：該產品需要包括哪一些功能，也可以很方便的定義各個功能的優先級。

2.梳理信息結構圖：了解產品需要哪一些基礎數據，類似于表設計，只是說明有哪一些數據而已。

第三，頁面&流程

1.梳理業務流程圖（由于需涉及到相關角色較多，會使用泳道圖）：繪制完成第二點的內容后，需要再結合用戶的實際操作，根據當前系統能夠提供的功能，來繪制出業務流程圖。如發現哪一環節走不通，返回第二步，修改產品功能，繼續完善業務流程圖。

2.繪制線框圖：找類似的競品，繪制出每個功能對應的原型界面，繪制的時候，也看看信息結構圖，以免設計原型的時候，遺漏重要數據。

3.功能流程圖（對原型進行一個流程說明，針對產品功能來梳理功能之間的關系）：這一步也可以不做，關鍵看成員需求和產品的體系，為了保證頁面的完整性，一般情況下，有時間就把原型對應的功能流程圖繪制出來，這樣子可以保證自己在繪制原型的過程中，不會遺漏某一個彈窗、次要頁面等。

那么，展開來說就是：

一、業務分析

第一點，找出利益相關的事物

分為三大類：

用戶，最常見的參與者

系統，和本系統有交互的系統（硬件、軟件）

運行的進程，比如說時間，時間有時候會觸發某一些進程

//產出物：用戶場景分析//

第二點：理清產品規則（原則）

該產品主要的使用范圍、用戶范圍、設計的主要目的

在產品開發的過程中、使用的過程中，會產生各種需求或者由于項目的進度，需要改變某些功能的優先級，那么拿出產品的規則說明來定義功能的優先級、需求

//產出物：產品規則說明//

第三點，繪制用例圖

//產出物：用例圖//

二、產品結構圖（功能結構圖）和信息結構圖

第一點：先產品結構圖

產品結構圖，指產品功能結構圖，就是說這個產品的所有功能模塊結構圖。比如微信分四個大模塊：消息、通訊錄、發現、我的，依次每個模塊里面還有對應的功能。

目的：是為了梳理需求，防止出現缺頁面，缺模塊的現象，以鳥瞰的方式對整個產品的頁面結構形成一個直觀的認識；

產品結構圖通常出現在我們產品的創意階段，就是原型圖出來之前。在這個階段，其實我們對具體頁面的元素，還是沒有太清晰的概念的，我們可以先通過業務流程的來繪制出一份比較粗的功能結構圖出來，繪制完成后，再去想當前的功能需要哪一些數據，當前的功能會產生哪一些數據，產品的數據需要從哪里去獲取（比如說，相關軟件提供、需要自己設計一個后臺管理系統等），把這些數據羅列出來，繪制成信息結構圖。

然后提供信息結構圖，去完善功能結構圖。

等我們的產品慢慢成型，每個頁面的細節也出來的時候，我們也要同步更新功能結構圖，這時候圖中的一個節點變得更加細，可能代表功能一個模塊，一個彈層，一個承載了功能的元素，用來告訴我們每個頁面的功能，以及頁面之間的跳轉。

功能結構圖可以通過備注去說明每個功能的優先級、技術實現、項目時間等因素

//產出物：功能結構圖//

第二點：信息結構圖

信息結構圖：指脫離實際頁面，將產品所有的數據抽象出來，組合分類的圖表。比如：微信的用戶資料包括：昵稱、頭像、微信號、二維碼、地址、性別等。再比如：微信在朋友圈中，發布信息包括：文字、圖片或小視頻、時間等。

說明：

內容主要是產品需要展示的信息元素

作為開發建立數據庫的參考依據，產品涉及到的數據均羅列出來，不會做到設計表結構的時候那么詳細。

如果產品涉及到的信息比較多，可以分開列舉，有一些信息之間會存在關聯的關系。

//產出物：信息結構圖//

三、業務流程圖

主要是業務流程圖，模擬實際的使用過程中，用戶的操作流程，即：

角色：部門、崗位或人

活動：做了什么事情

次序：做這些事情的次序如何

規則：什么情況下到什么事情

注意：不能用一張圖去說明整個業務，需要分清主次，把主要的業務節點抽出來，子流程單獨進行繪制。

參考已有的功能結構圖和用例圖去繪制產品的業務流程圖，通過分析實際的業務，來完善功能結構圖，并完成業務流程圖。

//產出物：業務流程圖//

四、線框圖

建議：

采用Axure灰度圖

繪制之前使用自己的原型設計規范，這樣子設計出來的頁面會美觀，同時會節約設計的時間

競品的界面分析（這個其實在業務分析的時候就可以完成這一步），“抄”優點，學會識別“缺點”，有時間整理一系列的模板原型出來，或者是完善屬于自己的元件庫！

通過前面的功能結構圖、信息結構圖、業務流程圖，對原型頁面進行查漏補缺

頁面命名規范，不要隨便取名稱

進行版本管理、修改記錄

//產出物：產品原型設計稿//

總結：

大體流程是這樣子說，其實在真正的工作中，有一些工作是可以省掉的，但是習慣一定要要成，一定要學會如何去分析一個需求，把它轉為一個功能、一個流程、，快速的設計出完整且優秀的原型頁面。前期工作做好了，在比較大型的項目中或者是版本迭代的時候，真的是百利無一害，加油吧~