如果您有问题要问或要分享想法,欢迎加入 Adobe XD 社区。我们很乐意倾听您的心声并欣赏您的创意作品。
是否正在查找有关使用参考线和网格对齐设计资源的信息?您来对地方了!
进行设计时,可以使用参考线排列对象或管理画板上元素之间的间距。网格可用作一个框架,您可以在该框架上组织设计元素(图像、字形、段落)并确保布局的对称性。
你好,我是 Jeanee!我是在 XD 中处理具有多个画板和对象的 UX 设计项目的首席视觉设计师。
这听起来很熟悉吗?如果您面临此类挑战,请继续阅读,了解如何在画板内创建和使用参考线和网格。
初次使用 Adobe XD?
在设计画布上布置画板后,会向画板左上部添加一个区域,以允许您拖出参考线。您可以快速与水平和垂直中心对齐,将它们复制并粘贴到多个画板中、删除它们,并切换其可见性。
请继续阅读,了解如何创建和管理参考线。
是否要在画板中从上到下对齐和放置对象?请使用垂直参考线。如果要从左到右对齐和放置对象,请使用水平参考线。
垂直参考线
要创建垂直参考线,请将指针悬停在画板的左边框上,直到显示 图标为止。单击并按住此图标,然后将其拖到所需位置。
水平参考线
要创建水平参考线,请将鼠标悬停在画板的顶部边框上,直到显示 图标为止。拖放到所需位置。
现在,您已创建了参考线,可以使用“复制/粘贴参考线”选项快速复制参考线。
复制参考线
要从画板复制参考线,请选择画板,单击“视图”>“参考线”>“复制参考线”。
粘贴参考线
要粘贴复制的参考线,请单击“视图”,或右键单击画板 >“参考线”>“粘贴参考线”。
您可以选择同时删除一个或多个参考线。
要删除参考线,请单击参考线并将其拖出画板。
要删除画板上的多条参考线,请选择画板,然后单击“视图”选项,或右键单击画板。选择“参考线” > “清除参考线”。
是否要临时隐藏参考线并在需要时打开它们?使用“隐藏所有参考线”选项。
您还可以选择锁定所有画板中的参考线,防止它们被意外移动或调整。
要在 macOS 和 Windows 上隐藏和锁定参考线,请执行以下操作:
隐藏参考线
锁定参考线
现在,您已经学完了关于如何创建和管理参考线的基础知识,在创建或操作对象或画板时,您可以使用智能参考线临时对齐参考线。
默认情况下,智能参考线处于启用状态。移动对象或画板时,智能参考线允许您通过对齐来相对于其他对象和/或画板对齐、编辑和变换对象或画板。
现在,您了解了 XD 中参考线的基础知识,继续了解如何定义设计结构以及如何使用布局或方形网格在画板内对齐对象。
要添加布局或方形网格,请选择一个或多个画板。导航到“属性检查器”中的“网格”部分,然后选择“布局”或“方形”。
将布局和方形网格添加到画板后,您可以通过调整“属性检查器”“网格”部分中的首选项来个性化网格的显示选项。请继续阅读,了解如何更改网格的网格大小、列数、间隔属性和边距。
根据设计需求,您可以更改方形网格的网格大小。
网格大小是方形网格中网格线之间的距离。要编辑网格大小值,请在“属性检查器”的“方形大小”字段中输入所需数字。
对画板应用布局网格后,您可以利用“属性检查器”的“网格”部分设置列数、列宽、间隔属性和边距大小。
更改列数
在“列”字段中输入值。对于 Web 设计,通常使用 12 或 16 列网格。
更改列宽和间隔属性
要更改列的宽度,请在“列宽度”字段中输入值。要定义自己的间隔宽度,请编辑默认的“间隔宽度”字段。
现在,您已修改了列数、间隔宽度和列宽,请了解如何调整画板的边距。边距是布局网格与画板边缘之间的距离。请继续阅读,了解如何调整所有边的边距。
更改链接的左边距或右边距
要调整左边和右边的链接边距,请单击 图标并编辑值。
更改各边的边距
要单独调整左边距、右边距、上边距和下边距,请单击 图标,然后输入值。
现在,您知道了如何为网格设置首选项,请继续阅读,了解如何添加网格颜色和控制网格的可见性。
是否要修改网格的外观?使用“属性检查器”中的拾色器添加和更改网格颜色。
A. 色域 B. 颜色滑块 C. 吸管
对于方形网格,单击“方形大小”旁边的框,对于布局网格,则单击“列”旁边的框。
在拾色器中,您可以:
您可以使用“隐藏布局/方形网格或显示布局/方形网格”选项控制布局和方形网格的可见性。
隐藏布局网格
显示方形网格
资深 XD 宣讲师 Howard Pinksy说:“在进行设计项目时,请布置参考线以更好地帮助您排列对象或确保元素间隔正确”。
我们已向您介绍如何使用参考线和网格在画板中定位和对齐对象。进一步了解如何使用重复网格创建包含可重复元素的对象。
如果您有问题要问或要分享想法,欢迎加入 Adobe XD 社区。我们很乐意倾听您的心声并欣赏您的创意作品。
登录到您的帐户