產品原型的規範化，目的是清楚表達產品設計理念和功能交互及執行邏輯，提高產品、研發、UI及業務部門之間的溝通效率。本文主要講解了產品原型設計的一些標準、規範及實際操作方式，方法，與大家分享。
目的：產品原型的規範化，目的是清楚表達產品設計理念和功能交互及執行邏輯，提高產品、研發、UI及業務部門之間的溝通效率，避免信息不對稱和信息傳達的遺漏和缺失而導致的整個項目進度延期問題。
對於個人來説：規範性產品原型繪製能夠提高個人的職業水平，標準，統一性，團隊內部及協作單位的溝通成本也會降低，這能減少扯皮、反覆溝通等問題，將更多時間放在產品的思考上，同時避免不必要的糾紛。
一般有五個維度來測量一個原型的真實（保真）程度。
a、視覺精煉層次
原型與最終產品看上去有多相似？一個低保真的原型也許就是一個手繪的草稿，而一個高保真原型就會是精確到像素，看上去和真實的產品沒什麼區別。
b、功能的廣度
原型能夠包含多少的功能？一個低保真的原型聚焦於那些最重要的任務，而高保真原型會有更細節的任務
c、功能的深度
每一個功能能夠被多大程度地製作成原型？一個低保真的原型可以在頁面和頁面之間跳轉，並在已有典型數據的情況下，告訴你大概的用户流程。一個高保真的原型可以讓你輸入數據，知道那些在進行不同的輸入時影響到輸出的區分。
d、交互的豐富性
原型中會有多少的交互？低保真原型也許會相當簡單，在用户使用時沒有任何的反饋信息。高保真原型將會考慮動畫效果，表單驗證，和所有用户與產品直接的細節交互。
e、數據模型的豐富性
你的原型中應用的數據有多豐富？低保真原型使用的是有限的，典型的數據設置，顯示最常見的用例。高保真原型會包括邊緣的情況，比如非常長的用户名（應該減少用户名的長度），無數據（提供默認人物頭像），第一次使用（使用空白狀態），或者極端大的數據量（使用翻頁或者過濾）。
產品原型設計根據還原度，也就是與最終成本的逼真度，大致分為低保真、中保真，高保真原型。我在過往中基本做到中保真，這也是絕大公司的要求。不同團隊及個人可能對保真度理解不一致，僅僅為個人觀點。
a、 低保真原型
表現軟件的重點功能和基本交互過程，使用簡易的線框進行處理，。好處是：製作成本低，速度快，修改也方便，在功能簡單及團隊溝通順暢時可以使用
b、 中度保真原型
中度保真的產品添加了更多細節，對軟件的交互進行了更細緻的設計，比如照片處有對應內容照片，選項卡有具體內容，按鈕顏色做了區分，有動效模擬。在大部分情況下，中度保真原型已經足夠，既表現了軟件的功能特性和交互過程，界面有一定的細節，而且使用者已經能完整體驗到最終的產品，可以驗證產品的可行性，確保了不會在後面的開發過程中發現重大失誤。缺點是花費時間會多一些。
c. 高保真原型
幾乎完全按照最終產品來製作的原型，細節豐富，包括了產品的所有功能以及詳細的交互細節。製作高保真原型可以顯著降低溝通成本，原型更精準和精美。但是，保真度越高就意味着需要花更多的時間和開發精力，而且一旦有修改也會更加耗費時間。
d、各類保真度優劣總結
墨刀：設計界面原型及交互（目前階段使用），墨刀在線協作優勢更明顯，保密性上可以由公司統一購買賬號儘量避免使用私人賬號並在權限上做一定的限制；
Axure：的保密性更強，功能更強大，但是在線協作稍微差一點點。
Xmind：繪製功能結構圖（主要）；
Visio：繪製用户使用流程、系統業務流程、功能架構等；
Word：開發週期允許時撰寫PRD；
Excel：項目時間計劃管理、項目會議紀要輸出；
一個完整項目的產品原型需要有“大綱”，包含內容如下：
a、 版本記錄
需明確記錄原型的增刪改內容及日期，
b、功能點列表
列出該原型圖的功能點，明確開發任務及優先級。對於分期開發，但原型已經出完的，標註不同功能開發的階段，“1期”、“2期”等。
a、使用xmind繪製，讓開發人員瞭解整個功能框架、信息架構，利於估算開發時間。
b、 功能結構圖中使用的功能及頁面名稱要和“功能清單列表”保持一致，
示例：
a、 原型界面設計
在繪製產品原型時，按思維導圖的產品規劃，先搭框架，製作主頁面菜單，菜單支持多個級別，各頁面的層級關係需要明確，但一般不要超過3級到4級，級數過多則意味着用户的使用層級深，是不太好的方式。。
設置母版，對於產品中的通用性功能、模塊、建立統一的母版組建，為後期原型繪製提高便利性，如統一調用母版，統一修改母版。
b、邏輯交互説明
包含數據邏輯和操作交互，主要是面向開發人員和UI設計人員闡述。描述要有利於功能邏輯的實現”，比如説，以下兩種方式的準確性
i. 點擊購物車結算按鈕，跳轉到訂單支付頁面。
ii. 點擊購物車結算按鈕，需要判斷是否選中商品，所選中商品是否有貨，a、如果沒有選中商品，點擊之後則當頁彈窗提醒“您尚未選中商品”，b、如果有選中商品，則跳轉訂單支付頁面（對於不同情況下的點擊效果，需要做多個按鈕進行不同跳轉，），可進一步説明不同跳轉的切換效果，比如是左右滑動還是直接跳轉等。
對比以上兩種方式，則第二種更明確，這也會減少溝通成本。
c、 設計説明
如果對設計有特殊要求的也需要做説明，比如支付的一般此阿勇明亮飽和的色調，專業性則一般採取藍色，或者有設計可供參考的，配色等方面。但如果對於設計沒有較好感覺，或是專業知識的，建議儘量讓設計師處理，畢竟專業的事情留給專業的人來做嘛。
給主要交互控件設置交互用例，這在墨刀中算是較為容易實現，比Axure要簡單，只需要連線即可，完善的交互能夠幫助開發清晰的理解需求。
a、在頁面層級樹的第一個頂級菜單設置並填寫【產品名稱】，下面可以添加更多層級；
b、版本號——採用子頁面進行管理，頁面名稱命名：版本號 【版本編號】如版本號V1.1.1；
c、修訂記錄——採用子頁面進行管理，管理當前版本產品原型設計的修訂記錄——文章前部分已經做了説明；
d、功能清單説明——採用子頁面進行管理，使用表格説明本次產品原型中需求的主要內容和功能；
e、正式原型部分：
i、產品頁面的層級，最高一般不超過4層；
ii、產品模塊，命名規則為“【序號】 【產品模塊名稱】”；
iii、產品功能級頁面，命名規則為“【序號】 【產品頁面名稱】”；
命名規則與文章章節目錄類似
墨刀母版的製作請參考墨刀的母版製作 具體見網址：https://modao.kf5.com/hc/search/results/?type=kb&keyword=母版
複用元件/組件，必須使用母版設計，然後再統一添加到頁面上。在添加母版時，產品的背景，要求使用“位置鎖定”，防止在原型繪製的過程中，背景變動頻繁調整的情況；
a、 PC默認尺寸為墨刀的【網頁/電視】類別，APP/H5/小程序默認尺寸選擇iPhone6或者一個特定的尺寸，並在之後的原型沿用；
b、 APP的框架設計不區分Android與IOS，僅在交互用例的設計上進行區分；
“流程頁面”設計並製作用户對本功能的使用流程，一般使用泳道流程圖，泳道流程圖的畫法可以進行百度搜索，一般而言是二維方式，橫軸為角色，縱軸為流程進展，在流程旁邊，給出必要的文字備註説明，對流程進行進一步的闡述。
示例：
需按照產品原型規範要求，需使用能更好表達原型的，使產品原型上的所有功能板塊，能夠
準備模擬用户的操作情景，保證所有功能的動態面板交互、點擊效果、頁面跳轉鏈接等交互效果準確並正確。
並且為準確描述頁面的交互效果需求。可在頁面旁邊增加“點擊交互效果需求”的説明，來描述頁面中每一個功能的操作交互需求。
示例：
為了方便開發人員查看和理解，在產品原型中對功能的實現邏輯或使用的限制條件等進行説明。對頁面的功能點進行編號，在對應編號進行説明備註
範例：
項目整體頁面之間的交互流向邏輯，這個在墨刀上有一個工作流，可以點擊進入之後，選擇需要展示流向的頁面，之後可以選擇：a、每個頁面與頁面整體交互的方式；b、所有控件交互的流向兩種方式進行自動生成。第一種方式對於查看頁面的主交互方式更清晰
這是另一種頁面流程交互流的畫法，這是按照業務流程進行分拆，按一個業務流程從頭到尾，會走過哪些頁面。下圖即為示例，為訂單相關的流程交互，從最開始的進入APP或網站首頁》瀏覽商品》搜索》下單等，一直到最後支付成功，中間有異常流程也需要做説明。
以上即是“產品管理流程及規範3——產品原型設計”的內容，主要講解了產品原型設計的一些標準、規範及實際操作方式，方法。
下一篇文章將會講PRD文檔的撰寫規範、方法、如果喜歡文章，可以收藏，關注，作者水平有限，有錯誤之處，還請之處，互相探討。
本文由 @markzou 原創發佈於人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基於CC0協議。