產(chǎn)品原型的規(guī)范化，目的是清楚表達產(chǎn)品設(shè)計理念和功能交互及執(zhí)行邏輯，提高產(chǎn)品、研發(fā)、UI及業(yè)務(wù)部門之間的溝通效率。本文主要講解了產(chǎn)品原型設(shè)計的一些標(biāo)準、規(guī)范及實際操作方式，方法，與大家分享。

01 制定產(chǎn)品原型設(shè)計規(guī)范的目的及意義

目的：產(chǎn)品原型的規(guī)范化，目的是清楚表達產(chǎn)品設(shè)計理念和功能交互及執(zhí)行邏輯，提高產(chǎn)品、研發(fā)、UI及業(yè)務(wù)部門之間的溝通效率，避免信息不對稱和信息傳達的遺漏和缺失而導(dǎo)致的整個項目進度延期問題。

1. 讓開發(fā)和設(shè)計團隊提高設(shè)計開發(fā)質(zhì)量及工作效率。
2. 統(tǒng)一設(shè)計規(guī)則，降低各方溝通成本。
3. 進行模塊式的設(shè)計，降低開發(fā)成本和減少開發(fā)時間，加快產(chǎn)品迭代上線的速度。
4. 改善交互設(shè)計的水平，提升用戶的使用體驗。

對于個人來說：規(guī)范性產(chǎn)品原型繪制能夠提高個人的職業(yè)水平，標(biāo)準，統(tǒng)一性，團隊內(nèi)部及協(xié)作單位的溝通成本也會降低，這能減少扯皮、反復(fù)溝通等問題，將更多時間放在產(chǎn)品的思考上，同時避免不必要的糾紛。

02 原型保真度比較

1. 評價維度

一般有五個維度來測量一個原型的真實（保真）程度。

a、視覺精煉層次

原型與最終產(chǎn)品看上去有多相似？一個低保真的原型也許就是一個手繪的草稿，而一個高保真原型就會是精確到像素，看上去和真實的產(chǎn)品沒什么區(qū)別。

b、功能的廣度

原型能夠包含多少的功能？一個低保真的原型聚焦于那些最重要的任務(wù)，而高保真原型會有更細節(jié)的任務(wù)

c、功能的深度

每一個功能能夠被多大程度地制作成原型？一個低保真的原型可以在頁面和頁面之間跳轉(zhuǎn)，并在已有典型數(shù)據(jù)的情況下，告訴你大概的用戶流程。一個高保真的原型可以讓你輸入數(shù)據(jù)，知道那些在進行不同的輸入時影響到輸出的區(qū)分。

d、交互的豐富性

原型中會有多少的交互？低保真原型也許會相當(dāng)簡單，在用戶使用時沒有任何的反饋信息。高保真原型將會考慮動畫效果，表單驗證，和所有用戶與產(chǎn)品直接的細節(jié)交互。

e、數(shù)據(jù)模型的豐富性

你的原型中應(yīng)用的數(shù)據(jù)有多豐富？低保真原型使用的是有限的，典型的數(shù)據(jù)設(shè)置，顯示最常見的用例。高保真原型會包括邊緣的情況，比如非常長的用戶名（應(yīng)該減少用戶名的長度），無數(shù)據(jù)（提供默認人物頭像），第一次使用（使用空白狀態(tài)），或者極端大的數(shù)據(jù)量（使用翻頁或者過濾）。

產(chǎn)品原型設(shè)計根據(jù)還原度，也就是與最終成本的逼真度，大致分為低保真、中保真，高保真原型。我在過往中基本做到中保真，這也是絕大公司的要求。不同團隊及個人可能對保真度理解不一致，僅僅為個人觀點。

2. 保真度

?a、 低保真原型

表現(xiàn)軟件的重點功能和基本交互過程，使用簡易的線框進行處理，。好處是：制作成本低，速度快，修改也方便，在功能簡單及團隊溝通順暢時可以使用

b、?中度保真原型

中度保真的產(chǎn)品添加了更多細節(jié)，對軟件的交互進行了更細致的設(shè)計，比如照片處有對應(yīng)內(nèi)容照片，選項卡有具體內(nèi)容，按鈕顏色做了區(qū)分，有動效模擬。在大部分情況下，中度保真原型已經(jīng)足夠，既表現(xiàn)了軟件的功能特性和交互過程，界面有一定的細節(jié)，而且使用者已經(jīng)能完整體驗到最終的產(chǎn)品，可以驗證產(chǎn)品的可行性，確保了不會在后面的開發(fā)過程中發(fā)現(xiàn)重大失誤。缺點是花費時間會多一些。

c.?高保真原型

幾乎完全按照最終產(chǎn)品來制作的原型，細節(jié)豐富，包括了產(chǎn)品的所有功能以及詳細的交互細節(jié)。制作高保真原型可以顯著降低溝通成本，原型更精準和精美。但是，保真度越高就意味著需要花更多的時間和開發(fā)精力，而且一旦有修改也會更加耗費時間。

d、各類保真度優(yōu)劣總結(jié)

03 主流設(shè)計工具

• 墨刀：設(shè)計界面原型及交互（目前階段使用），墨刀在線協(xié)作優(yōu)勢更明顯，保密性上可以由公司統(tǒng)一購買賬號盡量避免使用私人賬號并在權(quán)限上做一定的限制；
• Axure：的保密性更強，功能更強大，但是在線協(xié)作稍微差一點點。
• Xmind：繪制功能結(jié)構(gòu)圖（主要）；
• Visio：繪制用戶使用流程、系統(tǒng)業(yè)務(wù)流程、功能架構(gòu)等；
• Word：開發(fā)周期允許時撰寫PRD；
• Excel：項目時間計劃管理、項目會議紀要輸出；

04 原型大綱

一個完整項目的產(chǎn)品原型需要有“大綱”，包含內(nèi)容如下：

1.?產(chǎn)品的版本概況

a、?版本記錄

需明確記錄原型的增刪改內(nèi)容及日期，

b、功能點列表

列出該原型圖的功能點，明確開發(fā)任務(wù)及優(yōu)先級。對于分期開發(fā)，但原型已經(jīng)出完的，標(biāo)注不同功能開發(fā)的階段，“1期”、“2期”等。

2. 功能結(jié)構(gòu)圖

a、使用xmind繪制，讓開發(fā)人員了解整個功能框架、信息架構(gòu)，利于估算開發(fā)時間。

b、?功能結(jié)構(gòu)圖中使用的功能及頁面名稱要和“功能清單列表”保持一致，

示例：

05 界面原型及邏輯說明

a、?原型界面設(shè)計

在繪制產(chǎn)品原型時，按思維導(dǎo)圖的產(chǎn)品規(guī)劃，先搭框架，制作主頁面菜單，菜單支持多個級別，各頁面的層級關(guān)系需要明確，但一般不要超過3級到4級，級數(shù)過多則意味著用戶的使用層級深，是不太好的方式。。

設(shè)置母版，對于產(chǎn)品中的通用性功能、模塊、建立統(tǒng)一的母版組建，為后期原型繪制提高便利性，如統(tǒng)一調(diào)用母版，統(tǒng)一修改母版。

b、邏輯交互說明

包含數(shù)據(jù)邏輯和操作交互，主要是面向開發(fā)人員和UI設(shè)計人員闡述。描述要有利于功能邏輯的實現(xiàn)”，比如說，以下兩種方式的準確性

i.?點擊購物車結(jié)算按鈕，跳轉(zhuǎn)到訂單支付頁面。

ii.?點擊購物車結(jié)算按鈕，需要判斷是否選中商品，所選中商品是否有貨，a、如果沒有選中商品，點擊之后則當(dāng)頁彈窗提醒“您尚未選中商品”，b、如果有選中商品，則跳轉(zhuǎn)訂單支付頁面（對于不同情況下的點擊效果，需要做多個按鈕進行不同跳轉(zhuǎn)，），可進一步說明不同跳轉(zhuǎn)的切換效果，比如是左右滑動還是直接跳轉(zhuǎn)等。

對比以上兩種方式，則第二種更明確，這也會減少溝通成本。

c、?設(shè)計說明

如果對設(shè)計有特殊要求的也需要做說明，比如支付的一般此阿勇明亮飽和的色調(diào)，專業(yè)性則一般采取藍色，或者有設(shè)計可供參考的，配色等方面。但如果對于設(shè)計沒有較好感覺，或是專業(yè)知識的，建議盡量讓設(shè)計師處理，畢竟專業(yè)的事情留給專業(yè)的人來做嘛。

06 交互用例

給主要交互控件設(shè)置交互用例，這在墨刀中算是較為容易實現(xiàn)，比Axure要簡單，只需要連線即可，完善的交互能夠幫助開發(fā)清晰的理解需求。

07?原型詳細規(guī)范

1. 頁面層級樹及每個頁面命名的規(guī)則

a、在頁面層級樹的第一個頂級菜單設(shè)置并填寫【產(chǎn)品名稱】，下面可以添加更多層級；

b、版本號——采用子頁面進行管理，頁面名稱命名：版本號+【版本編號】如版本號V1.1.1；

c、修訂記錄——采用子頁面進行管理，管理當(dāng)前版本產(chǎn)品原型設(shè)計的修訂記錄——文章前部分已經(jīng)做了說明；

d、功能清單說明——采用子頁面進行管理，使用表格說明本次產(chǎn)品原型中需求的主要內(nèi)容和功能；

e、正式原型部分：

i、產(chǎn)品頁面的層級，最高一般不超過4層；

ii、產(chǎn)品模塊，命名規(guī)則為“【序號】+【產(chǎn)品模塊名稱】”；

iii、產(chǎn)品功能級頁面，命名規(guī)則為“【序號】+【產(chǎn)品頁面名稱】”；

命名規(guī)則與文章章節(jié)目錄類似

2. 墨刀母版制作與引用

墨刀母版的制作請參考墨刀的母版制作 具體見網(wǎng)址：https://modao.kf5.com/hc/search/results/?type=kb&keyword=%E6%AF%8D%E7%89%88

復(fù)用元件/組件，必須使用母版設(shè)計，然后再統(tǒng)一添加到頁面上。在添加母版時，產(chǎn)品的背景，要求使用“位置鎖定”，防止在原型繪制的過程中，背景變動頻繁調(diào)整的情況；

1. 頁面母版的名稱可自定義設(shè)置：“序號+自定義名稱”；
2. 全局性的母版和局部使用母版，需要在命名規(guī)則上做區(qū)分，
3. 盡可能將眾多頁面都會使用到的標(biāo)題（如小程序的頭部）、元件（如日歷）以及交互組件放置在母版中；

3. 頁面位置和尺寸規(guī)范

a、?PC默認尺寸為墨刀的【網(wǎng)頁/電視】類別，APP/H5/小程序默認尺寸選擇iPhone6或者一個特定的尺寸，并在之后的原型沿用；

b、?APP的框架設(shè)計不區(qū)分Android與IOS，僅在交互用例的設(shè)計上進行區(qū)分；

08 流程制作規(guī)范

“流程頁面”設(shè)計并制作用戶對本功能的使用流程，一般使用泳道流程圖，泳道流程圖的畫法可以進行百度搜索，一般而言是二維方式，橫軸為角色，縱軸為流程進展，在流程旁邊，給出必要的文字備注說明，對流程進行進一步的闡述。

示例：

09 頁面說明

1. 交互設(shè)計及說明

需按照產(chǎn)品原型規(guī)范要求，需使用能更好表達原型的，使產(chǎn)品原型上的所有功能板塊，能夠

準備模擬用戶的操作情景，保證所有功能的動態(tài)面板交互、點擊效果、頁面跳轉(zhuǎn)鏈接等交互效果準確并正確。

并且為準確描述頁面的交互效果需求。可在頁面旁邊增加“點擊交互效果需求”的說明，來描述頁面中每一個功能的操作交互需求。

示例：

2. 頁面功能及邏輯的標(biāo)注

為了方便開發(fā)人員查看和理解，在產(chǎn)品原型中對功能的實現(xiàn)邏輯或使用的限制條件等進行說明。對頁面的功能點進行編號，在對應(yīng)編號進行說明備注

范例：

3. 頁面流程圖

項目整體頁面之間的交互流向邏輯，這個在墨刀上有一個工作流，可以點擊進入之后，選擇需要展示流向的頁面，之后可以選擇：a、每個頁面與頁面整體交互的方式；b、所有控件交互的流向兩種方式進行自動生成。第一種方式對于查看頁面的主交互方式更清晰

這是另一種頁面流程交互流的畫法，這是按照業(yè)務(wù)流程進行分拆，按一個業(yè)務(wù)流程從頭到尾，會走過哪些頁面。下圖即為示例，為訂單相關(guān)的流程交互，從最開始的進入APP或網(wǎng)站首頁》瀏覽商品》搜索》下單等，一直到最后支付成功，中間有異常流程也需要做說明。

以上即是“產(chǎn)品管理流程及規(guī)范3——產(chǎn)品原型設(shè)計”的內(nèi)容，主要講解了產(chǎn)品原型設(shè)計的一些標(biāo)準、規(guī)范及實際操作方式，方法。

下一篇文章將會講PRD文檔的撰寫規(guī)范、方法、如果喜歡文章，可以收藏，關(guān)注，作者水平有限，有錯誤之處，還請之處，互相探討。

本文由 @markzou 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。