產品原型是將抽象的想法、需求轉化爲具象產品的過程，通過這種高效、低成本的方式來表達、測試並驗證產品。

一、原型的定義

先說說產品原型這個概念，現在大家聽到原型就會馬上想到互聯網或者移動互聯網所繪製的網站或app原型。但人類擁有第一個網頁是1991年8月6日，是由TimTim Berners-Lee在一臺NeXT電腦上創建，它解釋了萬維網的概念，如何使用網頁瀏覽器和如何建立一個網頁服務器等普及型的內容。

地址是http://info.cern.ch

而原型（prototype）這個概念最早出現在工業設計領域，是設計師用來更好呈現設計理念、驗證產品、打磨產品的一種方式，同時也能夠起到節約成本的效果。

如果設計師設計了一款杯子，除了手繪圖之外，可以通過原型真實感知到這個杯子握在手中的感覺，它是否舒適、美觀、合理。也可以拿給朋友，看看他們是否喜歡。如果是燈具設計師呢，他除了上面那幾點，還可以檢驗產品模型的合理性，是否可以成功連接好內部的電路，實現燈具的功能。

那麼當這個概念被引入到互聯網行業時，他所表達的概念是相同的。

說了這麼多，敲黑板，原型的定義來啦！

產品原型是將抽象的想法、需求轉化爲具象產品的過程。同時它可以直觀的呈現給團隊中的其他成員，甚至早期用戶，用於驗證產品的合理性，通過高效、低成本的方式來表達、測試並驗證產品。

二、 原型要解決的問題

1）爲產品經理提供更好的方式表達產品，方便UI、技術理解產品；

2）產品經理可以快速、最小成本的修改調整原型，避免開發成本的浪費；

3）便於產品早期的測試，產品經理可以邀請用戶直接使用體驗產品，觀察用戶使用行爲，收集用戶反饋。

三、好原型的四要素

1. 明確產品目標以及每一個頁面的目標

我們拿旅遊app-攜程和健身類app-keep來說明下這個問題，下面是攜程和KEEP的首頁截屏：

左圖爲攜程，右圖爲keep

可以看到攜程的首頁是酒店、機票、旅；KEEP的首頁主要展示的是用戶的運動時長和參加的課程。攜程通過在首頁按照場景和頻率例舉出用戶可能要做的事情，直接對接用戶的需求點。

無論用戶是來預定特價酒店還是來定製旅遊的，都可以找到直接入口，簡單直觀。

如果KEEP也按照攜程的產品思路可能會是這個樣子：

KEEP沒有讓用戶直接選擇要解決的問題（減肥或肩頸疼痛），而是讓用戶添加課程，恰恰是因爲KEEP在這個頁面的目標是激勵用戶持續的運動。

這也是旅遊和健身應用的區別所在，無論購票還是參加旅遊團都是一個低頻且單次的行爲，而健身是一個持續行爲。那麼旅遊APP的目標就是最快的幫助用戶找到他想要的，健身APP的目標是讓用戶產生持續健身的動力。

2. Don‘t makeme think

用戶路徑是用戶完成一個最終目所要進行的操作流程。

例如：

情況一：我要買一件優衣庫的襯衣（我知道我要買什麼）用戶路徑如下：搜索優衣庫襯衣➡選擇商品➡選擇顏色型號➡ 下單支付➡流程結束。

情況二：我想買新衣服（我不知道要買什麼）。這個時候用戶路徑就是在淘寶首頁瀏覽【爲你推薦】 找到了一件風格比較喜歡的衣服➡進入店鋪➡繼續瀏覽➡查看上新➡查看最熱➡選擇喜歡的商品➡加入到購物車，再去循環上面的操作。

不同的目標，將會對應不同的用戶路徑。好的用戶路徑可以讓用戶直接觸達自己想做的事情並輕鬆完成。

3. 原型的可拓展性

保證原型的可拓展性需求全局思考，提前考慮日後的發展方向，製作合理的MVP，使得現有的方案能夠支撐大部分功能的拓展。

對於原型可複用、可擴展的意義，起到決定因素的並不是用戶體驗，而是對開發成本的考量。產品是不斷迭代的，如果由於產品可拓展性較差，造成重新規劃技術架構，那將帶來很大的成本浪費。

這裏拿新聞閱讀的兩個應用來舉例，好奇心日報和今日頭條。

好奇心日報界面很簡潔，只有頂部的兩個導航：NEWS和LABS，另一個就是下面浮動的Q字母，裏面是個人中心。

今日頭條頁面內容和板塊分類很多，不僅有底部的導航，每一個底部的導航還會對應不同的頂部導航。

在頁面結構和層級上，今日頭條的拓展性明顯高於好奇心日報。因爲好奇心日報的拓展方式只侷限在頂部橫向拓展。

四、繪製原型的步驟

1. 明確目標

繪製原型的第一步是明確目標。明確產品的目標、頁面的目標、功能模塊的目標。只有明確了目標才能重點突出，主次分明。這一點我們在畫好原型的第一要素中已經論證了。

2. 繪製產品信息框架圖

產品的信息框架圖可以理解爲一本書的大綱或目錄。

下面是一張微信的信息框架圖。優先定義的四個底導模塊：微信、通訊錄、發現、我，每一個底部導航會包含符合該模塊功能目標和定義的子模塊。

3. 產品流程圖

產品流程圖就像書籍內容的故事脈絡。例如講述一個女孩兒一步步努力成爲一個成功女士的故事。不同的是產品的流程圖不僅僅把女孩兒成功的流程寫出來，還會把她失敗的情況也一併模擬寫出來。

附一張牛奶的手繪流程圖：

在繪製原型圖的流程圖有幾條牛奶獨門總結的查驗祕訣傳授給你。

簡單三條，要細細體驗，多多實踐，就知道我幫你們甩掉了多少口鍋。

第一條：驗證功能的增、刪、改、查

大部分的產品功能都逃不過增刪改查這四個環節，要驗證每一個功能是否爲用戶提供了這四個處理窗口，以及如果不提供，那麼要想清楚不提供的原因是什麼。

我們還拿上面的微信舉例子，我們發一條朋友圈。那麼發送朋友圈就是增的操作，發朋友圈是一個多次操作，那麼增加的入口就是持續存在的。

刪很好理解，你發了一條朋友圈不想要了，右下角點擊刪除就可以。

改在發朋友圈這裏是不直接存在的，你已經發出的朋友圈是不能修改的，解決方案就是刪掉了重新發。

查也就是看，發過的朋友圈都可以在個人主頁查看。

第二條：相關性查驗

當增加新的功能時，要考慮對原有同類型的影響，也要考慮到流程中涉及的其他功能可能會產生的變更和影響。

第三條：成功、失敗兩種情況考慮

任何一個操作，都要按照成功或者失敗的情況考慮，並根據不同的給用戶進行相應的反饋。例如，提交成功，發送失敗等。針對於失敗的情況也要給用戶合理的解釋，以及引導用戶進行正確的操作。

第四條：異常情況

例如搶購時，你購買的商品剛好在你點擊確認的一霎那被搶空了，同一時間發生的兩件事情衝突了，就是異常情況。

4. 原型繪製

原型繪製要做到清晰明瞭，主次分明。顏色上選用黑白灰就好，不然容易干擾UI的設計頁面中的主次可以通過字體的大小和粗細體現，配以適當的說明即可。

工具上選擇也比較自由，Axure、墨刀、sketch都可以。Axure和墨刀是可以繪製包括跳轉關係的原型的，就是可以寄點擊的原型。Sketch只能出頁面圖，沒法實現跳轉關係，可以藉助flinto等軟件實現動畫，但個人覺得沒必要搞得那麼複雜。

上手最快的就是墨刀這類的傻瓜工具，更適合畫APP。工具提供了很多標準控件、圖標，也可以時間簡單的跳轉關係。

Axure是繪製原型的元老，功能大而全。剛纔提到的墨刀在繪製web等複雜界面時就會顯得力不從心，功能能操作上不那麼簡單，出現很多沒必要的重複操作。Axure則遊刃有餘，用的越久越方便。

信息量滿滿的原型繪製寶典就寫到這裏了，大家還有什麼問題歡迎交流學習。

本文由@牛奶 原創發佈於人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基於CC0協議