即时设计教程 • 网格布局

添加网格布局,可以更好地帮你统一文件中图层间距、位置,让你更有逻辑地阐述设计细节。

设计过程中设定好布局模板后,可以直接复用,提高效率,并且在评审时能让你的设计看起来更规范、更具合理性。 

 

添加网格布局

画板、引用组件、实例组件都支持单独添加网格布局。

选择图层后,在右侧属性面板的网格布局中点击「添加」按钮,添加网格与纵横向的布局样式。
需要应用的布局样式直接勾选,即可对选中图层生效。

 

编辑网格布局属性

网格布局有三种类型可以选择:纵向布局、横向布局、网格。

纵向布局、横向布局

纵向布局、横向布局是设计响应式界面时的理想选择,支持列宽(行高)、列数(行数)、间距、边距、颜色设置。

选择添加网格布局的组件后,选择右侧属性面板中纵向布局、横向布局图标,进行编辑。




网格
在设计图标等内容时,你可以选择使用网格帮你进行位置校正、统一等,网格支持大小、颜色设置。
选择添加网格布局的组件后,选择右侧属性面板中网格图标,进行编辑。

网格大小的单位为 px 。


 

隐藏网格布局

如果你在文件内容中添加了网格布局属性,但在审阅时,又不想因此影响整体效果,此时你可以选择「显示设置 -> 网格布局」
或直接使用快捷键G关闭网格布局显示,审阅完毕继续进行设计时,再次选择即可开启显示网格布局。

Tips
开启/关闭网格布局显示是对文件中所有网格布局内容整体生效。

删除网格布局
在右侧属性面板的网格布局处选择「删除」,可将画板内的布局清除。

删除后再次进行添加时,添加为默认内容。