本文由Mockplus提供素材。

Mockplus3.2新功能發布有段時間了，新功能具體能給我們的設計帶來什麽呢？且聽我一一道來：

格子

格子功能，可以快速制作重復的布局，提高設計效率。

步驟：

一、創建格子

1. 選中一個或多個組件。

2. 在主工具欄上，點擊“轉為格子”的圖標，此時可以看到格子已經生成（你也可以鼠標右鍵，“轉為格子”）。

3. 拉動格子，格子的內容會自動生成。

二、調整單元格的大小、行距和間距

在格子上，拉動單元格側邊的紅線，可以設置單元格的大小；拉動灰線，設置單元格的行距和間距（當然，你也可以在屬性面板上直接輸入數字，來進行設置）。

三、設置屬性

在屬性面板上，還有一些屬性可以設置，比如：你可以給格子設置分隔線，包括其顏色、粗細等。

四、脫離

有時候，你需要某個格子保持自己獨立的樣式，不受整體變動的影響，那麽，在當前格子上點擊“脫離”。

數據自動填充

數據的自動填充功能，支持填充的數據類型為文字和圖片。自動填充功能適用於以下兩種情況：

1. 直接使用，用於圖片或文字的單個或批量填充。

2. 在格子中使用，快速構建帶有重復布局的組件（如列表），大大節省設計時間。

在自動填充功能中，設計者可以快速填充的文字類型有：

姓名、日期、文本（句子或段落）及郵箱。

其中，姓名、日期和郵箱都進一步提供了細分類型供設計者選擇。

可以快速填充的圖片類型有：頭像（寫實/卡通）、辦公、美食及其他多種多樣主題的高清圖片。

模版

加入了模板和示例項目，靈活使用這些新功能，可以讓你更高效地完成原型設計。

一、項目模板

3.2版本 以前，每次創建新項目都是空白項目，只包含一個空白頁面。3.2 中新增了模板，創建時可以直接選擇不同的模板。模板中預設好了合適的頁面大小和字體字號等，並且包含一些基本頁面，可以直接從這些頁面開始你的設計。

1. 在新建項目時，點擊“選擇模版”；

2. 選擇你喜歡的模版（如果想知道模板的具體內容，可在預覽圖上點右鍵，選擇 “預覽”）

二、頁面模板

如果你正在做項目的過程中，需要一些通用頁面怎麽辦呢？你可以試試從模板新建頁面。

1. 選擇 “從模板新建頁面”：

2. 選擇你想要的頁面：

三、示例項目

Mockplus 3.2 提供了不少的完整的項目例子可供參考，這些例子中都包含了豐富的頁面和詳細的交互設計，部分復雜頁面還有批註說明，如果想要學習，可以多看。

你可以在Mockplus啟動頁的“打開項目”中找到這些示例項目，如圖：

定時器

“定時器”組件，利用它可以方便地實現延時自動頁面跳轉、延遲自動交互的效果。

1. 使用定時器做頁面自動跳轉

這裏我們要實現的是：當進入Home頁面後，等待1秒，自動跳轉到Welcome to Bear 頁面。方法如下：

在“交互”組件中找到“定時器”組件。

Home頁面上添加一個“定時器”，並將它和Welcome to Bear 頁面設置交互。

定時器的默認延遲時間為1000ms，你也可以自己修改。

運行，查看效果：

2. 使用定時器做組件交互

這裏我們要實現的是：當進入一個頁面後，等待1秒，該頁面中圓形、按鈕文字的顏色都自動變為綠色。方法如下：

將定時器和圓形做交互，選擇“設置顏色”。

再將定時器和按鈕做交互，選擇“設置顏色”（同其它交互組件一樣，一個定時器上可以設置多個交互）。

運行，查看效果。

腦圖編輯模式

腦圖到底有多有用呢？我們一起來看看：

在項目設計過程中，有了腦圖，你可以一鍵切換腦圖設計模式，快速規劃需要的模塊。

在演示過程中，隨時調出腦圖，便於對項目的整體功能進行演示講解。

項目制作完成後，隨時導出基於圖表的圖片，便於後期籌劃PRD文檔。

在腦圖設計模式中，你可以：

1. 自由增添/刪除/重命名頁面和組。

2. 拖拽調整頁面位置，直接映射到項目文件。

3. 變換腦圖風格，多種樣式任你選。

4. 一鍵導出腦圖。

導入Sketch

Mockplus 3.2 為Sketch 開發了插件，可以將 Sketch 文檔導出為 Mockplus 文檔，然後在 Mockplus 中完成交互設計，整個使用過程非常簡單。

準備

Mockplus 的插件需要運行在 Sketch 上，版本要求 45 以上。請註意：請保證你的Sketch是從Sketch官網下載的版本，而非從Mac Store下載的，否則可能無法使用這個插件。

安裝

從https://www.mockplus.cn/download下載 Sketch 插件，解壓開然後雙擊 .sketchplugin 文件。Sketch會提示插件已經裝好了：

導出

當完成了設計後，在菜單中選擇：“Plugins”- “Mockplus”-“導出項目文件”

設置選項

在下面的界面中設置項目選項，你可以選擇導出部分的 Artboard，同時你還可以選擇導出的項目類型和圖片大小信息，這些選項會影響最終導出的項目文件。設置好以後，選擇“導出”。

在Mockplus中繼續設計

把你導出的mp文件使用 Mockplus 打開，然後就可以使用 Mockplus 繼續進行設計了。

這個6個功能，對我來說，格子和數據填充功能最有用，不是說其他功能不好，而是其他的功能我暫時用不上，你覺得哪個功能對你有幫助 呢？

官網下載地址：https://www.mockplus.cn/download

用好這6個新功能，讓你的項目設計事半功倍