在產(chǎn)品的原型設(shè)計(jì)中，我們往往會(huì)遇到頁面存在大量重復(fù)元素的情況，雖然能夠通過復(fù)制做出相同的元素，但如果需要對(duì)多個(gè)元素進(jìn)行一些小調(diào)整，你只能挨個(gè)挨個(gè)調(diào)整，一次又一次重復(fù)相同的動(dòng)作，這不僅會(huì)耗費(fèi)大量時(shí)間，也并不能滿足產(chǎn)品經(jīng)理或設(shè)計(jì)師們更快更簡單地完成原型設(shè)計(jì)的需求。所以，這就需要一個(gè)既可以快速復(fù)制頁面元素，又能做到靈活修改所有相同元素屬性的功能，幫助我們批量處理頁面元素，大幅度縮短工作時(shí)間。

為了滿足這樣的需求，Adobe XD發(fā)布了Repeat grid（重復(fù)網(wǎng)格）的功能。同樣，Mockplus也在3.2的新版本中增加了“格子”的功能，一起來用用吧。

1. 創(chuàng)建方式

在創(chuàng)建方式上，Adobe XD將Repeat grid放在了界面右側(cè)的屬性面板，點(diǎn)擊這個(gè)按鈕就可以轉(zhuǎn)換為Repeat grid或者解散。Mockplus中，則是直接在右鍵菜單中選擇“轉(zhuǎn)換為格子”或者“解散”，也可以在主工具欄上點(diǎn)擊按鈕。對(duì)于初次使用兩個(gè)功能的用戶來說，Mockplus可能會(huì)更加符合大家傳統(tǒng)的使用習(xí)慣，此外，使用右鍵菜單將組件轉(zhuǎn)換為格子，減少了鼠標(biāo)來回移動(dòng)的頻率，節(jié)省了時(shí)間。

2. 添加單元格

在Adobe XD中，將元素轉(zhuǎn)換為Repeat grid后，該元素右側(cè)和底部會(huì)出現(xiàn)手柄，你可以選擇拉動(dòng)對(duì)應(yīng)的手柄來在水平或垂直方向添加單元格。Mockplus添加單元格的方式則更加豐富，首先你可以通過格子邊框上的8個(gè)小圓點(diǎn)朝上下左右以及四個(gè)對(duì)角方向，也就是總共8個(gè)方向拉動(dòng)來增加單元格。另外，你會(huì)看到在Repeater的右側(cè)和底部也會(huì)出現(xiàn)手柄，但這個(gè)手柄的作用和Adobe XD的Repeat grid是不同的，以垂直方向?yàn)槔?，?dāng)最后一行顯示不全時(shí)，點(diǎn)擊底部手柄，則把最后一行顯示完整，當(dāng)最后一行顯示完整時(shí)，則點(diǎn)擊時(shí)增加一行(同時(shí)，利用這個(gè)功能，我們可以逐個(gè)生成單元格)。Mockplus的這項(xiàng)功能相對(duì)來說更加豐富和成熟，能滿足多種需求。

（Adobe XD）

（Mockplus）

3. 屬性設(shè)置

間距的設(shè)置。Adobe XD和Mockplus調(diào)整間距的方式相似，選中單元格后，拖動(dòng)選擇框上面的紅線進(jìn)行設(shè)置，不過除此之外，在Mockplus中還可以通過右側(cè)屬性面板直接設(shè)置行間距以及列間距，這樣可以讓間距更加準(zhǔn)確可控。

在布局方式上，XD只有網(wǎng)格的布局方式，而Mockplus可以在右側(cè)屬性面板選擇“網(wǎng)格”、“垂直”或“水平”三種布局方式，比如：如果設(shè)置為“垂直”，則整體布局中只會(huì)出現(xiàn)垂直方向的單元格。

此外，Mockplus還可以利用格子的邊框和單元格之間的分隔線。這個(gè)確實(shí)很實(shí)用，比如制作列表形式的布局，其中的水平分隔線通過屬性設(shè)置即可，不用在單元格中去放置一根線條了，這個(gè)還是很方便的。Adobe XD則沒有這樣的屬性。

有些朋友們可能會(huì)問：如果我只想修改其中一個(gè)單元格的屬性而其他單元格保持不變?cè)趺崔k呢？值得一提的是，在Mockplus的格子功能中，你可以通過點(diǎn)擊“脫離”將某個(gè)單元格的屬性與其他單元格的屬性設(shè)置分隔開，這樣一來，你既可以做到同時(shí)修改所有單元格的屬性，也可以選擇單獨(dú)設(shè)置某個(gè)單元格的屬性，是不是方便多了呢？

4.單元格中的操作

在組件的添加和刪除操作上，Adobe XD和Mockplus方式相同。當(dāng)拖入新的組件時(shí)，所有單元格相同位置創(chuàng)建該組件。刪除某一組件后，如果當(dāng)前編輯的組中只剩一個(gè)組件，會(huì)自動(dòng)解散當(dāng)前組，并退回到上一級(jí)組，其它單元格同步此操作；如果每個(gè)單元格中的組件數(shù)量為空時(shí)，將刪除整個(gè)Repeat grid 或格子。

5.數(shù)據(jù)的自動(dòng)填充

Mockplus 3.2.4實(shí)現(xiàn)了數(shù)據(jù)的自動(dòng)填充功能，支持填充的數(shù)據(jù)類型為文字和圖片。 這個(gè)太棒了！你不用自己找素材了。目前，自動(dòng)填充功能適用于以下兩種情況：

直接使用，用于圖片或文字的單個(gè)或批量填充。

在格子中使用，快速構(gòu)建帶有重復(fù)布局的組件（如列表），大大節(jié)省設(shè)計(jì)時(shí)間。

在自動(dòng)填充功能中，設(shè)計(jì)者可以快速填充的文字類型有：

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

其中，姓名、日期和郵箱都進(jìn)一步提供了細(xì)分類型供設(shè)計(jì)者選擇。

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

在 Adobe XD的Repeat grid中，可以一次性拖入一張或多張圖片，如果只有一張圖片時(shí)，圖片會(huì)自動(dòng)適應(yīng)該組件的大小，如果是多張圖片時(shí)，圖片在自動(dòng)適應(yīng)大小的同時(shí)也可以自動(dòng)排序。 但Adobe XD沒有其它類型的數(shù)據(jù)自動(dòng)填充。

好了，這就是Mockplus的格子與Adobe XD的Repeat grid了。

免費(fèi)下載Mockplus