Sketch+Xcode双剑合璧移动UI设计师快速上手指南（全彩）最新章节_静电著

3.1　Sketch中的Artboard及图层

Sketch的工作区域内可以随意涂画编辑。我们可以把工作区想象成桌面，上面可以摆放任何东西。但相信很多读者使用Sketch可不会只是随意涂涂画画这么简单，APP界面设计才是Sketch真正的强项。但是在没有边界的工作区内做设计可不太合适，这里Sketch引入了Artboard这一概念。Artboard就像我们在桌面上摆放的一页一页纸张，纸张是有“边界”的，我们可以在工作区域内放置多个Artboard，在“纸张”上进行设计。

图3-1-1

3.1.1　在工作区建立Artboard画板

现在我们对Artboard有了形象的理解，马上进入实践，尝试在Sketch中插入Artboard。新建一个文档，选择“Insert>Artboard”，也可以使用快捷键A或者在工具栏中的Insert图标中找到此选项，如图3-1-2所示。

图3-1-2

这时在右侧属性栏中我们会看到一些快捷尺寸选项，如图3-1-3所示。有最常见的iPhone 5的尺寸，还有iPad的尺寸，甚至有设计网页需要的尺寸，直接选择我们需要的尺寸即可，静电一般使用640×1 136作为设计APP的基准尺寸。

图3-1-3

如果这里没有大家想要的尺寸，我们可以通过下面的两种方法建立Artboard。

方法一：

1.随意选择一种尺寸。

2.单击在工作区出现的Artboard（也可以在左侧图层中直接选择相应名字命名的Artboard，如果不重命名，那么Sketch将使用默认名称命名），使Artboard处于选中状态后，我们可以拖动鼠标来移动Artboard的位置或者在右侧属性栏中编辑它的属性。

3.在右侧属性栏中调整你期望的尺寸即可。Export Group Contents Only（只导出编组的元素），先保持默认。Background Color这里建议大家选一种底色，否则后期导出为PNG图片后，没有底色会影响设计稿的展示效果。

方法二：

如果你经常使用一种尺寸的Artboard，但这个Artboard尺寸Sketch并没有预置，此时我们可以自行添加。

1.按A键或者单击Insert图标，选择插入Artboard。

2.在右侧属性栏的底部单击“+”图标，如图3-1-4所示。

图3-1-4

3.在弹出的菜单中为自定义的尺寸命名并设定尺寸。

4.这时在插入Artboard时，属性栏的Custom中即可出现你定义好的尺寸，选择这个尺寸即可，如图3-1-5所示。

图3-1-5

3.1.2　Sketch中的图层结构

第一级结构：Page

上文我们看到了纸张在桌面上的呈现，这时桌面即可类比于Page，当一个桌面上的Artboard太多不足以承载的时候，我们需要换个桌子继续工作，这时就可以新建一个Page。一个Sketch文件中可以有N个Page。新建Page的按钮默认状态下是隐藏的，如果需要新建Page，可以单击Page栏右侧的向下箭头展开Pages视图，然后通过单击右上角的加号即可新建Page，如图3-1-6所示。

图3-1-6

第二级结构：Artboard

Page的下一级结构为Artboard，与树状菜单类似，单击名称左侧的箭头可以展开，内有Artboard中的各个图层，如图3-1-7所示。

第三级结构：独立图层

独立图层是Sketch中最基本的图层，它可以出现在Artboard结构中，也可以脱离Artboard独立存在，取决于你是否将这个图层中的元素放在Artboard上。如图3-1-8所示的标注即为Artboard之外的图层，我们可以灵活运用这些图层来做一些设计稿的注释，在导出时它们可以不被包括在内。

图3-1-7

图3-1-8

第四级结构：组件文件夹及编组文件夹

组件文件夹以紫色表示，普通的编组文件夹以蓝色表示，如图3-1-9所示。我们可以同时选择多个图层，并按快捷键Command+G编组。如果想定义组件以便重复使用，可以在此文件夹图层上单击鼠标右键，从弹出的菜单中选择Creat Symbol，选择后蓝色文件夹将会变为紫色，表示它成为了一个组件。当然，也可以把组件文件夹转变为普通文件夹，只需单击鼠标右键，在弹出的菜单中选择Detach From Symbol即可。