當老師讓我們在博客上介紹主流原型設計工具時，我第一反應是想選取兩到三款來對比着介紹，但無奈經過一番思慮，我發現如果不經過親身試用過的話很難深入體會到工具之間的好壞差異之分，因此最后我還是選擇主要介紹摹客（Mockplus）這一款原型設計工具。但由於我本人並沒有上手使用過它，因此以下介紹均來源於網絡資料，希望能給大家提供一些初步的參考。
下面我將從功能概述、案例、價格三個方面來介紹摹客原型設計工具。
摹客設計系統（Mockplus Design System）是國內獨家設計系統平台，致力於定制設計規范、統一管理設計資源、讓設計和開發溝通更簡單。設計驅動產品，在當下和未來的十年、二十年，設計和基於設計的用戶體驗將越來越成為產品成敗的關鍵。摹客作為個人設計利器，團隊的協作平台，原型設計快速上手，協同工作效率提升，設計規范輕松管理。
1.功能概述
因為官網上就有很詳細的圖文/視頻教程啦，因此在這里只簡單羅列大概功能，不多做贅述，需要的小伙伴自取鏈接吧~
圖文教程：https://help.mockplus.cn/p/230
視頻教程：https://help.mockplus.cn/p/200
2.案例
下面，我選取了官網上的電商類Web例子項目來介紹使用Mockplus的一些實用技巧。
電商管理系統E-Market屬於中高保真原型，包含登錄注冊、數據統計、信息管理、郵件、聊天、任務管理等19個重要頁面，每個頁面都具備必要的交互設計，較好地呈現了電商管理系統的基礎功能。
在頁面搭建過程中，開發團隊充分利用了摹客Mockplus的封裝組件和圖標，如內容面板、彈出面板、下拉選擇框組件等，完成了產品思路的表達。同時，在這款原型例子中，除了基礎的交互方式，還使用了快速格子、母版等實用功能，節省了大量設計時間，快速實現了原型的交互效果，讓原型更加清晰易懂。
（以上為該原型的界面總覽和交互效果演示）
在線瀏覽地址：https://run.mockplus.cn/gSsa2Birba1JWTPD/index.html
實用技巧如下：
（1）使用母版功能快速復用導航欄
在設計電商管理系統原型時，在每一個功能頁面都設計了側邊導航欄，導航欄的每一個選項都能鏈接到不同的頁面，但如果每切換一個頁面就重新設置一次交互，一定會造成大量的時間浪費。因此，他們使用了Mockplus的母版功能，可以直接復用組件，減少重復設計。
①在某個頁面設計好導航欄組件樣式；
在這款原型中，使用了矩形+圖標+文字組件進行組合設計，也可以使用帶文字圖標組件直接組合，另外，列表、菜單、折疊面板、樹組件等，也適用於導航欄的快速設計。
②右鍵選中組件，在彈出菜單中選擇“設置為母版”即可添加一個母版組件；
③將母版從左側母版管理中拖入工作區即可應用到項目中的任意頁面中；
④雙擊任意母版，即可進入編輯模式，修改完成后，在外部雙擊即可退出編輯。修改后會自動應用到所有使用了該母版的頁面中；
⑤如果需要單獨編輯某個頁面的組件，在該頁面選中該組件，右鍵選擇“從母版脫離”，即可恢復為普通組件。
這個功能類似於PPT的母版功能，對於我這種懶癌患者來說非常實用！
（2）巧用圖標組件搭建Dashboard
Dashboard頁面主要使用了Mockplus的圖表組件搭建而成。Mockplus提供4種可直接使用的圖表組件：柱狀圖、條形圖、曲線圖、餅圖。在這款原型中，使用了柱狀圖、曲線圖和餅圖三種組件。
圖表的使用方式很簡單，雙擊組件即可編輯數據和顏色。下面分享幾點Dashboard頁面的設計技巧：
①在柱狀圖中，通過將其中某項數據顏色設置為白色，做出了空行效果；
②在曲線圖中，使用圓形組件標記處重要節點；
③使用單行文字組件，可設計出坐標軸、數據展示等效果，將矩形與單行文字進行結合，也可作為圖表注釋。
沒有什么能比畫圖簡單更重要的了吧，回想起被EXCEL支配的人生！
（3）分段控件+內容面板，實現內容切換
在日程表頁面，使用分段控件+內容面板組件，實現了月、周、日三種日程表格式的內容切換，具體操作如下：
①分別在新的頁面中設計好三種日程表格式；
②在日程表頁面添加內容面板組件，使用內容面板上方的工具欄，將內容面板設置為三層；
③選中內容層，拖拽右邊的連接點，將三種日程表與三層內容面板進行連接，日程表即可被加載到對應內容層；
④使用分段控件組件設置月、周、日三個選項，分別與對應的內容層設置交互，即可實現內容切換的效果。
（上圖為最終實現效果）
（4）使用快速格子功能一鍵填充信息列表
在設計商品管理、郵件、聊天等頁面時，通常需要填充大量信息，以保證最終呈現效果的完整性。但單獨設計每條每條信息太浪費時間，復制黏貼又需要逐個調整間距，使用Mockplus的快速格子功能即可快速制作重復的布局，提高設計效率。
①使用矩形、單行文字、圖標等組件，完成單條信息的設計；
②選中剛剛設計好的組件，點擊主工具欄上的“轉為格子”圖標，或右鍵選擇“轉為格子”，即可生成格子；
③拉動格子，格子的內容會自動生成；
④在格子上，可以直接拉動線條來設置單元格的大小、行間距等，也可以直接砸右側屬性面板中輸入數字進行設置；
⑤如果需要單獨編輯某個格子，操作方式與母版一樣，右鍵選擇“脫離”即可。
這種避免大量重復操作的設計真的很實用，可以把時間花費在更重要的地方，效率upup！
（5）消息列表選擇狀態切換設計
在設計郵件和聊天頁面的消息列表時，為了突出選擇，對被選中的條目增加顏色切換的設計，當消息列表中某個條目被選中時，顏色會切換為白色，且與右側展開的詳情頁顏色一致，互相呼應。
①使用矩形+單行文字+圖標組合成一個條目；
②選中矩形，將拖拽連接點連向自己，選擇“點擊時設置顏色”，即可實現上述效果；
③使用快速格子功能或直接復制粘貼條目，消息列表的設計即可完成。
（6）封裝組件
①下拉列表框組件
當想要呈現上文所述的內容切換效果，但內容層太多，無法使用分段控件實現，就可以使用下拉列表框組件，這也是這款原型中使用頻率非常高的組件之一。雙擊下拉列表框組件，即可編輯條目名稱和設置交互。在右側屬性面板中還可以設置文本顏色、選中顏色、是否允許輸入等屬性，非常方便。
②彈出面板組件
在日歷、訂單管理等頁面，都使用了彈出面板來呈現電商管理系統的“增加任務”等效果。在彈出面板中設置好內容格式，拖動對應按鈕的鏈接點設置觸發方式，即可實現下圖效果：
③卡片式設計
卡片式設計是E-Market電商管理系統原型的設計亮點之一，使用矩形+圖標+單行文字組件即可組合成卡片。使用上文中提到的快速格子功能即可快速完成文件管理頁面的設計。除了快速格子，還可以在面板組件中添加卡片設計元素，然后直接復制粘貼面板組件，即可實現快速復用。
更多項目例子詳見https://help.mockplus.cn/p/196
3.價格
作為一名貧窮的女大學生，對於此類工具的要求中必定有價格一項吧。比如我用ProcessOn畫流程圖，一開始倍兒開心以為找到了一勞永逸的簡單好用的免費畫圖工具，但沒想到免費版只能畫九張！！
摹客擁有基礎版、團隊版、企業版三種價格模式，其中團隊版是99元/人/年，企業版需要聯系部署。當然，按照我這種大二生的需求來看的話，主要還是看免費版比較合適。免費版擁有所有基礎功能，100名成員，100個協作項目（Sketch/PS/XD/Axure設計交付），這些都是妥妥夠用的，但只能創作3個原型設計項目，不過我覺得也不少啦，因為在大二下學期才會真正接觸到完成項目（因為我沒參加過競賽）或者實在不行再改用別的試試吧T.T
參考鏈接：
https://www.mockplus.cn/?home=1
https://www.mockplus.cn/newfeatures/post/1001
https://help.mockplus.cn/p/349
https://www.mockplus.cn/buy/idoc
https://www.zhihu.com/question/19572438
最后，正如知乎上說的：
作為交互設計師，工具不重要，邏輯、產品思維和設計思維更重要。
說了這么多，還是只有真正上手操作才能知道這款原型設計工具究竟是否真的好用/適合自己。我對摹客的理解難免過於片面，大家如果真的想要使用，最好還是親身試用，再從中挑選最適合自己的。當然不僅僅是摹客，像axure(https://www.axure.com/)/墨刀(https://modao.cc/)等都是優秀的原型設計工具。但也要注意不能本末倒置，技術才是硬道理哦。
以上就是我分享的全部內容，感謝觀看~作為一名博客小白，我會繼續努力的！o(*////▽////*)q