Sketch的页面-画板-组件/对象
我们做出来的页面以及其中包含的每个对象,都在图层栏中按照层级展示。
一级:页面,通过右上角的“加号”添加,双击重命名,右键“页面”来复制或删除。
![](https://img.haomeiwen.com/i10009023/16de3938168ca574.png)
![](https://img.haomeiwen.com/i10009023/3e48f7980821abe7.png)
注意:每个页面都是一个无边界的画布,一般会把注释和临时对象放在上面,界面内容还是最好呈现在画板中。
二级:画板,一个页面可以包含多个画板,可以点击置入,从菜单中选择画板,快捷键是A。
![](https://img.haomeiwen.com/i10009023/c6f3a65460573c53.png)
快捷键A,即可唤醒右边的载体列表面板,可以选择不同的载体以及对应的尺寸。
![](https://img.haomeiwen.com/i10009023/d1e5f74ebc95b66b.png)
如果列表中默认的尺寸都不能满足,可以点击列表最下方的【创建自定义尺寸】
![](https://img.haomeiwen.com/i10009023/c2cd9612c06df752.png)
保存后,将会放在自定义标签下:
![](https://img.haomeiwen.com/i10009023/bddf8f0ac33eb718.png)
在某条自定义尺寸上点击右键,可以编辑或删除。
置入两个画板,在图层列表对其双击重命名。
![](https://img.haomeiwen.com/i10009023/185f18db1246a5cd.png)
还没有置入对象的画板2可以直接点击画板移动,但是置入对象的画板1则只能点击画板标题进行移动。
三级:组件/对象,我们需要在画板中添加各种组件/对象来构成一个完整的页面;
方法一:直接置入对象
选中置入项,在画板里拖出对象,然后在右侧的属性面板进行参数设置;
![](https://img.haomeiwen.com/i10009023/2741ee0b40277a8d.png)
方法二:粘如已有组件库
点击文件-从模板新建,打开模板列表。
![](https://img.haomeiwen.com/i10009023/1b2be7f0191d4a5e.png)
点击自带的Material Design,打开组件库。
![](https://img.haomeiwen.com/i10009023/615dd0aa787460a3.png)
将需要的组件复制粘贴到画板中去。
![](https://img.haomeiwen.com/i10009023/0521a4251ea4fd14.png)
如果现有组件不能满足,则可以下载后缀为.sketch的组件库,导入sektch中,方法如下:
打开组件库,文件-保存为模板。
![](https://img.haomeiwen.com/i10009023/7926d62abcb56c8f.png)
在对话框输入名称。
![](https://img.haomeiwen.com/i10009023/e5317a48ef9f0a2a.png)
在sketch中再次打开文件-从模板新建,即可看到刚才导入的组件库。
![](https://img.haomeiwen.com/i10009023/121d483a44ad94b9.png)
若想删除导入的组件库,点击模板列表中的【在访达中显示】,打开文件夹删除组件库即可。
方法三:自创控件到组件列表,从列表选择控件拖入画板中
除了别人做好的组件,自己也可以创建控件,以便于在不同的地方重复使用统一控制。
点击工具栏的创建控件图标去完成对象到控件的转换。
![](https://img.haomeiwen.com/i10009023/bf00b59c53fe5aff.png)
框选图层列表中要归入控件的所有对象。
![](https://img.haomeiwen.com/i10009023/d3d6feac110a9de9.png)
点击创建控件图标,在对话框中输入标题,勾选“发送控件至控件页面”,点击创建。
![](https://img.haomeiwen.com/i10009023/0f67dff5558c3687.png)
此时,会看到图层列表中的多个对象转换成了一个控件。
![](https://img.haomeiwen.com/i10009023/5ffe30962f0d810b.png)
切换到组件列表,也可以看到刚才创建的控件。
![](https://img.haomeiwen.com/i10009023/32cac251c657c8e8.png)
如何修改组件?
我们需要确定是要将所有页面的选定组件进行统一修改?还是要单独对某个页面的组件进行单独修改?
统一修改:
选中组件,在右侧属性栏选择【编辑模板】。
![](https://img.haomeiwen.com/i10009023/156cce9e044eebf0.png)
选中要修改的对象,修改后,点击返回实例。
![](https://img.haomeiwen.com/i10009023/28acb2065c8755d3.png)
在实例中看到所有用到该组件的页面都被统一修改了矩形颜色。
![](https://img.haomeiwen.com/i10009023/4a9f07825ad87669.png)
单独修改:
覆盖层修改,即用新的内容覆盖当前控件的一些对象。
选中控件,在右侧的属性面板找到覆盖层模块,对图像和标题等进行修改。
![](https://img.haomeiwen.com/i10009023/a9f1d1c54893bb0b.png)
分离修改,即让当前组件从控件中分离,不再受控件的约束。
选中组件,在右侧属性栏选择【分离】。
![](https://img.haomeiwen.com/i10009023/5121a535d2d9ece8.png)
此时再看图层列表,选中的组件变成了多层对象,未从控件分离的组件的还是控件的标识。
![](https://img.haomeiwen.com/i10009023/ca79e7a32fc23e32.png)
然后可以选中图层中的矩形,在右侧属性栏进行填充色的改变,效果如下:
![](https://img.haomeiwen.com/i10009023/de3a56eabab04e9f.png)
筛选
随着图层的增加,我们若想快速找到某类或某个对象,则可以在图层栏最下面的筛选中完成。
![](https://img.haomeiwen.com/i10009023/5c575103f1636961.png)
通过输入具体名称筛选具体项。
![](https://img.haomeiwen.com/i10009023/8a593bba08a9020c.png)