產品經理當然要會畫原型啦~

聊聊怎么畫原型吧！

在畫原型之前，更重要的事情，就是畫頁面流程圖和信息架構圖！假如你沒有這些東西，就開始畫原型，那么等著你的就是沒完沒了的改改改。

頁面流程圖

頁面流程圖是以用戶視角，看流程合理性。通常適合于跳轉比較復雜的產品功能，如電商、社交產品。

為什么要畫頁面流程：

（1）是交互設計/原型設計的基本依據，是邏輯基礎。如果你都沒想好頁面流轉的順序，那么你畫的原型一定不是可以確定下來的版本

（2）代表了用戶的操作過程，先畫頁面流程圖能迅速發現體驗問題。有了頁面流程圖，你可以設身處地想象用戶在使用產品時的操作流程，發現其中可能出現的問題

（3）突出頁面重點元素與邏輯關系，提升原型的設計效率。很多頁面不是全新頁面，而是在原有頁面做一些修改，如果你知道頁面流轉順序，那么會給你畫原型減輕很多工作量

頁面流程圖包含：

（1）四方形：業務流程中的四方形部分，異常流程或彈層通常用菱形表示

（2）流向：主干流向和輔助流向

（3）重點元素：每個流程中，重點要體現和表達的內容是什么

畫頁面流程圖的工具：

（1）Axure：畫了頁面流程圖可以緊接著畫原型

（2）ppt：方便講解

需要注意的地方：

（1）回歸業務流程，明確主線：頁面流程一定來自于業務流程，一般為業務流程中的方形部分。異常流程一般為彈層或彈窗提示。業務流程畫的好，頁面流程就簡單。

（2）明確頁面中的重點元素：功能在頁面中，有哪些是需要表現元素。增加異常流程的處理邏輯。增加輔助的幫助頁面。考慮下游觸發點（按鈕/鏈接/滑動...)。

（3）溝通與優化：首先要盡可能窮舉涉及的頁面，然后做減法，有些頁面合并或刪除。通過原型草圖，優化調整頁面關鍵元素。與UI、UE、前端研發多溝通會有更好的效果。

頁面流程圖一般規則：

頁面流程圖例：

一個具體案例：

業務流程：

頁面流程：

主要是分離出了普通用戶的操作流程，加異常處理。

對于普通用戶的關鍵頁面和關鍵流向：

頁面流程圖：

（1）分離出5個頁面，確定流程流向

（2）固定元素，例如在“1購物車”中，“提交訂單”就是下游觸發點，點擊后流向下一個頁面；在“2輸入優惠碼”中有關鍵元素“填寫優惠碼”，另外還有下游觸發點“確認訂單”...

（3）針對每個頁面去畫對應的原型圖

信息架構圖

信息架構圖，以產品視角，看包含多少功能點。適合于層級分明的，如音樂產品、新聞客戶端、閱讀類產品等。

信息架構圖例1：

產品原型設計

有了頁面流程圖或信息架構圖，現在終于可以開始畫原型啦。首先，什么是產品原型設計？

產品原型，俗稱線框圖，大概就是草圖的意思吧。它是產品落地的關鍵點，是從虛擬概念到用戶接觸的節點。同時也是產品經理產出的關鍵內容，上傳下達，上給老板，下給UI、UE同事。

產品從原型到上線的流程：

大公司的產品經理只需要做手繪和低保真的部分，小公司可能還要兼職交互設計...

案例：

好的原型有什么特點：

（1）整體：頁面結構清晰、跳轉關系明確、與業務流程一致、完整表達用戶需求

（2）獨立頁面：功能元素明確有序、位置關系清晰、不同狀態變化清晰

（3）交互設計：清晰的交互邏輯、一致交互方式、界面統一

常用工具：

（1）紙筆：自己畫畫，快速學習和定位

（2）白板：多人討論

（3）軟件Axure/Sketch/墨刀：產出正式文檔

案例：

（1）研究流程：業務流程->頁面流程

（2）確定頁面框架：大概確定頁面布局和大的框架

（3）畫原型：畫模塊，確定交互細節

注意事項：

（1）盡可能用真實比例、真實文案，使元素更真實，也避免在需求評審時被之一。盡可能真實模擬極端情況，并示例清楚。
（2）緊扣需求主體，不橫生枝節。如果原型需要增加新功能，一定要是來源于需求，并且要考慮后端數據來源。

（3）不要上顏色！原型就用黑白灰，不要給UI、UE挖坑

（4）目錄樹清晰，閱讀流暢

（5）保存修改記錄，關鍵修改重新保存文件

畫/改原型的時間盡量控制在20%工作時間之內，否則就要問問自己是不是哪里出問題了哦。

用Axure動手畫原型之前的靈魂拷問：

產品需求想明白了沒？？？

產品流程理清楚了沒？？？

手繪草圖畫了沒？？？

手繪草圖和Boss確認了沒？？？