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

隨著互聯(lián)網(wǎng)的發(fā)展，產(chǎn)品設(shè)計(jì)需求也隨即增多，市面上的原型設(shè)計(jì)工具都差不多，呈現(xiàn)差異化是當(dāng)前原型工具從競(jìng)爭(zhēng)中脫穎而出的關(guān)鍵。本文以摹客RP為例，借助用戶(hù)五要素，闡述如何在產(chǎn)品設(shè)計(jì)借助創(chuàng)新思維，打造卓越用戶(hù)體驗(yàn)，實(shí)現(xiàn)彎道超車(chē)，一起來(lái)看看。

2014年，國(guó)內(nèi)移動(dòng)互聯(lián)網(wǎng)行業(yè)迎來(lái)大爆發(fā)，設(shè)計(jì)需求也隨即井噴。所謂“工欲善其事、必先利其器”，原型軟件已經(jīng)成為產(chǎn)品經(jīng)理的必備工具，而市面上的原型工具在交互設(shè)計(jì)上都大同小異。如何在激烈的市場(chǎng)競(jìng)爭(zhēng)中，借助設(shè)計(jì)形成差異化的競(jìng)爭(zhēng)優(yōu)勢(shì)，真正的為廣大用戶(hù)做好服務(wù)，成為了原型設(shè)計(jì)工具的重要使命。

目前，在全球90多個(gè)國(guó)家和地區(qū)，摹客已擁有數(shù)百萬(wàn)專(zhuān)業(yè)用戶(hù)和數(shù)十萬(wàn)個(gè)企業(yè)團(tuán)隊(duì)，服務(wù)了眾多領(lǐng)域的頭部企業(yè)，其中不乏中國(guó)最為知名的科技企業(yè)、互聯(lián)網(wǎng)企業(yè)和數(shù)字化轉(zhuǎn)型中的大中型傳統(tǒng)企業(yè)。

今天我們通過(guò)摹客旗下的原型設(shè)計(jì)工具——摹客RP，了解下如何在產(chǎn)品設(shè)計(jì)借助創(chuàng)新思維，打造卓越用戶(hù)體驗(yàn)，實(shí)現(xiàn)彎道超車(chē)。文章的主要內(nèi)容包括以下幾點(diǎn)：

一、用戶(hù)需求洞察

我現(xiàn)在是一名B端交互設(shè)計(jì)師，有時(shí)候偶爾會(huì)客串一下產(chǎn)品經(jīng)理的角色。用過(guò)的工具也是五花八門(mén)，從最開(kāi)始的PPT到專(zhuān)業(yè)的原型軟件Axure，后來(lái)又轉(zhuǎn)了設(shè)計(jì)師專(zhuān)業(yè)工具Sketch、Figma。雖然一直在畫(huà)原型，不過(guò)仔細(xì)思考下，會(huì)發(fā)現(xiàn)其中有了新的變化。主要有以下幾點(diǎn)：

1. 原型質(zhì)量要求變高

行業(yè)越來(lái)越成熟，各類(lèi)產(chǎn)品都開(kāi)始追求高質(zhì)量的用戶(hù)體驗(yàn)，對(duì)原型的要求也越來(lái)越高。簡(jiǎn)單的框圖已經(jīng)無(wú)法滿(mǎn)足對(duì)內(nèi)的需求傳達(dá)、以及對(duì)外的展示要求。

在C端領(lǐng)域，崗位分工更加清晰，產(chǎn)品經(jīng)理主要側(cè)重需求分析，基本不需要輸出原型方案，界面設(shè)計(jì)工作由專(zhuān)門(mén)的交互設(shè)計(jì)師和視覺(jué)設(shè)計(jì)師完成。交互設(shè)計(jì)師首選專(zhuān)業(yè)的設(shè)計(jì)工具，例如Sketch、Figma等等。

而傳統(tǒng)行業(yè)正在受到互聯(lián)網(wǎng)影響，開(kāi)始走向信息化、數(shù)字化，B端產(chǎn)品處于大發(fā)展階段。產(chǎn)品的用戶(hù)體驗(yàn)受到重視和追捧。但是由于產(chǎn)品形態(tài)和受眾的差異化，B端設(shè)計(jì)與C端有所不同。一般采用“產(chǎn)品經(jīng)理+體驗(yàn)設(shè)計(jì)師”的模式，產(chǎn)品經(jīng)理除了需求分析之外，還會(huì)承擔(dān)起原型設(shè)計(jì)工作；體驗(yàn)設(shè)計(jì)師是在原型方案基礎(chǔ)上，進(jìn)行交互優(yōu)化，并完成高保真視覺(jué)效果圖。

這樣的崗位配置對(duì)兩者工作配合和個(gè)人能力要求都比較高，如果體驗(yàn)設(shè)計(jì)師的交互能力不足，產(chǎn)品經(jīng)理就需要盡可能精細(xì)化的表達(dá)產(chǎn)品需求和設(shè)計(jì)方案，以便在后續(xù)的需求對(duì)接中，減少溝通成本，保證方案準(zhǔn)確的執(zhí)行落地。

現(xiàn)實(shí)工作中也的確如此，由于B端產(chǎn)品專(zhuān)業(yè)性比較強(qiáng)，行業(yè)門(mén)檻比較明顯，兼顧視覺(jué)和交互的體驗(yàn)設(shè)計(jì)師缺乏對(duì)需求的理解和認(rèn)知，更偏向于設(shè)計(jì)執(zhí)行層面，更依賴(lài)產(chǎn)品經(jīng)理的基礎(chǔ)原型方案，于是產(chǎn)品經(jīng)理也被倒逼著不斷提高個(gè)人的原型設(shè)計(jì)能力。

2. 交互演示要求更高

B端產(chǎn)品以PC端為主，頁(yè)面尺寸通常比較大，想要像C端產(chǎn)品一樣，純粹依靠頁(yè)面流程圖來(lái)展示產(chǎn)品交互邏輯不太現(xiàn)實(shí)。

在評(píng)審方案時(shí)，大范圍的來(lái)回拖動(dòng)設(shè)計(jì)方案，容易增加聽(tīng)眾的理解成本。因此有必要添加一些基礎(chǔ)的交互動(dòng)作，方便設(shè)計(jì)方案演示。另一方面，帶交互的方案演示效果也更加自然，給聽(tīng)眾更強(qiáng)的代入感。

3. 迭代速度在加快

SaaS產(chǎn)品區(qū)別于傳統(tǒng)B端產(chǎn)品，更容易受到市場(chǎng)和用戶(hù)的雙重驅(qū)動(dòng)，產(chǎn)品的迭代速度也在加快。這就要求產(chǎn)品經(jīng)理的設(shè)計(jì)速度也要加快，一款高效的原型工具，必須帶給產(chǎn)品經(jīng)理更高的工作效率，起到事半功倍的效果。

二、拆解摹客RP

本文從用戶(hù)體驗(yàn)五要素的維度，去拆解摹客RP，嘗試洞察內(nèi)在的設(shè)計(jì)邏輯以及設(shè)計(jì)亮點(diǎn)。

1. 戰(zhàn)略層

戰(zhàn)略層就是“產(chǎn)品能夠帶給用戶(hù)什么樣的價(jià)值，而在這個(gè)過(guò)程中產(chǎn)品又可以獲得什么（通常就是商業(yè)目標(biāo)的達(dá)成）”。

傳統(tǒng)原型工具都是采用售賣(mài)軟件的方式獲得收益，用戶(hù)免費(fèi)下載軟件，購(gòu)買(mǎi)授權(quán)碼后即可享受正版服務(wù)。不過(guò)這對(duì)個(gè)人用戶(hù)和設(shè)計(jì)團(tuán)隊(duì)而言，都是一筆不小的成本。所以Axure 10推出付費(fèi)訂閱后，雖然我也希望能夠體驗(yàn)到最新的產(chǎn)品功能，但是最終理智戰(zhàn)勝了欲望，因?yàn)槲也幌敫顿M(fèi)。

而摹客RP則采用互聯(lián)網(wǎng)運(yùn)營(yíng)模式，為產(chǎn)品經(jīng)理和設(shè)計(jì)師量身定制了“免費(fèi)設(shè)計(jì)計(jì)劃”，只要邀請(qǐng)5名用戶(hù)注冊(cè)并加入團(tuán)隊(duì)一起工作，就可以獲得永久無(wú)限設(shè)計(jì)包，不限時(shí)長(zhǎng)、頁(yè)面、功能。

這無(wú)疑給行業(yè)帶來(lái)了巨大的沖擊，零成本使用設(shè)計(jì)工具，讓用戶(hù)選擇成本更低。對(duì)團(tuán)隊(duì)而言，免費(fèi)模式也將成為設(shè)計(jì)團(tuán)隊(duì)邁向全面數(shù)字化的推動(dòng)力。當(dāng)然這種模式也促成了摹客RP用戶(hù)規(guī)模的快速增長(zhǎng)，實(shí)現(xiàn)了產(chǎn)品和團(tuán)隊(duì)的雙贏。

而在產(chǎn)品層面，摹客RP的口號(hào)是“重新定義原型設(shè)計(jì)”，“更高效、更易用、更流暢”。目標(biāo)就是要改變傳統(tǒng)原型工具組件繁瑣、交互復(fù)雜的問(wèn)題，而這一產(chǎn)品設(shè)計(jì)理念也確實(shí)體現(xiàn)在了產(chǎn)品其他用戶(hù)體驗(yàn)層級(jí)中。

2. 范圍層

原型設(shè)計(jì)工具日漸趨同，從大的用戶(hù)場(chǎng)景劃分，主要包括靜態(tài)原型設(shè)計(jì)動(dòng)態(tài)交互設(shè)定，以及產(chǎn)品原型頁(yè)面展示。但是細(xì)化到功能層面，還是有很大的拓展空間。

在我的體驗(yàn)中，發(fā)現(xiàn)摹客RP相較于其他產(chǎn)品，主要有以下產(chǎn)品特色：

1）適應(yīng)行業(yè)變化，增強(qiáng)組件擴(kuò)展性

前文提到現(xiàn)在對(duì)產(chǎn)品原型的要求越來(lái)越高，但是產(chǎn)品經(jīng)理普遍不太注重原型界面的美觀度，就容易造成原型方案比較粗糙，比較典型的問(wèn)題包括，布局對(duì)齊、配色、字體大小等等，這樣就無(wú)法展示出內(nèi)在的信息層級(jí)。而在傳統(tǒng)原型設(shè)計(jì)工具中，組件比較基礎(chǔ)，無(wú)法覆蓋到更多的產(chǎn)品設(shè)計(jì)場(chǎng)景。

對(duì)于復(fù)雜組件，需要產(chǎn)品經(jīng)理通過(guò)基礎(chǔ)組件組合搭配才能實(shí)現(xiàn)，這就造成了制作繁瑣，在一定程度上影響了工作效率。如果涉及到團(tuán)隊(duì)協(xié)作，不同產(chǎn)品經(jīng)理的使用習(xí)慣、個(gè)人能力不同，輸出的原型方案可能大相徑庭。

根據(jù)實(shí)際的用戶(hù)需求，摹客RP推出了更加符合用戶(hù)需求的場(chǎng)景級(jí)組件。包括復(fù)選框組、開(kāi)關(guān)、二維碼、日期選擇器等28種常用組件、8種圖表組件，以及海量矢量圖標(biāo)。有了這些成熟組件，產(chǎn)品經(jīng)理不需要再去網(wǎng)絡(luò)上尋找組件庫(kù)和圖標(biāo)，并且這些組件有的還自帶交互效果，無(wú)形中節(jié)省了大量的時(shí)間和精力。實(shí)現(xiàn)了軟件安裝即可使用，產(chǎn)品經(jīng)理可以將更多經(jīng)理專(zhuān)注在產(chǎn)品設(shè)計(jì)上。

海量圖標(biāo)庫(kù)囊括了產(chǎn)品設(shè)計(jì)中常見(jiàn)的各類(lèi)型圖標(biāo)，粗細(xì)兩種風(fēng)格可以靈活適應(yīng)不同的設(shè)計(jì)場(chǎng)景，真的是解決了產(chǎn)品經(jīng)理的后顧之憂。

組件樣式的可編輯能力也在加強(qiáng)，可以滿(mǎn)足產(chǎn)品經(jīng)理的精益化需求，打造更加有質(zhì)量的原型方案。同時(shí)標(biāo)準(zhǔn)化組件設(shè)計(jì)，讓團(tuán)隊(duì)協(xié)作更加方便，更好地保證產(chǎn)品設(shè)計(jì)方案展示的一致性。

2）主輔畫(huà)板創(chuàng)新模式，提升操作的易用性

為了提交原型方案的逼真程度，傳統(tǒng)的原型工具實(shí)現(xiàn)彈窗效果時(shí)，要么將彈窗內(nèi)容直接疊加在頁(yè)面上方，或者將彈窗放置在頁(yè)面外部隱藏起來(lái)，通過(guò)添加“移動(dòng)”和“顯示”2條交互命令實(shí)現(xiàn)仿真效果。

在彈窗數(shù)量不多的簡(jiǎn)單場(chǎng)景下，這樣的操作模式也是可以接受的。但是對(duì)于彈窗較多的復(fù)雜場(chǎng)景，就會(huì)嚴(yán)重影響用戶(hù)的操作效率。例如直接疊加在頁(yè)面上，彈窗內(nèi)容重疊容易造成選擇困難或者錯(cuò)誤選擇。如果放在頁(yè)面范圍之外，每個(gè)彈窗都要添加移動(dòng)命令，光是確定移動(dòng)后的坐標(biāo)值，都會(huì)增加額外的工作量。

摹客RP創(chuàng)造性的推出了自己的解決方案——“主輔面板”。主面板內(nèi)容用來(lái)是最終的演示區(qū)域，輔助面板在主面板之外，承接各種內(nèi)容信息，可以通過(guò)交互動(dòng)作調(diào)用到主面板中。調(diào)用后的坐標(biāo)設(shè)定了5種常用的位置。當(dāng)然用戶(hù)也可以自定義位置。這種方式就極大的提高了用戶(hù)的操作效率。

輔助面板的另一個(gè)特點(diǎn)，就是編輯狀態(tài)下直觀、高效；而演示狀態(tài)下，輔助面板則不可見(jiàn)，也就是說(shuō)用戶(hù)無(wú)需將面板內(nèi)容手動(dòng)隱藏。這相比傳統(tǒng)原型工具的隱藏模式，更加直觀。修改時(shí)也不需要激活顯示，可以直接修改，用戶(hù)的查看和編輯效率更高，更加流暢。

3）響應(yīng)式布局，產(chǎn)品經(jīng)理提效利器

當(dāng)設(shè)計(jì)稿需要應(yīng)用在不同的終端尺寸時(shí)，往往需要我們手動(dòng)調(diào)整組件的布局和大小，費(fèi)時(shí)費(fèi)力。眾多的設(shè)計(jì)工具都推出了“約束”功能，摹客RP也順應(yīng)趨勢(shì)，推出了“響應(yīng)式布局”功能，可以輕松完成布局調(diào)整。

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

3. 結(jié)構(gòu)層

1）交互操作創(chuàng)新

提升效率是原型設(shè)計(jì)工具的不懈追求。一些老牌的原型工具，擁有強(qiáng)大的命令式交互能力，可以制作出各種各樣的逼真的交互效果，但是相應(yīng)的學(xué)習(xí)門(mén)檻較高。當(dāng)年我學(xué)習(xí)Axure時(shí)，專(zhuān)門(mén)找了一份教程來(lái)學(xué)習(xí)其中的技巧。

而摹客RP采用了“所見(jiàn)即所得”的交互模式，通過(guò)拖拽即可快速建立元素的交互關(guān)系，再經(jīng)過(guò)簡(jiǎn)單的配置即可完成交互設(shè)置。這種方式相較于傳統(tǒng)的命令交互的方式，大大地提高了用戶(hù)的操作效率。

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

2）輔助面板交互亮點(diǎn)

動(dòng)態(tài)面板可以說(shuō)是原型工具中非常重要的組件，可以承載各種頁(yè)面信息，建立交互關(guān)系后，可以實(shí)現(xiàn)內(nèi)容的展示和切換。但是動(dòng)態(tài)面板也存在比較明顯的交互短板。最大的痛點(diǎn)就是動(dòng)態(tài)面板和頁(yè)面是相互隔離的兩個(gè)空間，用戶(hù)需要單獨(dú)進(jìn)入動(dòng)態(tài)面板才能進(jìn)行內(nèi)容編輯。編輯時(shí)首先要通過(guò)下拉選擇或者逐個(gè)切換的方式，定位到具體面板完成編輯。這無(wú)疑增加了用戶(hù)的操作成本。

摹客RP改變思路，利用輔助面板，解決了這個(gè)用戶(hù)痛點(diǎn)。

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

但是對(duì)于復(fù)雜頁(yè)面，輔助面板必然也會(huì)較多。面對(duì)滿(mǎn)屏的面板，用戶(hù)該如何快速定位呢？摹客RP在傳統(tǒng)的圖層列表搜索的基礎(chǔ)上，還提供了2種解決方案，保證了良好的用戶(hù)體驗(yàn)。

① 畫(huà)板列表

考慮到畫(huà)板的重要性，摹客RP單獨(dú)提供了畫(huà)板列表，用戶(hù)可以快速定位、修改、刪除面板，也可以拖拽建立交互關(guān)系，真正的做到了簡(jiǎn)潔高效。

② 定位功能

在主面板中，可以通過(guò)已經(jīng)關(guān)聯(lián)的交互關(guān)系的組件，快速定位到輔助面板。那么編輯完成輔助面板后，該如何快速返回主面板呢？摹客RP也想到了這一點(diǎn)，在工作區(qū)增加了鷹眼導(dǎo)航功能，只要雙擊導(dǎo)航區(qū)，就可以快速定位到主面板。

4. 框架層

摹客RP作為后來(lái)者，一方面要引入零基礎(chǔ)的產(chǎn)品新人，另一方面主要是承接從其他原型工具遷移過(guò)來(lái)的行業(yè)老用戶(hù)。因此遵循行業(yè)內(nèi)通用的框架布局模式就是成了必然選擇，有利于降低用戶(hù)的學(xué)習(xí)成本。

摹客RP產(chǎn)品的框架結(jié)構(gòu)并不復(fù)雜，左、中、右的布局模式與常見(jiàn)的工具軟件非常相似，很容易讓用戶(hù)上手。

5. 表現(xiàn)層

摹客RP采用了固定的深色面板，只允許用戶(hù)自定義工作區(qū)背景色，這種方式還是略顯單一的，無(wú)法滿(mǎn)足不同用戶(hù)的視覺(jué)要求。反觀大多數(shù)的設(shè)計(jì)軟件都已經(jīng)支持深色、淺色兩種模式。

三、優(yōu)化建議

摹客RP也并不是完美無(wú)缺的。在體驗(yàn)過(guò)程中我也發(fā)現(xiàn)了一些體驗(yàn)細(xì)節(jié)問(wèn)題。

1）快捷操作需要加強(qiáng)

作為Axure的老用戶(hù)，我的繪圖習(xí)慣已經(jīng)被培養(yǎng)起來(lái)了。例如形狀的切換，可以通過(guò)右鍵菜單完成。圓角矩形也可以通過(guò)矩形上的拖拽點(diǎn)直接生成。但是在摹客RP中，這些操作都必須通過(guò)右側(cè)屬性欄完成，操作效率并不高。形狀切換功能被放在屬性欄的最底部，我剛開(kāi)始是沒(méi)有找到的。所以我畫(huà)錯(cuò)形狀的情況下，就只能刪除后，重新繪制。

另外文本組件中也缺少了標(biāo)題文本組件，每次都要專(zhuān)門(mén)設(shè)定文本屬性，雖然可以通過(guò)文本樣式定義成資源，不過(guò)還要切換Tab頁(yè)簽，沒(méi)有直接拖拽組件便捷。

2）資源管理能力要完善

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

3）交互細(xì)節(jié)要提升

界面交互中，基礎(chǔ)的操作方式還是需要提升的。例如在用戶(hù)場(chǎng)景中，預(yù)覽功能頻率更高，用戶(hù)要校驗(yàn)交互動(dòng)作是否準(zhǔn)確有效，而發(fā)布功能其實(shí)應(yīng)用的頻率并不是最高的，主要是完成方案后才使用。但是在界面中，發(fā)布按鈕作為主按鈕，設(shè)計(jì)明顯強(qiáng)于預(yù)覽按鈕，每次我都會(huì)有些遲疑，因?yàn)樾枰鲆幌滤季S的轉(zhuǎn)換。

而在演示界面中，側(cè)邊的收起、現(xiàn)實(shí)的操作都被集中到了演示區(qū)域下方的工具欄中，這其實(shí)違背了親密性原則。因?yàn)楣ぞ邫谑窃谘菔镜膬?nèi)容區(qū)，用戶(hù)首先想到的是對(duì)演示內(nèi)容的控制。而常規(guī)的側(cè)邊欄控制按鈕都是就近布置，目的是為了用戶(hù)減少用戶(hù)的認(rèn)知負(fù)荷和操作負(fù)荷。

另一方面?zhèn)冗呺m然可以自行拖拽，但是目前版本中只能做拉寬，不能收窄。這也影響了操作的靈活性。

四、總結(jié)

完整的體驗(yàn)后，個(gè)人認(rèn)為摹客RP的設(shè)計(jì)亮點(diǎn)確實(shí)比較多，不僅在大的功能層面，小的細(xì)節(jié)也在不斷優(yōu)化提升。例如點(diǎn)擊即可快速切換圖標(biāo)，而且可以繼承原有圖標(biāo)的屬性。比傳統(tǒng)的刪除、拖入、調(diào)整屬性的方式，方便太多了。正是這些面向用戶(hù)需求的設(shè)計(jì)細(xì)節(jié)，讓摹客RP快速成為了原型設(shè)計(jì)利器。

希望摹客RP未來(lái)能夠持續(xù)改進(jìn)，為廣大產(chǎn)品經(jīng)理帶來(lái)更加實(shí)用、更加驚艷的產(chǎn)品功能。

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