创建重复元素

XD

XD

打开应用程序
  1. Adobe XD 用户指南
  2. 简介
    1. Adobe XD 的新增功能
    2. 常见问题
    3. 利用 Adobe XD 进行设计、原型创建和共享
    4. 颜色管理
    5. 系统要求
      1. 硬件和软件要求
      2. Adobe XD、Big Sur 和 Apple Silicon | macOS 11
    6. 工作区基础知识
    7. 在 Adobe XD 中更改应用程序语言
    8. 访问 UI 设计套件
    9. Adobe XD 中的辅助功能
    10. 键盘快捷键
    11. 提示和技巧
  3. 设计
    1. 画板、参考线和图层
      1. 开始使用画板
      2. 使用参考线和网格
      3. 创建可滚动画板
      4. 使用图层
      5. 创建滚动组
    2. 形状、对象和路径
      1. 选择对象、调整对象的大小和旋转对象
      2. 移动、对齐、分布和排列对象
      3. 为对象分组、锁定、重复、复制和翻转对象
      4. 为对象设置描边、填充和投影
      5. 创建重复元素
      6. 使用 3D 变换创建透视设计
      7. 使用布尔运算编辑对象
    3. 文本和字体
      1. 使用绘图和文本工具
      2. Adobe XD 中的字体
    4. 组件和状态
      1. 使用组件
      2. 使用嵌套组件
      3. 向组件添加多个状态
    5. 蒙版和效果
      1. 创建一个形状蒙版
      2. 使用模糊效果
      3. 创建和修改渐变
      4. 应用混合效果
    6. 版面
      1. 响应式调整大小和约束
      2. 为组件和组设置固定的内边距
      3. 使用堆叠创建动态设计
    7. 视频和 Lottie 动画
      1. 使用视频
      2. 使用视频创建原型
      3. 使用 Lottie 动画
  4. 原型
    1. 创建交互式原型
    2. 制作原型动画
    3. 自动制作动画支持的对象属性
    4. 使用键盘和游戏手柄创建原型
    5. 使用语音命令和播放创建原型
    6. 创建定时过渡
    7. 添加叠加
    8. 设计语音原型
    9. 创建锚点链接
    10. 创建超链接
    11. 预览设计和原型
  5. 共享、导出和审阅
    1. 共享选定的画板
    2. 共享设计和原型
    3. 为链接设置访问权限
    4. 使用原型
    5. 审阅原型
    6. 使用设计规范
    7. 共享设计规范
    8. 检查设计规范
    9. 设计规范导航
    10. 审查和评论设计规范
    11. 导出设计资源
    12. 导出和下载设计规范中的资源
    13. 企业版的组共享
    14. 备份或转移 XD 资产
  6. 设计系统
    1. 带 Creative Cloud Libraries 的设计系统
    2. 在 Adobe XD 中使用文档资源
    3. 在 Adobe XD 中使用 Creative Cloud Libraries
    4. 从链接资源迁移到 Creative Cloud Libraries
    5. 使用设计令牌
    6. 使用 Creative Cloud Libraries 中的资源
  7. 云文档
    1. Adobe XD 中的云文档
    2. 协作与协同编辑设计
    3. 协同编辑与您共享的文档
  8. 集成和插件
    1. 使用外部资源
    2. 使用 Photoshop 中的设计资源
    3. 从 Photoshop 中复制和粘贴资源
    4. 导入或打开 Photoshop 设计
    5. 在 Adobe XD 中使用 Illustrator 资源
    6. 打开或导入 Illustrator 设计
    7. 将矢量从 Illustrator 复制到 XD
    8. 用于 Adobe XD 的插件
    9. 创建和管理插件
    10. XD 的 Jira 集成
    11. XD 的 Slack 插件
    12. XD 的 Zoom 插件
    13. 将设计从 XD 发布到 Behance
  9. iOS 和 Android 版 XD
    1. 在移动设备上预览
    2. 适用于移动设备的 Adobe XD 常见问题解答
  10. 故障排除
    1. 已知问题和已修复问题
      1. 已知问题
      2. 已修复的问题
    2. 安装和更新
      1. XD 似乎与 Windows 不兼容
      2. 错误代码 191
      3. 错误代码 183
      4. 安装 XD 插件时出现问题
      5. Windows 10 上提示卸载并重新安装 XD
      6. 迁移首选项有问题
    3. 启动和崩溃
      1. XD 在 Windows 10 上启动时崩溃
      2. XD 在您注销 Creative Cloud 时退出
      3. Windows 上订阅状态相关问题
      4. 在 Windows 上启动 XD 时出现“应用程序被阻止”警告
      5. 在 Windows 中生成故障转储
      6. 崩溃日志收集和共享
    4. 云文档和 Creative Cloud Libraries
      1. XD 云文档相关问题
      2. 链接组件的问题
      3. 库和链接的问题
    5. 创建原型、发布和预览
      1. 无法在 macOS Catalina 上录制原型交互
      2. 工作流程发布相关问题
      3. 浏览器中未显示发布的链接
      4. 浏览器中的原型呈现不正确
      5. 共享链接上意外出现评论面板
      6. 无法发布库
    6. 导入、导出和使用其他应用程序
      1. 在 XD 中导入和导出
      2. XD 中的 Photoshop 文件
      3. XD 中的 Illustrator 文件
      4. 从 XD 导出到 After Effects
      5. XD 中的 Sketch 文件
      6. 第三方应用程序在导出中不可见

了解如何使用重复网格在 Adobe XD 中创建重复元素。

在针对 Web 或移动应用程序进行设计时，通常需要定义重复元素或内容列表。但是，创建这些元素或在发生设计更改时进行更新可能很耗时。

重复网格功能将一组元素更改为一个重复元素。您只需按任意方向拉元素，网格就会重复。在修改某个元素的任何样式时，将在网格的所有元素中复制此更改。例如，如果更改某个元素中的图像大小，则将自动调整网格中所有图像的大小。

如果网格中有一个文本元素，则仅复制该文本元素的样式，而不复制内容。因此，您可以快速设置文本元素的样式，同时保持网格元素中的内容不同。

可以通过将文本文件拖到重复网格中来替换该网格中的占位符文本。

创建重复网格

重复网格的核心是一种特殊类型的组。可以通过选择一个对象或一组对象并将其转换为重复网格来创建重复网格。

  1. 设计要重复的基本元素 — 例如，图像缩略图和文本的组合。

  2. 选择要重复的元素。

  3. 通过单击“属性检查器”中的按钮或使用键盘快捷键 Cmd + R (Mac) 或 Ctrl + R (Windows)，将所选对象转换为重复网格。

    元素边界上将显示较大句柄。

    用于重复一个元素或一组元素的句柄
    用于重复一个元素或一组元素的句柄

  4. 如需重复垂直网格中的元素，请拖动元素底部的句柄。如需重复水平网格中的元素，请拖动元素右侧的句柄。

    垂直重复网格

    水平重复网格

  5. 如需在网格中选择要编辑的元素，请双击网格。

如需取消网格元素的编组并单独处理它们，请选择网格，然后单击“属性检查器”中的“取消网格编组”。

可以通过在组内双击来访问重复网格的组件元素。

完成更改后，按 Esc 退出编辑上下文。

注意:

还可以通过向下钻取至“层”面板中的组件元素或直接选择组件元素来访问该元素。

调整重复网格中两个元素之间的空白区域

如需调整网格中两个元素之间的空白区域，请将鼠标悬停在元素之间的间隙上。当光标变为双箭头时，可拖动来增加或减少空白区域。

具有重复元素的垂直网格
具有重复元素的垂直网格

处理重复网格中的文本

可以通过多种方式在重复网格中使用文本。可以更新重复网格中文本对象的各个实例，也可以选择将预先填充的 .txt 文档拖至重复网格中，并让文本文件的内容自动填充重复网格中的文本对象。 

更新重复网格中的各个文本元素

  1. Cmd + 单击 (Mac) 或 Ctrl + 单击 (Windows) 重复网格中的文本对象可将其选中。 

  2. 如需编辑文本元素，请双击它并更改文本。

注意:

对内容的更改不会应用于重复网格中的其他文本对象。但是，应用于文本对象的任何样式都将应用于所有文本对象。

将用回车分隔的文本文件拖至重复网格中的文本对象

可以通过将文本文件拖到重复网格中来替换该网格中的占位符文本。

  1. 创建一个扩展名为 .txt 的文本文件。可以使用 Mac 的 TextEdit 或 Windows 的记事本（另存为 .txt）或任何其他文本编辑器来创建此文件。确保编码设置为 UTF-8。用回车将每行数据分隔开。 

  2. 将文本文件拖动到重复网格上。

    将文本文件拖动到重复网格中的对象上
    将文本文件拖动到重复网格中的对象上 — 待更新

    按文本在文本文件中的相同顺序填充重复网格。如果网格数多于文件中的文本行数，则该顺序将重复。

处理重复网格中的图像

对于图像，可以构建重复的对象模式，其中按定义的模式重复对象的图像填充。

可以选择通过将图像逐一拖入对象中来创建图像填充模式，也可以选择多个图像，然后将它们拖至重复网格上的对象。

将图像文件拖动到重复网格中的对象上
将图像文件拖动到重复网格中的对象上 — 待更新

替换重复网格中的图像

如需替换网格中的图像，请打开 Finder 或文件资源管理器，然后导航到项目图像的存储位置。选择要在网格中显示的所有图像，并将它们拖放至重复网格中的目标对象上。

旧图像将被替换为自动调整大小的新图像。

从重复网格中创建交互

可以通过以下不同的方式将重复网格连接到原型模式中的其他画板：

连接整个重复网格以实施单个交互

  1. 在设计模式中，使用“画板”工具 (A) 在文件中创建第二个画板。

  2. 通过单击“原型”选项卡或使用 Ctrl + Tab 键盘快捷键来切换到原型模式。

  3. 选择第一个画板中的重复网格。对象右侧的中点将出现带箭头的连接器。

  4. 将连接器拖至下一个画板。在弹出窗口中选择过渡选项，然后按 Esc 键或在弹出窗口外部单击以忽略它。

  5. 通过按应用程序框架右上角的“播放”按钮或通过使用键盘快捷键 Cmd + Enter (Mac) 或 Ctrl + Enter (Windows) 来进行预览。单击重复网格上的任意位置可播放交互。

连接重复网格的单个元素以实施交互

  1. 选择重复网格内的对象。

  2. 拖动矩形右侧的连接器并将它拖至要链接的画板上。在弹出窗口中选择过渡选项，然后按 Esc 键或在弹出窗口外部单击以忽略它。

  3. 通过按应用程序框架右上角的“播放”按钮或通过使用键盘快捷键 Cmd + Enter（在 Mac 上）或 Ctrl + Enter（在 Windows 上）来进行预览。单击对象以验证交互。

在重复网格内创建一组元素，并从该组创建交互

还可以在重复网格内创建一组对象，然后从该组创建交互。

  1. 在重复网格中选择一个对象，然后在按住 Shift 键的同时单击其他对象可将它添加到选择中。

  2. 选择对象后，右键单击，然后从上下文菜单中选择“编组”。还可以使用键盘快捷键 Cmd + G (Mac) 或 Ctrl + G (Windows) 为对象编组。

  3. 切换到原型模式。将连接器从组拖至要链接的画板。

  4. 通过按应用程序框架右上角的“播放”按钮或通过使用键盘快捷键 Cmd + Enter（在 Mac 上）或 Ctrl + Enter（在 Windows 上）来进行预览。单击组以验证交互。

使用重复网格导入内容

下面是一个示例视频，用于让您开始使用重复网格。 

更多此类内容

更快、更轻松地获得帮助

新用户？

快速链接

查看您的所有计划 管理您的计划
查看快速链接
隐藏快速链接

法律声明    |    在线隐私政策

Copyright © 2024 Adobe。保留所有权利。