"重复格子"是神器，Adobe XD 和 Mockplus谁的更好？

在产品的原型设计中，我们往往会遇到页面存在大量重复元素的情况，虽然能够通过复制做出相同的元素，但如果需要对多个元素进行一些小调整，你只能挨个挨个调整，一次又一次重复相同的动作，这不仅会耗费大量时间，也并不能满足产品经理或设计师们更快更简单地完成原型设计的需求。所以，这就需要一个既可以快速复制页面元素，又能做到灵活修改所有相同元素属性的功能，帮助我们批量处理页面元素，大幅度缩短工作时间。

为了满足这样的需求，Adobe XD发布了Repeat grid（重复网格）的功能。同样，Mockplus也在3.2的新版本中增加了“格子”的功能，一起来用用吧。

1. 创建方式

在创建方式上，Adobe XD将Repeat grid放在了界面右侧的属性面板，点击这个按钮就可以转换为Repeat grid或者解散。Mockplus中，则是直接在右键菜单中选择“转换为格子”或者“解散”，也可以在主工具栏上点击按钮。对于初次使用两个功能的用户来说，Mockplus可能会更加符合大家传统的使用习惯，此外，使用右键菜单将组件转换为格子，减少了鼠标来回移动的频率，节省了时间。

2. 添加单元格

在Adobe XD中，将元素转换为Repeat grid后，该元素右侧和底部会出现手柄，你可以选择拉动对应的手柄来在水平或垂直方向添加单元格。Mockplus添加单元格的方式则更加丰富，首先你可以通过格子边框上的8个小圆点朝上下左右以及四个对角方向，也就是总共8个方向拉动来增加单元格。另外，你会看到在Repeater的右侧和底部也会出现手柄，但这个手柄的作用和Adobe XD的Repeat grid是不同的，以垂直方向为例，当最后一行显示不全时，点击底部手柄，则把最后一行显示完整，当最后一行显示完整时，则点击时增加一行(同时，利用这个功能，我们可以逐个生成单元格)。Mockplus的这项功能相对来说更加丰富和成熟，能满足多种需求。

（Adobe XD）

（Mockplus）

3. 属性设置

间距的设置。Adobe XD和Mockplus调整间距的方式相似，选中单元格后，拖动选择框上面的红线进行设置，不过除此之外，在Mockplus中还可以通过右侧属性面板直接设置行间距以及列间距，这样可以让间距更加准确可控。

在布局方式上，XD只有网格的布局方式，而Mockplus可以在右侧属性面板选择“网格”、“垂直”或“水平”三种布局方式，比如：如果设置为“垂直”，则整体布局中只会出现垂直方向的单元格。

此外，Mockplus还可以利用格子的边框和单元格之间的分隔线。这个确实很实用，比如制作列表形式的布局，其中的水平分隔线通过属性设置即可，不用在单元格中去放置一根线条了，这个还是很方便的。Adobe XD则没有这样的属性。

有些朋友们可能会问：如果我只想修改其中一个单元格的属性而其他单元格保持不变怎么办呢？值得一提的是，在Mockplus的格子功能中，你可以通过点击“脱离”将某个单元格的属性与其他单元格的属性设置分隔开，这样一来，你既可以做到同时修改所有单元格的属性，也可以选择单独设置某个单元格的属性，是不是方便多了呢？

4.单元格中的操作

在组件的添加和删除操作上，Adobe XD和Mockplus方式相同。当拖入新的组件时，所有单元格相同位置创建该组件。删除某一组件后，如果当前编辑的组中只剩一个组件，会自动解散当前组，并退回到上一级组，其它单元格同步此操作；如果每个单元格中的组件数量为空时，将删除整个Repeat grid 或格子。

5.数据的自动填充

Mockplus 3.2.4实现了数据的自动填充功能，支持填充的数据类型为文字和图片。 这个太棒了！你不用自己找素材了。目前，自动填充功能适用于以下两种情况：

直接使用，用于图片或文字的单个或批量填充。

在格子中使用，快速构建带有重复布局的组件（如列表），大大节省设计时间。

在自动填充功能中，设计者可以快速填充的文字类型有：

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

其中，姓名、日期和邮箱都进一步提供了细分类型供设计者选择。

可以快速填充的图片类型有：头像（写实/卡通）、办公、美食及其他多种多样主题的高清图片。

在 Adobe XD的Repeat grid中，可以一次性拖入一张或多张图片，如果只有一张图片时，图片会自动适应该组件的大小，如果是多张图片时，图片在自动适应大小的同时也可以自动排序。 但Adobe XD没有其它类型的数据自动填充。

好了，这就是Mockplus的格子与Adobe XD的Repeat grid了。

免费下载Mockplus