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

本文由Mockplus提供素材。

 

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

 

格子

 

格子功能，能夠快速製做重複的佈局，提升設計效率。

步驟：

1、建立格子

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

2. 在主工具欄上，點擊「轉爲格子」的圖標，此時能夠看到格子已經生成（你也能夠鼠標右鍵，「轉爲格子」）。

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

 

 

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

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

3、設置屬性

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

4、脫離

有時候，你須要某個格子保持本身獨立的樣式，不受總體變更的影響，那麼，在當前格子上點擊「脫離」。

 

 

數據自動填充

 

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

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

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

 

 

 

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

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

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

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

 

模版

 

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

1、項目模板

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

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

2. 選擇你喜歡的模版（若是想知道模板的具體內容，可在預覽圖上點右鍵，選擇 「預覽」）

 

 

2、頁面模板

若是你正在作項目的過程當中，須要一些通用頁面怎麼辦呢？你能夠試試從模板新建頁面。

1. 選擇 「從模板新建頁面」：

 

 

2. 選擇你想要的頁面：

 

 

3、示例項目

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