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