#本文為2022摹客RP原型工具測評大賽二等獎作品

作為產(chǎn)品經(jīng)理，在原型設計過程中，掌握其中的“道術器”，對于高階產(chǎn)品發(fā)展有著潛移默化的幫助。本文以摹客為例，聊聊產(chǎn)品經(jīng)理原型設計中的 “道術器”，希望對你有所啟發(fā)。

一、為什么有些產(chǎn)品經(jīng)理，淪為了“原型工具人”？

在開始閱讀本文之前，先問各位產(chǎn)品經(jīng)理一個問題：“畫原型”這件事，產(chǎn)品經(jīng)理應該具備哪些能力？相信就職于不同公司類型、不同業(yè)務方向的產(chǎn)品經(jīng)理面對這個問題，會給出不同的答案。

比如：高效快速輸出原型——“生產(chǎn)力”，精準的將客戶需求轉化為原型——“理解力”，美不勝收的原型界面設計效果——“審美力”，令人眼前一亮的原型交互動效——“創(chuàng)意”力等。

那么這些能力中，哪個更為重要呢？為什么有些產(chǎn)品經(jīng)理可以通過“畫原型”完成自己的能力突破，而有些人則停留在操作工具階段，淪為了“原型工具人”？

行業(yè)、公司和產(chǎn)品都有生命周期，常常歸結為探索期、成長期、成熟期和衰退期，放到產(chǎn)品經(jīng)理的成長路徑上，同樣存在這樣的不同階段：入門、成長、進階、突破，不同成長階段也對應著產(chǎn)品經(jīng)理能力的高低。

這種能力的差異，除了努力程度、天賦、機遇等因素之外，有一個很重要的原因，就是思維、認知層面的提升。

我將產(chǎn)品經(jīng)理在原型繪制工作中應該具備的能力，總結為“道”、“術”、“器”三大層面的能力框架。

希望能夠幫助一些剛入行的新人或是正卡在職業(yè)瓶頸中的人，找到自己的提升空間，掌握原型設計的思維方法，建立全面的原型認知，早日找到打開資深產(chǎn)品經(jīng)理之路的金鑰匙。

二、什么是原型設計的“道術器”？

抽象來看，“道術器”其實是人與世界互動的三層境界，任何一個領域都可以從道、術、器去拆解，“道”是思維，“術”是方法，“器”是工具。定位到產(chǎn)品經(jīng)理原型設計這件事上，其實就是產(chǎn)品經(jīng)理與原型互動的三層境界，分別是：

1. “道” 是思維，是原型設計的思維方式與底層邏輯，是原型設計的指導思想。原型設計思維幫助我們建立對原型的全局視角，并學會如何從戰(zhàn)略眼光去看待原型設計工作。
2. “術” 是方法，指原型設計的設計方法與策略，直接影響產(chǎn)品經(jīng)理原型設計的技能優(yōu)劣、效率高低。我們都知道“選擇比努力重要”，好的方法可以讓我們沿著正確的路徑去決策，使工作事半功倍。
3. “器” 是工具，指原型設計工具，有句話叫“工欲善其事，必先利其器”，好的原型工具可以提升產(chǎn)品經(jīng)理原型設計的工作效率，甚至在某些方面上彌補操作技能上的劣勢。

綜上所述，對于原型設計的“道術器”而言，其實就是原型設計工作由淺入深、由實向虛的演進過程。

不了解原型設計的“道術器”，短期內(nèi)產(chǎn)品經(jīng)理自身可能感知不到影響，但如果想向高階產(chǎn)品發(fā)展或期望有一個更好的職業(yè)發(fā)展生涯，將會產(chǎn)生不利的效果。

下面我們由下至上逐一展開，詳細介紹。

三、原型設計之“器”——原型工具的功能演進路徑

在原型設計“器”的層面，我們要學會如何選擇適合自己工作習慣，并滿足原型設計最新發(fā)展趨勢的原型設計工具。

從計算機時代至今，原型工具的發(fā)展經(jīng)歷了哪幾個階段，目前的發(fā)展階段有哪些特點，如何選擇適合自己、滿足工作需求、并緊跟最新發(fā)展趨勢的原型工具，是我們接下來要解決的問題。

3.1 原型設計工具的四個發(fā)展階段

原型工具作為原型設計之“器”，主要經(jīng)歷了四個階段：

20 世紀 80 年代至90年代：

隨著計算機時代的到來，個人電腦逐漸普及，原型工具迎來發(fā)展的第一個階段。當時代表性的軟件以Visio、Illustrator、Photoshop為主，實現(xiàn)了從手繪到軟件繪圖的轉變。相對于手繪，通過原型繪制軟件可以做到速度快，易修改，制圖精確等特性。但同時，這些軟件不僅學習成本高，專業(yè)技能要求高，且?guī)缀醪痪邆鋱F隊協(xié)作功能。

21世紀開始：

PC互聯(lián)網(wǎng)時代到來，原型工具的發(fā)展迎來第二個階段。彼時的代表性的軟件是Axure。Axure以其簡單、易用、易于演示等特性備受歡迎，成為 PC 端產(chǎn)品經(jīng)理的標配。Axure RP不僅僅可以設計產(chǎn)品原型，也可以繪制產(chǎn)品線結構圖、用例圖、邏輯流程圖等等，甚至很多產(chǎn)品經(jīng)理直接使用Axure RP表述產(chǎn)品需求文檔。

2009年開始：

移動互聯(lián)網(wǎng)時代到來，原型工具朝著敏捷、高效、移動化的方向發(fā)展，支持軟件形態(tài)和功能也更為豐富，誕生了如 Invision、Proto、Sketch等工具。此時的原型工具不僅兼容PC、移動、平板甚至智能手表等終端樣式，原型界面更加精美細致，同時團隊協(xié)作功能和輔助工具也越來越多。

目前：

隨著移動互聯(lián)網(wǎng)時代逐漸走向成熟，原型工具的發(fā)展又產(chǎn)生了新的變化趨勢，產(chǎn)品經(jīng)理對于原型工具的功能又有了新的要求：

• 多場景——制作精度：隨著產(chǎn)品經(jīng)理工作內(nèi)容自由度的提升，例如logo繪制、宣傳圖設計等工作對原型工具的矢量繪制需求提高。大部分原型工具不支持矢量繪制，需與矢量繪制工具配合使用才能滿足高精度原型等多場景的繪制需求。
• 多角色——團隊協(xié)作：一方面需要設計、產(chǎn)品、開發(fā)人員通過團隊協(xié)作參與到原型的評審工作中給出修改意見，并通過團隊管理設置分配不同團隊角色操作權限，由于部分原型工具的限制，大部分團隊目前采用Axure/Sketch 協(xié)作云平臺來構建團隊協(xié)作方式。
• 多版本——原型周期性：原型與產(chǎn)品一樣存在生命周期，需要快速構建，測試，丟棄，不斷創(chuàng)建新版本并可保留原型迭代歷史日志及版本追溯、對比，最終交付定稿版本。
• 多格式——輸出格式：原型頁面的輸出形式，傳統(tǒng)的如圖片、html、桌面端源文件等格式已無法滿足需求，需要對產(chǎn)品設計上下游實現(xiàn)無縫連接，如切圖文件導出，格式轉化等。

3.2 如何選擇“與時俱進”的原型設計工具？

面對當前原型工具的發(fā)展趨勢，雖然新的原型工具層出不窮，但我們這次測評的主角：摹客RP值得被深入關注。

它的幾大功能特性，恰好滿足了當前我們在原型設計“器”層面的發(fā)展趨勢中幾大核心訴求：

• 高精度矢量圖繪制：強大的矢量繪圖能力，支持鋼筆，能進行布爾運算、路徑剪切和閉合等高級操作，可以做到256倍的放大和像素級對齊，設計師可以隨心繪制 logo、圖標，PM/UX也可以制作自己需要的圖形；
• 集成團隊協(xié)作模式及設計稿對比功能：摹客原型支持團隊協(xié)作模式，以任務方式組織團隊成員完成團隊作業(yè)，查看團隊和項目動態(tài)；同時，支持多種設計稿版本對比，高效管理，精準定位版本細節(jié)差異，方便迭代優(yōu)化；
• 切圖下載及格式轉換功能：將傳統(tǒng)切圖方式進行了全新升級，支持了Sketch、Photoshop、Adobe XD、Figma設計稿的上傳、自動切圖與標注，幫助設計師提升設計稿交付的效率。

正如上文所言，好的原型工具可以提升工作效率并彌補我們在技能層面上面的劣勢。

摹客作為一款與時俱進的原型工具滿足了我們在“器”層面的基本要求，那么在“術”層面，我們又該如何提升？

四、原型設計之“術”——個人與團隊層面的原型之術

“器”與“術”的關系抽象來說，“術”就是駕馭“器”的技術。我們所說的原型設計之“術”，就是原型設計的基本操作技能。

對于產(chǎn)品經(jīng)理來說，只掌握“器”如何操作，本身并不能產(chǎn)生多大價值。

器只是術的載體，就像一個人如果只會熟練操作python軟件本身并沒有用，有用的是能夠利用它做爬蟲、數(shù)據(jù)分析、算法實現(xiàn)等等。

使用同樣的工具，產(chǎn)品經(jīng)理技術能力、專業(yè)能力的不同，輸出的原型自然大相徑庭。

“術”這一層面的能力，對于大部分剛入行的產(chǎn)品經(jīng)理來說，最基本的工作能力，也是最基本的入行門檻。下面我們從個人、團隊兩個角度對原型設計中“術”層面的進行詳細介紹。

4.1 個人層面的原型設計之“術”

原型設計在整個產(chǎn)品流程中處于最重要的位置，有著承上啟下的作用。

原型設計之前需求或是功能信息都相對抽象，原型設計的過程就是將抽象信息轉化為具象信息的過程，之后的產(chǎn)品需求文檔（PRD）是對原型設計中的版塊、界面、元素及它們之間的執(zhí)行邏輯進行描述和說明。

抽象來看，原型的設計主要包含三部分內(nèi)容：

1. 需求內(nèi)容的呈現(xiàn)：任何頁面其實都是文字、多媒體、交互組件的載體，通過這些素材把需求內(nèi)容呈現(xiàn)給訪問者是產(chǎn)品設計最基礎的部分。
2. 導航和鏈接：除了內(nèi)容的呈現(xiàn)，產(chǎn)品中還存在著大量導航與鏈接，也就是信息架構。信息架構主要的工作是設計組織分類和導航的結構，使用戶高效率地瀏覽產(chǎn)品的內(nèi)容。
3. 數(shù)據(jù)及操作邏輯：除了直接呈現(xiàn)給用戶的內(nèi)容，還需要用戶與產(chǎn)品之間有操作互動，同時伴隨著數(shù)據(jù)的交換。如何讓用戶更容易的操作，數(shù)據(jù)交換更合理，就是產(chǎn)品的易用性。

而這三項內(nèi)容其實恰好對應著用戶體驗五要素中的層次。需求內(nèi)容的呈現(xiàn)對應著戰(zhàn)略層與范圍層，代表產(chǎn)品目標與產(chǎn)品功能需求。

導航和鏈接對應著結構層，將產(chǎn)品需求轉化為系統(tǒng)與用戶之間的互動。數(shù)據(jù)及操作邏輯則對應著框架層，對框架內(nèi)的交互原件及信息進行設計，幫助用戶理解功能并完成操作。

與此同時，用戶需求與產(chǎn)品目標使我們貫穿產(chǎn)品原型設計的兩大分析主線，無論處于哪一層面，都需要分別從用戶側、產(chǎn)品（業(yè)務）側去思考。

4.1.1 基于垂直業(yè)務模板庫，迅速組織需求內(nèi)容

從產(chǎn)品經(jīng)理的角度上來梳理需求內(nèi)容，需要清楚兩個問題：“用戶需求”和“業(yè)務目標”。

用戶需求是用戶進入產(chǎn)品場景后想要解決的問題，業(yè)務目標是產(chǎn)品經(jīng)理進行原型設計的初衷，是執(zhí)行每一項界面設計的目標。

比如電商商品詳情頁的產(chǎn)品業(yè)務目標是，促成感興趣的用戶決定購買，跳轉下單頁面。明確每一個界面的業(yè)務目標，才不會讓呈現(xiàn)的需求內(nèi)容偏離大方向。

因此，在對原型頁面“下手”前，產(chǎn)品經(jīng)理要先確定頁面整體需要達到的業(yè)務目標，并根據(jù)目標進行評估：為了達成這一目標，是否需要業(yè)務屬性相關的特定設計才能達成。

為了完成頁面需求內(nèi)容的組織工作，傳統(tǒng)方式是首先與業(yè)務方充分溝通清楚需求的內(nèi)容，了解清楚需求的背景，其次將業(yè)務需求轉化為產(chǎn)品需求，提煉需求的功能點，然后結合用戶使用場景，通過用例描述需求的業(yè)務規(guī)則，從0到1去設計出符合業(yè)務需求的頁面。

但更好的選擇，是直接利用素材或工具網(wǎng)站提供的原型模板，基于這些完整的產(chǎn)品模型，直觀地了解特定業(yè)務下的用戶使用習慣、產(chǎn)品功能體系等。

比如通過原型工具摹客RP內(nèi)置的海量垂直行業(yè)原型，除了在演示界面直觀展示交互外，也可以進入編輯界面，快速掌握產(chǎn)品頁面中的需求內(nèi)容、功能邏輯、用戶操作路徑以及用戶體驗。

如果這些模板的整體方向和產(chǎn)品經(jīng)理的預想一致，那么可以直接復用模板，再在模板的基礎上，結合自己的思路進行調(diào)整優(yōu)化，就可以將垂直行業(yè)共性的頁面架構和需求功能根據(jù)業(yè)務內(nèi)容進行微調(diào)，基于模板頁面快速搭建完整的功能模塊，實現(xiàn)業(yè)務目標并幫助用戶實現(xiàn)需求。

4.1.2 實現(xiàn)清晰的業(yè)務操作路徑，明確導航與鏈接

通過垂直業(yè)務模板庫，可以幫助產(chǎn)品經(jīng)理快速組織起來各個頁面的需求內(nèi)容。

頁面需求內(nèi)容完成之后，下一步是設計業(yè)務流程圖，確保業(yè)務的主流程走通。

雖然垂直業(yè)務模板庫包含了相對共性的一些業(yè)務流程，但產(chǎn)品經(jīng)理需要針對所接手的具體業(yè)務需求分析之后，基于具體業(yè)務流程及用戶訪問路徑，盡可能梳理、細化并輸出業(yè)務流程圖。

在整個梳理過程中，我們會深入了解產(chǎn)品形態(tài)、業(yè)務流程、產(chǎn)品邏輯之間的扭轉關系，并輸出業(yè)務形態(tài)圖、用戶用例圖與產(chǎn)品流程圖。

業(yè)務形態(tài)圖是對業(yè)務邏輯流程的具象化，用例圖是對功能之間的流向關系的具象化，產(chǎn)品流程圖則是對頁面之間跳轉關系的具象化。

從業(yè)務形態(tài)圖到產(chǎn)品流程圖，是將業(yè)務從抽象到具體，從概念到實施的過程。從最終輸出的流程圖來區(qū)分，分別是：業(yè)務流程圖、功能流程圖與頁面流程圖等。

此時產(chǎn)品經(jīng)理如何通過清晰的業(yè)務及操作流程指定，清晰的傳達產(chǎn)品業(yè)務需求就顯得尤為重要了。需求內(nèi)容層面上我們提到了“用戶需求”和“業(yè)務目標”兩大角度，從流程圖繪制的問題上依然要做區(qū)別分析。

業(yè)務目標角度上，通過摹客RP內(nèi)置“流程圖模式”，產(chǎn)品經(jīng)理能夠直接在原型工具中繪制流程圖；當你需要向團隊描述產(chǎn)品需求時，借助可視化的流程圖，溝通的效率會提高很多，畢竟一份步驟清晰的流程圖要比一大段文字直觀易懂得多。

用戶需求角度上，通過摹客的“全貌畫板”該功能，可以方便的編輯并展示設計稿之間的跳轉關系，產(chǎn)品經(jīng)理可以基于用戶需求角度出發(fā)，完成用戶操作層面上需要呈現(xiàn)的頁面跳轉流程圖。

4.1.3 通過快速標注，清晰表達數(shù)據(jù)及操作邏輯

通過需求內(nèi)容組織與導航及鏈接的明確，產(chǎn)品原型的基本頁面內(nèi)容已初步完成。但只要頁面不是靜止頁面，就存在數(shù)據(jù)及操作邏輯的設計及表述。

承接上一部分“用戶需求”和“業(yè)務目標”兩個切入角度，操作邏輯對應著“用戶需求”，描述用戶如何通過頁面要素及交互指引用戶實現(xiàn)需求。而數(shù)據(jù)邏輯對應著“業(yè)務目標”，描述產(chǎn)品如何通過記錄及展示用戶操作數(shù)據(jù)指引業(yè)務方完成業(yè)務目標。

一個頁面上可進行操作的頁面元素有哪些，操作是點擊、長按還是滑動，進行操作之后會產(chǎn)生怎樣的效果，是打開新頁面、跳出彈窗還是界面滑動，這些都需要在產(chǎn)品原型中做好清晰標注。

同時，產(chǎn)品原型設計出來后需要交付給研發(fā)人員進入開發(fā)流程，對每一個具有數(shù)據(jù)邏輯的部分做到清晰表達需求，例如統(tǒng)計用戶每周的商品下單量，是統(tǒng)計近7天的總訂單量還是平均值。只有避免信息錯位，才會降低重復溝通的成本浪費。

而快速生成標注功能，通過摹客可以快速自動化完成。設計稿導入到摹客后，點擊元素就能看到間距、顏色、字體樣式、陰影、圓角大小等標注信息，還可以手動補充文字、坐標、顏色、尺寸、區(qū)域標注，信息更全面，更準確，幫助開發(fā)還原設計稿。自動生成的CSS / Android/Objective-C代碼，開發(fā)小伙伴可以直接復制使用，省去了許多繁瑣的勞動。

除上述功能外，使用摹客Figma插件將設計稿快速上傳至摹客平臺，還可以融合其它設計工具的設計稿，在線評論審閱，輕松分享演示，不用苦苦等待文件加載。

4.2 團隊層面的原型設計之“術”

4.2.1 創(chuàng)建并管理團隊規(guī)范，建立團隊工作準則

無論是創(chuàng)業(yè)公司還是頭部企業(yè)，設計的一致性問題都至關重要。

對于大公司而言，品牌定位和形象都存在具體要求，如果沒有建立統(tǒng)一規(guī)范，會帶來超額的時間和資金成本。而創(chuàng)業(yè)公司如果沒有一個統(tǒng)一的設計規(guī)范管理，又很難建立起清晰、長遠的品牌定位。建立高效的團隊管理設計規(guī)范，主要包含三部分內(nèi)容：

1. 合理歸類：明確你需要整理的內(nèi)容有哪些，這些內(nèi)容的分類又該怎樣呈現(xiàn)；
2. 劃分任務優(yōu)先級：為了提升整體效率，需要劃分各項項目任務的優(yōu)先級及判定標準；
3. 合理分工：制訂一套團隊分工規(guī)則，明確不同的任務類型如何根據(jù)項目角色合理分工。

在摹客設計系統(tǒng)中，以上需求均可實現(xiàn)。

產(chǎn)品經(jīng)理可以建立多個庫、分類和子分類來進行管理，每個庫里包含2大類資源分類：第一類是文件類資源，其包含Logo、圖片、圖標、組件、字體；第二類是編輯類資源，包括顏色、度量、標準字、陰影?；緷M足了設計師的多種設計類型需求。

同時，在設計系統(tǒng)中產(chǎn)品經(jīng)理可以創(chuàng)建自己的團隊，邀請成員，設置團隊成員角色和權限，各司其職，高效管理，進行協(xié)作設計。

成員還可以在Mockplus和Sketch等系統(tǒng)對接工具上，將設計元素上傳到設計系統(tǒng)形成規(guī)范，再讓整個團隊分享和利用這些通用資源進行快速設計。

4.2.2 與協(xié)同辦公深度融合，提升團隊協(xié)作效率

無論哪個產(chǎn)品開發(fā)設計團隊都有協(xié)作辦公的需求，對協(xié)作類工具的需求也比較強烈。

為滿足這一需求，國內(nèi)外陸續(xù)涌現(xiàn)了很多協(xié)作類工具，涵蓋文檔協(xié)作、項目協(xié)作和企業(yè)內(nèi)即時通訊等各個方面。

各個領域都有其代表性的頭部工具成為眾多團隊的長期選擇，遷移成本巨大。

對于團隊來說，原型設計工具不應該代替現(xiàn)有協(xié)作工具，而應該深度集成，與協(xié)作工具建立“協(xié)同關系”。

文檔協(xié)作工具方面，摹客攜手“多人協(xié)作在線文檔工具”騰訊文檔，一同為用戶提供了完整的團隊協(xié)同解決方案，為互聯(lián)網(wǎng)團隊提效增速，解決單兵作戰(zhàn)、效率低下的難題。

項目協(xié)作工具方面，摹客已正式接入Atlassian公司旗下的項目管理工具Jira，后續(xù)Jira用戶在進行項目管理時，可在項目中關聯(lián)摹客設計稿，精準定位設計內(nèi)容，團隊溝通更高效。

即時通訊工具方面，摹客完成了與騰訊會議的合作對接，接入騰訊會議后，在摹客項目的畫板模式下,主持人“發(fā)起會議”,會議提醒將以彈窗的形式展現(xiàn)給項目成員，項目成員如需參會，點擊“立即加入”即可，進入會議室后，頁面中將會同步顯示主持人的演示界面。開會更靈活，工作效率大大提高。

4.2.3 需求更改內(nèi)容可追溯，優(yōu)化團隊進度管控

需求文檔及原型設計稿交付完成后，進入到需求內(nèi)容的迭代環(huán)節(jié)。需求的迭代修改有很多原因，需求內(nèi)容考慮不完善、業(yè)務目的調(diào)整、操作路徑優(yōu)化等等。

但比改動本身更重要的是如何同步并做好實時可追溯，每次迭代之后產(chǎn)品經(jīng)理必須針對修改意見做好及時的復盤與修正，避免同類問題的再次發(fā)生。

因為一旦后期團隊面臨無窮無盡的改動，不僅會大幅提升項目工期導致項目延期，最終產(chǎn)品經(jīng)理也會被認為不專業(yè)。

如何為團隊建立可追溯的更改需求看板，通過摹客協(xié)作可以實現(xiàn)。通過將原型上傳至摹客協(xié)作，所有改動都可一鍵@相關人員，標注相關修改內(nèi)容，隨時把控整體進度。

這款工具的使用，可以大幅提升產(chǎn)品經(jīng)理的工作效率，不僅適應團隊的協(xié)作和管理方式，并同時兼具設計和協(xié)作。

五、原型設計之“道”——原型的概念、標準與系統(tǒng)

我比較喜歡閱讀哲學類圖書，鍛煉自己的哲學思維。

傅佩榮先生在其所著的《哲學與人生》中寫道，判斷自己是否在進行哲學思考，有三個標準：澄清概念、設定標準、建構系統(tǒng)，如圖所示。

哲學思考的三個標準其實對應著三條解決世間所有問題的底層邏輯，從頂層視角看待任何事物的思考方式。

而這種思考方式，恰恰可以幫助我們建立如何解決產(chǎn)品經(jīng)理原型設計工作中問題的核心解法：

1. 先解決如何正確認識產(chǎn)品經(jīng)理原型工作的問題，建立清晰、明確、合理的“原型觀”，即“澄清概念”；
2. 再解決如何通過科學有效的思維模型，建立一套屬于自己的原型設計工作與思考的“標尺”，即“設定標準”；
3. 最后通過對多個思維模型、業(yè)務實踐及自我認知的整合，建立自身的原型處理系統(tǒng)，即“建構系統(tǒng)”。

5.1 澄清概念：認識原型工具的核心本質

從產(chǎn)品經(jīng)理日常工作應用場景來看，原型繪制工具的核心本質從不同層面有不同的理解：

• 從個人來講，是測試工具：產(chǎn)品經(jīng)理根據(jù)日常的業(yè)務調(diào)研或產(chǎn)品體驗會產(chǎn)生一些新的需求想法想要去驗證，通過線上原型工具快速搭建一個原型將必備的基本信息和功能體現(xiàn)出來，并開始測試。測試對象可以是自己，也可以是同事、管理者，通過實際瀏覽、操作理解需求意圖并給出修改意見。同時，也可以直接面向用戶基于原型demo進行調(diào)研訪談。
• 從團隊來講，是溝通工具：原型圖本質上是一種溝通工具，是通過可視化的抽象需求直觀展示，向開發(fā)設計團隊進行闡述和說明需求的高效溝通媒介。通過對原型圖界面布局和核心功能進行說明，向開發(fā)設計團隊傳遞清晰的產(chǎn)品理念、定義及需求，并闡明各自的職責是什么，如何通過團隊協(xié)作達成業(yè)務目標。
• 從項目來講，交付工具：產(chǎn)品經(jīng)理作為團隊中的重要角色，在產(chǎn)品研發(fā)項目中起到承上啟下的作用。在產(chǎn)品需求文檔無法完整描述清楚需求時，通過原型圖直觀展示你對需求挖掘和分析的結果，可以有效幫助設計開發(fā)人員理解該需求的可行性，從而順利完成需求定義環(huán)節(jié)，交付合格的產(chǎn)出物流轉至研發(fā)環(huán)節(jié)。

目前摹客的幾大原型產(chǎn)品，也分別驗證了原型工具的三大本質。

例如摹客協(xié)作對應“溝通”工具，摹客RP對應“測試”工具，設計系統(tǒng)對應“交付”工具。

5.2 設定標準：找到原型設計的秩序感

原型設計的秩序感本質上是一種規(guī)律性。它不僅表現(xiàn)是一種自然形態(tài)，也是一種規(guī)律性和條理性。

交互界面設計的秩序感體現(xiàn)在視覺的建構過程中，對視覺經(jīng)驗和運動規(guī)律的適應、感知、決策?；诖耍驮O計的秩序感主要體現(xiàn)在交互界面視覺秩序、目標秩序、審美心理秩序三部分。

適應——界面視覺的秩序：因為交互界面設計更加側重人機交互，所以遠不如平面版式設計那樣自由，根據(jù)一般交互界面設計中的視覺層面秩序感，可以將界面結構大致分為以下幾種：點陣式、左上式、右下式、居中式和總體式等。

感知——用戶心理的秩序：交互界面除了人機交互層面的考慮，還需要考慮用戶體驗層面的審美心理因素?；诮换ソ缑嬖O計中的審美因素產(chǎn)生的設計思路出發(fā)，可以將界面設計原則分為以下幾種：席克定律、泰思勒定律、奧卡姆剃刀原理、帕累托定律等。

決策——業(yè)務目標的秩序：如上文所述，交互界面必須具備實現(xiàn)業(yè)務目標的屬性，即通過界面結構、元件分布、展示策略等因素指引用戶完成如注冊、下單、分享等相關業(yè)務操作?；跇I(yè)務，目的可以將界面設計原則分為以下幾種：親密性原則、對齊原則、重復原則、對比原則。

如何快速找到原型設計的秩序感？使用摹客的快速布局相關功能可以實現(xiàn)。

通過等距克隆、等距調(diào)整、等距排序、快速更換圖標等功能，可以幫助產(chǎn)品經(jīng)理快速創(chuàng)建原型頁面，并使頁面內(nèi)組件、元素、文本等素材有序排版，分布合理。

這些功能中我最喜歡的是等距排序，只要選中多個間距相等的元素時，當鼠標懸停在其中一個部分上時，會出現(xiàn)一個圓點。拖動這個圓點，元素之間的位置可以被非常方便地交換和調(diào)整。

5.3 建構系統(tǒng)：構建高效便捷的原型中臺

除了掌握通用的產(chǎn)品設計方法和熟練的掌握原型控件的使用方法外，還有一個步驟可以繼續(xù)提高我們的設計效率，那就是建立自身的完整原型模板庫。

第一類是基于Web和移動端等平臺的通用組件模板庫，其中提供了可滿足相關平臺原型設計的豐富組件及界面模板，使用時可復用相關元素提升輸出效率。

另一類基于相關行業(yè)的產(chǎn)品模板及結合實際項目需求的案例分享，可以幫助產(chǎn)品經(jīng)理快速掌握產(chǎn)品原型的設計方法和技巧，同時提升自身產(chǎn)品策劃經(jīng)驗及技能。

模板庫里面不僅要有各種日常原型設計需要用到的控件，還可以整理一些通用功能級別的控件，例如：注冊/登錄功能、列表頁功能、表單功能、搜索功能等，建立豐富的原型模板庫，并進行設計過程中的復用，大大提高原型設計設計效率。

摹客RP設計系統(tǒng)中，我們可以快速創(chuàng)建資源庫。資源庫中包含Logo、標準色、字體、標準字、圖標、組件、圖片、度量及陰影九大設計資源。登錄設計系統(tǒng)后，點擊界面上的“ ”號，即可創(chuàng)建資源庫。在新建資源庫界面可選擇創(chuàng)建“空白庫”和“示例庫”兩種。

設計系統(tǒng)對接了Mockplus和Sketch兩種設計工具，可以將工具中制作好的復合組件上傳到設計系統(tǒng)，之后還可以在Mockplus和Sketch中修改并同步更新這些組件。

制定好相關設計規(guī)范后，可分享給其他伙伴或導出規(guī)范圖。此外，還可以將Logo、標準字、標準色、圖標、圖片、組件六種設計資源直接應用到Mockplus和Sketch中。

六、對摹客的幾點優(yōu)化建議

文章最后，除了從多個維度向大家測評并安利摹客產(chǎn)品之外，再從產(chǎn)品經(jīng)理實際使用摹客進行原型設計的過程中，針對未來摹客功能優(yōu)化的角度提幾點建議：

6.1 低、高保真度原型的相互轉化

低保真與高保真原型均有其適合的業(yè)務場景，比如低保真原型適合快速的頭腦風暴，或向客戶、開發(fā)和項目參與者演示設計想法等場景，而高保真原型則適合于確保核心功能需求方面滿足了用戶的基本目標，有效減少了錯誤和返工等場景。

而在現(xiàn)實工作中的情況是有時低保真原型需要快速轉換為高保真原型以應對客戶或研發(fā)、業(yè)務人員的溝通需求，而高保真原型由于客戶演示隱私保護、版本回滾等場景需要轉換為低保真原型。

由低保真向高保真轉化功能尚為時過早，但高保真向低保真原型轉換功能急需實現(xiàn)。

6.2 支持原型圖自動生成需求文檔

摹客目前已支持在線撰寫產(chǎn)品需求文檔功能，并可直接引用素材將線框、原型或高保真原型插入文檔，方便了產(chǎn)品經(jīng)理的日常工作。

但相較于競品Axure的輸出word說明書功能，則稍顯遜色。Axure可基于原型直接輸出完整的word格式的需求文檔，包括所有原型設計及對應文字描述內(nèi)容。

雖然輸出的文檔沒有目錄、頁碼不對、也并不規(guī)范，但通過導入模板功能對文檔格式進行配置后，依然可以輸出滿足特定模板要求的需求文檔。

產(chǎn)品經(jīng)理可基于導出的文檔內(nèi)容作為基礎版本進一步完善，方便團隊管理也十分方便，建議摹客產(chǎn)品團隊跟進調(diào)研、規(guī)劃該需求。

右側為axure配置界面，左側為導出的實際文檔

6.3 加強對UML圖繪制功能的拓展

隨著移動互聯(lián)網(wǎng)時代走向成熟，產(chǎn)業(yè)互聯(lián)網(wǎng)時代隨即到來，toB產(chǎn)品業(yè)務也成為了眾多產(chǎn)品經(jīng)理從事的主要方向。

其中UML圖是B端產(chǎn)品經(jīng)理日常使用最多的圖形工具，可以更好地挖掘業(yè)務需求，使需求文檔更加清晰明了，進而推動團隊業(yè)務的整體進行。

B端產(chǎn)品經(jīng)理常用的UML圖包括ER圖（UML中的類圖）、跨部門流程圖（泳道圖）、狀態(tài)機圖、活動圖、用例圖等。

雖然目前摹客支持繪制復雜流程圖，但針對ER圖、狀態(tài)機圖、用例圖等常用的UML圖類型，目前還缺乏基礎繪制功能及模板，亟待加強對UML圖繪制功能的拓展。

在線流程圖繪制工具processon支持多種UML圖的繪制模板

6.4 加強對創(chuàng)新產(chǎn)品類型載體的探索

今年元宇宙概念的火爆，預示著以沉浸式虛擬現(xiàn)實內(nèi)容、深度人機互動、VR、AR終端應用等為代表的互聯(lián)網(wǎng)3.0時代的到來。

互聯(lián)網(wǎng)3.0最大的特點是沉浸式3D視覺體驗，吸引我們從手機轉向AR/VR設備。作為3D視覺體驗的硬件入口，VR設備和AR設備能夠分別提供3D沉浸式視覺體驗和3D虛實融合視覺體驗。

傳統(tǒng)的原型設計工具僅支持手機、PC端、平板端等傳統(tǒng)硬件，面對內(nèi)容消費載體的新變化應及時作出應對策略。

如目前Figma支持通過Vectary3D插件制作支持AR交互功能的交互原型，并在PC、移動端、AR眼睛等多種終端進行測試。國內(nèi)目前相關AR能力插件很多，摹客可選擇合作接入。

在Figma上利用Vectary3D插件制作AR原型界面

本文為2022摹客RP原型工具測評大賽的測評文章，如對摹客RP感興趣可點擊體驗鏈接：https://www.mockplus.cn/rp-event/?hmsr=woshipmcuilipeng

專欄作家

穆寧，公眾號：穆寧Morning，人人都是產(chǎn)品經(jīng)理專欄作家。北郵碩士，前京東平臺、百度商業(yè)化產(chǎn)品經(jīng)理，《產(chǎn)品思維模型-方法與實戰(zhàn)》作者。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉載。

題圖來自Unsplash，基于CC0協(xié)議。

該文觀點僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。