脱水版

1、重复网格中的文本元素的样式会应用到每个元素，但是内容不会，而且可以通过拖拽的方式将txt文本导入并替换重复网格内的文本内容。前提是txt文本一个数据一行。

2、重复网格内的图形元素接受拖拽导入图片，并且图片会自动匹配图形的形状，同样可以使用拖拽的方式同时导入不同的图片。

3、元素之间、组之间的间距可以随时可视化调整。

4、可以取消重复表格，对元素进行个性化的编辑。

5、重复表格中的元素、组、整个重复表格都可以作为交互动作的触发区域。

6、以下正文不想看字，可以直接看动图。

正文

如果你是一个视觉设计师，你可能花了大部分时间在小的调整和重复的可视化元素上，有可能是你的客户要求扩大元素之间的间距，也有可能他们想要所有的头像都改成圆角，任何的一种要求，你会发现你得重复调整。

In Adobe Experience Design CC (Beta）可以通过重复网格这个功帮助设计师来从这些单调繁琐的工作中解脱出来。本文将讲解这个功能的厉害之处。欢迎大家下载试用。

1、创建和调整一个重复网格

一个重复网格就是一个特殊形式的组，就像创建组一样，我们选择对象然后把对象转化成重复网格。在这个练习中， 我们会创建一个包含头像和姓名的简单电话联系表。

步骤1:创建初始对象

1、在欢迎屏幕，随意选择一个画板类型开始一个新文件。

2、使用矩形工具画一个长方形(R)

3、在矩形的右边，使用文本工具（T），输入一些占位文字。

4、切换到选择工具（V），选择这两个对象，可以通过选框选择（在两物体周围框选），或者通过先选择一个对象，然后按住Shift的方式选择另一个对方。

请注意，这里不需要画得很精确，我们可以稍后调整这俩元素。

步骤2:创建和调整重复网格

1、在右侧的属性检查器中单击“repeat grid”按钮，或使用快捷键Cmd + R，把选中的这俩元素转换为一个重复网格。

现在得到一个重复网格，你现在可以看到两个绿色的圆角矩形，一个在右边，一个在底部，四周是绿色的虚线。

你可以对任何物品创建重复网格

2、单击并拖拽右侧的圆角矩形 到出现重复的内容。同理，拖拽底部的圆角矩形到出现重复的内容。

现在就有重复元素在重复网格里了。重复网格适用于所有的元素，不只是矩形和文字。

步骤3:调整重复网格中的任意元素

我们可以双击来选中重复网格里的组件元素。更改元素后，可以按Esc键退出更改。我们也有其他的方法编辑组件元素。例如，可以深入到图层面板的中(Cmd + Y)，或者直接选择(Cmd + Click)。

1、使用选择工具（V），双击任何重复网格。你可以看到一个浅蓝色的边框在你需要编辑的对象的周围。选择或者拖拽你的元素，在参考线的帮助下，可以更容易的对齐前面的矩形框。

2、单击文本对象，在右边的属性栏里可以改变字体和字号，重复网格内所有的文本对象都随着改变。

3、按Esc 退出编辑，在画板里拖动一个文本框，对齐前面的矩形。

调整一个所有的都会变化

步骤4:调整行和列的间距

现在我们创建好了重复网格，我们可以开始调整重复表格内行和列的间距。选中重复表格，也就是出现绿色虚线框的时候，鼠标悬停在元素之间可以激活行和列的调整指示，调整他们到我们需要的位置。

1、把你的鼠标悬停到文本元素的右边，也就是矩形的左边，不是文本元素的左边和矩形的右边，一旦出现粉红色的列指示，鼠标左右拖动，直到顶部的间距数字变成30。

2、同样的，鼠标悬停到上下两个矩形之间，鼠标上下拖动，间距也变成30。

3、继续调整各个元素之间的间距以及重复网格的大小直到你的画板里都是完整的元素，没有被切断的现象。

你可以轻松的调整行和列的间距

你可以把任意一组对象转换成为重复网格。当这些对象成为重复单元网格，你就可以批量编辑他们了。

2、在重复网格中使用数据

现在我们有了联系人列表的整体形状，我们可以在其中填充内容，最简单的方式是逐个编个元素。

步骤1:更新单个文本元素

1、Cmd +点击文本对象，在重复网格以选中它，进入重复网格，编辑输入文本模式。

2、双击文本，编辑文本内容，让文本看起来像一个名字。注意，重复网格中的其他文本的内容不会变成这个文本的内容，只有文本的样式会变成这个文本的样式。

步骤2:创建一个图像填充模式

1、拖一个图像到一个矩形框，来导入这张图。这张图会自动填充到矩形区域，我们称之为自动蒙版。

2、把第二个图像拖拉到第二个矩形。我们定义重复网格的阅读顺序为从左到右右，从上到下。注意，现在重复网格显示的是第一张照片和第二张照片交替出现。现在我们已经创建了一个包含有两个照片的阵列。

3、把第三个图片拉到第四个矩形框内，不是第三个矩形框。我们就有一个4张照片重复的模式，第一个第三个是相同的照片。

4、把第四个照片放到第一个矩形框内，这个替换了在你四个照片阵列里面的第一个元素，这次在你阵列里面的四张照片就是不同的了。

你可以用图片和文字来覆盖重复网格中的对象

文本的覆盖的概念：我们可以更改单独一个文本框本身自己的文字，但是风格和样式是重复网格内所有文本的。然而我们可以构建和自动蒙版相同概念的重复阵列文本，创建与图片有关联的文本。例如，如果你把第三个图片放到第三个矩形框内，你就会创建一个3图片阵列的模型，相似的如果你把一个图片放到第五个矩形框里就会床架你一个5图阵列的模型。

然而我们提前就准备好的内容才真正能让我们感觉到乏味。

步骤3:拖动文本文件到你的文本对象

1、创建一个文本文件，后缀为.txt。你也用Mac的文本编辑器创建（选择格式>纯文本）或者你喜欢的任何文本编辑器。每个数据独立一行。

2、存储这个文件，从Finder拖到重复网格的文本对象，就会导入到Adobe XD。

现在我们的对象重复基于文本文件的行数。如果我们的文本文件有四行,它将每一行文本对象和将前四后重复。

步骤4:选择图像文件拖到你的矩形框内

1、在Finder中，选择若干图片。

2、拖拽到重复网格的矩形框内作为矩形框的填充内容。

3、选择矩形框的一个角来改变圆角大小，所有的操作，都可以看到界面给出反馈。

一次拖进来一张图片，你就创建了一个重复填充模式的阵列。然而就像文本一样，任何改变都会传递到所有的对象。

你可以轻松的修改重复网格的内容，也能通过拖入源文件的方式轻松的更改内容。注意数据是导入的，不是链接的，所以你对源文件做任何更改都不会影响Adobe XD里面的数据。文本的样式和元素的形状会应用到重复网格的其他元素上。

3、给重复网格增加内容

现在我们有了一个相当充实的联系人列表，我们可以继续我们的设计，逐步完成从我们同事和利益相关者那里接受到反馈。在这种情况下我们可能要增加元素，重复网格使得这变得很容易。

用我们的例子，我们会增加一个水平线区分离各个项目。

步骤1:在编辑环境下画

1、进入到重复网格的编辑环境

2、在项目下，通过线工具（L）按住shift拖拽来画一条水平线。

3、用选择工具，调整线的位置，直到和左面的矩形框对齐。

4、Esc 退出编辑环境。

我们可以在编辑环境下画任何元素或者增加文本。重复网格可以自动的覆盖每个元素，这就使得我们可以用一种新的更自由的方式区设计。

我们增加了一条线，但是现在每个项目之间还有重叠，在视觉上看起来就是很混乱的，我们需要把两个项目之间的间距进行调整，当这种情况发生的时候，在重复网格的行或者列的间距设置种会为一个负数。

步骤2：调整负间距

1、鼠标悬停在重叠空间，抓住矩形框的顶部或者底部向下拉，直到不存在重叠，然后进行下一步。

增加元素扩展项目会导致负间距

我们解决了这个问题，但是我们已经创建的元素该如何添加呢？我们可以不用从一个地方粘贴到另一个地方。

步骤3：在重复网格编辑环境下的剪切和复制

1、下载星星和旗子的svg文件到剪贴板上，并放在你画板外。这就是把星星文件导入到你的文件。

2、把导入的图形转化为一个重复网格，然后拖右面的拉手，直到你有总共四个星星。调整内间距，使他们更紧密

3、剪切（Cmd+X）带有星星的重复网格，然后双击你联系表里面的任何一个项目进入到编辑环境。

4、粘贴（Cmd+V）你带有星星的重复网格将会出现在你项目中间，然后移动到文本下面

有时候我们想要拆开重复网格，因为我们有时候想与后面的对象独立开来。为了实现这个目的，我们会取消重复网格来方便我们进行更改。

步骤4：取消组内重复网格和按需要编辑

1、因为你已经在联系人列表编辑环境下，可以直接点击带有星星的重复网格以选中它。

2、点击属性栏里的取消分组按钮，取消选中的重复网格的分组，取消分组也可以通过从右击菜单（Ctrl-click或者鼠标右键）、或者快捷键（Cmd+shift+G）的方式。

3、选择两个星星不进行填充。

（译者注：只是星星这个重复网格内的星星们不一样了，大的联系人表格的重复网格还是会重复这些编辑后的星星们）

如果你的图片是一个SVG文件，输入后是一个可编辑的图形。你可以用重复网格排列和复制，然后在解除分组调整。

你甚至可以在你创建重复网格之后添加对象，通过在编辑环境下绘画或者粘贴的。如果你有负间距，你可以轻松的通过鼠标停留在重叠区域，对内间距进行调整。你也可以把重复网格作为一个简单的校准工具。

4、一个重复网格的原型

现在我们有一个重复网格，我们准备把它和在原型里面的另一个画板进行关联，使用Adobe XD，我们可以在设计和创建原型模型之前简单切换，同时允许我们在UI 和交互之间进行同时编辑。

在本文中我们创建第二个画板和我们的重复网格在三种不同的场景互相关联。

场景1：整个重复网格对单个交互

1、使用画板工具（A）创建第二个画板，点击你已有画板的右面创建另一个画板。

2、通过单击左上角顶部选项卡，切换到原型模式，或者快捷键Cmd+ Tab

3、选择在你第一个画板里的重复网格，在重复网格的右侧中间位置会出现一个带箭头的连接器。

4、塑标左键按住这个连接器并拖到下一个画板，在弹框中的transition一项中，选择合适的页面跳转方式，然后按esc键或者左键单击弹框以外的部分，来关闭弹框。

5、可以按下播放按钮或者快捷键Cmd+Enter 进行预览，点击预览窗口中的重复网格进行交互。

从重复网格连线

这一场景中我们把整个重复网格，包括里面的元素，作为交互出发区域。

场景2:重复网格中单个元素的交互

1、用快捷键撤销之前的动作Cmd+z

2、按住Cmd键 点击重复网格中的矩形，选中这个矩形。

3、鼠标左键按住这个矩形右侧的连接器，拖拽到第二个画板。然后在出现的弹框里的transition框里选择页面切换方式，然后点击页面其他位置，关掉弹框。

4、如果preview窗口不是一直开的，可以重新打开这个窗口，在窗口的demo中试着点击，看看效果。

在重复网格内部选择一个元素，为这个元素建立连线

到这，咱们知道怎样给一个元素建立连线。现在来看看如何给一个单元元素建立连线。可以通过在重复网格内创建组的形式让这个单元可以有效点击。

场景3:在重复网格内创建组，为组创建交互动作

1、使用Cmd + Z快捷键，取消上一步建立的连线。

2、点击左上角Design按钮或者使用快捷键Cmd + Tab，切换到Design模式。

3、按住Cmd 单击重复网格中的一个矩形，选中这个矩形。按住shift 单击矩形旁边的文字，一起选中这两个元素。

4、使用快捷键Cmd + G，将这两个元素绑定为一组。

5、切换到原型模式。这时刚刚编组的元素依然是选中状态。

6、左键按住并拖拽这组元素右侧的连接器到第二个画板。现在整个组都能触发交互动作。

现在可以把整个重复表格区域设置为交互触发区域，无论是点击里面的一个元素还是里面的组，都可以出发这个交互动作。

5、好了，就这些

我希望这个简单的教程能帮助大家探索重复网格的功能。这个简单强大的功能在beta版里很受欢迎，而且我们也会根据反馈，不断的优化这个功能。如果大家有改进意见，可以在评论区留言。

原文作者：Elaine Chao

原文地址：https://www.smashingmagazine.com/2016/11/exploring-repeat-grid-in-adobe-xd/

更多文章请关注http://www.youjiaohu.com，或者关注微信公众账号友交互：

每篇文章都有脱水版总结，让你的阅读更高效。

转载一定要带上友交互的链接和二维码。