即时设计教程 • 画板

画板在设计中,通常用于表示应用程序、网站的屏幕等。如在设计响应式网页时,你可能会设置多个不同尺寸的画板,每个画板作为一个单独的「屏幕」使用。

「即时设计」中画板的概念不同与其他工具,除了支持添加布局网格、响应式调整等内容外,画板可以像普通组件一样添加渐变填充、描边、阴影等属性,还可支持在一个画板内创建另一个画板。

新手创建引导

首次进入空白文件时,画布内将显示创建内容的引导提示,可以选择任意已有尺寸点击创建,也可以通过输入 WH 值创建自定义画板大小。



 

创建画板

通常情况下,在组件工具栏点击「画板」图标或使用快捷键AF后,可以直接在属性面板处选择画板尺寸进行创建,也可以在画布处点击、拖拽进行创建。



 

移动画板

可以点击「画板名称」选中画板并拖拽将其移动;空白画板可直接点击选中并移动。
也可以在图层目录选中画板层,直接在右侧属性面板修改 X 与 Y 值,快速改变画板的绝对位置。


 

编辑画板

修改画板尺寸

你可以在选中画板后,使用以下任意一种方法修改画板尺寸:

  • 在画布编辑区,「直接拖拽画板边框」修改大小;
  • 在属性面板中,「输入尺寸」进行修改;
  • 在属性面板中展开画板尺寸面板,「选择画板尺寸」进行修改。


 

若画板内有内容时,你还可以设置「响应式调整」,在设置画板大小时,同时修改内容大小。

 

横/竖屏切换

选中画板后,在属性面板中选择「横屏」、「竖屏」,可以快速切换横/竖屏效果。

Tips
切换后不会对画板内容带来任何影响。


 

尺寸适配

「尺寸适配」功能可以自动调整画板大小,适应画板内容。


 

剪裁

当画板中有内容超出画板时,你可以选择开启、关闭「剪裁内容」,对超出内容进行隐藏、显示。

 

网格布局

画板支持添加网格布局内容。添加网格布局可以更好地帮你统一文件中图层间距、位置等,让你的设计更精确、规范。
 

画板嵌套

我们的画板是支持相互嵌套的。如果在设计过程中,你想统一查看设计稿在预览页的效果,可以将所有画板放入一个整体的画板中,进行预览。



 

删除画板

删除画板与删除其他图层的方法一致,选中画板后使用快捷键即可将画板删除。

Tips
删除画板后,画板中的所有图层会被同时删除。