如果您有问题要问或要分享想法,欢迎加入 Adobe XD 社区。我们很乐意倾听您的心声并欣赏您的创意作品。
- Adobe XD 用户指南
- 简介
- 设计
- 画板、参考线和图层
- 形状、对象和路径
- 文本和字体
- 组件和状态
- 蒙版和效果
- 版面
- 视频和 Lottie 动画
- 原型
- 共享、导出和审阅
- 设计系统
- 云文档
- 集成和插件
- iOS 和 Android 版 XD
- 故障排除
- 已知问题和已修复问题
- 安装和更新
- 启动和崩溃
- 云文档和 Creative Cloud Libraries
- 创建原型、发布和预览
- 导入、导出和使用其他应用程序
是否正在查找有关使用参考线和网格对齐设计资源的信息?您来对地方了!
你好,我是 Jeanee!我是在 XD 中处理具有多个画板和对象的 UX 设计项目的首席视觉设计师。
- 她正在寻找资源以使用参考线快速布置和定位对象。
- 她需要关于使用网格在设计项目中对齐和定义对象结构方面的帮助。
这听起来很熟悉吗?如果您面临此类挑战,请继续阅读,了解如何在画板内创建和使用参考线和网格。
继续操作之前
创建和管理参考线
在设计画布上布置画板后,会向画板左上部添加一个区域,以允许您拖出参考线。您可以快速与水平和垂直中心对齐,将它们复制并粘贴到多个画板中、删除它们,并切换其可见性。
请继续阅读,了解如何创建和管理参考线。
创建参考线
是否要在画板中从上到下对齐和放置对象?请使用垂直参考线。如果要从左到右对齐和放置对象,请使用水平参考线。
垂直参考线
要创建垂直参考线,请将指针悬停在画板的左边框上,直到显示 图标为止。单击并按住此图标,然后将其拖到所需位置。
水平参考线
要创建水平参考线,请将鼠标悬停在画板的顶部边框上,直到显示 图标为止。拖放到所需位置。
复制和粘贴参考线
现在,您已创建了参考线,可以使用“复制/粘贴参考线”选项快速复制参考线。
复制参考线
要从画板复制参考线,请选择画板,单击“视图”>“参考线”>“复制参考线”。
粘贴参考线
要粘贴复制的参考线,请单击“视图”,或右键单击画板 >“参考线”>“粘贴参考线”。
删除参考线
您可以选择同时删除一个或多个参考线。
要删除参考线,请单击参考线并将其拖出画板。
要删除画板上的多条参考线,请选择画板,然后单击“视图”选项,或右键单击画板。选择“参考线” > “清除参考线”。
隐藏和锁定参考线
是否要临时隐藏参考线并在需要时打开它们?使用“隐藏所有参考线”选项。
您还可以选择锁定所有画板中的参考线,防止它们被意外移动或调整。
要在 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。
- 要恢复为默认的方形或布局网格外观,请在“属性检查器”的“网格”部分中单击“使用默认值”选项。
接下来学什么?
我们已向您介绍如何使用参考线和网格在画板中定位和对齐对象。进一步了解如何使用重复网格创建包含可重复元素的对象。
有疑问或想法?