有问题要问或要分享想法?欢迎加入 Adobe XD 社区。我们很乐意倾听您的心声并欣赏您的创意作品!
了解如何使用 Adobe XD 中的堆叠创建可对内容更改做出响应的动态布局。
Adobe XD 中的堆叠使组中的对象能够定义它们之间的固定空间。您在堆叠中调整对象的大小、对其重新排序或修改对象时,XD 会自动保留对象之间已定义的空间。
堆叠与填充和响应式调整大小相结合,可成为功能强大的组合,在设计中加强控制并提升速度。堆叠可轻松地应用于组件,并对按钮、菜单、下拉列表和基于卡片的布局进行自动布局和编辑。
确保您熟悉内容识别布局的基础知识:
在开始使用堆叠之前,请了解以下限制:
XD 会根据组或组件的结构自动确定堆叠方向。但是,如果要更改堆叠方向,请在“属性检查器”的“堆叠”选项中选择“垂直”或“水平”。
使用组件时,仅主组件提供“堆叠方向”控件。
启用堆叠时,XD 将执行以下操作:
创建堆叠元素后,请使用以下“任意”选项对其进行编辑:
移动元素或使用“对齐”选项 调整堆叠中对象和文本的大小
自由移动元素或在与堆叠方向相反的堆叠元素上使用“对齐”工具。
选择要调整大小的对象,堆叠中的其他对象会自动移动以保留对象间的相对间距。使用自动调整高度文本可动态调整堆叠中文本的高度,而不改变其宽度。
编辑对象之间的间距 调整堆叠中的间距
选择堆叠组或组件中的对象,并将鼠标悬停在空格上。粉红色突出显示表示堆叠中对象之间的间距。单击并拖动突出显示部分即可编辑对象之间的间距。
选择整个堆叠并按住键盘上的 S 键可调整堆叠中的间距。您还可以使用 S 编辑填充。
使堆叠中的间距一致 复制堆叠中的元素
拖动并使用 Shift 或 Shift + S(当您要选择的元素在堆叠外部时)。
使用 Cmd+D 复制堆叠中的元素并将其放在选定元素下。
创建和修改堆叠元素后,请使用以下“任意”选项对其进行重新排序:
创建堆叠时,XD 会自动确定背景。但是,当您在组或组件上启用堆叠时,位于堆叠中最低位置且与其内容重叠的图层或组将成为其背景。
XD 不支持组件实例作为背景。
要创建和修改堆叠背景,请执行以下步骤:
您已经学习了如何创建和使用堆叠,以下内容将进一步介绍如何使用堆叠:
当相互嵌套堆叠时(例如,将水平堆叠嵌入垂直堆叠中),您可以实现良好定义且易于编辑的布局。您可以嵌套不限数量的堆叠。观看动画演示,了解嵌套堆叠的工作原理。
您可以在组件中应用堆叠和填充,以在设计系统的上下文中定义可重用的 UI 元素。使用需要标签或行更新的组件时,堆叠的使用会使组件的布局对更改做出响应并自动执行手动布局工作。例如,如果有多个有内容覆盖的堆叠,则您可以使用堆叠对空间进行全局编辑和管理。无需再手动编辑每张信息卡!
应用于主组件的堆叠将自动应用于其所有实例和状态。您还可以创建包含堆叠的链接组件并对其进行编辑。
“结合内边距和响应式调整大小,当您在设计系统内操作时,可实现强大的功能组合。在主组件上使用堆叠时,该组件的任何实例都需符合相关堆叠结构。”— XD 首席产品经理 Dani Beaumont 表示。
如需详细了解如何在组件和组中使用堆叠,请观看此视频。
观看时长:1 分钟。
您已经了解如何使用堆叠定义元素之间的空间。您可以进一步学习如何创建交互式原型,并与设计人员或利益相关者共享这些原型,以获取相关反馈。
有问题要问或要分享想法?欢迎加入 Adobe XD 社区。我们很乐意倾听您的心声并欣赏您的创意作品!
登录到您的帐户