原型圖，亦稱原型設(shè)計(jì)稿，在軟件研發(fā)流程中是非?；A(chǔ)和重要的一類設(shè)計(jì)項(xiàng)目。而對(duì)于產(chǎn)品經(jīng)理、交互設(shè)計(jì)師以及產(chǎn)品運(yùn)營(yíng)等職業(yè)群體來(lái)說(shuō)，原型設(shè)計(jì)則是一門(mén)不可或缺的技能。并且，原型設(shè)計(jì)也是一門(mén)有門(mén)檻、有規(guī)范的工作。什么是原型圖？它和常說(shuō)的設(shè)計(jì)圖之間有什么關(guān)系？如何才能畫(huà)好原型圖？本文在此為你一一解答。
什么是原型圖
總的來(lái)說(shuō)，原型圖是指用于呈現(xiàn)軟件產(chǎn)品功能界面、交互設(shè)計(jì)及邏輯流程的設(shè)計(jì)項(xiàng)目。你也可以將原型圖理解為一款軟件的草圖，這款軟件有哪些功能、有幾個(gè)界面、各個(gè)功能的作用是什么、各界面的流轉(zhuǎn)關(guān)系又是什么，這些內(nèi)容就可以通過(guò)原型圖來(lái)說(shuō)清楚。原型圖中的構(gòu)成內(nèi)容并不是固定的，它可以相當(dāng)完善復(fù)雜，也可以比較簡(jiǎn)單直接。通常，原型圖需要包含軟件的界面，展示其中的功能，并通過(guò)添加交互設(shè)置來(lái)呈現(xiàn)出一些動(dòng)態(tài)的效果，如頁(yè)面跳轉(zhuǎn)、打開(kāi)彈窗等。但隨著行業(yè)的發(fā)展，除了界面與交互，原型圖逐漸成為了一個(gè)包含PRD（產(chǎn)品需求文檔）、流程圖、思維導(dǎo)圖等內(nèi)容的集合體。不同的團(tuán)隊(duì)、不同的項(xiàng)目都可能對(duì)原型圖的構(gòu)成有不同的需求。
原型圖也有類型之分。線框原型、低保真原型、高保真原型就是最常見(jiàn)的一種分類，它是按照項(xiàng)目的保真度作為劃分依據(jù)的。保真度是指項(xiàng)目界面與真實(shí)產(chǎn)品界面的相似程度，項(xiàng)目界面的精細(xì)程度（布局、配色等）越接近于真實(shí)產(chǎn)品界面，則保真度越高。線框原型就是典型的低保真原型。
原型圖和設(shè)計(jì)圖的區(qū)別
原型圖和設(shè)計(jì)圖是產(chǎn)研團(tuán)隊(duì)最主要的兩大設(shè)計(jì)項(xiàng)目。不少小伙伴對(duì)二者的關(guān)系與區(qū)別不是特別清楚，這里也專門(mén)為大家捋一捋。大家可能會(huì)想，原型圖不也是一種設(shè)計(jì)圖嗎？其實(shí)，產(chǎn)研團(tuán)隊(duì)中常說(shuō)的設(shè)計(jì)圖，主要是指UI（User interface）設(shè)計(jì)稿，即視覺(jué)層面的設(shè)計(jì)稿，其核心作用是呈現(xiàn)真實(shí)的產(chǎn)品界面效果。前端工程師會(huì)按照設(shè)計(jì)師制作的UI設(shè)計(jì)稿，一比一完成產(chǎn)品界面的開(kāi)發(fā)工作。
簡(jiǎn)單來(lái)說(shuō)，設(shè)計(jì)圖是視覺(jué)層面的產(chǎn)出。而原型稿則更加注重項(xiàng)目的功能、交互、邏輯與流程，其界面的精細(xì)程度并不是最主要的。除了少數(shù)團(tuán)隊(duì)中，有人會(huì)身兼多職外，原型圖通常是由產(chǎn)品經(jīng)理來(lái)制作，而UI設(shè)計(jì)稿則是由專門(mén)的設(shè)計(jì)師來(lái)完成。
那么高保真原型和設(shè)計(jì)圖又有什么區(qū)別呢？我們只需要明確，高保真原型仍然屬于原型圖，其高保真度的主要目的是為了提高項(xiàng)目的美觀程度，更有利于項(xiàng)目宣講、展示等目的。而UI設(shè)計(jì)稿對(duì)于產(chǎn)品界面有著更加嚴(yán)格的規(guī)范與要求，其尺寸、布局都是像素級(jí)的，配色也需要精確到色值。因此絕大部分的高保真原型離UI設(shè)計(jì)稿還有著相當(dāng)大的差距，也是不能直接投入前端開(kāi)發(fā)的。
原型圖是什么樣的？
首先，我們先來(lái)看看各保真度的原型圖，并了解他們之間的區(qū)別。
- 手繪原型：使用紙筆、白板繪制而成，是原型圖最早的形式，并且在現(xiàn)在仍然有適用場(chǎng)景。這也是保真度最低的一類原型圖，雖稍顯簡(jiǎn)陋，但其繪制起來(lái)簡(jiǎn)單高效，適合用在產(chǎn)品構(gòu)思初期。
- 高保真原型：需要運(yùn)用到相對(duì)完善的配色、圓角、陰影等效果，使用更精美的圖片，對(duì)界面布局等細(xì)節(jié)要求也更高。
而從原型圖的構(gòu)成內(nèi)容出發(fā)，也有以下幾種：
產(chǎn)品經(jīng)理畫(huà)一套原型圖要多久？
原型設(shè)計(jì)是系統(tǒng)性的工作，除了要完成項(xiàng)目中各個(gè)頁(yè)面內(nèi)容的制作，還需要考慮前置工作以及業(yè)務(wù)上下游的團(tuán)隊(duì)協(xié)作。因此，評(píng)估繪制原型圖的工作量，一定要考慮到方方面面。（一）前置工作
原型圖本質(zhì)上產(chǎn)品經(jīng)理傳達(dá)產(chǎn)品理念、闡述產(chǎn)品需求的工具。因此，在正式開(kāi)始原型設(shè)計(jì)工作之前，需要形成完整且全面的思考結(jié)果。此類工作通常包含各類調(diào)研工作，競(jìng)品分析，確定產(chǎn)品定位，梳理產(chǎn)品結(jié)構(gòu)等。此類工作的復(fù)雜度及專業(yè)度要求都比較高，并且體量越大的產(chǎn)品所需的時(shí)間會(huì)越大，在此期間各方的意見(jiàn)交換、討論及確定也同樣非常耗時(shí)。通常一個(gè)從0開(kāi)始的產(chǎn)品，前期工作可能需要1個(gè)月甚至更長(zhǎng)的時(shí)間；如果是相對(duì)較小的產(chǎn)品或功能，或者自己本身對(duì)相關(guān)行業(yè)領(lǐng)域比較熟悉，花費(fèi)的時(shí)間則可能比較少。
（二）原型設(shè)計(jì)
在正式的原型設(shè)計(jì)階段，工作量的估算可以考慮以下方面：
原型圖類型。原型圖通常分為移動(dòng)項(xiàng)目（手機(jī)、平板上的App項(xiàng)目）及PC項(xiàng)目（電腦軟件或網(wǎng)頁(yè)）。一般情況下，后者每個(gè)頁(yè)面的內(nèi)容會(huì)更多，功能模塊也會(huì)比較復(fù)雜，會(huì)需要花費(fèi)更多時(shí)間在界面搭建上；而相對(duì)后者，前者可能會(huì)涉及一些比較復(fù)雜的交互動(dòng)效。兩種類型各有其特點(diǎn)，每個(gè)頁(yè)面所耗時(shí)間也有所不同。
頁(yè)面數(shù)量。頁(yè)面越多的項(xiàng)目必然需要花費(fèi)更多制作時(shí)間，有的項(xiàng)目會(huì)不斷進(jìn)行迭代，頁(yè)面數(shù)量甚至?xí)_(dá)到上千頁(yè)。
保真度。保真度越高的項(xiàng)目自然也意味著更大的工作量，通常高保真原型的工作量會(huì)比中低保真度的原型多出0.5甚至更多的時(shí)間。
項(xiàng)目豐富程度。原型圖是靜態(tài)還是動(dòng)態(tài)，是否需要有完善的PRD文檔，同樣對(duì)工作量有較大影響。
（三）團(tuán)隊(duì)協(xié)作
任何一種產(chǎn)出工作都不可能一稿通過(guò)，完成原型圖的制作后，還需要將項(xiàng)目交由團(tuán)隊(duì)成員進(jìn)行評(píng)審，收集意見(jiàn)，修改調(diào)整到最終定稿也是一個(gè)較為反復(fù)的過(guò)程。需要大家預(yù)留足夠多的時(shí)間以應(yīng)對(duì)各種情況。
總的來(lái)說(shuō)，如果只計(jì)算原型設(shè)計(jì)階段的用時(shí)，通常一套包含界面、交互及文檔說(shuō)明的20頁(yè)P(yáng)C端項(xiàng)目，可能10天左右；如果是相同規(guī)格的App項(xiàng)目，所需耗時(shí)可能在5-7天。此數(shù)據(jù)僅供參考，具體還是要根據(jù)項(xiàng)目及團(tuán)隊(duì)的實(shí)際情況進(jìn)行考慮。
怎么畫(huà)原型圖？
繪制原型圖雖然有一定的學(xué)習(xí)過(guò)程，但是整體難度并不大。這里為大家整理了原型繪制幾大主要步驟：（一）確定原型結(jié)構(gòu)
在開(kāi)始作圖之前，我們需要對(duì)我們的項(xiàng)目形成完整的思考，明確功能結(jié)構(gòu)等。做好準(zhǔn)備工作后，則需要在創(chuàng)建的原型項(xiàng)目中規(guī)劃好原型結(jié)構(gòu)，如通過(guò)頁(yè)面及分組對(duì)項(xiàng)目進(jìn)行拆解，并逐一進(jìn)行繪制。（二）界面搭建
落實(shí)到每張頁(yè)面的繪制工作時(shí)，我們首先需要運(yùn)用原型設(shè)計(jì)工具中的組件、圖標(biāo)、矢量形狀等各類元素，并且根據(jù)自己的需要為這些元素進(jìn)行屬性樣式調(diào)整，以搭建出頁(yè)面內(nèi)容。在這一步中，我們需要熟悉各類元素的特性，以及他們的用法。此外，除了調(diào)整組件的尺寸、樣式外，我們同樣需要關(guān)注原型界面的布局。盡量按照對(duì)齊、對(duì)比、親密、重復(fù)的界面設(shè)計(jì)四大準(zhǔn)則（出自《寫(xiě)給大家看的設(shè)計(jì)書(shū)》）來(lái)構(gòu)建出規(guī)范、整潔的界面。
（三）交互設(shè)計(jì)
完成靜態(tài)界面后，我們需要通過(guò)交互設(shè)置讓它們動(dòng)起來(lái)。從繪制的角度出發(fā)，我們可以把交互分為兩大類。第一類是頁(yè)面交互，即項(xiàng)目中讓各個(gè)頁(yè)面之間能夠進(jìn)行流轉(zhuǎn)，如點(diǎn)擊按鈕進(jìn)行翻頁(yè)。此類交互只需要建立頁(yè)面中的元素與各個(gè)頁(yè)面之間的交互關(guān)聯(lián)即可輕松制作。第二類是頁(yè)面中的交互，如點(diǎn)擊按鈕顯示彈窗、懸停在按鈕上使其變色等。這一類交互則會(huì)相對(duì)復(fù)雜一些，可能需要運(yùn)用多種交互設(shè)置來(lái)實(shí)現(xiàn)。
（四）添加說(shuō)明文檔
這里的說(shuō)明文檔，并不只是PRD文檔，而是與產(chǎn)品工作有關(guān)的所有產(chǎn)出文件。其中，PRD文檔、流程圖、思維導(dǎo)圖等是最常見(jiàn)的文件。在這一步驟中，我們可以對(duì)元素添加點(diǎn)對(duì)點(diǎn)的說(shuō)明內(nèi)容，也可以繪制流程圖，或是從外部導(dǎo)入思維導(dǎo)圖等方式，按需進(jìn)行排布整理，從而使原型圖更加完善。
原型圖用什么軟件做？
雖說(shuō)原型圖的制作并不拘泥于形式，只要能夠高效地進(jìn)行表達(dá)和闡述皆可。但專業(yè)的設(shè)計(jì)工作肯定需要專業(yè)的工具來(lái)提供支持，而原型設(shè)計(jì)工具正是專門(mén)用于繪制原型圖的。選擇一個(gè)適合自己的原型設(shè)計(jì)工具猶如選擇作戰(zhàn)時(shí)的武器，非常重要。這里為大家推薦幾款主流的原型設(shè)計(jì)工具，供大家選擇。
摹客RP是國(guó)產(chǎn)的在線原型設(shè)計(jì)工具。它的功能全面，界面搭建及交互設(shè)計(jì)都能支持，并且提供了大量的組件及模板素材。整個(gè)工具對(duì)功能的強(qiáng)大程度及易用性做了很好平衡，學(xué)習(xí)成本不高，也能支撐復(fù)雜的項(xiàng)目制作需求。其主要特點(diǎn)有：
豐富的組件素材：摹客RP預(yù)設(shè)的組件種類豐富，并且組件都有帶有完善的交互效果，拖出來(lái)就能快速搭建出動(dòng)態(tài)的原型項(xiàng)目，并且編輯修改起來(lái)也比較方便。官方還提供了不少免費(fèi)的模板例子，可以一鍵將這些模板項(xiàng)目進(jìn)行保存，并用在自己的項(xiàng)目中。
高效的編輯操作：摹客RP在工具的編輯操作功能上較為留意。多畫(huà)板模式可以幫助用戶更好地劃分項(xiàng)目及頁(yè)面結(jié)構(gòu)，快捷鍵也很完善，并且它的智能填充功能的完成度也很高，省了大家很多需要造數(shù)據(jù)的時(shí)間。
強(qiáng)大的交互能力：這款工具的交互功能可以算是國(guó)產(chǎn)設(shè)計(jì)工具中最強(qiáng)大的，頁(yè)面、畫(huà)板、組件，幾乎所有元素都可以參與交互。并且拖拽式添加交互的方式也很方便，制作輕量的交互效果很快。其多種交互功能，也完全能撐起復(fù)雜的交互制作需求。
流暢的團(tuán)隊(duì)協(xié)作：作為一款基于Web的在線設(shè)計(jì)工具，摹客RP在多人實(shí)時(shí)編輯，以及項(xiàng)目分享、交付等團(tuán)隊(duì)操作上具有不可忽視的優(yōu)點(diǎn)。支持多名成員同時(shí)編輯同一項(xiàng)目、同一頁(yè)面；在完成項(xiàng)目后，可以一鍵分享演示鏈接；開(kāi)發(fā)人員也可以直接查看項(xiàng)目圖層數(shù)據(jù)，快速投入開(kāi)發(fā)。
Axure是較為老牌的原型設(shè)計(jì)工具。其最大的特點(diǎn)是交互功能相當(dāng)全面，能夠?qū)崿F(xiàn)非常完善的交互效果。不過(guò)相對(duì)的，因功能復(fù)雜，Axure的學(xué)習(xí)成本及上手難度都比較高。如果你對(duì)原型項(xiàng)目的復(fù)雜度、完成度有較高的需求，Axure是一個(gè)不錯(cuò)的選擇。其主要特點(diǎn)有：
超強(qiáng)的交互能力：Axure的交互功能是其最突出的優(yōu)勢(shì)。不僅支持各項(xiàng)交互事件及命令，條件判斷、變量、函數(shù)、中繼器等相關(guān)功能，還能夠幫助用戶制作復(fù)雜精細(xì)的動(dòng)態(tài)交互效果。不過(guò)這些高階功能的上手難度都比較高，導(dǎo)致其使用頻率較低，也提高了整個(gè)產(chǎn)品的學(xué)習(xí)成本。
豐富的UGC素材：Axure本身沒(méi)有向用戶提供多少預(yù)設(shè)組件，但其有不少自身用戶制作各類組件、頁(yè)面及項(xiàng)目進(jìn)行分享或售賣(mài)，一定程度上也為用戶提供了素材選擇。
靈活的操作界面：Axure編輯界面的各個(gè)界面模塊都可以進(jìn)行拖動(dòng)，并放置在不同的位置，甚至將不常用的功能模塊刪除掉。通過(guò)相關(guān)的操作，可以個(gè)性化地自定工具界面。
Figma是一款在線的矢量設(shè)計(jì)工具，其在較強(qiáng)的UI設(shè)計(jì)能力的基礎(chǔ)上，對(duì)也提供了原型工具所需的交互能力。整個(gè)工具的側(cè)重點(diǎn)目前還是更偏向于視覺(jué)層一些，但如果你對(duì)界面設(shè)計(jì)有較高要求，或者熟悉矢量編輯，F(xiàn)igma也是一個(gè)可以考慮的選項(xiàng)。其主要特點(diǎn)如下：
專業(yè)的界面設(shè)計(jì)：Figma的矢量編輯功能及屬性支持，能夠幫助用戶更精細(xì)地完成圖層編輯、界面布局以及色彩搭配。并且在Figma中繪制圖標(biāo)、插圖等元素也完全不在話下。
精細(xì)的組件功能：組件（Component）及其變體功能是Figma的一大特色。它可以幫助用戶制作及管理設(shè)計(jì)項(xiàng)目中常用的組件，并通過(guò)多層嵌套、覆蓋等操作來(lái)制作滿足各類場(chǎng)景的變體，還可以通過(guò)變體來(lái)制作交互效果及動(dòng)態(tài)組件。
豐富的三方插件及素材：Figma的全球用戶與開(kāi)發(fā)者為其官方社區(qū)共享了大量的插件及素材。插件可以滿足用戶的個(gè)性化需求，彌補(bǔ)工具本身的不足；而素材則為用戶提供了大量的參考及復(fù)用的內(nèi)容，方便用戶更快速地完成設(shè)計(jì)工作。
原型圖模板推薦
如果你想更進(jìn)一步了解和掌握原型設(shè)計(jì)，參考、臨摹模板項(xiàng)目是一個(gè)非常高效的方式。這里為大家整理5個(gè)高質(zhì)量的項(xiàng)目，供大家瀏覽和使用。素材均是由選自
摹客RP官方
資源社區(qū)，如有需要也可以直接訪問(wèn)。
非常具有代表性的小程序項(xiàng)目，其中包含了豐富的小程序常用組件，并且包含首頁(yè)、商品展示、點(diǎn)單、訂單相關(guān)頁(yè)面。項(xiàng)目的保真度高，可以直接保存進(jìn)行復(fù)用，適合需要制作App及小程序項(xiàng)目的小伙伴。
一個(gè)質(zhì)量相當(dāng)高的數(shù)據(jù)可視化項(xiàng)目，其中包含營(yíng)區(qū)態(tài)勢(shì)、監(jiān)控點(diǎn)位、能耗管理等多個(gè)非常完善的數(shù)據(jù)可視化統(tǒng)計(jì)頁(yè)面，并且頁(yè)面內(nèi)容及效果十分精美，帶有動(dòng)態(tài)效果。非常推薦有相關(guān)項(xiàng)目需求的小伙伴保存及復(fù)用。
這是一個(gè)當(dāng)前熱門(mén)醫(yī)療行業(yè)的App項(xiàng)目，頁(yè)面多達(dá)21個(gè)，其中包含快速問(wèn)診、名醫(yī)問(wèn)診、健康社區(qū)、預(yù)約掛號(hào)、消息中心等重要功能模塊。項(xiàng)目是高保真原型，每個(gè)頁(yè)面中的內(nèi)容都非常豐富，且?guī)в型晟频呐鋱D，醫(yī)療行業(yè)的小伙伴必看。
此項(xiàng)目是典型的電商管理后臺(tái)項(xiàng)目，包含登錄注冊(cè)、數(shù)據(jù)統(tǒng)計(jì)、信息管理、郵件等主要頁(yè)面。每個(gè)頁(yè)面都帶有合理的交互設(shè)置，能夠幫助大家了解電商后臺(tái)系統(tǒng)的基礎(chǔ)功能和結(jié)構(gòu)。其中也包含了常用的各類功能模塊和頁(yè)面元素，有較高的復(fù)用價(jià)值。
CRM系統(tǒng)又稱客戶管理系統(tǒng)，廣泛地應(yīng)用于B端企業(yè)，主要由業(yè)務(wù)管理、商品管理、客戶管理3部分構(gòu)成，能夠真實(shí)地反應(yīng)當(dāng)前的營(yíng)收記錄和收支情況，為企業(yè)制定策略提供了重要參考。此項(xiàng)目包含CRM系統(tǒng)中的各核心頁(yè)面的構(gòu)成，對(duì)有后臺(tái)項(xiàng)目制作需求的小伙伴很有幫助。
總結(jié)
原型項(xiàng)目本質(zhì)上還是一種用于表達(dá)的方式和途徑，它可以廣泛地運(yùn)用在工作生活的多種場(chǎng)景。對(duì)于原型設(shè)計(jì)，我們一定不能只追求使用工具將某一張頁(yè)面繪制出來(lái)，將某一個(gè)交互效果設(shè)置出來(lái)，更要明確每一個(gè)設(shè)置、每一個(gè)界面背后的產(chǎn)品思考與邏輯。當(dāng)然，看完了文章，更重要的還是自己上手制作，才能把對(duì)原型圖的理解以及原型設(shè)計(jì)的技能變成自己的儲(chǔ)備，大家快快動(dòng)手試試吧~
摹客協(xié)作
摹客RP
摹客DT
摹客超級(jí)版