用户指南 取消(C)

使用堆叠创建动态设计

  1. Adobe XD 用户指南
  2. 简介
    1. Adobe XD 的新增功能
    2. 常见问题
    3. 利用 Adobe XD 进行设计、原型创建和共享
    4. 系统要求
      1. 硬件和软件要求
      2. Adobe XD、Big Sur 和 Apple Silicon | macOS 11
    5. 工作区基础知识
    6. 在 Adobe XD 中更改应用程序语言
    7. 访问 UI 设计套件
    8. Adobe XD 中的辅助功能
    9. 键盘快捷键
    10. 提示和技巧
    11. Adobe XD 订阅选项
    12. XD 入门计划的更改
  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. 企业版的组共享
  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 中的堆叠创建可对内容更改做出响应的动态布局。

Adobe XD 中的堆叠使组中的对象能够定义它们之间的固定空间。您在堆叠中调整对象的大小、对其重新排序或修改对象时,XD 会自动保留对象之间已定义的空间。 

堆叠的工作原理

堆叠与填充和响应式调整大小相结合,可成为功能强大的组合,在设计中加强控制并提升速度。堆叠可轻松地应用于组件,并对按钮、菜单、下拉列表和基于卡片的布局进行自动布局和编辑。

初次使用 XD?

安装 XD

了解应用程序基础知识

曾经用过 XD?

更新应用程序

查看新增功能

继续操作之前

确保您熟悉内容识别布局的基础知识:

限制

在开始使用堆叠之前,请了解以下限制:

  • 如果您将鼠标悬停在处于悬停状态且不断扩大的元素上,背景不会调整大小以适应新状态且堆叠中的元素不会被推开。
  • 组件不能充当填充和堆叠的背景。而应创建一个同时包含内容和背景的组件。
  • 您不能:
    • 将特殊组转换为蒙版或将布尔组转换为堆叠。
    • 按堆叠方向调整堆叠大小。
    • 选择堆叠元素和堆叠外的元素。

启用堆叠

您可以在启用了响应式调整大小的组或组件上启用堆叠。在属性检查器响应式调整大小控件中,选中堆叠
复选框。

XD 会根据组或组件的结构自动确定堆叠方向。但是,如果要更改堆叠方向,请在“属性检查器”“堆叠”选项中选择“垂直”“水平”。 

使用组件时,仅主组件提供“堆叠方向”控件。

启用堆叠时会发生什么情况?

启用堆叠时,XD 将执行以下操作:

  • 自动识别背景(“图层”面板中位于底部的组或形状,与组中的所有对象在画布上重叠);
  • 启用和计算填充值;
  • 确定堆叠方向:“垂直”“水平”
  • 对重叠的元素进行分组以保留布局;并
  • 定义和固定元素之间的间距值。
应用堆叠

编辑堆叠元素

创建堆叠元素后,请使用以下“任意”选项对其进行编辑:

移动元素或使用“对齐”选项                                                     调整堆叠中对象和文本的大小

对齐堆叠

自由移动元素或在与堆叠方向相反的堆叠元素上使用“对齐”工具。

调整大小

选择要调整大小的对象,堆叠中的其他对象会自动移动以保留对象间的相对间距。使用自动调整高度文本可动态调整堆叠中文本的高度,而不改变其宽度。

编辑对象之间的间距                                                                   调整堆叠中的间距

编辑对象之间的间距

选择堆叠组或组件中的对象,并将鼠标悬停在空格上。粉红色突出显示表示堆叠中对象之间的间距。单击并拖动突出显示部分即可编辑对象之间的间距。

调整堆叠之间的间距

选择整个堆叠并按住键盘上的 S 键可调整堆叠中的间距。您还可以使用 S 编辑填充。

使堆叠中的间距一致                                                                        复制堆叠中的元素

拖动并使用 Shift 或 Shift + S(当您要选择的元素在堆叠外部时)。

使用 Cmd+D 复制堆叠中的元素并将其放在选定元素下。

对堆叠元素重新排序

创建和修改堆叠元素后,请使用以下“任意”选项对其进行重新排序:

  • 选择堆叠元素,并在画布上沿着堆叠方向拖动它们。
  • 使用 Cmd+] 和 Cmd+[ 在堆叠中上下移动,使用 Cmd+Shift+] 和 Cmd+Shift+[ 将选中的元素移到堆叠中的第一个或最后一个。上下文(右键单击)菜单中也提供这些命令。
  • 堆叠元素的新位置用粉红色框突出显示。要在重新排序时保持对齐,需按住 Shift 键将堆叠元素锁定在拖动方向上,并保留其原始对齐方式。
对堆叠元素重新排序

创建或修改堆叠背景

创建堆叠时,XD 会自动确定背景。但是,当您在组或组件上启用堆叠时,位于堆叠中最低位置且与其内容重叠的图层或组将成为其背景。

XD 不支持组件实例作为背景。

要创建和修改堆叠背景,请执行以下步骤:

create_modify_stack_baground

  1. 在堆叠中创建一个形状或组,充当堆叠背景。您还可以在堆叠外部创建背景并将其复制到堆叠组中。
  2. 从堆叠中,选择要用作背景的元素。
  3. 右键单击并选择“设为背景”“替换背景”。所选元素将移动到堆叠的最后一个位置,并将调整大小以适合堆叠和填充值的大小。

对堆叠元素进行更多操作

您已经学习了如何创建和使用堆叠,以下内容将进一步介绍如何使用堆叠:

嵌套并重新排列堆叠

当相互嵌套堆叠时(例如,将水平堆叠嵌入垂直堆叠中),您可以实现良好定义且易于编辑的布局。您可以嵌套不限数量的堆叠。观看动画演示,了解嵌套堆叠的工作原理。 

堆叠和重复网格

组件和状态中的堆叠

您可以在组件中应用堆叠和填充,以在设计系统的上下文中定义可重用的 UI 元素。使用需要标签或行更新的组件时,堆叠的使用会使组件的布局对更改做出响应并自动执行手动布局工作。例如,如果有多个有内容覆盖的堆叠,则您可以使用堆叠对空间进行全局编辑和管理。无需再手动编辑每张信息卡!

应用于主组件的堆叠将自动应用于其所有实例和状态。您还可以创建包含堆叠的链接组件并对其进行编辑。 

覆盖在堆叠中的如何表现?

  • 当您在实例或状态中手动编辑堆叠的两个元素之间的空间时,会出现空间覆盖。如果修改主组件中的空间,则更改不会应用于实例或状态。
  • 实例可以在元素上具有内容或布局覆盖,如较大区域的文本。这些实例仍然可以与主实例之间的填充值或空格同步。 
覆盖在堆叠中的表现

了解详情

“结合内边距和响应式调整大小,当您在设计系统内操作时,可实现强大的功能组合。在主组件上使用堆叠时,该组件的任何实例都需符合相关堆叠结构。”— XD 首席产品经理 Dani Beaumont 表示。

如需详细了解如何在组件和组中使用堆叠,请观看此视频。

观看时长:1 分钟。

接下来学什么?

您已经了解如何使用堆叠定义元素之间的空间。您可以进一步学习如何创建交互式原型,并与设计人员或利益相关者共享这些原型,以获取相关反馈。

有疑问或想法?

询问社区

有问题要问或要分享想法?欢迎加入 Adobe XD 社区。我们很乐意倾听您的心声并欣赏您的创意作品!

Adobe 徽标

登录到您的帐户