本文由Mockplus提供素材回官。
Mockplus3.2新功能發(fā)布有段時間了,新功能具體能給我們的設(shè)計帶來什么呢搂橙?且聽我一一道來:
格子
格子功能歉提,可以快速制作重復(fù)的布局,提高設(shè)計效率份氧。
步驟:
一唯袄、創(chuàng)建格子
1. 選中一個或多個組件。
2. 在主工具欄上蜗帜,點擊“轉(zhuǎn)為格子”的圖標(biāo)恋拷,此時可以看到格子已經(jīng)生成(你也可以鼠標(biāo)右鍵,“轉(zhuǎn)為格子”)厅缺。
3. 拉動格子蔬顾,格子的內(nèi)容會自動生成。
二湘捎、調(diào)整單元格的大小诀豁、行距和間距
在格子上,拉動單元格側(cè)邊的紅線窥妇,可以設(shè)置單元格的大邢鲜ぁ;拉動灰線活翩,設(shè)置單元格的行距和間距(當(dāng)然烹骨,你也可以在屬性面板上直接輸入數(shù)字翻伺,來進行設(shè)置)。
三沮焕、設(shè)置屬性
在屬性面板上吨岭,還有一些屬性可以設(shè)置,比如:你可以給格子設(shè)置分隔線峦树,包括其顏色辣辫、粗細等。
四魁巩、脫離
有時候急灭,你需要某個格子保持自己獨立的樣式,不受整體變動的影響歪赢,那么化戳,在當(dāng)前格子上點擊“脫離”。
數(shù)據(jù)自動填充
數(shù)據(jù)的自動填充功能埋凯,支持填充的數(shù)據(jù)類型為文字和圖片点楼。自動填充功能適用于以下兩種情況:
1. 直接使用,用于圖片或文字的單個或批量填充白对。
2. 在格子中使用掠廓,快速構(gòu)建帶有重復(fù)布局的組件(如列表),大大節(jié)省設(shè)計時間甩恼。
在自動填充功能中蟀瞧,設(shè)計者可以快速填充的文字類型有:
姓名、日期条摸、文本(句子或段落)及郵箱悦污。
其中,姓名钉蒲、日期和郵箱都進一步提供了細分類型供設(shè)計者選擇切端。
可以快速填充的圖片類型有:頭像(寫實/卡通)、辦公顷啼、美食及其他多種多樣主題的高清圖片踏枣。
模版
加入了模板和示例項目,靈活使用這些新功能钙蒙,可以讓你更高效地完成原型設(shè)計茵瀑。
一、項目模板
3.2版本 以前躬厌,每次創(chuàng)建新項目都是空白項目马昨,只包含一個空白頁面。3.2 中新增了模板,創(chuàng)建時可以直接選擇不同的模板鸿捧。模板中預(yù)設(shè)好了合適的頁面大小和字體字號等抢呆,并且包含一些基本頁面,可以直接從這些頁面開始你的設(shè)計笛谦。
1.? 在新建項目時,點擊“選擇模版”昌阿;
2. 選擇你喜歡的模版(如果想知道模板的具體內(nèi)容饥脑,可在預(yù)覽圖上點右鍵,選擇 “預(yù)覽”)
二懦冰、頁面模板
如果你正在做項目的過程中灶轰,需要一些通用頁面怎么辦呢?你可以試試從模板新建頁面刷钢。
1. 選擇 “從模板新建頁面”:
2. 選擇你想要的頁面:
三笋颤、示例項目
Mockplus 3.2 提供了不少的完整的項目例子可供參考,這些例子中都包含了豐富的頁面和詳細的交互設(shè)計内地,部分復(fù)雜頁面還有批注說明伴澄,如果想要學(xué)習(xí),可以多看阱缓。
你可以在Mockplus啟動頁的“打開項目”中找到這些示例項目非凌,如圖:
定時器
“定時器”組件,利用它可以方便地實現(xiàn)延時自動頁面跳轉(zhuǎn)荆针、延遲自動交互的效果敞嗡。
1. 使用定時器做頁面自動跳轉(zhuǎn)
這里我們要實現(xiàn)的是:當(dāng)進入Home頁面后,等待1秒航背,自動跳轉(zhuǎn)到Welcome to Bear 頁面喉悴。方法如下:
在“交互”組件中找到“定時器”組件。
Home頁面上添加一個“定時器”玖媚,并將它和Welcome to Bear 頁面設(shè)置交互箕肃。
定時器的默認(rèn)延遲時間為1000ms,你也可以自己修改最盅。
運行突雪,查看效果:
2. 使用定時器做組件交互
這里我們要實現(xiàn)的是:當(dāng)進入一個頁面后,等待1秒涡贱,該頁面中圓形咏删、按鈕文字的顏色都自動變?yōu)榫G色。方法如下:
將定時器和圓形做交互问词,選擇“設(shè)置顏色”督函。
再將定時器和按鈕做交互,選擇“設(shè)置顏色”(同其它交互組件一樣,一個定時器上可以設(shè)置多個交互)辰狡。
運行锋叨,查看效果。
腦圖編輯模式
腦圖到底有多有用呢宛篇?我們一起來看看:
在項目設(shè)計過程中娃磺,有了腦圖,你可以一鍵切換腦圖設(shè)計模式叫倍,快速規(guī)劃需要的模塊偷卧。
在演示過程中,隨時調(diào)出腦圖吆倦,便于對項目的整體功能進行演示講解听诸。
項目制作完成后,隨時導(dǎo)出基于圖表的圖片蚕泽,便于后期籌劃PRD文檔晌梨。
在腦圖設(shè)計模式中,你可以:
1. 自由增添/刪除/重命名頁面和組须妻。
2. 拖拽調(diào)整頁面位置仔蝌,直接映射到項目文件。
3. 變換腦圖風(fēng)格璧南,多種樣式任你選掌逛。
4. 一鍵導(dǎo)出腦圖。
導(dǎo)入Sketch
Mockplus 3.2? 為Sketch 開發(fā)了插件司倚,可以將 Sketch 文檔導(dǎo)出為 Mockplus 文檔豆混,然后在 Mockplus 中完成交互設(shè)計,整個使用過程非常簡單动知。
準(zhǔn)備
Mockplus 的插件需要運行在?Sketch?上皿伺,版本要求 45?以上。請注意:請保證你的Sketch是從Sketch官網(wǎng)下載的版本盒粮,而非從Mac Store下載的鸵鸥,否則可能無法使用這個插件。
安裝
從https://www.mockplus.cn/download下載?Sketch 插件丹皱,解壓開然后雙擊 .sketchplugin 文件妒穴。Sketch會提示插件已經(jīng)裝好了:
導(dǎo)出
當(dāng)完成了設(shè)計后,在菜單中選擇:“Plugins”- “Mockplus”-“導(dǎo)出項目文件”
設(shè)置選項
在下面的界面中設(shè)置項目選項摊崭,你可以選擇導(dǎo)出部分的?Artboard讼油,同時你還可以選擇導(dǎo)出的項目類型和圖片大小信息,這些選項會影響最終導(dǎo)出的項目文件呢簸。設(shè)置好以后矮台,選擇“導(dǎo)出”乏屯。
在Mockplus中繼續(xù)設(shè)計
把你導(dǎo)出的mp文件使用?Mockplus 打開,然后就可以使用 Mockplus 繼續(xù)進行設(shè)計了瘦赫。
這個6個功能辰晕,對我來說,格子和數(shù)據(jù)填充功能最有用确虱,不是說其他功能不好含友,而是其他的功能我暫時用不上,你覺得哪個功能對你有幫助 呢校辩?
官網(wǎng)下載地址:https://www.mockplus.cn/download