產(chǎn)品原型繪制是產(chǎn)品經(jīng)理必備的基礎(chǔ)技能，是將產(chǎn)品需求轉(zhuǎn)換成具象的圖形化系統(tǒng)頁面的過程。如何繪制貼合需求的產(chǎn)品原型呢？本文作者分享了產(chǎn)品原型設(shè)計的方式方法，一起來學(xué)習(xí)一下吧。

上一篇分享了B端產(chǎn)品業(yè)務(wù)流程梳理以及方案梳理過程，本章將分享產(chǎn)品原型設(shè)計的方式方法。產(chǎn)品原型繪制是產(chǎn)品經(jīng)理必備的基礎(chǔ)技能，是將產(chǎn)品需求轉(zhuǎn)換成具象的圖形化系統(tǒng)頁面的過程，本篇最后的章節(jié)也會分享一些B端產(chǎn)品原型繪制的技巧。

一、什么是產(chǎn)品原型

產(chǎn)品原型是產(chǎn)品需求解決方案的可視化表達。在軟件產(chǎn)品實施開發(fā)前，以較少的時間/人力成本，根據(jù)產(chǎn)品解決方案設(shè)計產(chǎn)品概念模型，圖形化呈現(xiàn)產(chǎn)品流程、功能邏輯、頁面交互等關(guān)鍵信息，從而達到驗證產(chǎn)品需求，對產(chǎn)品最終效果達成統(tǒng)一理解的目的。

產(chǎn)品原型分類：

1）按原型與產(chǎn)品真實效果的相似度分類

一般情況下：框線圖、低保真原型圖會由產(chǎn)品經(jīng)理進行繪制；高保證設(shè)計圖則由UI設(shè)計師、美工設(shè)計師進行設(shè)計完成。

2）按產(chǎn)品平臺分類

二、繪制產(chǎn)品原型的目的

1）驗證、檢測產(chǎn)品需求與方案

產(chǎn)品原型的繪制是將產(chǎn)品需求解決方案圖形化的過程，同時，也是對產(chǎn)品需求解決方案“自省”的過程。通過原型的繪制過程更加深入的探究產(chǎn)品需求解決方案，細化解決方案，從而驗證方案的合理性及可落地性，對方案進行優(yōu)化改進。

2）與需求方達成需求及產(chǎn)品呈現(xiàn)效果的理解一致

產(chǎn)品原型可以輔助與需求方完成產(chǎn)品需求的溝通與確認。文字描述的產(chǎn)品需求、解決方案往往只能達成意識形態(tài)上的理解統(tǒng)一，然而產(chǎn)品最終是如何呈現(xiàn)的，解決方案最終是如何落地的，沒有辦法僅通過文字就能達成理解一致。即使基于一致的需求理解、方案理解，不同的人對于產(chǎn)品未來實現(xiàn)效果的想象也可能大相徑庭。

通過可視化的產(chǎn)品原型設(shè)計能夠直觀地呈現(xiàn)產(chǎn)品功能及頁面交互，幫助展現(xiàn)產(chǎn)品需求未來在產(chǎn)品功能設(shè)計上是如何體現(xiàn)的、如何完成業(yè)務(wù)流轉(zhuǎn)的，幫助與需求方在實際產(chǎn)品效果層面上達成理解基本一致。

產(chǎn)品原型能夠在產(chǎn)品規(guī)劃階段幫助拉平各角色人員對于產(chǎn)品需求的理解、產(chǎn)品實現(xiàn)效果的期待，減少后期因理解與期待不一致，導(dǎo)致的調(diào)整及返工。

3）團隊內(nèi)部高效協(xié)同

產(chǎn)品原型是團隊內(nèi)部對于產(chǎn)品需求以及產(chǎn)品實現(xiàn)效果達成一致理解的輔助工具。

• 設(shè)計團隊：基于產(chǎn)品原型（低保證原型、框線圖）了解產(chǎn)品界面以及基礎(chǔ)交互，輔助完成產(chǎn)品UI設(shè)計、產(chǎn)品交互設(shè)計。
• 開發(fā)團隊：基于產(chǎn)品原型了解產(chǎn)品功能，產(chǎn)品流程，明確產(chǎn)品需求。
• 測試團隊：基于產(chǎn)品原型了解產(chǎn)品功能需求，產(chǎn)品交互行為，輔助梳理產(chǎn)品測試內(nèi)容。

三、產(chǎn)品原型的繪制流程

1）明確業(yè)務(wù)范圍：明確業(yè)務(wù)范圍，梳理業(yè)務(wù)流程，明確業(yè)務(wù)流程涉及哪些功能模塊

對于業(yè)務(wù)流程的梳理，需要明確業(yè)務(wù)目標(biāo)范圍，梳理涉及的各業(yè)務(wù)人員的任務(wù)以及各任務(wù)之前的關(guān)系。

詳細內(nèi)容可查看上一篇關(guān)于產(chǎn)品梳理的分享。

2）梳理系統(tǒng)流程：基于業(yè)務(wù)流程梳理系統(tǒng)流程，明確系統(tǒng)操作流程、基礎(chǔ)交互

基于業(yè)務(wù)流程梳理系統(tǒng)流程，明確各角色未來在系統(tǒng)中需要完成的動作。

詳細內(nèi)容可查看上一篇關(guān)于產(chǎn)品梳理的分享。

3）繪制界面原型：明確各功能模塊需要的界面、功能邏輯、頁面交互等

① 明確各模塊需要哪些頁面，各頁面需要哪些元素組成。

對于各功能模塊，基本會涉及三大類頁面：列表頁、創(chuàng)建頁、詳情頁。

1. 列表頁：展示功能模塊的全部數(shù)據(jù)。一般包含：搜索項、功能按鈕、數(shù)據(jù)列表、統(tǒng)計項、分頁等。
2. 創(chuàng)建頁：功能模塊的新建、編輯數(shù)據(jù)的頁面。一般包含：對象字段、輸入項、功能按鈕等。
3. 詳情頁：展示單條數(shù)據(jù)的詳細信息。一般包含：數(shù)據(jù)詳細信息、功能按鈕、關(guān)聯(lián)對象的數(shù)據(jù)列表等。

② 明確各功能的基本交互與邏輯

• 頁面的跳轉(zhuǎn)邏輯：功能模塊各個頁面如何能夠跳轉(zhuǎn)切換，如：如何從列表頁進入詳情頁，如何進入數(shù)據(jù)編輯頁等。
• 按鈕的功能邏輯：點擊按鈕后需要實現(xiàn)什么效果，如：點擊按鈕后跳轉(zhuǎn)頁面、點擊按鈕后更新數(shù)據(jù)等。
• 頁面排版：頁面涉及的各種元素如何排布能夠達到較好的交互效果、特殊的邏輯控制，如：將重要的字段置于上方，引導(dǎo)用戶優(yōu)先填寫。

4）原型設(shè)計評審：組織項目相關(guān)成員，基于繪制完成的原型進行原型評審

原型設(shè)計評審目的是為了讓項目相關(guān)人員（包括需求提出方、開發(fā)人員、測試人員等）對項目產(chǎn)品、需求達成一致理解，避免產(chǎn)生分歧。同時，不同人員基于對需求的理解，對于產(chǎn)品的原型設(shè)計提出優(yōu)化設(shè)計建議。

對于產(chǎn)品經(jīng)理，產(chǎn)品原型評審不僅僅只需要準(zhǔn)備產(chǎn)品原型設(shè)計稿，為了對產(chǎn)品原型、需求達成理解一致，還需要準(zhǔn)備產(chǎn)品流程說明、復(fù)雜功能的功能說明、功能邏輯規(guī)則等。

5）優(yōu)化原型設(shè)計：基于原型評審反饋對原型進行優(yōu)化調(diào)整

產(chǎn)品原型評審后，不同角色的人員對于產(chǎn)品原型會提出不同的設(shè)計建議，產(chǎn)品經(jīng)理需要梳理這些設(shè)計建議，對產(chǎn)品原型進行優(yōu)化設(shè)計。優(yōu)化設(shè)計后，可能會需要再做一次補充評審。

值得注意的是：這里將不同人員的反饋均稱之為“建議”。既然是建議，那么既可以采納也可以不采納，對于產(chǎn)品經(jīng)理而言，需要對這些建議做判斷，而不是一味地聽從。產(chǎn)品經(jīng)理需要對方案及產(chǎn)品負責(zé)，任何改動都可能牽一發(fā)而動全身，采納修改時，不僅僅考慮是否能帶來更好地體驗，更需要考慮對于整體流程是否有影響。

四、B端產(chǎn)品頁面的繪制技巧

前面提到，對于B端產(chǎn)品，頁面一般分為三大類（創(chuàng)建頁、列表頁、詳情頁），當(dāng)然還會有一些特殊頁面，比如：數(shù)據(jù)分析頁、首頁等。

下面將分享創(chuàng)建頁、列表頁、詳情頁、數(shù)據(jù)分析頁的原型繪制技巧。

1. 創(chuàng)建頁：數(shù)據(jù)的創(chuàng)建、編輯頁面

創(chuàng)建頁一般包含數(shù)據(jù)字段、輸入項、功能按鈕。數(shù)據(jù)字段指創(chuàng)建時需要填寫的字段；輸入項指填寫數(shù)據(jù)的表單字段樣式，如：單行輸入、多行輸入等；功能按鈕指表單的按鈕，如：提交、保存、取消等。

1）數(shù)據(jù)創(chuàng)建時需要填寫哪些信息取決于創(chuàng)建人能獲取/希望獲取到哪些信息，而非該模塊有多少信息。

以CRM的客戶為例，在初次接觸獲取客戶資料時，一般能知道客戶的名稱、性別、年齡等信息，那么這些信息在客戶創(chuàng)建時則需要由錄入人員完成填寫。而比如客戶的風(fēng)險投資信息、個人習(xí)慣等在初次接觸時并不一定能獲取，那創(chuàng)建時是否需要填寫則視業(yè)務(wù)實際情況來決定了。

2）對象數(shù)據(jù)創(chuàng)建時，考慮是否需要同步創(chuàng)建關(guān)聯(lián)對象信息。

主對象創(chuàng)建時，需考慮是否需要同步創(chuàng)建關(guān)聯(lián)對象信息。如：客戶創(chuàng)建時，同步可以創(chuàng)建客戶的聯(lián)系人信息、創(chuàng)建訂單頭時同步創(chuàng)建訂單明細信息。

3）關(guān)鍵信息要必填，重要信息置于頂部。

數(shù)據(jù)創(chuàng)建時，關(guān)鍵信息（即：必須收集的信息）可設(shè)置成必填，強制要求用戶填寫。

重要信息，如：必須收集的信息、希望錄入人填寫的信息，置于頂部考前的位置，引導(dǎo)用戶有限填寫。越次要的信息置于越靠近創(chuàng)建表單底部的位置。

4）數(shù)據(jù)填寫的表單樣式、是否設(shè)置默認值等，直接影響用戶體驗和數(shù)據(jù)填寫完整度、準(zhǔn)確率。

數(shù)據(jù)創(chuàng)建時，需要靈活應(yīng)用不同的填寫樣式，提升用戶體驗；如單選字段，通過下拉列表或者時數(shù)據(jù)項點選（單選樣式）的方式均可以完成數(shù)據(jù)錄入，但是下拉列表不直觀，沒辦法一眼看清楚有多少選項。數(shù)據(jù)項點選的方式能直觀看到所有選項，但是比較占頁面空間。對于數(shù)據(jù)選項少且收集的字段信息較為重要，采用數(shù)據(jù)項點選的方式，如：客戶等級（重點客戶、一般客戶、非重點客戶）；對于選項多的采用下拉列表的樣式，如：客戶行業(yè)（快消、服務(wù)、制造業(yè)、建材、建筑等）。

數(shù)據(jù)創(chuàng)建時，是否設(shè)置默認值，也是直接影響用戶體驗的一環(huán)。數(shù)據(jù)默認值可以減少用戶的信息錄入量，提升錄入效率。但是有些場景下，并不能胡亂添加默認值，如：需要收集的關(guān)鍵信息，且該信息需要用戶確認，這種情況下，不設(shè)置默認值且必填，可以引起用戶重視，提升數(shù)據(jù)填寫的準(zhǔn)確性。

5）創(chuàng)建字段信息多且復(fù)雜時，分層分類展示。

通過小標(biāo)題可對創(chuàng)建頁的字段進行分級分類展示，做到頁面有條理，展示不紊亂。

2. 列表頁：展示功能模塊的全部數(shù)據(jù)信息

列表頁一般包含：搜索項、數(shù)據(jù)列表、功能按鈕、統(tǒng)計項等。搜索項指數(shù)據(jù)的查詢搜索內(nèi)容，便捷查詢對象數(shù)據(jù)；數(shù)據(jù)列表指展示對象多條數(shù)據(jù)及數(shù)據(jù)字段信息的表格；功能按鈕指對象的功能操作按鈕，如：新建、提交等；統(tǒng)計項指多條數(shù)據(jù)的匯總統(tǒng)計，如客戶列表上支持統(tǒng)計選擇的客戶的交易總金額等。

1）數(shù)據(jù)表格字段并非對象數(shù)據(jù)所有字段均需要展示，主要呈現(xiàn)數(shù)據(jù)的關(guān)鍵信息。

數(shù)據(jù)列表的表格并非需要展示對象的所有字段信息，一個網(wǎng)頁端頁面的寬度有限，當(dāng)數(shù)據(jù)列表展示的信息過多時，需要無限拖動水平滾動條，這會大大影響用戶體驗，用戶也不愿意一直拖動滾動條。所以，數(shù)據(jù)列表的表格主要呈現(xiàn)對象數(shù)據(jù)的關(guān)鍵信息，同時，越重要的信息展示在越前方，盡量無需拖動滾動條就可以查看。

2）數(shù)據(jù)表格字段并非僅僅展示當(dāng)前對象字段信息，可展示關(guān)聯(lián)對象的字段信息、數(shù)據(jù)統(tǒng)計信息等。

數(shù)據(jù)列表展示的字段信息并不僅局限于當(dāng)前對象的字段信息，還可以展示關(guān)聯(lián)對象的字段信息、關(guān)聯(lián)對象的統(tǒng)計匯總信息等。如：合同列表除了展示合同的基礎(chǔ)信息外，還可以展示合同客戶的客戶信息，如：客戶編號、客戶名稱等，能否方便查看人同時查看；客戶列表除了展示客戶基礎(chǔ)信息外，還可以展示客戶關(guān)聯(lián)對象的統(tǒng)計信息，如：客戶訂單的總金額、合同的簽約總金額、客戶最近一次拜訪日期等。

3）數(shù)據(jù)搜索項需有效支持用戶便捷查詢相關(guān)數(shù)據(jù)。

數(shù)據(jù)搜索項的設(shè)置并非簡單地將對象字段設(shè)置成搜索項即可，而需站在業(yè)務(wù)場景下，考慮用戶可能存在的搜索場景，再去設(shè)定搜索項，有效地幫助用戶檢索數(shù)據(jù)。如：客戶數(shù)據(jù)的搜索，除了查詢客戶名稱、客戶電話等信息，用戶可能還會想便捷檢索出我的重點客戶有哪些，哪些客戶已經(jīng)長時間未跟進了，哪些客戶還有欠款未付等，基于這些場景，可能客戶就需要按客戶等級搜索、按最近跟進日期搜索、按統(tǒng)計欠款金額搜索。

4）預(yù)定義的分類列表可以提升用戶的體驗度。

對于數(shù)據(jù)列表，可以做預(yù)定義的列表分類，用戶無需搜索即可便捷查詢數(shù)據(jù)。如客戶列表，除了展示所有的客戶數(shù)據(jù)列表外，還可以預(yù)設(shè)置一些便捷的數(shù)據(jù)列表，如：我的重點客戶列表、超過7天未跟進的客戶列表、欠款的客戶列表、待簽約的客戶列表等

5）功能按鈕需考慮單選按鈕還是批量按鈕。

對于數(shù)據(jù)列表頁的按鈕，一般可以置于列表頂部或者置于數(shù)據(jù)列表的操作列中。一般情況下，操作列中只會放置單選按鈕，點擊后能操作對應(yīng)的數(shù)據(jù)記錄，如：編輯、刪除等。列表頂部的按鈕則可能放置單選按鈕、批量按鈕、無需選擇數(shù)據(jù)直接可點擊的按鈕，如新建等。

3. 詳情頁：展示單條數(shù)據(jù)的數(shù)據(jù)詳細信息

要展示內(nèi)容、個人喜好的樣式來決定。但是，一般情況下，詳情頁會包含：單條數(shù)據(jù)記錄的詳細信息、關(guān)聯(lián)對象的數(shù)據(jù)信息。

1）數(shù)據(jù)的關(guān)鍵信息，突出展示，便捷查看。

對于數(shù)據(jù)的關(guān)鍵信息，突出展示，方便用戶可以直觀地一眼獲取到，包括：關(guān)鍵字段信息、統(tǒng)計匯總信息等。如：客戶信息詳情中，客戶名稱、手機號等關(guān)鍵信息需要在詳情頁可輕松查看到，客戶標(biāo)簽、統(tǒng)計信息（如：交易金額、客戶等級等）也可以突出展示，能方便查看。

2）主對象的關(guān)聯(lián)對象信息可分TAB展示，便于用戶查看與該數(shù)據(jù)關(guān)聯(lián)的相關(guān)信息。

主對象的關(guān)聯(lián)對象信息分tab展示，方便查看關(guān)聯(lián)數(shù)據(jù)信息。如：CRM中常提到的客戶360視圖，即是在客戶詳情中，可以查看到當(dāng)前客戶相關(guān)聯(lián)的所有業(yè)務(wù)信息，客戶的合同、訂單、聯(lián)系人、報價、溝通跟進歷史等等。

3）適當(dāng)增加統(tǒng)計分析數(shù)據(jù)，可輔助展現(xiàn)數(shù)據(jù)詳情信息。

詳情頁首頁可適當(dāng)增加一些數(shù)據(jù)分析統(tǒng)計報表，輔助展示數(shù)據(jù)詳情信息，可更直觀地、形象地展示數(shù)據(jù)檔案，如：合同詳情可增加合同訂單交付情況、合同回款情況的統(tǒng)計分析，使用可視化圖表進行呈現(xiàn)，能夠讓用戶更方便地查看到當(dāng)前合同的信息。

4. 統(tǒng)計分析頁：可視化展示統(tǒng)計分析數(shù)據(jù)

統(tǒng)計分析頁也是相對靈活的頁面，可根據(jù)個人的喜好和需要呈現(xiàn)的內(nèi)容來個性化定制。下面推薦本人常用的統(tǒng)計分析樣式，主要包含3大塊元素：統(tǒng)計大數(shù)字、圖形化統(tǒng)計報表、詳細數(shù)據(jù)列表。

1）統(tǒng)計大數(shù)字：展示報表關(guān)鍵信息的統(tǒng)計數(shù)。

統(tǒng)計報表數(shù)據(jù)最關(guān)鍵的幾個信息，通過一些大的統(tǒng)計數(shù)字能夠讓用戶便捷查看。一般情況下，統(tǒng)計大數(shù)字不超過5個，保證一個頁面你可以展示完全，無需拖動水平滾動條。以客戶分析報表為例，統(tǒng)計大數(shù)字展示客戶的銷售額信息，重點客戶的客戶數(shù)量，流失客戶數(shù)量等。

統(tǒng)計大數(shù)字也可以結(jié)合一些圖形樣式進行呈現(xiàn)，比如：呈現(xiàn)部門的業(yè)績的同時，通過結(jié)合進度條呈現(xiàn)業(yè)績目標(biāo)的達成情況，用戶既可以查看到業(yè)績金額，同時還能直觀得查看到業(yè)績目標(biāo)達成。

2）圖形化統(tǒng)計報表：可視化展示數(shù)據(jù)的統(tǒng)計情況，靈活應(yīng)用折線圖、柱狀圖、餅狀圖等圖表進行呈現(xiàn)。

對于報表中的關(guān)鍵數(shù)據(jù)，可通過可視化圖表的形式去呈現(xiàn)，便于用于查看的數(shù)據(jù)變化趨勢等信息。以客戶分析報表為例，通過折線圖展示客戶業(yè)績月度變化，可直觀地讓用戶獲知到業(yè)績變化地趨勢。通過柱狀圖展示業(yè)績排名前五的客戶，能夠讓用戶輕松獲知需要核心關(guān)注的大客戶有哪些。通過餅狀圖展示不同等級的客戶貢獻的業(yè)績占比情況，能夠讓用戶獲知不同層級的客戶的業(yè)績貢獻等。

所以，靈活應(yīng)用圖形化報表能夠提升用戶獲取信息的效率。

3）詳細數(shù)據(jù)列表：通過詳細數(shù)據(jù)表格呈現(xiàn)明細數(shù)據(jù)供用戶查看和導(dǎo)出。

統(tǒng)計分析報表底部可放置詳細數(shù)據(jù)表格，可以方便用戶及時查看和核對數(shù)據(jù)，同時還可以支持用戶導(dǎo)出明細數(shù)據(jù)做二次加工。