在 Adob​​e XD 中探索重复网格

如果您是视觉设计师，您可能会花费大部分时间对多个视觉元素进行小幅调整。 也许您的客户已经决定他们需要在您的每个元素之间增加几个像素的填充，或者他们可能已经决定他们的所有化身都需要有圆角。 无论如何，您可能会发现自己一遍又一遍地对设计进行相同的调整……一遍又一遍。

在Adob​​e Experience Design CC (Beta) 中，我们引入了重复网格功能来解决设计师工作流程中这个繁琐的方面。 在本文中，我们将深入挖掘这一省时功能的真正威力。 我们将创建和调整重复网格，向其中添加内容，并在 Adob​​e XD 简单而强大的原型模式中将其连接起来。 如果您想继续学习，可以免费下载和测试 Adob​​e XD。

关于 SmashingMag 的进一步阅读：

• 使用 Adob​​e XD 快捷方式进行快速 UX 原型设计
• 如何使用 Adob​​e XD 创建图标
• 我们如何使用原型设计，以及它如何让我们更有效率

创建和调整重复网格

重复网格的核心是一种特殊类型的组。 就像我们对对象进行分组一样，我们将通过选择一个对象或一组对象并将它们转换为重复网格来创建我们的重复网格。 在本练习中，我们将制作一个带有图像和姓名的简单电话联系人列表。

第 1 步：创建我们的初始对象

• 从欢迎屏幕中，选择一种画板类型以开始一个新文件。
• 使用矩形工具 ( R ) 绘制一个矩形。
• 在矩形的右侧，使用文本工具 ( T ) 键入一些占位符文本。
• 使用选择工具 ( V )，通过选取框选择（在两个对象周围画一个框）或通过选择一个对象并按住 Shift 键选择另一个来选择两个对象。

请注意，此时我们不需要精度，因为我们可以稍后调整元素。

第 2 步：创建和调整重复网格的大小

通过单击属性检查器中的按钮或使用快捷键Cmd + R将选择转换为重复网格。

我们的小组现在是一个重复网格。 您可以看到它现在有两个手柄，一个在右侧，一个在底部，您的组周围的框是一条绿色的虚线。

单击并向右拖动右侧手柄，展开重复网格。 要向下展开重复网格，请向下拖动底部手柄。

我们现在在重复网格中有重复的元素。 我们应用于任何对象的所有样式都将应用于它的所有重复版本。

第 3 步：调整重复网格中的任何元素

像任何组一样，我们可以通过双击组来访问重复网格的组件元素。 完成更改后，我们可以通过按 Escape 键退出编辑上下文。 但是，还有其他方法可以访问组件元素。 例如，我们可以在“图层”面板（ Cmd + Y ）或直接选择它（ Cmd + Click ）中向下钻取元素。

• 使用选择工具 ( V )，双击重复网格中的任何矩形。 您现在应该在正在编辑的单元格周围看到一个浅蓝色框。 选择并拖动您的文本，使其与您的矩形对齐。
• 单击 Text 对象并在右侧的 Property Inspector 中更改字体和大小。 您的所有文本对象都共享相同的样式。
• 按 Escape 退出编辑上下文并移动重复网格，使其与画板对齐。

第 4 步：调整重复网格中的行和列填充

现在我们有了重复网格，我们可以开始调整每行和每列之间的间距。 通过将鼠标悬停在元素之间的间隙上，我们可以激活列和行指示器并根据自己的喜好更改它们。

• 将光标放在文本元素的右侧和矩形的左侧之间，直接位于列间距中。 显示粉色列指示器后，左右拖动装订线右侧，直到设置为 30。
• 将光标放在矩形之间，直接在行间距中。 粉红色行指示器显示后，上下拖动装订线底部，直到设置为 30。
• 继续调整单元格之间的间距和重复网格的大小，直到您拥有适合您的画板的正确数量的元素。

您可以将任何一组对象转换为重复网格。 这些对象成为重复网格中的一个单元格。 然后，您可以编辑单元格并调整行和列之间的间距。

在重复网格中使用数据

现在我们有了联系人列表的整体形状，我们可以用内容填充它。 最简单的填充方法是分别更改每个元素。

第 1 步：更新单个文本元素

• Cmd + Click重复网格中的文本对象以将其选中。 您现在处于重复网格的编辑上下文模式。
• 双击文本元素进行编辑并将文本更改为名称。 请注意，内容并未应用于重复网格中的所有其他文本对象。 但是，应用于文本对象的任何样式都会应用于所有文本对象。

第 2 步：创建图像填充图案

• 将图像拖入其中一个矩形以将其导入。 您的图像将用作矩形的填充，并自动调整大小以填充形状。 我们将此功能称为自动屏蔽。
• 将第二个图像拖到第二个矩形中。 我们以从左到右的阅读顺序（从左到右，然后从上到下）在重复网格中定义顺序。 请注意，重复网格现在在第一张照片和第二张照片之间交替。 我们现在已经创建了 2 张照片图案。
• 将第三个图像拖到第四个矩形中。 现在您已经将一个项目拖到第四个矩形中，我们有一个 4 张照片模式，第一张和第三张是相同的图像。
• 将第四个图像拖到第一个矩形中。 这将替换 4 照片图案中的第一个元素，因此您的图案中现在应该有四张独特的照片。

文本适用于覆盖的概念； 我们可以覆盖文本对象本身的内容，但样式仍然适用于对象的所有重复。 但是，我们可以使用自动蒙版对象构建重复模式的概念，其中对象的图像填充以您定义的模式重复。 例如，如果您将第三张图像拖到第三个矩形中，您将创建一个 3 张照片图案。 同样，如果您将图像拖到第五个矩形中，您将创建一个 5 张照片图案。

但是，这可能会变得非常乏味。 相反，我们要做的是使用我们提前准备好的内容。

第 3 步：将一个返回分隔的文本文件拖到您的文本对象中

• 创建一个扩展名为 .txt 的文本文件。 您可以使用 Mac 的 TextEdit（选择格式 > 制作纯文本）或您喜欢的任何文本编辑器来创建它。 用回车分隔每条数据。
• 保存文件后，将其从 Finder 拖到 Adob​​e XD 中的重复网格文本对象上以导入数据。

现在我们的对象根据文本文件中的行数重复。 如果我们的文本文件有四行，它将为每个文本对象放置一行，并在放置前四行后重复。

第 4 步：将选择的图像文件拖到矩形中。

• 在 Finder 中，选择多个图像。
• 将此选择从 Finder 拖到重复网格的矩形上，以将图像导入为重复矩形的填充。
• 选择矩形并通过拖动半径控件之一来更改角半径。 你所有的风格变化都会反映在每次重复上。

与一次拖动图像类似，您正在为对象的填充创建重复图案。 而且，就像文本一样，对容器的任何更改都会传播到重复网格中对象的所有重复项。

请注意，您可以通过更改单个对象或通过拖入数据源轻松更改重复网格的内容。 请注意，数据已导入且未链接，因此您对源文件所做的任何更改都不会影响您已放置在 XD 文件中的数据。 您的所有样式以及任何容器的大小和形状都反映在元素的所有重复中。

将内容添加到重复网格

现在我们有了一个相当充实的联系人列表，我们可以继续我们的设计过程，在我们收到同事和利益相关者的反馈时进行迭代。 在这种情况下，我们可能需要在事后添加元素。 重复网格允许我们向单元格添加元素，从而使这变得容易。

在我们的示例中，我们将添加一条水平线来垂直分隔单元格。

第 1 步：在编辑上下文中绘制

• 输入重复网格的编辑上下文。
• 通过选择线条工具 ( L ) 并在拖动时按住 Shift 键，在下面的单元格上绘制一条水平线。
• 使用选择工具，调整线条的位置，直到它与矩形的左侧对齐。
• 按 Escape 退出编辑上下文。

我们可以在重复网格的编辑上下文中绘制任何元素或添加文本，即使在您创建之后也是如此。 由于重复网格会自动重复每个元素，这使我们可以灵活地以新的方式进行设计。

我们刚刚添加了一条线，但现在单元格相互重叠，给我们留下了视觉混乱。 我们需要在单元格之间添加垂直空间。 当发生这种情况时，Repeat Grid 会重新计算行或列之间的间距（从一个的底部到下一个的顶部，或从一个的右侧到下一个的左侧）并将其设置为负数，如果它们重叠。

第 2 步：重新调整负填充

• 悬停在重叠空间中。 抓住矩形的顶部或底部并将其拉下，使重叠不再存在，然后再进一步。

我们已经解决了这个问题，但是添加我们已经创建的艺术品呢？ 我们可以从一个上下文中剪切并粘贴到另一个上下文中。

第 3 步：剪切并粘贴到重复网格的编辑上下文中

• 下载 star.svg 文件并将其拖到当前画板之外的粘贴板上。 这会将 star.svg 文件导入到您的项目中。
• 将导入的路径转换为重复网格并将右侧手柄向右拖动，直到总共有四颗星。 调整填充以使星星更靠近。
• 用星号（ Cmd + X ）剪切重复网格，然后双击联系人列表的任何单元格以进入其编辑上下文。
• 粘贴（ Cmd + V ）。 您的星星重复网格将粘贴到单元格的中心。 移动星星，使其位于文本下方。

不过，有时我们会想要拆分重复网格； 有时您只需要在将它们排列好之后就需要独立的对象。 为此，我们将取消对重复网格的分组并进行更改。

第 4 步：取消组合内部重复网格并根据需要进行编辑

• 由于您已经在联系人列表的编辑上下文中，请单击星号的重复网格以将其选中。
• 通过在 Property Inspector 中选择 Ungroup 按钮、从上下文菜单中选择 Ungroup Grid（Ctrl-单击或鼠标右键）或使用键盘快捷键Cmd + Shift + G来取消对重复网格的组合。
• 选择两个星星并取消选中填充。

您甚至可以在创建后将对象添加到重复网格，方法是绘制或粘贴到编辑上下文中。 如果您有负填充，您可以通过将鼠标悬停在重叠区域上轻松调整它。 您可以将重复网格用作元素之间的简单对齐工具，并通过取消组合来解耦重复的元素。

从重复网格进行原型设计

现在我们有了一个重复网格，我们将在原型模式下将它连接到另一个画板。 使用 Adob​​e XD，我们可以快速在设计模式和原型模式之间来回切换，这使我们能够同时编辑 UI 和交互。

在这种情况下，我们将在三个不同的场景中从我们的重复网格创建第二个画板和连线。

选项 1：为单个交互连接整个重复网格

• 使用画板工具 ( A ) 在文件中创建第二个画板。 单击现有画板的右侧，在您的第一个画板旁边创建另一个画板。
• 通过单击应用程序框架顶部的选项卡或使用键盘快捷键Cmd + Tab切换到原型模式。
• 在您的第一个画板中选择重复网格。 带有箭头的连接器将出现在对象右侧的中点处。
• 将此连接器拖动到下一个画板。 在弹出窗口中选择您的过渡选项，然后按 Escape 或单击外部以将其关闭。
• 通过按下应用程序框架右上角的“播放”按钮或使用键盘快捷键Cmd + Enter进行预览。 单击重复网格上的任意位置以播放交互。

我们在这一点上所做的是将整个对象（包括它的填充）作为交互的命中点。

选项 2：连接重复网格的单个元素以进行交互

• 使用键盘快捷键Cmd + Z撤消最后一条线。
• Cmd 单击重复网格中的矩形以直接选择它。
• 拖动矩形右侧的连接器并将其拖动到第二个画板上。 像以前一样在弹出窗口中选择您的转换选项，然后将其关闭。
• 如果您的预览窗口仍未打开，请再次启动它并单击目标。

此时，我们只有一个元素，但如果我们想选择整个单元格会发生什么？ 我们可以在重复网格中创建一个组，以使其成为有效的命中点。

选项 3：在重复网格中创建一组元素并从该组创建交互。

• 使用键盘快捷键Cmd + Z撤消最后一条线。
• 通过单击选项卡或使用键盘快捷键Cmd + Tab切换回设计模式。
• Cmd + Click重复网格中的一个矩形以直接选择它。 按住 Shift 键单击它旁边的文本对象以将其添加到您的选择中。
• 使用上下文菜单选择或键盘快捷键Cmd + G对这两个对象进行分组。
• 切换回原型模式。 请注意，您的选择与在设计模式下的选择相同。
• 将连接器从组拖到第二个画板。 您现在已将整个组区域连接为交互的命中点。

您甚至可以通过将点击点设置为整个重复网格、其中的单个元素或在其中创建的组来创建交互。

而已！

我希望这个简短的教程可以帮助您探索重复网格的力量。 这个简单而强大的功能在测试版中非常流行，并且随着我们从用户那里获得更多反馈，它也在不断发展。 如果您有改进的想法，请在下面的评论部分中分享。

本文是 Adob​​e 赞助的 UX 设计系列的一部分。 新推出的 Experience Design 应用程序专为快速流畅的 UX 设计流程而设计，可创建交互式导航原型，以及测试和共享它们——所有这些都集中在一个地方。

您可以在 Behance 上查看使用 Adob​​e XD 创建的更多鼓舞人心的项目，还可以访问 Adob​​e XD 博客以随时了解最新信息。 Adobe XD 经常更新新功能，并且由于它处于公共 Beta 版，您可以免费下载和测试它。