用户指南 取消(C)

为组件和组设置固定的内边距

了解如何使用固定的内边距轻松地创建内容感知布局,例如按钮、下拉菜单、工具提示或模式对话框。

通过 Adobe XD 可以在带状态的组或组件上设置固定的内边距值,并且在对内容进行更改时自动缩放背景

这样可以减少在创建按钮、下拉菜单、工具提示或模式对话框时所产生的设计摩擦和认知负担。

1
使用内边距创建内容感知布局

响应式调整大小是在调整整个组的大小时作出行为,而内边距是在更改组中的内容时作出行为。

无需再手动调整大小,尽情享受更大的灵活性和更快的工作流程吧!

使用内边距

内边距是视觉背景与已拉伸背景所标识的每个边上的内容边缘之间的距离。 

XD 在以下情况下会自动识别背景:

  • 任何形状、组或布尔组放置在组或组件图层的最低位置,并且
  • 有其他元素重叠最低图层。 
内边距
所有方向的内边距值相同

通过内边距精确控制对象的背景大小,请执行以下步骤:

  1. “属性检查器”中,切换以启用内边距按钮。
  2. 根据您的设计需求,设置“所有方向的内边距相同”“每个方向的内边距不同”的值。
1
每个方向的内边距值不同

仅在图层结构的背景元素置于组中的最后位置并且与其他对象重叠时,您才能查看“内边距”选项。

在移动组或组件中的内容或调整其大小时,XD 将识别背景,计算内边距值,然后在“属性检查器”中更新这些值。

更新后的值保留在组或组件中,并且背景将自动调整大小。当组或组件没有视觉背景时,将内边距值设置为 0。

想要修改内边距值?

使用以下任一选项:

  • “属性检查器”中更新现有的内边距值。
  • 要调整内边距大小,请按 ` 键,将鼠标悬停在内边距区域上方并拖动。
  • 要更新组或组件上的内边距值,请手动调整画布上的背景大小或移动背景。
  • 要编辑所有内边距值,请选择 Shift + `。
  • 要编辑对立的内边距值,请选择 ` + Alt。

示例

增加内边距值时,XD 创建一个不可见的内边距,后者在原型设计过程中充当徽标周围或更大按钮点击区域中的安全空间。

  • 是否要更改按钮的标签?键入下一个文本,按钮将调整大小。
  • 是否要在下拉列表中添加更多行?使用重复网格在组内创建更多行,并要注意,背景将与重复网格一起调整大小。
重复网格和内边距
将重复网格与内边距结合使用

具有状态的组件中的内边距

组件从其主组件继承内边距行为。这意味着将在各实例或状态之间同步在主组件上设置的内边距值。

在执行以下操作时发生内边距替代:

  • 更改组件实例上和主组件中的内边距值或
  • 实例不更新其内边距值。

注意事项

  • 启用内边距时:
    • 组件和状态的所有实例自动继承在主组件或默认状态上设置的属性,而不提供在本地替代的选项。
    • 画布中的“置为底层”选项将组或组件中的任何项目直接放在组背景上方。
  • 如果背景是布尔组、蒙板或组件,则将应用响应式调整大小规则来调整对象的大小。
  • 如果删除背景,则 XD 评估该组并自动将下一个潜在图层提升为背景并更新内边距值。如果没有背景图层,则将内边距值重置为 0。

限制

  • 组件和点文本不能用作组或组件的背景。
  • 在设计内容中使用“悬停”“点击”状态时,内边距在“原型”模式下没有动画效果。

示例和样本文件

是否要更改按钮的标签以免标签溢出按钮外?

1
示例文件

  1. 下载样本按钮文件并在 XD 中打开它。
  2. 选择对象及其背景。
  3. 要控制按钮内的背景和内容,请在“属性检查器”中启用“内边距”
  4. 根据您的设计需求,选择并应用任何内边距选项。

了解详情

接下来学什么?

您已经了解如何开始使用内边距。您可以进一步学习如何创建交互式设计或原型,并与用户、开发人员和其他设计人员等利益相关者分享设计或原型

有疑问或想法?

询问社区

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

更快、更轻松地获得帮助

新用户?