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

每個(gè)產(chǎn)品經(jīng)理都應(yīng)該熟悉原型軟件。本文以 RP為中心，介紹傳統(tǒng)競(jìng)品原型軟件Axure RP 9和Mok Knife進(jìn)行橫向?qū)Ρ?，從原型工具保真度、生產(chǎn)效率、協(xié)作三個(gè)方面對(duì) RP的能力進(jìn)行橫向?qū)Ρ?。評(píng)測(cè)，一起來(lái)看看吧。

很高興參加這次 RP評(píng)測(cè)。經(jīng)過(guò)一個(gè)月的使用體驗(yàn)，我會(huì)從原型工具的保真度、生產(chǎn)效率、協(xié)作性三個(gè)方面來(lái)評(píng)價(jià) RP的能力。同時(shí)，我會(huì)介紹傳統(tǒng)同類(lèi)競(jìng)品原型軟件Axure RP 9和魔刀進(jìn)行橫向比較，最后給出我個(gè)人的推薦。

1. 保真能力 1. 靜態(tài)頁(yè)面保真能力

靜態(tài)頁(yè)面的保真能力是原型工具的基礎(chǔ)。良好的保真能力可以大大降低原型輸出和評(píng)審過(guò)程中的溝通成本。因此，保真度能力是原型工具的一項(xiàng)艱苦工作。我以京東APP的首頁(yè)和個(gè)人中心頁(yè)面為目標(biāo)頁(yè)面，使用 RP還原頁(yè)面，沒(méi)有使用任何截圖。最終結(jié)果如下圖所示。

從上圖可以看出，在靜態(tài)頁(yè)面中的保真能力非常好。使用 RP自身的功能完全可以滿(mǎn)足日常原型工作的高保真需求，甚至接近UI崗位的工作標(biāo)準(zhǔn)，所以在靜態(tài)頁(yè)面保真度方面Mocke RP的表現(xiàn)讓人放心。

2. 動(dòng)態(tài)保真度

動(dòng)態(tài)保真度主要針對(duì)各種原型的交互動(dòng)作，從簡(jiǎn)單的點(diǎn)擊跳轉(zhuǎn)到應(yīng)用動(dòng)態(tài)圖層的能力。因?yàn)樯婕暗降狞c(diǎn)很多，我就把體驗(yàn)中能找到并應(yīng)用的交互功能整理一下。代入下表：

體驗(yàn)完完整版的動(dòng)態(tài)功能后，我對(duì) RP的總體印象是有基本的交互。在日常產(chǎn)品工作中，這些交互功能可以滿(mǎn)足我們的工作需求。遺憾的是目前不支持邏輯判斷的交互功能，比如點(diǎn)擊按鈕后局部變量的變化，這涉及到計(jì)算邏輯。這種交互功能可以很好地呈現(xiàn)頁(yè)面內(nèi)和頁(yè)面間的數(shù)據(jù)邏輯。雖然這部分應(yīng)用在工作中所占的比例很低，但是當(dāng)我們單獨(dú)談?wù)摫Ｕ娑葧r(shí)，缺少這一部分會(huì)限制原型的保真度。真實(shí)的實(shí)現(xiàn)能力（下面兩張圖分別展示了Mocke RP還原的頁(yè)面跳轉(zhuǎn)交互和密碼顯示/隱藏交互）。

2、生產(chǎn)效率

一個(gè)好的原型設(shè)計(jì)工具的最終目標(biāo)是服務(wù)于工作生產(chǎn)。下面，我將從啟動(dòng)成本、工具全面性和使用效率三個(gè)方面來(lái)評(píng)價(jià) RP。

1. 轉(zhuǎn)換和入職成本

如果你有使用Axure的經(jīng)驗(yàn)，從Axure切換到Mocke的成本是非常低的。 RP的現(xiàn)成組件庫(kù)、圖標(biāo)庫(kù)和模板庫(kù)大大提高了原型制作的速度。因此 RP的上手門(mén)檻比Axure要低很多。有使用Axure經(jīng)驗(yàn)的人可以實(shí)現(xiàn)無(wú)縫連接。

如果你是一名界面設(shè)計(jì)師， RP 的上手成本也很低，而且 RP 令人驚訝的是提供了鋼筆工具，為圖形設(shè)計(jì)開(kāi)辟了多種可能性。

顏色方面，Mocke RP已經(jīng)支持多級(jí)漸變?cè)O(shè)置，在界面實(shí)現(xiàn)上基本沒(méi)有什么可以限制你的發(fā)揮。

使用 RP時(shí)的感覺(jué)是，大部分能實(shí)現(xiàn)的圖像都可以在中完成。 的功能會(huì)給界面設(shè)計(jì)者一種自然的熟悉感。

但這里需要強(qiáng)調(diào)的是，上述結(jié)論是基于原型設(shè)計(jì)的角度得出的。如果你是做界面設(shè)計(jì)， RP不具備替代其他繪圖工具的能力。畢竟藝術(shù)行業(yè)也是有專(zhuān)業(yè)的。

最后，如果你是一個(gè)新手（完全沒(méi)有相關(guān)經(jīng)驗(yàn)的人），Mocke也是一個(gè)不錯(cuò)的選擇。這次，為了更真實(shí)地測(cè)試初學(xué)者 RP的難度，我特地找到了不是設(shè)計(jì)和產(chǎn)品崗位的朋友，在簡(jiǎn)單介紹了界面的使用后，讓他們完成了一個(gè)低富達(dá)個(gè)人中心頁(yè)面。 ，我已經(jīng)提前準(zhǔn)備好了低保真原型，只提供被攝者的截圖。具體截圖請(qǐng)見(jiàn)下圖，讓大家對(duì)工作量和難度有一個(gè)直觀的感受。

要求受試者在不使用屏幕截圖的情況下，在 30 分鐘內(nèi)使用 RP 自帶的工具恢復(fù)目標(biāo)低保真屏幕截圖。最終的結(jié)果是大家基本都能完成任務(wù)。受試者在繪圖過(guò)程中遇到的問(wèn)題主要集中在設(shè)計(jì)層面，例如比例問(wèn)題。工具的問(wèn)題較少。在這個(gè)過(guò)程中，我可以更好地定位自己的工具，了解工具的具體應(yīng)用方法。

我希望通過(guò)這次測(cè)試來(lái)還原我們培訓(xùn)新團(tuán)隊(duì)成員使用原型工具的場(chǎng)景。結(jié)果也符合我之前經(jīng)歷的預(yù)期，但令人興奮的不是結(jié)果，而是受試者給出的反饋。在事后的體驗(yàn)交流中sketch安裝打不開(kāi)，大家一致表示 RP非常適合用作ppt。制作的輔助工具，即使用 RP作為圖形工具。從這次反饋來(lái)看， RP不僅對(duì)新手友好，而且還具備一定的出圈能力。

2. 工具的全面性

上圖是Mocke RP的主操作界面。從這張圖上，你可以更直觀的看到，所有的功能都是可用的。 【組件】為頁(yè)面結(jié)構(gòu)提供了便利，【圖標(biāo)】則有助于界面的豐富和還原。同時(shí)，組件的操作也有相應(yīng)的控件，從文字到形狀，基本的手勢(shì)和交互都已經(jīng)到位。

經(jīng)過(guò)一個(gè)月的使用體驗(yàn)，最終評(píng)價(jià)是“功能全部可用，但細(xì)節(jié)有待完善”。一些功能的使用，尤其是交互設(shè)計(jì)邏輯，還有明顯的優(yōu)化空間。

3、工具使用效率

真正值得我稱(chēng)贊的是，這些設(shè)計(jì)對(duì)于提高生產(chǎn)效率確實(shí)有幫助：

1）自動(dòng)頁(yè)碼編號(hào)

這是一個(gè)非常舒服的功能。所有頁(yè)面都可以一鍵編號(hào)，方便溝通，大大提高原型組織和輸出的效率。

2）可自行維護(hù)的資源池

在資源功能下，你可以感受到Mocke RP對(duì)原型工作者的考慮。它有自己的顏色、文本樣式和組件資源設(shè)置。這允許您歸檔常用的顏色、樣式和組件，這非常有幫助。這是一個(gè)很好的設(shè)計(jì)，可以提高原型的整體統(tǒng)一性，也可以節(jié)省設(shè)計(jì)人員重復(fù)配置的時(shí)間。

3）輔助畫(huà)板

輔助畫(huà)板其實(shí)對(duì)處于畫(huà)圖位置的人來(lái)說(shuō)更加友好。當(dāng)一個(gè)頁(yè)面的素材過(guò)多時(shí)，我可以利用輔助畫(huà)板sketch安裝打不開(kāi)，對(duì)頁(yè)面的資源進(jìn)行高效的組織和分類(lèi)，方便后期的復(fù)用和修改。

4) 流程圖模式

一鍵流程圖模式可以在頁(yè)面上快速創(chuàng)建簡(jiǎn)單的流程圖。這可以作為會(huì)議討論中的邏輯排序工具，提高溝通效率。不過(guò)作為流程圖輸出工具，這部分還是比較少的。它很輕量，所以非常適合作為會(huì)議中的邏輯排序工具。

我強(qiáng)烈想抱怨一下，這些邏輯真的很浪費(fèi)時(shí)間：

1) 步進(jìn)器缺失

在大多數(shù)需要輸入數(shù)值的地方，比如長(zhǎng)度、寬度、字體大小等輸入框，目前支持直接輸入數(shù)值或者使用向上逐步調(diào)整數(shù)值和鍵盤(pán)的向下鍵。不支持鼠標(biāo)可點(diǎn)擊界面中的步驟按鈕。這會(huì)給用戶(hù)在進(jìn)行細(xì)節(jié)調(diào)整時(shí)造成很大的操作浪費(fèi)，而且鍵盤(pán)上的上下鍵可以進(jìn)行步進(jìn)操作，這就需要用戶(hù)理解。在我們意識(shí)到鍵盤(pán)可以進(jìn)行步進(jìn)操作之前，我正在制作詳細(xì)的值。調(diào)整需要進(jìn)行以下操作。

鼠標(biāo)獲得對(duì)應(yīng)設(shè)置項(xiàng)的焦點(diǎn)。> 輸入目標(biāo)值。在其他地方單擊鼠標(biāo)可使設(shè)置項(xiàng)失去焦點(diǎn)。

事實(shí)上，如果有步進(jìn)器進(jìn)行此操作，我只需要點(diǎn)擊設(shè)置項(xiàng)的加號(hào)和減號(hào)按鈕即可完成目標(biāo)的詳細(xì)調(diào)整。所以真心希望Mocke RP團(tuán)隊(duì)能夠優(yōu)化一下這個(gè)操作。

2）圖標(biāo)庫(kù)單薄

當(dāng)我們之前恢復(fù)目標(biāo)頁(yè)面時(shí)，所有圖標(biāo)搜索基本上都可以提供結(jié)果樣式，即使我們找不到合適的圖標(biāo)。當(dāng)我們?cè)趫D標(biāo)庫(kù)中找不到合適的圖標(biāo)時(shí)，就需要到外部去尋找。圖標(biāo)復(fù)制進(jìn)去了，但是復(fù)制的圖標(biāo)的顏色在 RP中無(wú)法完成，會(huì)給后期的調(diào)整帶來(lái)很大的麻煩。希望圖標(biāo)庫(kù)能盡快豐富起來(lái)或者提供一個(gè)從外部導(dǎo)入類(lèi)似svg格式的圖標(biāo)的入口。

3）彩吸管操作邏輯繁瑣

當(dāng)我們操作漸變色時(shí)，我們發(fā)現(xiàn)吸管工具在完成??吸收后會(huì)自動(dòng)關(guān)閉顏色設(shè)置面板。這將導(dǎo)致顏色面板被重復(fù)打開(kāi)以完成漸變操作。有關(guān)詳細(xì)信息，您可以查看下面的 gif。我希望當(dāng)移液器完成繪制時(shí)，顏色設(shè)置面板不會(huì)關(guān)閉。

4）反復(fù)制習(xí)慣設(shè)計(jì)

這是我糾結(jié)了很久的一個(gè)抱怨，因?yàn)槲掖_實(shí)看到了Mocke團(tuán)隊(duì)的誠(chéng)意，把克隆操作做到了可定制化。

但這樣的設(shè)置會(huì)導(dǎo)致失去一個(gè)傳統(tǒng)的功能，即我們習(xí)慣的Ctrl+D可以復(fù)制目標(biāo)元素并顯示在被復(fù)制元素的正下方或右側(cè)?，F(xiàn)在這個(gè)偏移量只能設(shè)置為固定值。問(wèn)題是我們要復(fù)制的目標(biāo)元素的寬度和高度是不確定的。甚至當(dāng)我們一開(kāi)始并沒(méi)有發(fā)現(xiàn)這個(gè)功能可以設(shè)置的時(shí)候，我們?cè)诓僮魍曛罂寺〕鰜?lái)的新克隆的元素就直接覆蓋到了克隆的元素上，直接造成了操作失敗的錯(cuò)覺(jué)。這對(duì)于新用戶(hù)來(lái)說(shuō)確實(shí)非常不友好，尤其是那些熟悉Ctrl+D克隆對(duì)象元素操作的用戶(hù)。

5）鼠標(biāo)選擇操作習(xí)慣問(wèn)題

目前唯一支持的鼠標(biāo)選擇方式是【 】，但有一半的用戶(hù)習(xí)慣了【In 】。在我們的體驗(yàn)中，并沒(méi)有找到【包含選擇】的設(shè)置項(xiàng)。我不知道。大家需要多長(zhǎng)時(shí)間才能改變鼠標(biāo)的選擇方式，因?yàn)檫@涉及到我們鼠標(biāo)的選擇軌跡的變化。不管怎樣，在這段時(shí)間的體驗(yàn)中，【相交選擇】在一定程度上影響了我的繪圖效率。

3. 協(xié)同工作

整體體驗(yàn)下來(lái)，我們能感受到的是Mocke對(duì)于協(xié)同工作的投入。除了主流的多人協(xié)同繪圖外，還可以實(shí)現(xiàn)多人審閱和定稿。其中【評(píng)論】和【定稿】模式對(duì)于產(chǎn)品經(jīng)理的溝通工作非常有幫助，尤其是定稿模式支持文檔上傳，真是太神奇了。這可以為需求方向上審核或需求確認(rèn)提供良好的工作支持。這是整個(gè)體驗(yàn)中最令人驚奇的部分。

但【評(píng)論】和【定稿】模式需要在瀏覽器中完成，無(wú)法在桌面應(yīng)用程序中完成。這將使我們的經(jīng)驗(yàn)不完整。我們希望Mocke團(tuán)隊(duì)能夠在PC桌面應(yīng)用中提供這兩個(gè)功能。 ，允許用戶(hù)打開(kāi)應(yīng)用程序而不是網(wǎng)頁(yè)。畢竟作為深度用戶(hù)，肯定會(huì)下載安裝PC桌面應(yīng)用。如果還讓深度用戶(hù)在桌面應(yīng)用程序和網(wǎng)頁(yè)之間來(lái)回跳轉(zhuǎn)，那不是有點(diǎn)調(diào)皮嗎？

四、競(jìng)品對(duì)比 1、功能對(duì)比

我使用Axure和Ink Knife這兩款產(chǎn)品在主操作界面上與Mocke進(jìn)行橫向?qū)Ρ?。大家可以看下面整理的示意圖，親自感受一下。

頁(yè)面模塊：在該模塊中，三款產(chǎn)品的性能基本相同，但在做頁(yè)面深度測(cè)試時(shí)， RP和都可以支持10級(jí)或以上。

圖層模塊：在圖層模塊中，大家基本都是一樣的。

組件模塊：在組件方面，墨刀的豐富度最高，自由度最高。它支持用戶(hù)定制。在這個(gè)模塊中，確實(shí)需要改進(jìn)。

圖標(biāo)模塊：Mocke的圖標(biāo)表現(xiàn)與組件類(lèi)似?；A(chǔ)的都有了，但是在豐富性和自由度方面還有很大的提升空間。

屬性模塊：在元素的屬性編輯方面，Mocke的可操作性明顯更好，配置的豐富程度也略高于Mok Knife。

交互模塊：從交互深度來(lái)看，>模擬>莫刀；從可操作性（設(shè)定邏輯）來(lái)看，Mock > M Knife >。這里的截圖僅供展示。建議親自體驗(yàn)一下。 Mock確實(shí)提供了更好的設(shè)置體驗(yàn)。

頂部操作欄：在頂部區(qū)域，Mocke獨(dú)特地提供了流程圖模式和鋼筆工具，在豐富程度上比墨刀略勝一籌，但與老大哥相比，還是有明顯的差距。

2. 效率

對(duì)比完主界面的功能后，我對(duì)生產(chǎn)效率做了橫向比較。我分別選擇了一張高保真圖片和一張低保真圖片，用了三個(gè)軟件來(lái)還原時(shí)序。為了消除無(wú)關(guān)變量的影響，在測(cè)試之前，我使用軟件完成了十張圖片的練習(xí)，以熟悉和使用功能。

測(cè)試結(jié)果表明，在完成低保真原型任務(wù)時(shí)，三個(gè)模型的生產(chǎn)效率沒(méi)有太大差異。在完成高保真原型時(shí)， 和 Moko 都表現(xiàn)更好（測(cè)試時(shí)沒(méi)有使用截圖）。

3.生態(tài)學(xué)

從生態(tài)上來(lái)說(shuō)，莫克表現(xiàn)得非常好。通過(guò)Mocke協(xié)作和Mocke RP形成的從原型開(kāi)發(fā)到定型的完美協(xié)作流程，可以很好地解決原型整個(gè)生命周期的需求。

相比之下，魔道作為獨(dú)立的原型工具，生態(tài)較弱，對(duì)原型審核和交流的支持不足。 Axure什么都懂。我所知道的Axure的最佳應(yīng)用實(shí)踐是使用Git來(lái)完成版本和團(tuán)隊(duì)溝通工作。這對(duì)于所有新產(chǎn)品經(jīng)理來(lái)說(shuō)都是一次神奇的經(jīng)歷。

5、選型建議

在使用 Mocke 一個(gè)月后，我將從個(gè)人和企業(yè)角度給您一些選擇原型工具的建議。希望對(duì)大家的選擇有所幫助。

1. 個(gè)人維度

如果你是新手，我強(qiáng)烈推薦Mocke作為你的第一個(gè)原型工具，因?yàn)橄馦ocke RP這樣的SaaS服務(wù)是原型工具的必然趨勢(shì)?？赡苡袀鹘y(tǒng)的人推薦使用Axure，但實(shí)際情況是，使用Axure的成本較高，包括學(xué)習(xí)成本、使用成本和維護(hù)成本，而公司的本質(zhì)是營(yíng)利性組織。熟悉類(lèi)似 SaaS 的原型工具將意味著更多的就業(yè)機(jī)會(huì)。所以如果是個(gè)人選擇的話(huà)，推薦使用。

2、企業(yè)維度

如果您是一家需要對(duì)原型軟件進(jìn)行采購(gòu)決策的企業(yè)，既然您看到了這里，那么您一定對(duì) RP以及類(lèi)似的競(jìng)品有了一定的了解。如果您的公司已經(jīng)使用了原型設(shè)計(jì)工具，我的建議是盡量不要進(jìn)行軟件更改。因?yàn)榇蟛糠之a(chǎn)品工作都是基于之前組織流程資產(chǎn)的迭代，所以我們需要關(guān)注組織流程資產(chǎn)的遷移以及改變員工習(xí)慣的成本。遺憾的是，目前 RP所能帶來(lái)的價(jià)值提升還沒(méi)有明顯大于切換成本，這會(huì)造成很大的決策風(fēng)險(xiǎn)，所以建議繼續(xù)關(guān)注。

但如果你正在購(gòu)買(mǎi)公司的第一個(gè)原型軟件， RP確實(shí)是一個(gè)不錯(cuò)的選擇。主要原因是有更好的生態(tài)結(jié)構(gòu)。除了 RP 之外，它還具有輔助和設(shè)計(jì)軟件。這為后期團(tuán)隊(duì)擴(kuò)展提供了可持續(xù)的軟件開(kāi)發(fā)能力，而無(wú)需擔(dān)心跨軟件協(xié)作。另外， RP的成熟度比較高，不遜色于市場(chǎng)上同類(lèi)的SaaS原型工具。

綜上所述， RP作為一款原型設(shè)計(jì)工具是非??常值得大家親身體驗(yàn)的。我們不必選擇它，但也不要錯(cuò)過(guò)它，因?yàn)?RP確實(shí)是一款“哪吒浩海”類(lèi)型的產(chǎn)品。

本文是2022年 RP原型工具評(píng)測(cè)大賽的評(píng)測(cè)文章。如果您對(duì) RP感興趣，可以點(diǎn)擊體驗(yàn)鏈接：

如有侵權(quán)請(qǐng)聯(lián)系刪除！