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

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

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

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

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

02 原型保真度比較

1. 評(píng)價(jià)維度

一般有五個(gè)維度來(lái)測(cè)量一個(gè)原型的真實(shí)（保真）程度。

a、視覺(jué)精煉層次

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

b、功能的廣度

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

c、功能的深度

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

d、交互的豐富性

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

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

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

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

2. 保真度

?a、 低保真原型

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

b、?中度保真原型

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

c.?高保真原型

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

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

03 主流設(shè)計(jì)工具

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

04 原型大綱

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

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

a、?版本記錄

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

b、功能點(diǎn)列表

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

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

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

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

示例：

05 界面原型及邏輯說(shuō)明

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

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

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

b、邏輯交互說(shuō)明

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

i.?點(diǎn)擊購(gòu)物車(chē)結(jié)算按鈕，跳轉(zhuǎn)到訂單支付頁(yè)面。

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

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

c、?設(shè)計(jì)說(shuō)明

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

06 交互用例

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

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

1. 頁(yè)面層級(jí)樹(shù)及每個(gè)頁(yè)面命名的規(guī)則

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

b、版本號(hào)——采用子頁(yè)面進(jìn)行管理，頁(yè)面名稱(chēng)命名：版本號(hào)+【版本編號(hào)】如版本號(hào)V1.1.1；

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

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

e、正式原型部分：

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

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

iii、產(chǎn)品功能級(jí)頁(yè)面，命名規(guī)則為“【序號(hào)】+【產(chǎn)品頁(yè)面名稱(chēng)】”；

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

2. 墨刀母版制作與引用

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

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

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

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

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

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

08 流程制作規(guī)范

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

示例：

09 頁(yè)面說(shuō)明

1. 交互設(shè)計(jì)及說(shuō)明

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

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

并且為準(zhǔn)確描述頁(yè)面的交互效果需求?？稍陧?yè)面旁邊增加“點(diǎn)擊交互效果需求”的說(shuō)明，來(lái)描述頁(yè)面中每一個(gè)功能的操作交互需求。

示例：

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

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

范例：

3. 頁(yè)面流程圖

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

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

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

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

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

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