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

產品原型有助于我們向使用者演示產品，有助于對產品特性和使用等有初步的了解，作為產品提供方，也能夠獲得來自用戶的反饋，以此優化產品。一款優秀的原型產品應當是能支撐產品經理制作和使用產品原型的全流程作用的。本文圍繞協作能力，對摹客RP進行簡單的體驗，分享一些自己的看法。

產品原型（Prototype）的產生是為了向最終的使用者演示產品，讓使用者在拿到真實的產品之前，對產品的特性、使用方法、使用體驗等方面形成初步的了解。這其中包括了將來會使用產品的用戶、會購買產品的客戶，當然也包括要與產品經理并肩作戰的研發工程師。同時，作為產品的提供方，我們也能在產品實際生產之前，通過原型獲得來自最終使用者的反饋，以此優化產品的設計。

結合在互聯網領域中的相關工作流程，原型的作用可以分為幾方面：

1. 面向產品的最終使用者，讓最終使用者能夠通過原型提前了解產品的功能和使用體驗，并提前發現其中的問題或提出優化建議；
2. 作為文檔的一部分，向產品研發團隊解釋產品的形態、交互流程等重要信息，并且相比于以文字描述為主的產品需求文檔（ PRD ），原型在刻畫產品方面更加直觀。
3. 原型也作為產品經理工作中的重要產出物和依據，方面在產品團隊內部溝通和討論產品的設計。

結合這三方面作用，一款優秀的產品原型工具應當兼備幾方面基本功能和能力，才能充分支撐產品經理制作和使用產品原型的全流程。

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

結合摹客瞄準了原型協作的定位，重點評測將圍繞第三點 協作能力 展開。同時，用一個簡單的原型體驗一下摹客平臺對于 Axure RP 原型文件中組件和交互的還原情況。

接下來，我們先從 Mockplus 平臺為我們提供的一個原型設計樣例開始了解摹客平臺的主要模塊。

一、摹客產品體系——1個協作平臺，2款設計工具

用自己的賬號登陸 https://mockplus.cn ，首先看到的是三個場景。

摹客主頁

根據試用，從這里進入 摹客協作 會看到一個名為 Jobi 的 App 的原型制作教學。同時也在教學的過程中，引導我們根據自己的需要，下載相應的軟件插件。

摹客協作

摹客 RP 是產品經理日常使用的主場景之一，是圍繞產品交互原型的功能模塊。更準確地說，是在已經制作好并上傳的原型上，進一步細化標注和產品邏輯的模塊。其中包括了我們剛剛提到的樣例 App Jobi 。

摹客 RP

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

摹客 UI

接下來回到產品經理工作的主場景 摹客 RP ，以例子項目開始進一步體驗摹客平臺的核心原型設計功能。

二、摹客 RP

點擊項目列表中的 摹客例子項目 ，就進入了這個已經做好的樣例。

摹客樣例項目

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

2.1 原型稿

原型稿 部分是一個獨立窗口，進入后左側展示了原型文件中的頁面，右側為頁面預覽。但， Axure 案例展示 部分的原型頁面與設計稿模塊并不對應，這部分希望優化一下，哈哈哈。

原型稿部分整體依然分了四個子模塊，包括： 評論 、 定稿 、 開發 和 預覽 ，在頂欄可以進行切換。

其中， 評論 提供了對現有原型的標注功能，包括圖釘、矩形框、箭頭等，方便在不影響原型自身的情況下，提供額外的解釋信息，提高協作效率。

添加圖釘

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

圖釘狀態

相比 評論 模塊， 定稿 和 開發 則更貼近研發落地。在 定稿 模塊中，我們可以進一步添加標注，包括坐標、標尺等標注工具。同時，一個 亮點 功能是可以在原型中引用文檔、資源或鏈接。這就與前面提到的文檔模塊聯系起來了。

引用文檔（1）

并且，文檔引用也不是只能 “無腦” 地全篇引用，而是可以選中相關文本，并 創建引用點 來實現部分引用。創建后的引用點相當于在文檔中增加了 書簽 ，查看時會直接跳轉到相應位置。

這個功能確實非常棒！尤其是研發團隊在了解產品設計時，免去了原型文檔兩邊對著看的麻煩。

引用文檔（2）

而 開發 子模塊看起來就是為切圖工作準備的。隨著鼠標移動，會自動顯示出原型中元素的尺寸等信息。

開發

根據右側菜單的引導，雖然目前只能在 Photoshop 、 Sketch 和 Adobe XD 中獲得切圖，但通過右側菜單，我們可以看出從功能上已經把切圖開發可能需要的工具都準備好了。

開發菜單

最后一個 演示 子模塊則主要是原型預覽。這部分應該就是前面提到的，向最終用戶/客戶演示產品設計使用的了。前面三個模塊中增加的標注和評論等信息，在這里并未提供，不過如果結合用于演示的功能定位，如果加上了前面的標注確實有些多余。

原型預覽

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

下載評論

評論數據

關于評論數據中的 歷史版本 是什么，我也是后來才找到的。這個功能在剛剛的 原型稿 列表中。

列表更新

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

鼠標郵件更新

2.2 設計稿

設計稿 部分，大部分功能與 原型稿 部分是一致的。值得一提的是在 設計稿 部分可以添加交互。通過頂欄菜單的第 4 項，可以切換到 交互 模塊。通過 雙擊 頁面上的元素，再點擊要跳轉的頁面，最后通過右側的菜單完成交互的詳細配置即可。

創建交互

配置交互

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

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

2.3 文檔

看過原型稿和設計稿，接下來再看看產品經理的另一個重要工作項：文檔?；氐巾椖?，通過頂欄菜單即可切換到 文檔 子模塊。

預覽文檔

直觀感受上， 文檔 部分是一個標準的在線文檔協作系統。左側是文檔列表和文檔內的各級目錄列表，文檔內容區域支持隱藏左側菜單或回顧文檔歷史版本。右側則是一個與原型子模塊中類似的評論列表。但試了試，比較遺憾的一點是，這里的評論并未與原型部分的評論同步。也就是說，即便原型與文檔出現了類似的問題，你需要分別在兩個地方增加評論。

當前我們看到的是文檔的預覽狀態，點擊右上角的 編輯 按鈕，就進入了編輯狀態。這里看上去就完全是一個標準的在線文檔協作系統了。提供了文檔編輯必須的各種格式，并且也加入了插入圖片、插入鏈接等常用功能。

編輯文檔

接著，另一個令人 眼前一亮 的功能出現了，就是這個位于功能菜單欄最后的 插入設計稿 。

插入設計稿（1）

點擊之后，會展示出已經保存的設計稿，可以直接選擇相關的設計稿插入到文檔之中。需要注意的是，這個功能是將最新版本的設計稿以圖片的形式插入到文檔中。

插入設計稿（2）

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

文檔 部分整體體驗下來，還是令人滿意的。不知道摹客會不會考慮在編輯狀態中直接支持插入評論呢？返回預覽狀態再添加的邏輯，還是有點麻煩的，哈哈哈。

三、體驗上傳 Axure RP

為了充分體驗一下一個原型從 0 開始的樣子，我還是決定試試自己上傳一個臨時編輯的原型文件試試看?；氐巾椖苛斜?，點擊上面的 + 新建 來創建一個新的體驗項目。

新建項目

進入新項目后，就提示上傳文件了。這里上傳一個我臨時創建的原型文件。根據幫助文檔，這里的 演示包 指的是通過 Axure RP 導出 HTML 之后再壓縮而成的 *.zip 包。

上傳原型稿

當然我們也可以使用摹客提供的 Axure RP 小工具上傳，與 Axure RP 的工作體驗更連貫。

摹客 Axure RP 小工具

完成上傳后，就可以在 原型稿 中繼續添加圖釘和瀏覽標注了。

新原型圖釘

標注新原型

四、評測總結

經過短暫的體驗，主要體驗了 摹客 RP 這個以原型、文檔和設計圖為核心的子產品。下面對整個體驗過程進行一個簡單的總結。

4.1 優勢項

摹客 RP 以原型協作為核心，在現有的原型設計工具的支持方面非常強大。從最經常提到的 Axure RP 和 Sketch ，到 Figma 、Photoshop 、 Adobe XD 都提供了相應的插件。一方面，大家此前的工作成果不至于直接報廢，而是可以在摹客 RP 平臺上繼續工作。另一方面，借助這些插件，我們可以將這些強大的本地軟件變為摹客 RP 的強大擴展，這樣既能用上這些軟件的強大功能，又能借助摹客 RP 實現工作協同，兩全其美。

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

在模塊劃分上，基本覆蓋了產品經理在原型和文檔方面的需求，同時又具備了結合設計師工作的功能，覆蓋了啟動技術研發工作之前的完整產品設計流程。

4.2 有待提升項

畢竟產品沒有完美的，針對本次體驗的摹客平臺，主要有以下幾點不足建議繼續加強：

第一，在設計稿畫布中，希望能增加一種模式，展示交互中配置的跳轉關系。目前的連線提現的是主干流程，而自定義的跳轉交互只能在預覽中實際體驗才能檢驗。并且，只有兩邊對著看，才能發現兩邊是否有不一致的地方。

第二，文檔部分與原型部分的評論未相互打通，但實際工作中文檔與原型必定相互對應，這個小功能還是建議加上。

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

第四，如果要保留下載功能的話，強烈建議改成能下載標注后的原型稿，哪怕是在原型稿的壓縮包里單獨插一頁來展示所有的批注也好。

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