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

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

面對(duì)產(chǎn)品的最終使用者，讓最終使用者能夠通過原型提前了解產(chǎn)品的功能和使用體驗(yàn)，并提前發(fā)覺其中的問題或提出優(yōu)化建議；作為文檔的一部分，向產(chǎn)品研發(fā)團(tuán)隊(duì)解釋產(chǎn)品的形態(tài)、交互流程等重要信息，并且相比于以文字描述為主的產(chǎn)品需求文檔（PRD），原型在刻畫產(chǎn)品方面更加直觀。原型也作為產(chǎn)品經(jīng)理工作中的重要產(chǎn)出物和依據(jù)，方面在產(chǎn)品團(tuán)隊(duì)內(nèi)部溝通和爭(zhēng)論產(chǎn)品的設(shè)計(jì)。結(jié)合這三方面作用，一款優(yōu)秀的產(chǎn)品原型工具應(yīng)當(dāng)兼?zhèn)鋷追矫婊竟δ芎土α?，才能充分支撐產(chǎn)品經(jīng)理制作和使用產(chǎn)品原型的全流程。

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

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

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

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

摹客主頁(yè)

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

摹客協(xié)作

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

摹客RP

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

摹客UI

接下來回到產(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)目

頂欄菜單供應(yī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è)展現(xiàn)了原型文件中的頁(yè)面，右側(cè)為頁(yè)面預(yù)覽。但，Axure案例展現(xiàn)部分的原型頁(yè)面與設(shè)計(jì)稿模塊并不對(duì)應(yīng)，這部分盼望優(yōu)化一下，哈哈哈。

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

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

添加圖釘

個(gè)人感覺圖釘功能是最有用的，可以直接輸入評(píng)論內(nèi)容關(guān)心理解，同時(shí)也不會(huì)大面積掩蓋原型頁(yè)面自身的空間。此外還供應(yīng)了對(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)系起來了。

引用文檔（1）

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

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

引用文檔（2）

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

開發(fā)

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

開發(fā)菜單

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

原型預(yù)覽

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

下載評(píng)論

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

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

列表更新

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

鼠標(biāo)郵件更新

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

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

創(chuàng)建交互

配置交互

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

同時(shí)，設(shè)計(jì)稿中增加的交互并不會(huì)同步到原型稿，因此這里的規(guī)律也許是：原型稿中的交互由AxureRP原型文件打算。

2.3文檔

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

預(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)論同步。也就是說，即便原型與文檔消失了類似的問題，你需要分別在兩個(gè)地方增加評(píng)論。

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

編輯文檔

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

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

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

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

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

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

三、體驗(yàn)上傳AxureRP

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

新建項(xiàng)目

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

上傳原型稿

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

摹客AxureRP小工具

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

新原型圖釘

標(biāo)注新原型

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

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

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

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

同時(shí)，作為一款具備肯定編輯和設(shè)計(jì)力量的在線工具，穩(wěn)定性是保證工作成果平安的重中之重。在這方面，摹客RP的整體體驗(yàn)是穩(wěn)穩(wěn)的。整體體驗(yàn)過程中沒有消失卡頓、延遲、連接超時(shí)等在線系統(tǒng)可能消失的問題，并且在文字、交互元素的反饋方面做得也不錯(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ì)稿畫布中，盼望能增加一種模式，展現(xiàn)交互中配置的跳轉(zhuǎn)關(guān)系。目前的連線提現(xiàn)的是主干流程，而自定義的跳轉(zhuǎn)交互只能在預(yù)覽中實(shí)際體驗(yàn)才能檢驗(yàn)。并且，只有兩邊對(duì)著看，才能發(fā)覺兩邊是否有不全都的地方