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

產(chǎn)品原型有助于我們向使用者演示產(chǎn)品，有助于對(duì)產(chǎn)品特性和使用等有初步的了解，作為產(chǎn)品提供方，也能夠獲得來(lái)自用戶的反饋，以此優(yōu)化產(chǎn)品。一款優(yōu)秀的原型產(chǎn)品應(yīng)當(dāng)是能支撐產(chǎn)品經(jīng)理制作和使用產(chǎn)品原型的全流程作用的。本文圍繞協(xié)作能力，對(duì)摹客RP進(jìn)行簡(jiǎn)單的體驗(yàn)，分享一些自己的看法。

產(chǎn)品原型（Prototype）的產(chǎn)生是為了向最終的使用者演示產(chǎn)品，讓使用者在拿到真實(shí)的產(chǎn)品之前，對(duì)產(chǎn)品的特性、使用方法、使用體驗(yàn)等方面形成初步的了解。這其中包括了將來(lái)會(huì)使用產(chǎn)品的用戶、會(huì)購(gòu)買產(chǎn)品的客戶，當(dāng)然也包括要與產(chǎn)品經(jīng)理并肩作戰(zhàn)的研發(fā)工程師。同時(shí)，作為產(chǎn)品的提供方，我們也能在產(chǎn)品實(shí)際生產(chǎn)之前，通過(guò)原型獲得來(lái)自最終使用者的反饋，以此優(yōu)化產(chǎn)品的設(shè)計(jì)。

結(jié)合在互聯(lián)網(wǎng)領(lǐng)域中的相關(guān)工作流程，原型的作用可以分為幾方面：

1. 面向產(chǎn)品的最終使用者，讓最終使用者能夠通過(guò)原型提前了解產(chǎn)品的功能和使用體驗(yàn)，并提前發(fā)現(xiàn)其中的問題或提出優(yōu)化建議；
2. 作為文檔的一部分，向產(chǎn)品研發(fā)團(tuán)隊(duì)解釋產(chǎn)品的形態(tài)、交互流程等重要信息，并且相比于以文字描述為主的產(chǎn)品需求文檔（ PRD ），原型在刻畫產(chǎn)品方面更加直觀。
3. 原型也作為產(chǎn)品經(jīng)理工作中的重要產(chǎn)出物和依據(jù)，方面在產(chǎn)品團(tuán)隊(duì)內(nèi)部溝通和討論產(chǎn)品的設(shè)計(jì)。

結(jié)合這三方面作用，一款優(yōu)秀的產(chǎn)品原型工具應(yīng)當(dāng)兼?zhèn)鋷追矫婊竟δ芎湍芰?，才能充分支撐產(chǎn)品經(jīng)理制作和使用產(chǎn)品原型的全流程。

• 設(shè)計(jì)能力。 更具體地說(shuō)，就是視覺、交互和資源（例如 icon ）。視覺和交互功能是最基本的要求，否則原型就不能給最終使用者提供直觀的預(yù)期。當(dāng)然，如果是面向研發(fā)團(tuán)隊(duì)的原型，平鋪所有情況才是最直觀的。如果哪個(gè)工具能同時(shí)滿足兩種情況的自由轉(zhuǎn)換就完美了 ~
• 工程能力。 一份產(chǎn)品原型從 1.0 版本的制作開始，經(jīng)過(guò)向上匯報(bào)、用戶演示、橫向溝通、向研發(fā)團(tuán)隊(duì)講解之后，必定有要修改的地方，甚至可能需要“大改”。因此，不光要畫得爽，還得改得爽，這就是工程能力。如果一點(diǎn)點(diǎn)修改需要的工作量幾乎等于重新畫一遍，這個(gè)體驗(yàn)就太差了。以常見的 Axure RP 軟件為例，工程能力就體現(xiàn)在通過(guò) Group 實(shí)現(xiàn)組件組合、通過(guò) 創(chuàng)建 Master 實(shí)現(xiàn)項(xiàng)目?jī)?nèi)組件復(fù)用、通過(guò) 創(chuàng)建/導(dǎo)入 Library 實(shí)現(xiàn)項(xiàng)目間組件復(fù)用等等。
• 協(xié)作能力。 上面已經(jīng)提到了許多基于原型的團(tuán)隊(duì)協(xié)作場(chǎng)景。而相比之下，能直接在線瀏覽和編輯，是目前最好的協(xié)作方式。不過(guò)，還有一些 隱含的協(xié)作能力 ，在實(shí)際使用中才能體會(huì)到。比如版本管理能更好地協(xié)調(diào)和管理大家的產(chǎn)出、圖片壓縮能縮短頁(yè)面打開速度緩解緩存壓力、頁(yè)面標(biāo)注能幫助瀏覽者理解原型中未盡的細(xì)節(jié)、色值管理和標(biāo)注切圖能結(jié)合視覺設(shè)計(jì)師的工作成果讓產(chǎn)品原型更加高保真等等。如果能根據(jù)畫出來(lái)的表單自動(dòng)生成數(shù)據(jù)結(jié)構(gòu)定義，就能跟研發(fā)同學(xué)無(wú)縫銜接了。

結(jié)合摹客瞄準(zhǔn)了原型協(xié)作的定位，重點(diǎn)評(píng)測(cè)將圍繞第三點(diǎn) 協(xié)作能力 展開。同時(shí)，用一個(gè)簡(jiǎn)單的原型體驗(yàn)一下摹客平臺(tái)對(duì)于 Axure RP 原型文件中組件和交互的還原情況。

接下來(lái)，我們先從 Mockplus 平臺(tái)為我們提供的一個(gè)原型設(shè)計(jì)樣例開始了解摹客平臺(tái)的主要模塊。

一、摹客產(chǎn)品體系——1個(gè)協(xié)作平臺(tái)，2款設(shè)計(jì)工具

用自己的賬號(hào)登陸 https://mockplus.cn ，首先看到的是三個(gè)場(chǎng)景。

摹客主頁(yè)

根據(jù)試用，從這里進(jìn)入 摹客協(xié)作 會(huì)看到一個(gè)名為 Jobi 的 App 的原型制作教學(xué)。同時(shí)也在教學(xué)的過(guò)程中，引導(dǎo)我們根據(jù)自己的需要，下載相應(yīng)的軟件插件。

摹客協(xié)作

摹客 RP 是產(chǎn)品經(jīng)理日常使用的主場(chǎng)景之一，是圍繞產(chǎn)品交互原型的功能模塊。更準(zhǔn)確地說(shuō)，是在已經(jīng)制作好并上傳的原型上，進(jìn)一步細(xì)化標(biāo)注和產(chǎn)品邏輯的模塊。其中包括了我們剛剛提到的樣例 App Jobi 。

摹客 RP

第三個(gè) 摹客 UI 看起來(lái)是個(gè)面向視覺設(shè)計(jì)師的工作平臺(tái)。這個(gè)模塊支持將其他主流設(shè)計(jì)軟件創(chuàng)建的設(shè)計(jì)稿（包括 Sketch 和 Figma ）導(dǎo)入到摹客 UI 當(dāng)中。這個(gè)功能將歷史工作整合到了一起，不至于從 0 開始，極大的提升了工作的連貫性。

摹客 UI

接下來(lái)回到產(chǎn)品經(jīng)理工作的主場(chǎng)景 摹客 RP ，以例子項(xiàng)目開始進(jìn)一步體驗(yàn)?zāi)】推脚_(tái)的核心原型設(shè)計(jì)功能。

二、摹客 RP

點(diǎn)擊項(xiàng)目列表中的 摹客例子項(xiàng)目 ，就進(jìn)入了這個(gè)已經(jīng)做好的樣例。

摹客樣例項(xiàng)目

頂欄菜單提供了三個(gè)子模塊之間的切換。很高興的一點(diǎn)是，我們能看到摹客將圍繞原型設(shè)計(jì)的三個(gè)常用工作模塊集成到了一起，包括圍繞頁(yè)面視覺設(shè)計(jì)稿和頁(yè)面關(guān)系的 設(shè)計(jì)稿 、核心交互設(shè)計(jì)相關(guān)的 原型稿 以及重要的產(chǎn)品需求文檔部分 文檔 。三個(gè)模塊的核心功能頁(yè)面布局類似，采用了左右結(jié)構(gòu)，左側(cè)為菜單，右側(cè)為核心畫板部分。

2.1 原型稿

原型稿 部分是一個(gè)獨(dú)立窗口，進(jìn)入后左側(cè)展示了原型文件中的頁(yè)面，右側(cè)為頁(yè)面預(yù)覽。但， Axure 案例展示 部分的原型頁(yè)面與設(shè)計(jì)稿模塊并不對(duì)應(yīng)，這部分希望優(yōu)化一下，哈哈哈。

原型稿部分整體依然分了四個(gè)子模塊，包括： 評(píng)論 、 定稿 、 開發(fā) 和 預(yù)覽 ，在頂欄可以進(jìn)行切換。

其中， 評(píng)論 提供了對(duì)現(xiàn)有原型的標(biāo)注功能，包括圖釘、矩形框、箭頭等，方便在不影響原型自身的情況下，提供額外的解釋信息，提高協(xié)作效率。

添加圖釘

個(gè)人感覺圖釘功能是 最實(shí)用 的，可以直接輸入評(píng)論內(nèi)容幫助理解，同時(shí)也不會(huì)大面積覆蓋原型頁(yè)面自身的空間。此外還提供了對(duì)圖釘樣式的設(shè)置，設(shè)置為 頭像 的話，可以直觀地看出標(biāo)注人，方便進(jìn)一步溝通協(xié)作。同時(shí)，每個(gè)圖釘有自己的狀態(tài) ，整個(gè)頁(yè)面的圖釘也有專門的列表，可以清晰看到處理進(jìn)展。

圖釘狀態(tài)

相比 評(píng)論 模塊， 定稿 和 開發(fā) 則更貼近研發(fā)落地。在 定稿 模塊中，我們可以進(jìn)一步添加標(biāo)注，包括坐標(biāo)、標(biāo)尺等標(biāo)注工具。同時(shí)，一個(gè) 亮點(diǎn) 功能是可以在原型中引用文檔、資源或鏈接。這就與前面提到的文檔模塊聯(lián)系起來(lái)了。

引用文檔（1）

并且，文檔引用也不是只能 “無(wú)腦” 地全篇引用，而是可以選中相關(guān)文本，并 創(chuàng)建引用點(diǎn) 來(lái)實(shí)現(xiàn)部分引用。創(chuàng)建后的引用點(diǎn)相當(dāng)于在文檔中增加了 書簽 ，查看時(shí)會(huì)直接跳轉(zhuǎn)到相應(yīng)位置。

這個(gè)功能確實(shí)非常棒！尤其是研發(fā)團(tuán)隊(duì)在了解產(chǎn)品設(shè)計(jì)時(shí)，免去了原型文檔兩邊對(duì)著看的麻煩。

引用文檔（2）

而 開發(fā) 子模塊看起來(lái)就是為切圖工作準(zhǔn)備的。隨著鼠標(biāo)移動(dòng)，會(huì)自動(dòng)顯示出原型中元素的尺寸等信息。

開發(fā)

根據(jù)右側(cè)菜單的引導(dǎo)，雖然目前只能在 Photoshop 、 Sketch 和 Adobe XD 中獲得切圖，但通過(guò)右側(cè)菜單，我們可以看出從功能上已經(jīng)把切圖開發(fā)可能需要的工具都準(zhǔn)備好了。

開發(fā)菜單

最后一個(gè) 演示 子模塊則主要是原型預(yù)覽。這部分應(yīng)該就是前面提到的，向最終用戶/客戶演示產(chǎn)品設(shè)計(jì)使用的了。前面三個(gè)模塊中增加的標(biāo)注和評(píng)論等信息，在這里并未提供，不過(guò)如果結(jié)合用于演示的功能定位，如果加上了前面的標(biāo)注確實(shí)有些多余。

原型預(yù)覽

最后一個(gè)可能被忽略，但又挺有用的小功能，是右上角的 下載 。這里的下載并不是下載標(biāo)注后的原型文件，而是下載原型中的評(píng)論，保存格式為 *.csv 。emm……怎么說(shuō)呢，可能是為了線下整理一下大家的意見用的吧。不過(guò)如果能把標(biāo)注后的原型下載下來(lái)可能更有用一些。

下載評(píng)論

評(píng)論數(shù)據(jù)

關(guān)于評(píng)論數(shù)據(jù)中的 歷史版本 是什么，我也是后來(lái)才找到的。這個(gè)功能在剛剛的 原型稿 列表中。

列表更新

點(diǎn)擊 更新項(xiàng)目 后重新上傳 Axure RP 導(dǎo)出的原型文件，即可作為新版本。為了避免誤操作，也可以在下面的列表中找打要更新的項(xiàng)目，點(diǎn)擊鼠標(biāo)右鍵（是的，這里可以點(diǎn)擊右鍵），然后選擇 更新 。

鼠標(biāo)郵件更新

2.2 設(shè)計(jì)稿

設(shè)計(jì)稿 部分，大部分功能與 原型稿 部分是一致的。值得一提的是在 設(shè)計(jì)稿 部分可以添加交互。通過(guò)頂欄菜單的第 4 項(xiàng)，可以切換到 交互 模塊。通過(guò) 雙擊 頁(yè)面上的元素，再點(diǎn)擊要跳轉(zhuǎn)的頁(yè)面，最后通過(guò)右側(cè)的菜單完成交互的詳細(xì)配置即可。

創(chuàng)建交互

配置交互

完成配置之后，即可在最后的 預(yù)覽 模塊中嘗試點(diǎn)擊了。需要注意的是，這里配置的頁(yè)面跳轉(zhuǎn)關(guān)系，與 設(shè)計(jì)稿 中畫布上的連線并沒有關(guān)系，如果能在 設(shè)計(jì)稿 中增加一種模式，展示真實(shí)的跳轉(zhuǎn)關(guān)系，就更好了。

同時(shí)， 設(shè)計(jì)稿 中增加的交互并不會(huì)同步到 原型稿 ，因此這里的邏輯大概是： 原型稿 中的交互由 Axure RP 原型文件決定。

2.3 文檔

看過(guò)原型稿和設(shè)計(jì)稿，接下來(lái)再看看產(chǎn)品經(jīng)理的另一個(gè)重要工作項(xiàng)：文檔?；氐巾?xiàng)目，通過(guò)頂欄菜單即可切換到 文檔 子模塊。

預(yù)覽文檔

直觀感受上， 文檔 部分是一個(gè)標(biāo)準(zhǔn)的在線文檔協(xié)作系統(tǒng)。左側(cè)是文檔列表和文檔內(nèi)的各級(jí)目錄列表，文檔內(nèi)容區(qū)域支持隱藏左側(cè)菜單或回顧文檔歷史版本。右側(cè)則是一個(gè)與原型子模塊中類似的評(píng)論列表。但試了試，比較遺憾的一點(diǎn)是，這里的評(píng)論并未與原型部分的評(píng)論同步。也就是說(shuō)，即便原型與文檔出現(xiàn)了類似的問題，你需要分別在兩個(gè)地方增加評(píng)論。

當(dāng)前我們看到的是文檔的預(yù)覽狀態(tài)，點(diǎn)擊右上角的 編輯 按鈕，就進(jìn)入了編輯狀態(tài)。這里看上去就完全是一個(gè)標(biāo)準(zhǔn)的在線文檔協(xié)作系統(tǒng)了。提供了文檔編輯必須的各種格式，并且也加入了插入圖片、插入鏈接等常用功能。

編輯文檔

接著，另一個(gè)令人 眼前一亮 的功能出現(xiàn)了，就是這個(gè)位于功能菜單欄最后的 插入設(shè)計(jì)稿 。

插入設(shè)計(jì)稿（1）

點(diǎn)擊之后，會(huì)展示出已經(jīng)保存的設(shè)計(jì)稿，可以直接選擇相關(guān)的設(shè)計(jì)稿插入到文檔之中。需要注意的是，這個(gè)功能是將最新版本的設(shè)計(jì)稿以圖片的形式插入到文檔中。

插入設(shè)計(jì)稿（2）

看了彈窗下方的提示，這里插入的圖片，應(yīng)該是可以隨著 設(shè)計(jì)稿 更新的。但是我在 設(shè)計(jì)稿 部分并沒有研究明白已經(jīng)創(chuàng)建好的頁(yè)面設(shè)計(jì)稿應(yīng)當(dāng)如何更新……所以這個(gè)是否能順暢同步，暫時(shí)沒有體驗(yàn)到。

文檔 部分整體體驗(yàn)下來(lái)，還是令人滿意的。不知道摹客會(huì)不會(huì)考慮在編輯狀態(tài)中直接支持插入評(píng)論呢？返回預(yù)覽狀態(tài)再添加的邏輯，還是有點(diǎn)麻煩的，哈哈哈。

三、體驗(yàn)上傳 Axure RP

為了充分體驗(yàn)一下一個(gè)原型從 0 開始的樣子，我還是決定試試自己上傳一個(gè)臨時(shí)編輯的原型文件試試看。回到項(xiàng)目列表，點(diǎn)擊上面的 + 新建 來(lái)創(chuàng)建一個(gè)新的體驗(yàn)項(xiàng)目。

新建項(xiàng)目

進(jìn)入新項(xiàng)目后，就提示上傳文件了。這里上傳一個(gè)我臨時(shí)創(chuàng)建的原型文件。根據(jù)幫助文檔，這里的 演示包 指的是通過(guò) Axure RP 導(dǎo)出 HTML 之后再壓縮而成的 *.zip 包。

上傳原型稿

當(dāng)然我們也可以使用摹客提供的 Axure RP 小工具上傳，與 Axure RP 的工作體驗(yàn)更連貫。

摹客 Axure RP 小工具

完成上傳后，就可以在 原型稿 中繼續(xù)添加圖釘和瀏覽標(biāo)注了。

新原型圖釘

標(biāo)注新原型

四、評(píng)測(cè)總結(jié)

經(jīng)過(guò)短暫的體驗(yàn)，主要體驗(yàn)了 摹客 RP 這個(gè)以原型、文檔和設(shè)計(jì)圖為核心的子產(chǎn)品。下面對(duì)整個(gè)體驗(yàn)過(guò)程進(jìn)行一個(gè)簡(jiǎn)單的總結(jié)。

4.1 優(yōu)勢(shì)項(xiàng)

摹客 RP 以原型協(xié)作為核心，在現(xiàn)有的原型設(shè)計(jì)工具的支持方面非常強(qiáng)大。從最經(jīng)常提到的 Axure RP 和 Sketch ，到 Figma 、Photoshop 、 Adobe XD 都提供了相應(yīng)的插件。一方面，大家此前的工作成果不至于直接報(bào)廢，而是可以在摹客 RP 平臺(tái)上繼續(xù)工作。另一方面，借助這些插件，我們可以將這些強(qiáng)大的本地軟件變?yōu)槟】?RP 的強(qiáng)大擴(kuò)展，這樣既能用上這些軟件的強(qiáng)大功能，又能借助摹客 RP 實(shí)現(xiàn)工作協(xié)同，兩全其美。

同時(shí)，作為一款具備一定編輯和設(shè)計(jì)能力的在線工具，穩(wěn)定性是保證工作成果安全的重中之重。在這方面，摹客 RP 的整體體驗(yàn)是 穩(wěn)穩(wěn)的 。整體體驗(yàn)過(guò)程中沒有出現(xiàn)卡頓、延遲、連接超時(shí)等在線系統(tǒng)可能出現(xiàn)的問題，并且在文字、交互元素的反饋方面做得也不錯(cuò)，操作和提示整體連貫而清晰。

在模塊劃分上，基本覆蓋了產(chǎn)品經(jīng)理在原型和文檔方面的需求，同時(shí)又具備了結(jié)合設(shè)計(jì)師工作的功能，覆蓋了啟動(dòng)技術(shù)研發(fā)工作之前的完整產(chǎn)品設(shè)計(jì)流程。

4.2 有待提升項(xiàng)

畢竟產(chǎn)品沒有完美的，針對(duì)本次體驗(yàn)的摹客平臺(tái)，主要有以下幾點(diǎn)不足建議繼續(xù)加強(qiáng)：

第一，在設(shè)計(jì)稿畫布中，希望能增加一種模式，展示交互中配置的跳轉(zhuǎn)關(guān)系。目前的連線提現(xiàn)的是主干流程，而自定義的跳轉(zhuǎn)交互只能在預(yù)覽中實(shí)際體驗(yàn)才能檢驗(yàn)。并且，只有兩邊對(duì)著看，才能發(fā)現(xiàn)兩邊是否有不一致的地方。

第二，文檔部分與原型部分的評(píng)論未相互打通，但實(shí)際工作中文檔與原型必定相互對(duì)應(yīng)，這個(gè)小功能還是建議加上。

第三，原型稿部分需要再點(diǎn)擊一次才能進(jìn)入實(shí)際的交互模塊，并且也沒有覺得這個(gè)步驟提供了什么額外的價(jià)值。這個(gè)部分如果能省掉，整體流程就更簡(jiǎn)潔了。

第四，如果要保留下載功能的話，強(qiáng)烈建議改成能下載標(biāo)注后的原型稿，哪怕是在原型稿的壓縮包里單獨(dú)插一頁(yè)來(lái)展示所有的批注也好。

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