優(yōu)秀的產(chǎn)品都離不開原型設(shè)計(jì)。原型設(shè)計(jì)作為產(chǎn)品研發(fā)過(guò)程中最重要的步驟之一，其重要程度相當(dāng)于建筑設(shè)計(jì)中的藍(lán)圖。它決定了產(chǎn)品的基本框架和策略等大方向，能幫助團(tuán)隊(duì)更好地理解和評(píng)估用戶需求和改進(jìn)產(chǎn)品，為產(chǎn)品研發(fā)過(guò)程提能增效。

本文將從多個(gè)方面帶大家深入探究什么是原型設(shè)計(jì)，為什么要學(xué)習(xí)原型設(shè)計(jì)，產(chǎn)品原型設(shè)計(jì)的方法，如何畫產(chǎn)品原型以及好用的原型工具推薦。相信大家學(xué)完本篇過(guò)后一定能對(duì)原型設(shè)計(jì)有一個(gè)更完整和清晰的認(rèn)知。

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

首先，產(chǎn)品原型是什么？做互聯(lián)網(wǎng)產(chǎn)品的小伙伴一定不會(huì)對(duì)“產(chǎn)品原型”這個(gè)詞感到陌生，產(chǎn)品原型簡(jiǎn)單來(lái)說(shuō)就是：用于呈現(xiàn)產(chǎn)品設(shè)計(jì)想法及邏輯策略的可視化模型。它是最終產(chǎn)品的樣品，用于展示最終產(chǎn)品的外觀、功能和交互方式等。

產(chǎn)品原型呈現(xiàn)形式多種多樣，例如紙質(zhì)線框、數(shù)字版線框或交互原型。具體原型內(nèi)容的豐富程度和細(xì)節(jié)取決于項(xiàng)目的需求、階段和目標(biāo)。大部分原型可能更注重基本布局和功能，而高保真的交互原型則更關(guān)注細(xì)節(jié)、交互和視覺效果。

“好設(shè)計(jì)就是好生意”(Good design is good business) 。IBM創(chuàng)始人Thomas J. Watson認(rèn)為好的產(chǎn)品設(shè)計(jì)能很大程度提高產(chǎn)品的質(zhì)量、功能和美觀度，吸引更多的消費(fèi)者和客戶，增加銷售額和利潤(rùn)等，從而直接影響到商業(yè)運(yùn)營(yíng)的成功。“好設(shè)計(jì)就是好生意”(Good design is good business) ----IBM創(chuàng)始人Thomas J. Watson。

而好的產(chǎn)品設(shè)計(jì)離不開產(chǎn)品原型設(shè)計(jì)，產(chǎn)品原型設(shè)計(jì)是將產(chǎn)品理念轉(zhuǎn)化為實(shí)際體驗(yàn)的關(guān)鍵環(huán)節(jié)，它直接影響最終產(chǎn)品的質(zhì)量和用戶體驗(yàn)，在產(chǎn)品研發(fā)過(guò)程中，產(chǎn)品原型的重要性歸納總結(jié)起來(lái)主要體現(xiàn)在以下兩點(diǎn)：

（1） 幫助快速驗(yàn)證想法，優(yōu)化用戶體驗(yàn)：在投入設(shè)計(jì)開發(fā)前，產(chǎn)品原型可以幫助團(tuán)隊(duì)快速驗(yàn)證產(chǎn)品設(shè)計(jì)想法和策略，不斷優(yōu)化，確保產(chǎn)品滿足用戶需求和預(yù)期，從而提高產(chǎn)品的用戶體驗(yàn)和市場(chǎng)競(jìng)爭(zhēng)力。

（2） 幫助提高溝通效率，降低開發(fā)風(fēng)險(xiǎn)：在產(chǎn)品研發(fā)過(guò)程中，產(chǎn)品原型也能幫助設(shè)計(jì)和開發(fā)團(tuán)隊(duì)更直觀清晰地理解產(chǎn)品和交互策略，提高溝通效率，減少了設(shè)計(jì)和開發(fā)過(guò)程中的誤解風(fēng)險(xiǎn)和資源浪費(fèi)等。

不難看出，原型設(shè)計(jì)在產(chǎn)品研發(fā)的早期階段起到關(guān)鍵作用，幫助團(tuán)隊(duì)明確需求、驗(yàn)證概念、優(yōu)化用戶體驗(yàn)，并為開發(fā)工作做好準(zhǔn)備。

那么在產(chǎn)品研發(fā)團(tuán)隊(duì)中，具體是誰(shuí)來(lái)負(fù)責(zé)產(chǎn)出產(chǎn)品原型設(shè)計(jì)呢？產(chǎn)品原型一般而言是產(chǎn)品經(jīng)理，UI/UX設(shè)計(jì)師負(fù)責(zé)產(chǎn)出，根據(jù)不同的團(tuán)隊(duì)和項(xiàng)目，負(fù)責(zé)產(chǎn)出的角色和產(chǎn)出的原型標(biāo)準(zhǔn)都不盡相同。比如在一些小型團(tuán)隊(duì)中，產(chǎn)品經(jīng)理可能負(fù)責(zé)多個(gè)角色，并獨(dú)立完成用戶調(diào)研，線框，以及高保真的交互原型的產(chǎn)出。而在一些互聯(lián)網(wǎng)大廠里，會(huì)由專門的UX設(shè)計(jì)師或原型團(tuán)隊(duì)負(fù)責(zé)原型的產(chǎn)出和維護(hù)。

產(chǎn)品原型設(shè)計(jì)的方法

在了解了一些產(chǎn)品原型設(shè)計(jì)的基本概念過(guò)后，接下來(lái)我們來(lái)聊聊原型設(shè)計(jì)具體的方法有哪些。產(chǎn)品原型設(shè)計(jì)的方法和流程可能因?yàn)椴煌膱F(tuán)隊(duì)而有所差異，同一個(gè)團(tuán)隊(duì)在不同的設(shè)計(jì)階段和目標(biāo)下也可能采用不同的方法。接下來(lái)就給大家介紹幾個(gè)常用的產(chǎn)品原型設(shè)計(jì)的方法。

思維導(dǎo)圖：思維導(dǎo)圖可以幫助團(tuán)隊(duì)在原型設(shè)計(jì)的早期階段探索和構(gòu)思創(chuàng)意，并迅速構(gòu)建視覺化的原型框架，幫助團(tuán)隊(duì)更好地展示和理解整體結(jié)構(gòu)和組織。通過(guò)思維導(dǎo)圖可以快速探索不同的產(chǎn)品設(shè)計(jì)策略和方案，并在后續(xù)的設(shè)計(jì)過(guò)程中提供參考和指導(dǎo)。

用戶旅程圖：用戶旅程圖類似于一條時(shí)間線，描述了用戶與產(chǎn)品或服務(wù)交互的整個(gè)過(guò)程。從用戶的角度展示了他們?cè)诿總€(gè)階段的行為、情感和需求，幫助設(shè)計(jì)團(tuán)隊(duì)更好地理解用戶的觸點(diǎn)、需求和痛點(diǎn)，以便在原型設(shè)計(jì)中重點(diǎn)關(guān)注并優(yōu)化這些方面。故事板：故事板是一種來(lái)自電影行業(yè)的技術(shù)，可用于早期原型制作，將產(chǎn)品概念轉(zhuǎn)化為故事情節(jié)，通過(guò)連續(xù)的圖片或繪畫講述用戶在特定場(chǎng)景下如何與產(chǎn)品互動(dòng)（包括用戶的起始情景、想要達(dá)到的目標(biāo)、中間遇到的問(wèn)題、如何解決和最終用戶得到的結(jié)果），通過(guò)故事版可以幫助我們?cè)O(shè)計(jì)出更好的用戶界面和功能以及更出色的用戶體驗(yàn)。

盡管用戶旅程圖和故事板都用于描述用戶體驗(yàn)，但也有一些區(qū)別。用戶旅程圖展示了用戶使用產(chǎn)品的整個(gè)過(guò)程，幫助我們了解用戶的感受和需求；而故事板通過(guò)圖片和情節(jié)來(lái)描述用戶在特定情境中的行為和體驗(yàn)。紙質(zhì)線框：紙質(zhì)線框是一個(gè)簡(jiǎn)單、快速、低成本原型設(shè)計(jì)方法，通常用于早期的概念驗(yàn)證和初步布局設(shè)計(jì)階段。它主要關(guān)注頁(yè)面結(jié)構(gòu)、布局和基本元素的位置，不需要關(guān)注細(xì)節(jié)和視覺效果，可以幫助團(tuán)隊(duì)在早期階段快速迭代和優(yōu)化設(shè)計(jì)方案，并為后續(xù)的數(shù)字版線框或交互原型提供基礎(chǔ)。數(shù)字版線框圖：數(shù)字版線框圖是一種更精確、詳細(xì)的原型設(shè)計(jì)方法。通常是使用專業(yè)原型設(shè)計(jì)工具（如Mockplus，Axure，Uxpin等）創(chuàng)建靜態(tài)的界面原型，用于展示產(chǎn)品的布局和元素。與紙質(zhì)線框相比，數(shù)字版線框更精確、詳細(xì)，并可以包括更多的界面元素、交互細(xì)節(jié)和注釋。交互原型：交互原型是使用專業(yè)原型設(shè)計(jì)工具（如Mockplus，Axure，Uxpin等）制作的具有可可交互性的數(shù)字版原型。與紙質(zhì)線框和靜態(tài)的的數(shù)字原型圖相比，交互原型除了界面的結(jié)構(gòu)和布局外，還模擬用戶與產(chǎn)品的實(shí)際交互體驗(yàn)，更加接近最終的實(shí)際產(chǎn)品。它在驗(yàn)證用戶體驗(yàn)、用戶測(cè)試、演示和溝通等方面都起著關(guān)鍵作用，可以幫助團(tuán)隊(duì)更好地設(shè)計(jì)和優(yōu)化產(chǎn)品體驗(yàn)。

如何畫產(chǎn)品原型？

在畫產(chǎn)品原型時(shí)，是否遇到過(guò)以下這些常見的問(wèn)題：缺乏思路，不知道要怎么畫；或者考慮不周全，經(jīng)常漏場(chǎng)景漏頁(yè)面；甚至好不容易原型做好了，給客戶演示時(shí)，客戶卻說(shuō)不是他們想要的等等。這些問(wèn)題大都因?yàn)樵趧?dòng)手畫原型之前，缺少了一些關(guān)鍵的準(zhǔn)備工作。

斯坦福大學(xué)哈索·普拉特納設(shè)計(jì)學(xué)院（Hasso-Plattner Institute of Design at Stanford）曾經(jīng)提出過(guò)一種設(shè)計(jì)方法論， 五段式設(shè)計(jì)思維（Design Thinking）模型，這5個(gè)階段也同樣適用于我們今天所討論產(chǎn)品原型設(shè)計(jì) ：

• 共情（ Empathize）：可以理解為站在使用者角度設(shè)身處地思考，體會(huì)用戶的情緒和想法，理解用戶的立場(chǎng)和感受。
• 定義問(wèn)題（Define）：對(duì)觀察結(jié)果進(jìn)行分析，確定設(shè)計(jì)的產(chǎn)品需要解決的用戶哪些核心問(wèn)題。
• 構(gòu)建方案（Ideate）：為確定的核心問(wèn)題找出盡可能多的解決方案。
• 構(gòu)建原型（Prototype）：用原型具象化提出的解決方案。
• 測(cè)試（Test）：不斷測(cè)試優(yōu)化并完善原型。

從這個(gè)模型中我們不難看出，在開始畫原型之前，共情（Empathize），定義問(wèn)題（Define）以及構(gòu)思方案（Ideate）這幾個(gè)流程是必不可少的。在深入了解目標(biāo)用戶、行業(yè)趨勢(shì)和競(jìng)爭(zhēng)對(duì)手的產(chǎn)品，通過(guò)調(diào)研和用戶反饋，確定產(chǎn)品的關(guān)鍵需求和問(wèn)題并構(gòu)建出解決方案后。下一步就可以用通過(guò)畫原型可視化的呈現(xiàn)出構(gòu)思的解決方案。

那么具體要怎樣畫原型？實(shí)際上制作原型并沒有一個(gè)通用和固定的步驟，不同團(tuán)隊(duì)或者設(shè)計(jì)師在畫原型時(shí)都有自己的風(fēng)格和偏好。這里主要列舉了一些畫原型時(shí)比較常見的一些步驟，供大家參考：

（1）創(chuàng)建項(xiàng)目并選擇合適的項(xiàng)目尺寸 

畫原型的第一步當(dāng)然要根據(jù)制作的產(chǎn)品不同選擇合適的項(xiàng)目尺寸，例如移動(dòng)設(shè)備、平板電腦或桌面電腦，不同設(shè)備有不同的屏幕尺寸和縱橫比。摹客RP提供了手機(jī)、平板電腦、網(wǎng)頁(yè)以及自定義尺寸四種項(xiàng)目類型以及多種畫板尺寸，可以供大家自由選擇。填寫好項(xiàng)目名稱，選擇好適配的項(xiàng)目尺寸，項(xiàng)目就創(chuàng)建完成啦。

（2）快速布局，構(gòu)建原型框架

根據(jù)構(gòu)思的解決方案和信息架構(gòu)，完成產(chǎn)品原型框架構(gòu)建。這里可以使用一些預(yù)設(shè)的組件庫(kù)來(lái)快速完成頁(yè)面搭建。比如摹客RP提供了豐富的組件和圖標(biāo)，還有一些常用的三方組件庫(kù)：IOS組件庫(kù)，Antdesign組件庫(kù)等，可以直接拖拽到畫板中就可以，十分方便。

（3）添加交互

完成了靜態(tài)的頁(yè)面框架搭建過(guò)后，根據(jù)不同的項(xiàng)目需求，部分項(xiàng)目可能會(huì)需要在線框圖的基礎(chǔ)上，添加交互和動(dòng)效效果，制作模擬真實(shí)用戶效果的交互原型。摹客RP提供了很完備的交互類型：畫板交互，組件交互，狀態(tài)交互等，還有多種觸發(fā)方式搭配多種交互動(dòng)作，可以制作很逼真的交互效果。

當(dāng)畫完原型過(guò)后，整個(gè)原型設(shè)計(jì)的流程還并沒有結(jié)束。還需要進(jìn)行設(shè)計(jì)思維的最后一步：測(cè)試（Test）。將畫好的原型展示給用戶或團(tuán)隊(duì)成員，收集反饋和意見并根據(jù)反饋不斷優(yōu)化和改進(jìn)，完成最終的原型設(shè)計(jì)。

NFT貨幣交易App原型設(shè)計(jì)項(xiàng)目案例，點(diǎn)擊查看>>>

以上講了這么多原型設(shè)計(jì)的概念，方法和步驟，相信大家對(duì)于產(chǎn)品原型設(shè)計(jì)已經(jīng)有了比較清晰的認(rèn)知。當(dāng)然，工欲善其事，必先利其器，高效的原型設(shè)計(jì)流程也離不開優(yōu)秀的設(shè)計(jì)工具。最后給大家推薦幾款個(gè)人親測(cè)好用的原型設(shè)計(jì)工具，助你產(chǎn)品原型設(shè)計(jì)事半功倍：

摹客RP

摹客RP是我現(xiàn)在用的一款國(guó)產(chǎn)在線版原型設(shè)計(jì)工具，瀏覽器直接使用。用了快2年了，功能越來(lái)越強(qiáng)大了，強(qiáng)推！

優(yōu)點(diǎn)：

（1）操作簡(jiǎn)單易上手，低學(xué)習(xí)成本。

（2）原型功能強(qiáng)大，能制作出很逼真的交互效果。

（3）資源素材庫(kù)豐富

• 自帶豐富的預(yù)設(shè)圖標(biāo)和交互組件，幾千個(gè)圖標(biāo)和組件，普通的項(xiàng)目原型完全夠用。
• 支持可自建資源庫(kù)，常用組件保存下來(lái)快速?gòu)?fù)用。
• 內(nèi)置第三方UI組件庫(kù)，比如IOS，Antdesign這些常用的組件庫(kù)都可以直接用。
• 項(xiàng)目模版例子資源，豐富專業(yè)設(shè)計(jì)師制作的原型模版例子，一鍵保存就可以快速?gòu)?fù)用。

（4）支持實(shí)時(shí)協(xié)作，可以和團(tuán)隊(duì)小伙伴實(shí)時(shí)協(xié)同編輯同一個(gè)項(xiàng)目。

（5）免費(fèi)使用，提供的免費(fèi)版對(duì)于普通用戶來(lái)說(shuō)已經(jīng)夠用了。付費(fèi)版價(jià)格也合理，他們家的價(jià)格比其他家都低，功能一點(diǎn)不含糊，性價(jià)比高。

缺點(diǎn)：

三方UI組件庫(kù)數(shù)量現(xiàn)階段還比較少，但是我看他們家每個(gè)月都在新增，希望可以早日覆蓋市面上的大多數(shù)開源組件庫(kù)。

Axure

國(guó)外的老牌原型設(shè)計(jì)工具，我最早使用的一款原型設(shè)計(jì)產(chǎn)品，不得不說(shuō)功能確實(shí)還是強(qiáng)大，但是問(wèn)題也不少。

優(yōu)點(diǎn)：

（1）迭代多年，功能齊全。

（2）交互多樣，可以實(shí)現(xiàn)豐富交互效果。

（3）既可以畫圖，又可以做文檔。

缺點(diǎn)：

（1）界面和功能復(fù)雜，學(xué)習(xí)成本較高。

（2）正版價(jià)格高。

（3）查看別人發(fā)送過(guò)來(lái)的 Axure 文件，需要先在本地安裝 Axure 客戶端

（4）Axure服務(wù)器不在國(guó)內(nèi)，無(wú)法很好在線協(xié)作，演示效果也較差。 

（5）低版本 Axure 不兼容高版本Axure 文件 

UXPin

海外在線原型設(shè)計(jì)工具UXPin，把原型設(shè)計(jì)，UI設(shè)計(jì)、交互設(shè)計(jì)和代碼都整合到一起。

優(yōu)點(diǎn)：

（1）在線使用，無(wú)需安裝

（2）可以實(shí)現(xiàn)豐富交互效果

（3）支持多人實(shí)時(shí)協(xié)作

（4）支持Sketch和Phortoshop文件的導(dǎo)入

缺點(diǎn)：

（1）只有英文版本，使用需要一定英語(yǔ)基礎(chǔ)

（2）無(wú)免費(fèi)版，只提供14天的免費(fèi)試用期。

（3）功能復(fù)雜，學(xué)習(xí)成本較高

（4）沒有原型模版例子資源庫(kù)

（5）預(yù)設(shè)組件庫(kù)和圖標(biāo)較少