AAA教育

提起產品經理，我們首先想到的可能就是產品原型。雖然畫原型并不是產品經理最核心的工作，但也算是比較重要的工作。原型是溝通的橋梁，也是產品經理輸出的一種產品，對原型的掌握直接代表了產品經理的能力。所以，作為產品經理，不僅要認真對待產品原型，更要使自己輸出的每一份文檔或資料都能發揮最大的價值。

一、什么是產品原型？

產品原型是產品設計方案的表達，是產品設計界面的展示，是功能與交互的示意，也是與其他人員溝通的依據。產品原型一般包含界面布局、簡單交互以及相關說明。根據使用場景的不同，可分為手繪草圖、低保真原型和高保真原型。在團隊內部溝通，低保真原型使用的更頻繁一些，所以本文以低保真原型為例，介紹原型設計的一些方法。根據以往經驗，建議在輸出原型的時候，同時輸出產品功能結構圖和產品操作邏輯圖。

二、為什么要進行產品原型設計？

1、便于產品經理對產品的整體把握。產品原型是產品設計方案的表達，在原型設計的過程中，可以驗證產品方案的合理性，可以對產品的布局、交互和功能有一個整體、全面的把握。

2、能使產品需求評審更高效。我在之前的文章中提到過，需求變更不僅會增加開發成本，也會打擊團隊的士氣。如果產品經理能在需求評審前認真設計產品原型，盡量做出可觀看、可操作和帶交互的產品原型，這樣大家可以直觀的操作和感受產品，更能激發大家的興趣，也會提出一些比較合理的建議，從而減少后期需求變更的次數，提高需求評審的效率。

3、進行產品的視覺設計和功能開發。只有先有產品原型，前端人員才能開始視覺設計，之后才能開始產品界面和功能的開發。所以產品原型是產品的基礎，只有基礎足夠牢固，才能建造起宏偉的產品大廈。

三、如何進行產品原型設計？

1、分析產品設計開發流程

作為產品經理，心中要有整個產品的開發地圖，要清楚在什么階段、做什么事情、輸出什么內容、找什么人溝通、得到什么結果等。在進行原型設計前，首先需要進行需求調研、需求分析、產品定義、業務分析、功能分析等，然后才能開始產品原型設計。

2、原型設計時需要思考的問題

1. 此原型的用戶是誰？
2. 原型需要達到的目的是什么？
3. 用戶的使用場景是什么？
4. 需要提供什么樣的用戶體驗？
5. 后續的工作流程如何把握？

產品原型的用戶是領導、團隊成員還是客戶？不同的使用對象有著不同的需求，要根據不同的需求設計不同的原型，不同的原型復雜程度和側重點都是不同的。所以原型設計需要帶著很強的目的性和針對性。面對用戶，除了滿足基本需求外，也需要考慮用戶體驗。針對不同的使用場景，設計不同的展現方式，可以是圖片、文檔或在線頁面等，有了良好的用戶體驗，產品原型才能發揮最大的價值。

3、分析產品功能

在原型設計前，首先要分析產品功能，了解產品結構。也就是說先要進行產品原型框架的搭建，然后再開始內容的填充。

4、根據產品功能，構建頁面目錄

5、根據頁面目錄進行原型圖繪制

1. 低保真原型，為了不影響視覺設計，最好不要加顏色，采用黑、白、灰進行配色
2. 圖片和圖標采用占位符代替
3. 頁面內所有元素都要有對齊關系

6、根據產品原型圖對相關元素進行說明（在對應說明頁面中）

1. 占位符中需要設計的內容
2. 相關按鈕點擊后的現象
3. 相關圖標的變化狀態
4. 頁面彈出或跳轉描述

7、根據產品原型圖進行交互設置

1. 交互用例設置
2. 交互樣式設置
3. 特殊交互可以進行交互說明或者當面溝通
4. 設置好的交互可以在發布預覽（F5）中進行測試

8、原型發布和導出

1. 原型發布時選擇生成HTML文件，在相應的文件夾中，點擊start.html就可以通過瀏覽器打開發布的文件（在線太慢，一般建議導出使用）
2. 原型導出時，也可以將所有相關頁面導出為PNG圖片
3. 給前端提供原型時，最好分別提供HTML文件和PNG圖片

9、繪制操作流程

1. 對于交互比較復雜的操作，需要繪制操作流程圖，可以是Visio圖，也可以是頁面跳轉說明
2. 操作流程圖中形狀需要根據標準進行選擇
3. 需要包含正常操作邏輯和異常操作邏輯

10、最后輸出物

1. 功能結構（思維導圖）
2. 產品原型（Axure、Mockplus、墨刀等）
3. 操作流程（Visio或頁面跳轉說明）

總結

在設計產品原型前，要清楚什么是產品原型，為什么要設計產品原型，然后根據一定的方法進行原型設計。原型并不是越復雜越真實越好，而是根據使用對象和使用場景，設計最適合的原型。也就是說最適合的才是最好的，而什么是最適合的，恰恰體現了一個產品經理的核心能力。原型設計也是沒有盡頭的，隨著產品經理能力的提升，原型也是一個不斷更新和發展的過程，和產品一樣，原型也需要不斷迭代和完善。認真對待原型，才能認真對待產品。