Sketch的页面-画板-组件/对象
我们做出来的页面以及其中包含的每个对象,都在图层栏中按照层级展示。
一级:页面,通过右上角的“加号”添加,双击重命名,右键“页面”来复制或删除。


注意:每个页面都是一个无边界的画布,一般会把注释和临时对象放在上面,界面内容还是最好呈现在画板中。
二级:画板,一个页面可以包含多个画板,可以点击置入,从菜单中选择画板,快捷键是A。

快捷键A,即可唤醒右边的载体列表面板,可以选择不同的载体以及对应的尺寸。

如果列表中默认的尺寸都不能满足,可以点击列表最下方的【创建自定义尺寸】

保存后,将会放在自定义标签下:

在某条自定义尺寸上点击右键,可以编辑或删除。
置入两个画板,在图层列表对其双击重命名。

还没有置入对象的画板2可以直接点击画板移动,但是置入对象的画板1则只能点击画板标题进行移动。
三级:组件/对象,我们需要在画板中添加各种组件/对象来构成一个完整的页面;
方法一:直接置入对象
选中置入项,在画板里拖出对象,然后在右侧的属性面板进行参数设置;

方法二:粘如已有组件库
点击文件-从模板新建,打开模板列表。

点击自带的Material Design,打开组件库。

将需要的组件复制粘贴到画板中去。

如果现有组件不能满足,则可以下载后缀为.sketch的组件库,导入sektch中,方法如下:
打开组件库,文件-保存为模板。

在对话框输入名称。

在sketch中再次打开文件-从模板新建,即可看到刚才导入的组件库。

若想删除导入的组件库,点击模板列表中的【在访达中显示】,打开文件夹删除组件库即可。
方法三:自创控件到组件列表,从列表选择控件拖入画板中
除了别人做好的组件,自己也可以创建控件,以便于在不同的地方重复使用统一控制。
点击工具栏的创建控件图标去完成对象到控件的转换。

框选图层列表中要归入控件的所有对象。

点击创建控件图标,在对话框中输入标题,勾选“发送控件至控件页面”,点击创建。

此时,会看到图层列表中的多个对象转换成了一个控件。

切换到组件列表,也可以看到刚才创建的控件。

如何修改组件?
我们需要确定是要将所有页面的选定组件进行统一修改?还是要单独对某个页面的组件进行单独修改?
统一修改:
选中组件,在右侧属性栏选择【编辑模板】。

选中要修改的对象,修改后,点击返回实例。

在实例中看到所有用到该组件的页面都被统一修改了矩形颜色。

单独修改:
覆盖层修改,即用新的内容覆盖当前控件的一些对象。
选中控件,在右侧的属性面板找到覆盖层模块,对图像和标题等进行修改。

分离修改,即让当前组件从控件中分离,不再受控件的约束。
选中组件,在右侧属性栏选择【分离】。

此时再看图层列表,选中的组件变成了多层对象,未从控件分离的组件的还是控件的标识。

然后可以选中图层中的矩形,在右侧属性栏进行填充色的改变,效果如下:

筛选
随着图层的增加,我们若想快速找到某类或某个对象,则可以在图层栏最下面的筛选中完成。

通过输入具体名称筛选具体项。
