用户指南 取消(C)

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

  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 可以在带状态的组或组件上设置固定的内边距值,并且在对内容进行更改时自动缩放背景

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

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

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

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

使用内边距

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

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

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

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

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

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

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

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

想要修改内边距值?

使用以下任一选项:

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

示例

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

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

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

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

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

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

注意事项

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

限制

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

示例和样本文件

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

1
示例文件

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

了解详情

观看时长:7 分钟。

接下来学什么?

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

有疑问或想法?

询问社区

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

更快、更轻松地获得帮助

新用户?