摹客Mockplus 一款簡潔快速的原型設計工具


一、Mockplus簡介

  Mockplus(摹客)是一款簡潔快速的原型圖設計工具。適合軟件團隊、個人在軟件開發的設計階段使用。其低保真、無需學習、快速上手、功能夠用。並能夠很好地表達自己的設計。摹客被稱為產品團隊的設計協作神器,是因為摹客是專為產品設計團隊量身打造的“設計+協作”的一站式雲平台,能夠完美發揮產品設計團隊間應有的協作效能。

 

  Mockplus擁有Axure RP類似的界面、操作方式,但提供了與時俱進的組件,去掉了用不上的互動方式。與其他原型設計工具不一樣,Mockplus采用了直觀的拖拽方式來實現頁面交互。這樣,它能像Axure RP那樣,通過簡潔便利的組件設置,初期只專注功能,快速完成頁面功能設計,並模擬互動。等功能布局精確定型,又能通過樣式設置,實現和Sketch一致的最終成果。

  對於產品經理來說,摹客提供客戶端和在線版兩種原型設計方式,可以適應不同團隊的需求。產品經理可使用摹客封裝的現成組件和豐富的圖標,快速產出產品原型。同時摹客還支持在線撰寫和管理產品文檔,支持多人實時編輯。

  對於設計師來說,摹客具有高度兼容性,支持所有主流設計稿格式,設計師可在線交付設計稿,在線討論評審、標注切圖、管理版本。除此之外,在摹客平台還可以高效管理設計資源和設計規范,快速分享和復用。

  對於開發人員來說,摹客具有強大的設計稿自動標注,切圖及智能代碼輸出功能,開發人員可以自由查看設計稿標注及獲取切圖,省去了許多重復無效的溝通,在一定程度上簡化了開發的工作流程。

 

二、上手實踐

  進入摹客的官網https://www.mockplus.cn/,在下載選項欄即可選擇自己想要下載的版本。我選擇的是桌面客戶端。下載安裝過程十分簡便,在此就不贅述。

  

  在進入軟件,點擊新建項目后,新窗口會顯示默認支持的原型類型。軟件提供了多種項目,每種項目中均內置了常用設備數據供快速選擇,也可以自定義尺寸等。選擇好所需項目后即可新建個人項目。

 

 

    新建項目中有大量的模板供用戶參考使用,可以選擇自己想要的模板。

    這是選擇空白模板后的工作界面。

 

 

   界面上方的主工具欄提供了演示、同步等各種快捷按鈕。界面的中央區域是工作區,在這里完成設計工作。底部是項目狀態欄,所在頁面位置及頁面尺寸等信息會顯示在這里。工作區左側上半部分是項目樹,可以清楚地看到整體項目的頁面結構。工作區左側下半部分分為四個板塊,分別為組件庫、圖標庫、我的組件庫、母版庫,可以方便地切換想要的板塊。

三、項目協作

 

  點擊頁面中央上方的雲同步,可以支持多人同時編輯項目

 

但此功能要收費,就不實際操作了。教學視頻中看到,這里添加成員后,成員就可以分享到你的項目,並對其進行修改、同步。

在自己編輯的時候,項目前會顯示綠色的圖標,表示自己有權編輯,而其他成員的項目前則顯示的是紅色圖標,表示自己無權編輯,編輯完后,點擊綠色圓點即可放開權限。

 

 

四、演示原型

在演示方面,Mockplus不像Axure那樣麻煩,十分便利。在演示原型方面,Mockplus提供了多達8種方式,確實很豐富,也很實用。

第一個方法:直接演示

適用場合:設計時,便於設計者非常快速地看到原型效果。
操作方式:在設計時,按下F5。
演示支持環境:Mockplus軟件。

第二個方法:在線發布為HTML5的網頁


適用場合:通過發送一個網頁鏈接就可以查看原型。
操作方式:在主工具欄,點擊“發布”。發布完成后,即可獲得一個網頁鏈接地址,復制這個地址,將它發送給同事或客戶。
演示支持環境:瀏覽器。

 
第三個方法:導出HTML5的離線包


適用場合:在離線的情況下,也可以通過網頁方式查看原型。還可以通過這個功能,把網頁部署到你自己的服務器上,便於團隊內部分享。
操作方式:主菜單,“導出”,“導出HTML演示”。
演示支持環境:瀏覽器。

 

第四個方法:導出可獨立運行的演示包


適用場合:在離線的情況下查看原型。由於演示包內含了Mockplus的支持環境,因此,演示時可以最大程度保證演示效果和設計效果完全一致,不受各種瀏覽器的兼容問題影響。
操作方式:主菜單,“導出”,“導出演示包”。
演示支持環境:不需要其它軟件支持。

第五個方法:輸入原型碼,在手機中查看原型


適用場合:在線發布項目后,把獲得的原型碼告訴同事或者客戶,掃描后在線查看原型。
操作方式:在主工具欄,點擊“發布”。發布完成后,即可獲得一個原型碼,將這個原型碼發送給同事或客戶。
演示支持環境:Mockplus手機App​。

 

第六個方法:掃描二維碼在手機中查看原型


適用場合:設計時,離線掃碼后即時查看原型;在線發布項目后,也可以在瀏覽器中掃碼。
操作方式:設計時,直接掃碼。發布項目后,用手機在瀏覽器中掃碼,或者把二維碼截圖發給同事或客戶。
演示支持環境:手機瀏覽器(設計時離線掃描需要Mockplus手機App)。

 第七個方法:導出圖片


適用場合:演示和分享靜態的線框圖。
操作方式:主菜單,“導出”,“導出圖片”。支持JPG和PNG兩種格式。
演示支持環境:圖片播放軟件或幻燈片播放軟件。

第八個方法:導出項目樹


適用場合:把整個項目的樹形結構,導出為圖片等多種形式,包括腦圖、樹圖、HTML、MarkDown、XML、文本等形式。適合插入到PRD文檔中,輔助演示和分享。
操作方式:主菜單,“導出”,“導出項目樹”。
演示支持環境:圖片播放軟件、文本編輯軟件或幻燈片播放軟件。

 

 以上,就是Mockplus演示分享原型的幾種方式,在使用中,你可以根據需要選擇適合你的方式。

 

五、使用體驗與總結

  慕客就如同它在官網所介紹的“快速原型設計工具”,使用起來很簡單,無需過多學習就可以實現豐富的交互原型的制作。同時支持各種原型如手機、桌面、web等,十分方便。

  我第一次上手做了個養老平台的手機界面,感覺挺不錯的,十分容易上手。

  從學生角度來看,Mockplus挺適合新手的,不僅僅是因為它的簡單。我在它的官網找到了大量的教學視頻,能指導新手怎樣快速的學會使用這款軟件來進行工作。這樣的服務使得這款軟件易學易用,可以快速的投入其中,可以大大的縮減設計者學習使用工具的時間,非常適合初次做原型設計的同學們。

 

 

官方視頻教程:https://help.mockplus.cn/p/142


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM