#本文為2022摹客RP原型工具測(cè)評(píng)大賽二等獎(jiǎng)作品

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

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

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

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

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

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

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

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

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

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

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

1. “道” 是思維，是原型設(shè)計(jì)的思維方式與底層邏輯，是原型設(shè)計(jì)的指導(dǎo)思想。原型設(shè)計(jì)思維幫助我們建立對(duì)原型的全局視角，并學(xué)會(huì)如何從戰(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ì)。

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

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

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

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

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

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

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

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

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

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

21世紀(jì)開始：

PC互聯(lián)網(wǎng)時(shí)代到來(lái)，原型工具的發(fā)展迎來(lái)第二個(gè)階段。彼時(shí)的代表性的軟件是Axure。Axure以其簡(jiǎn)單、易用、易于演示等特性備受歡迎，成為 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年開始：

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

目前：

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

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

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

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

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

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

正如上文所言，好的原型工具可以提升工作效率并彌補(bǔ)我們?cè)诩寄軐用嫔厦娴牧觿?shì)。

摹客作為一款與時(shí)俱進(jìn)的原型工具滿足了我們?cè)凇捌鳌睂用娴幕疽螅敲丛凇靶g(shù)”層面，我們又該如何提升？

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

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

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

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

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

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

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

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

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

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

1. 需求內(nèi)容的呈現(xiàn)：任何頁(yè)面其實(shí)都是文字、多媒體、交互組件的載體，通過(guò)這些素材把需求內(nèi)容呈現(xiàn)給訪問(wè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)品之間有操作互動(dòng)，同時(shí)伴隨著數(shù)據(jù)的交換。如何讓用戶更容易的操作，數(shù)據(jù)交換更合理，就是產(chǎn)品的易用性。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

產(chǎn)品經(jīng)理可以建立多個(gè)庫(kù)、分類和子分類來(lái)進(jìn)行管理，每個(gè)庫(kù)里包含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ì)，邀請(qǐng)成員，設(shè)置團(tuán)隊(duì)成員角色和權(quán)限，各司其職，高效管理，進(jìn)行協(xié)作設(shè)計(jì)。

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

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

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

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

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

對(duì)于團(tuán)隊(duì)來(lái)說(shuō)，原型設(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í)通訊工具方面，摹客完成了與騰訊會(huì)議的合作對(duì)接，接入騰訊會(huì)議后，在摹客項(xiàng)目的畫板模式下,主持人“發(fā)起會(huì)議”,會(huì)議提醒將以彈窗的形式展現(xiàn)給項(xiàng)目成員，項(xiàng)目成員如需參會(huì)，點(diǎn)擊“立即加入”即可，進(jìn)入會(huì)議室后，頁(yè)面中將會(huì)同步顯示主持人的演示界面。開會(huì)更靈活，工作效率大大提高。

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)化等等。

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

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

如何為團(tuán)隊(duì)建立可追溯的更改需求看板，通過(guò)摹客協(xié)作可以實(shí)現(xiàn)。通過(guò)將原型上傳至摹客協(xié)作，所有改動(dòng)都可一鍵@相關(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é)思考，有三個(gè)標(biāo)準(zhǔn)：澄清概念、設(shè)定標(biāo)準(zhǔn)、建構(gòu)系統(tǒng)，如圖所示。

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

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

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

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

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

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

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

例如摹客協(xié)作對(duì)應(yīng)“溝通”工具，摹客RP對(duì)應(yīng)“測(cè)試”工具，設(shè)計(jì)系統(tǒng)對(duì)應(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)過(guò)程中，對(duì)視覺經(jīng)驗(yàn)和運(yùn)動(dòng)規(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)層面的審美心理因素?；诮换ソ缑嬖O(shè)計(jì)中的審美因素產(chǎn)生的設(shè)計(jì)思路出發(fā)，可以將界面設(shè)計(jì)原則分為以下幾種：席克定律、泰思勒定律、奧卡姆剃刀原理、帕累托定律等。

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

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

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

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

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

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

第一類是基于Web和移動(dòng)端等平臺(tái)的通用組件模板庫(kù)，其中提供了可滿足相關(guān)平臺(tái)原型設(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)及技能。

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

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

設(shè)計(jì)系統(tǒng)對(duì)接了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中。

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

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

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

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

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

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

6.2 支持原型圖自動(dòng)生成需求文檔

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

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

雖然輸出的文檔沒有目錄、頁(yè)碼不對(duì)、也并不規(guī)范，但通過(guò)導(dǎo)入模板功能對(duì)文檔格式進(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)對(duì)UML圖繪制功能的拓展

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

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

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

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

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

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

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

互聯(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)硬件，面對(duì)內(nèi)容消費(fèi)載體的新變化應(yīng)及時(shí)作出應(yīng)對(duì)策略。

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

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

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