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

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

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

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

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

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

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

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

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

希望能夠幫助一些剛?cè)胄械男氯嘶蚴钦ㄔ诼殬I(yè)瓶頸中的人，找到自己的提升空間，掌握原型設(shè)計(jì)的思維方法，建立全面的原型認(rèn)知，早日找到打開資深產(chǎn)品經(jīng)理之路的金鑰匙。

二、什么是原型設(shè)計(jì)的“道術(shù)器”？

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

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

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

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

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

三、原型設(shè)計(jì)之“器”——原型工具的功能演進(jìn)路徑

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

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

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

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

20 世紀(jì) 80 年代至90年代：

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

21世紀(jì)開始：

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

2009年開始：

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

目前：

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

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

3.2 如何選擇“與時(shí)俱進(jìn)”的原型設(shè)計(jì)工具？

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

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

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

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

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

四、原型設(shè)計(jì)之“術(shù)”——個人與團(tuán)隊(duì)層面的原型之術(shù)

“器”與“術(shù)”的關(guān)系抽象來說，“術(shù)”就是駕馭“器”的技術(shù)。我們所說的原型設(shè)計(jì)之“術(shù)”，就是原型設(shè)計(jì)的基本操作技能。

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

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

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

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

4.1 個人層面的原型設(shè)計(jì)之“術(shù)”

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4.1.2 實(shí)現(xiàn)清晰的業(yè)務(wù)操作路徑，明確導(dǎo)航與鏈接

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4.2 團(tuán)隊(duì)層面的原型設(shè)計(jì)之“術(shù)”

4.2.1 創(chuàng)建并管理團(tuán)隊(duì)規(guī)范，建立團(tuán)隊(duì)工作準(zhǔn)則

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

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

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

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

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

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

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

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

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

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

各個領(lǐng)域都有其代表性的頭部工具成為眾多團(tuán)隊(duì)的長期選擇，遷移成本巨大。

對于團(tuán)隊(duì)來說，原型設(shè)計(jì)工具不應(yīng)該代替現(xiàn)有協(xié)作工具，而應(yīng)該深度集成，與協(xié)作工具建立“協(xié)同關(guān)系”。

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

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

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

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

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

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

因?yàn)橐坏┖笃趫F(tuán)隊(duì)面臨無窮無盡的改動，不僅會大幅提升項(xiàng)目工期導(dǎo)致項(xiàng)目延期，最終產(chǎn)品經(jīng)理也會被認(rèn)為不專業(yè)。

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

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

五、原型設(shè)計(jì)之“道”——原型的概念、標(biāo)準(zhǔn)與系統(tǒng)

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

傅佩榮先生在其所著的《哲學(xué)與人生》中寫道，判斷自己是否在進(jìn)行哲學(xué)思考，有三個標(biāo)準(zhǔn)：澄清概念、設(shè)定標(biāo)準(zhǔn)、建構(gòu)系統(tǒng)，如圖所示。

哲學(xué)思考的三個標(biāo)準(zhǔn)其實(shí)對應(yīng)著三條解決世間所有問題的底層邏輯，從頂層視角看待任何事物的思考方式。

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

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

5.1 澄清概念：認(rèn)識原型工具的核心本質(zhì)

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

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

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

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

5.2 設(shè)定標(biāo)準(zhǔn)：找到原型設(shè)計(jì)的秩序感

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

交互界面設(shè)計(jì)的秩序感體現(xiàn)在視覺的建構(gòu)過程中，對視覺經(jīng)驗(yàn)和運(yùn)動規(guī)律的適應(yīng)、感知、決策。基于此，原型設(shè)計(jì)的秩序感主要體現(xiàn)在交互界面視覺秩序、目標(biāo)秩序、審美心理秩序三部分。

適應(yīng)——界面視覺的秩序：因?yàn)榻换ソ缑嬖O(shè)計(jì)更加側(cè)重人機(jī)交互，所以遠(yuǎn)不如平面版式設(shè)計(jì)那樣自由，根據(jù)一般交互界面設(shè)計(jì)中的視覺層面秩序感，可以將界面結(jié)構(gòu)大致分為以下幾種：點(diǎn)陣式、左上式、右下式、居中式和總體式等。

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

決策——業(yè)務(wù)目標(biāo)的秩序：如上文所述，交互界面必須具備實(shí)現(xiàn)業(yè)務(wù)目標(biāo)的屬性，即通過界面結(jié)構(gòu)、元件分布、展示策略等因素指引用戶完成如注冊、下單、分享等相關(guān)業(yè)務(wù)操作。基于業(yè)務(wù)，目的可以將界面設(shè)計(jì)原則分為以下幾種：親密性原則、對齊原則、重復(fù)原則、對比原則。

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

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

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

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

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

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

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

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

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

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

制定好相關(guān)設(shè)計(jì)規(guī)范后，可分享給其他伙伴或?qū)С鲆?guī)范圖。此外，還可以將Logo、標(biāo)準(zhǔn)字、標(biāo)準(zhǔn)色、圖標(biāo)、圖片、組件六種設(shè)計(jì)資源直接應(yīng)用到Mockplus和Sketch中。

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

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

6.1 低、高保真度原型的相互轉(zhuǎn)化

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

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

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

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

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

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

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

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

右側(cè)為axure配置界面，左側(cè)為導(dǎo)出的實(shí)際文檔

6.3 加強(qiáng)對UML圖繪制功能的拓展

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

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

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

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

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

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

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

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

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

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

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

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

專欄作家

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

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

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

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