用户指南 取消(C)

使用 XD 中的参考线和网格

搜索
  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. 第三方应用程序在导出中不可见

是否正在查找有关使用参考线和网格对齐设计资源的信息？您来对地方了！

进行设计时，可以使用参考线排列对象或管理画板上元素之间的间距。网格可用作一个框架，您可以在该框架上组织设计元素（图像、字形、段落）并确保布局的对称性。

什么是参考线？
XD 中的参考线

什么是网格？
XD 中的布局和方形网格

你好，我是 Jeanee！我是在 XD 中处理具有多个画板和对象的 UX 设计项目的首席视觉设计师。

 
  • 她正在寻找资源以使用参考线快速布置和定位对象。

 

  • 她需要关于使用网格在设计项目中对齐和定义对象结构方面的帮助。

这听起来很熟悉吗？如果您面临此类挑战，请继续阅读，了解如何在画板内创建和使用参考线和网格。

初次使用 Adobe XD？

获取免费试用版应用程序

了解应用程序基础知识.

自己动手尝试

示例文件

.xd；6 MB

继续操作之前

创建和管理参考线

在设计画布上布置画板后，会向画板左上部添加一个区域，以允许您拖出参考线。您可以快速与水平和垂直中心对齐，将它们复制并粘贴到多个画板中、删除它们，并切换其可见性。

请继续阅读，了解如何创建和管理参考线。

添加参考线

创建参考线

复制和粘贴参考线

复制和粘贴参考线

删除参考线

删除参考线

清除、隐藏和锁定参考线

隐藏和锁定参考线

创建参考线

是否要在画板中从上到下对齐和放置对象？请使用垂直参考线。如果要从左到右对齐和放置对象，请使用水平参考线。 

垂直参考线

在画板中添加参考线

要创建垂直参考线，请将指针悬停在画板的左边框上，直到显示 图标为止。单击并按住此图标，然后将其拖到所需位置。

水平参考线

在画板中添加参考线

要创建水平参考线，请将鼠标悬停在画板的顶部边框上，直到显示 图标为止。拖放到所需位置。

复制和粘贴参考线

现在，您已创建了参考线，可以使用“复制/粘贴参考线”选项快速复制参考线。

复制参考线

在画板中复制参考线

要从画板复制参考线，请选择画板，单击“视图”>“参考线”>“复制参考线”。

粘贴参考线

在画板中粘贴参考线

要粘贴复制的参考线，请单击“视图”，或右键单击画板 >“参考线”>“粘贴参考线”。

删除参考线

您可以选择同时删除一个或多个参考线。

要删除参考线，请单击参考线并将其拖出画板。

要删除画板上的多条参考线，请选择画板，然后单击“视图”选项，或右键单击画板。选择“参考线” > “清除参考线”。

清除添加到画板的参考线

隐藏和锁定参考线

是否要临时隐藏参考线并在需要时打开它们？使用“隐藏所有参考线”选项。

您还可以选择锁定所有画板中的参考线，防止它们被意外移动或调整。

要在 macOS 和 Windows 上隐藏和锁定参考线，请执行以下操作：

隐藏参考线

隐藏参考线

  • 单击顶部菜单栏中的“视图”>“隐藏所有参考线”选项。您还可以使用 Command+; 在 macOS 中隐藏参考线。
  • 右键单击画板，然后选择“参考线” > “隐藏所有参考线”。您还可以使用 Ctrl+; 在 Windows 中隐藏参考线。

锁定参考线

锁定画板中的所有参考线

  • 单击顶部菜单栏中的“视图” > “锁定所有参考线”选项。您还可以使用 Command+Shift+; 在 macOS 中锁定参考线。
  • 右键单击画板，然后选择“参考线”>“锁定所有”“参考线”。您还可以使用 Ctrl+Shift+; 在 Windows 中锁定参考线。

使用智能参考线对齐对象

现在，您已经学完了关于如何创建和管理参考线的基础知识，在创建或操作对象或画板时，您可以使用智能参考线临时对齐参考线。 

智能参考线

默认情况下，智能参考线处于启用状态。移动对象或画板时，智能参考线允许您通过对齐来相对于其他对象和/或画板对齐、编辑和变换对象或画板。

使用网格定位对象

现在，您了解了 XD 中参考线的基础知识，继续了解如何定义设计结构以及如何使用布局或方形网格在画板内对齐对象。 

要添加布局或方形网格，请选择一个或多个画板。导航到“属性检查器”中的“网格”部分，然后选择“布局”或“方形”。

布局网格

在布局网格内定位对象

布局网格是列网格，在对齐设计对象或针对不同屏幕大小进行设计时非常有用。您可以根据需要轻松地快速调整布局网格。

方形网格

定位方形网格

方形网格具有水平线和垂直线，用于在设计移动应用程序或图标时精确调整大小和对齐对象。

设置网格首选项

将布局和方形网格添加到画板后，您可以通过调整“属性检查器”“网格”部分中的首选项来个性化网格的显示选项。请继续阅读，了解如何更改网格的网格大小、列数、间隔属性和边距。

方形网格首选项

根据设计需求，您可以更改方形网格的网格大小。

更改方形网格大小

网格大小是方形网格中网格线之间的距离。要编辑网格大小值，请在“属性检查器”的“方形大小”字段中输入所需数字。

布局网格首选项

对画板应用布局网格后，您可以利用“属性检查器”的“网格”部分设置列数、列宽、间隔属性和边距大小。

更改列数

更改布局网格中的列数

在“列”字段中输入值。对于 Web 设计，通常使用 12 或 16 列网格。

更改列宽和间隔属性

更改布局网格中的间隔属性

要更改列的宽度，请在“列宽度”字段中输入值。要定义自己的间隔宽度，请编辑默认的“间隔宽度”字段。

现在，您已修改了列数、间隔宽度和列宽，请了解如何调整画板的边距。边距是布局网格与画板边缘之间的距离。请继续阅读，了解如何调整所有边的边距。

更改链接的左边距或右边距

更改链接的左边距或右边距

要调整左边和右边的链接边距，请单击 图标并编辑值。

更改各边的边距

更改所有边的边距

要单独调整左边距、右边距、上边距和下边距，请单击 图标，然后输入值。

对网格进行更多操作

现在，您知道了如何为网格设置首选项，请继续阅读，了解如何添加网格颜色和控制网格的可见性。

添加颜色

添加颜色

显示或隐藏网格

隐藏和显示网格

添加颜色

是否要修改网格的外观？使用“属性检查器”中的拾色器添加和更改网格颜色。

向布局和方形网格添加颜色

A. 色域 B. 颜色滑块 C. 吸管 

对于方形网格，单击“方形大小”旁边的框，对于布局网格，则单击“列”旁边的框。

在拾色器中，您可以：

  • 使用色域和颜色滑块调整颜色。
  • 使用滴管工具从画板中选择颜色。
  • 使用颜色滑块或通过输入一个百分比值来设置填充的不透明度。如果将值设置为 0，布局网格会切换为概要视图。

隐藏和显示网格

您可以使用“隐藏布局/方形网格或显示布局/方形网格”选项控制布局和方形网格的可见性。

隐藏布局网格

显示或隐藏布局网格

  • 选择“视图”>“隐藏布局网格”。您还可以使用 Command+Shift+' 在 macOS 中隐藏布局网格。
  • 在“属性检查器”中，从“网格”下拉列表中选择网格类型，并选中下拉列表旁边的复选框。您还可以使用 Ctrl+Shift+" 在 Windows 中隐藏布局网格。

显示方形网格

显示或隐藏方形网格

  • 选择“视图”>“显示方形网格”。您还可以使用 Command+' 在 macOS 中显示方形网格。
  • 在“属性检查器”中，从“网格”下拉列表中选择网格类型，并选中下拉列表旁边的复选框。您还可以使用 Ctrl+" 在 Windows 中显示方形网格。

视频：如何添加参考线和布局网格？

资深 XD 宣讲师 Howard Pinksy说：“在进行设计项目时，请布置参考线以更好地帮助您排列对象或确保元素间隔正确”。

提示和技巧

  • 要将对象与布局或方形网格对齐，请将对象拖向网格，直到对象的边缘之一位于网格的对齐区域内。
  • 参考线会与画布上的选定对象或顶级对象对齐。要禁用对齐行为，可按 ⌘（在 macOS 上）或 Ctrl（在 Windows 上）。
  • 要在画布上以 10 px 为增量定位参考线，请按 Shift。
  • 要恢复为默认的方形或布局网格外观，请在“属性检查器”的“网格”部分中单击“使用默认值”选项。

接下来学什么？

我们已向您介绍如何使用参考线和网格在画板中定位和对齐对象。进一步了解如何使用重复网格创建包含可重复元素的对象。

有疑问或想法？

询问社区

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

Adobe 徽标

登录到您的帐户

快速链接

查看您的所有计划 管理您的计划

法律声明    |    在线隐私政策