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

隨著互聯網的發展，產品設計需求也隨即增多，市面上的原型設計工具都差不多，呈現差異化是當前原型工具從競爭中脫穎而出的關鍵。本文以摹客RP為例，借助用戶五要素，闡述如何在產品設計借助創新思維，打造卓越用戶體驗，實現彎道超車，一起來看看。

2014年，國內移動互聯網行業迎來大爆發，設計需求也隨即井噴。所謂“工欲善其事、必先利其器”，原型軟件已經成為產品經理的必備工具，而市面上的原型工具在交互設計上都大同小異。如何在激烈的市場競爭中，借助設計形成差異化的競爭優勢，真正的為廣大用戶做好服務，成為了原型設計工具的重要使命。

目前，在全球90多個國家和地區，摹客已擁有數百萬專業用戶和數十萬個企業團隊，服務了眾多領域的頭部企業，其中不乏中國最為知名的科技企業、互聯網企業和數字化轉型中的大中型傳統企業。

今天我們通過摹客旗下的原型設計工具——摹客RP，了解下如何在產品設計借助創新思維，打造卓越用戶體驗，實現彎道超車。文章的主要內容包括以下幾點：

一、用戶需求洞察

我現在是一名B端交互設計師，有時候偶爾會客串一下產品經理的角色。用過的工具也是五花八門，從最開始的PPT到專業的原型軟件Axure，后來又轉了設計師專業工具Sketch、Figma。雖然一直在畫原型，不過仔細思考下，會發現其中有了新的變化。主要有以下幾點：

1. 原型質量要求變高

行業越來越成熟，各類產品都開始追求高質量的用戶體驗，對原型的要求也越來越高。簡單的框圖已經無法滿足對內的需求傳達、以及對外的展示要求。

在C端領域，崗位分工更加清晰，產品經理主要側重需求分析，基本不需要輸出原型方案，界面設計工作由專門的交互設計師和視覺設計師完成。交互設計師首選專業的設計工具，例如Sketch、Figma等等。

而傳統行業正在受到互聯網影響，開始走向信息化、數字化，B端產品處于大發展階段。產品的用戶體驗受到重視和追捧。但是由于產品形態和受眾的差異化，B端設計與C端有所不同。一般采用“產品經理+體驗設計師”的模式，產品經理除了需求分析之外，還會承擔起原型設計工作；體驗設計師是在原型方案基礎上，進行交互優化，并完成高保真視覺效果圖。

這樣的崗位配置對兩者工作配合和個人能力要求都比較高，如果體驗設計師的交互能力不足，產品經理就需要盡可能精細化的表達產品需求和設計方案，以便在后續的需求對接中，減少溝通成本，保證方案準確的執行落地。

現實工作中也的確如此，由于B端產品專業性比較強，行業門檻比較明顯，兼顧視覺和交互的體驗設計師缺乏對需求的理解和認知，更偏向于設計執行層面，更依賴產品經理的基礎原型方案，于是產品經理也被倒逼著不斷提高個人的原型設計能力。

2. 交互演示要求更高

B端產品以PC端為主，頁面尺寸通常比較大，想要像C端產品一樣，純粹依靠頁面流程圖來展示產品交互邏輯不太現實。

在評審方案時，大范圍的來回拖動設計方案，容易增加聽眾的理解成本。因此有必要添加一些基礎的交互動作，方便設計方案演示。另一方面，帶交互的方案演示效果也更加自然，給聽眾更強的代入感。

3. 迭代速度在加快

SaaS產品區別于傳統B端產品，更容易受到市場和用戶的雙重驅動，產品的迭代速度也在加快。這就要求產品經理的設計速度也要加快，一款高效的原型工具，必須帶給產品經理更高的工作效率，起到事半功倍的效果。

二、拆解摹客RP

本文從用戶體驗五要素的維度，去拆解摹客RP，嘗試洞察內在的設計邏輯以及設計亮點。

1. 戰略層

戰略層就是“產品能夠帶給用戶什么樣的價值，而在這個過程中產品又可以獲得什么（通常就是商業目標的達成）”。

傳統原型工具都是采用售賣軟件的方式獲得收益，用戶免費下載軟件，購買授權碼后即可享受正版服務。不過這對個人用戶和設計團隊而言，都是一筆不小的成本。所以Axure 10推出付費訂閱后，雖然我也希望能夠體驗到最新的產品功能，但是最終理智戰勝了欲望，因為我不想付費。

而摹客RP則采用互聯網運營模式，為產品經理和設計師量身定制了“免費設計計劃”，只要邀請5名用戶注冊并加入團隊一起工作，就可以獲得永久無限設計包，不限時長、頁面、功能。

這無疑給行業帶來了巨大的沖擊，零成本使用設計工具，讓用戶選擇成本更低。對團隊而言，免費模式也將成為設計團隊邁向全面數字化的推動力。當然這種模式也促成了摹客RP用戶規模的快速增長，實現了產品和團隊的雙贏。

而在產品層面，摹客RP的口號是“重新定義原型設計”，“更高效、更易用、更流暢”。目標就是要改變傳統原型工具組件繁瑣、交互復雜的問題，而這一產品設計理念也確實體現在了產品其他用戶體驗層級中。

2. 范圍層

原型設計工具日漸趨同，從大的用戶場景劃分，主要包括靜態原型設計動態交互設定，以及產品原型頁面展示。但是細化到功能層面，還是有很大的拓展空間。

在我的體驗中，發現摹客RP相較于其他產品，主要有以下產品特色：

1）適應行業變化，增強組件擴展性

前文提到現在對產品原型的要求越來越高，但是產品經理普遍不太注重原型界面的美觀度，就容易造成原型方案比較粗糙，比較典型的問題包括，布局對齊、配色、字體大小等等，這樣就無法展示出內在的信息層級。而在傳統原型設計工具中，組件比較基礎，無法覆蓋到更多的產品設計場景。

對于復雜組件，需要產品經理通過基礎組件組合搭配才能實現，這就造成了制作繁瑣，在一定程度上影響了工作效率。如果涉及到團隊協作，不同產品經理的使用習慣、個人能力不同，輸出的原型方案可能大相徑庭。

根據實際的用戶需求，摹客RP推出了更加符合用戶需求的場景級組件。包括復選框組、開關、二維碼、日期選擇器等28種常用組件、8種圖表組件，以及海量矢量圖標。有了這些成熟組件，產品經理不需要再去網絡上尋找組件庫和圖標，并且這些組件有的還自帶交互效果，無形中節省了大量的時間和精力。實現了軟件安裝即可使用，產品經理可以將更多經理專注在產品設計上。

海量圖標庫囊括了產品設計中常見的各類型圖標，粗細兩種風格可以靈活適應不同的設計場景，真的是解決了產品經理的后顧之憂。

組件樣式的可編輯能力也在加強，可以滿足產品經理的精益化需求，打造更加有質量的原型方案。同時標準化組件設計，讓團隊協作更加方便，更好地保證產品設計方案展示的一致性。

2）主輔畫板創新模式，提升操作的易用性

為了提交原型方案的逼真程度，傳統的原型工具實現彈窗效果時，要么將彈窗內容直接疊加在頁面上方，或者將彈窗放置在頁面外部隱藏起來，通過添加“移動”和“顯示”2條交互命令實現仿真效果。

在彈窗數量不多的簡單場景下，這樣的操作模式也是可以接受的。但是對于彈窗較多的復雜場景，就會嚴重影響用戶的操作效率。例如直接疊加在頁面上，彈窗內容重疊容易造成選擇困難或者錯誤選擇。如果放在頁面范圍之外，每個彈窗都要添加移動命令，光是確定移動后的坐標值，都會增加額外的工作量。

摹客RP創造性的推出了自己的解決方案——“主輔面板”。主面板內容用來是最終的演示區域，輔助面板在主面板之外，承接各種內容信息，可以通過交互動作調用到主面板中。調用后的坐標設定了5種常用的位置。當然用戶也可以自定義位置。這種方式就極大的提高了用戶的操作效率。

輔助面板的另一個特點，就是編輯狀態下直觀、高效；而演示狀態下，輔助面板則不可見，也就是說用戶無需將面板內容手動隱藏。這相比傳統原型工具的隱藏模式，更加直觀。修改時也不需要激活顯示，可以直接修改，用戶的查看和編輯效率更高，更加流暢。

3）響應式布局，產品經理提效利器

當設計稿需要應用在不同的終端尺寸時，往往需要我們手動調整組件的布局和大小，費時費力。眾多的設計工具都推出了“約束”功能，摹客RP也順應趨勢，推出了“響應式布局”功能，可以輕松完成布局調整。

響應式布局對產品經理提高工作效率有極大的幫助。例如原型設計時，會有大量的彈窗設計，但是每個彈窗的尺寸有大有小，就需要不斷調整尺寸。有了響應式布局后，就可以將提示信息彈窗或者內容彈窗，約束好彈窗內容的定位方式和元素尺寸，并轉化為組件資源，可以在不同場景下調用、編輯即可。在對畫板或組進行縮放時，其所包含組件的布局和大小也會隨之發生改變，減少了手動調整內容的工作量。

3. 結構層

1）交互操作創新

提升效率是原型設計工具的不懈追求。一些老牌的原型工具，擁有強大的命令式交互能力，可以制作出各種各樣的逼真的交互效果，但是相應的學習門檻較高。當年我學習Axure時，專門找了一份教程來學習其中的技巧。

而摹客RP采用了“所見即所得”的交互模式，通過拖拽即可快速建立元素的交互關系，再經過簡單的配置即可完成交互設置。這種方式相較于傳統的命令交互的方式，大大地提高了用戶的操作效率。

結合前面我們提到的豐富組件，甚至實現了在需求討論時，就可以高效地完成頁面搭建、演示并確認方案，有助于提升項目協同的整體效率。

2）輔助面板交互亮點

動態面板可以說是原型工具中非常重要的組件，可以承載各種頁面信息，建立交互關系后，可以實現內容的展示和切換。但是動態面板也存在比較明顯的交互短板。最大的痛點就是動態面板和頁面是相互隔離的兩個空間，用戶需要單獨進入動態面板才能進行內容編輯。編輯時首先要通過下拉選擇或者逐個切換的方式，定位到具體面板完成編輯。這無疑增加了用戶的操作成本。

摹客RP改變思路，利用輔助面板，解決了這個用戶痛點。

首先摹客RP也有自己的動態面板——稱之為“內容面板”。這個面板只是用來關聯輔助面板，方便主面板承載信息功能。之前提到在編輯狀態下，輔助面板與主面板平級展示在畫布中，這樣就減少了面板選擇跳轉的過程，操作更加快捷。主畫板中的組件，通過拖拽即可與輔助面板建立交互關系，從而提升了操作效率。

但是對于復雜頁面，輔助面板必然也會較多。面對滿屏的面板，用戶該如何快速定位呢？摹客RP在傳統的圖層列表搜索的基礎上，還提供了2種解決方案，保證了良好的用戶體驗。

① 畫板列表

考慮到畫板的重要性，摹客RP單獨提供了畫板列表，用戶可以快速定位、修改、刪除面板，也可以拖拽建立交互關系，真正的做到了簡潔高效。

② 定位功能

在主面板中，可以通過已經關聯的交互關系的組件，快速定位到輔助面板。那么編輯完成輔助面板后，該如何快速返回主面板呢？摹客RP也想到了這一點，在工作區增加了鷹眼導航功能，只要雙擊導航區，就可以快速定位到主面板。

4. 框架層

摹客RP作為后來者，一方面要引入零基礎的產品新人，另一方面主要是承接從其他原型工具遷移過來的行業老用戶。因此遵循行業內通用的框架布局模式就是成了必然選擇，有利于降低用戶的學習成本。

摹客RP產品的框架結構并不復雜，左、中、右的布局模式與常見的工具軟件非常相似，很容易讓用戶上手。

5. 表現層

摹客RP采用了固定的深色面板，只允許用戶自定義工作區背景色，這種方式還是略顯單一的，無法滿足不同用戶的視覺要求。反觀大多數的設計軟件都已經支持深色、淺色兩種模式。

三、優化建議

摹客RP也并不是完美無缺的。在體驗過程中我也發現了一些體驗細節問題。

1）快捷操作需要加強

作為Axure的老用戶，我的繪圖習慣已經被培養起來了。例如形狀的切換，可以通過右鍵菜單完成。圓角矩形也可以通過矩形上的拖拽點直接生成。但是在摹客RP中，這些操作都必須通過右側屬性欄完成，操作效率并不高。形狀切換功能被放在屬性欄的最底部，我剛開始是沒有找到的。所以我畫錯形狀的情況下，就只能刪除后，重新繪制。

另外文本組件中也缺少了標題文本組件，每次都要專門設定文本屬性，雖然可以通過文本樣式定義成資源，不過還要切換Tab頁簽，沒有直接拖拽組件便捷。

2）資源管理能力要完善

摹客RP資源是可以復用的屬性信息，分為了顏色、文本、組件3類。確實可以減少不必要的重復性操作。但是資源管理的能力還需要加強。例如文本樣式不可以命名，用戶的識別效率就比較低，顏色管理也存在這樣的問題，可以做一些事情分組功能，方便用戶選擇。

3）交互細節要提升

界面交互中，基礎的操作方式還是需要提升的。例如在用戶場景中，預覽功能頻率更高，用戶要校驗交互動作是否準確有效，而發布功能其實應用的頻率并不是最高的，主要是完成方案后才使用。但是在界面中，發布按鈕作為主按鈕，設計明顯強于預覽按鈕，每次我都會有些遲疑，因為需要做一下思維的轉換。

而在演示界面中，側邊的收起、現實的操作都被集中到了演示區域下方的工具欄中，這其實違背了親密性原則。因為工具欄是在演示的內容區，用戶首先想到的是對演示內容的控制。而常規的側邊欄控制按鈕都是就近布置，目的是為了用戶減少用戶的認知負荷和操作負荷。

另一方面側邊雖然可以自行拖拽，但是目前版本中只能做拉寬，不能收窄。這也影響了操作的靈活性。

四、總結

完整的體驗后，個人認為摹客RP的設計亮點確實比較多，不僅在大的功能層面，小的細節也在不斷優化提升。例如點擊即可快速切換圖標，而且可以繼承原有圖標的屬性。比傳統的刪除、拖入、調整屬性的方式，方便太多了。正是這些面向用戶需求的設計細節，讓摹客RP快速成為了原型設計利器。

希望摹客RP未來能夠持續改進，為廣大產品經理帶來更加實用、更加驚艷的產品功能。

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