UI设计科普 | 如何用Sketch进行UI界面的设计？

上期为大家科普了

Sketch基础

本期为继续为大家

深度科普

Sketch设计界面

内容过多，大家仔细阅读

感兴趣的记得关注我们

Sketch 小试牛刀——界面

经过上一节的学习，相信大家已经对Sketch有所了解，本节将向大家介绍如何使用Sketch进行UI界面的设计，大家将深入了解Sketch的图层面板、检查器面板和画布的使用方法。

在用Sketch进行UI设计之前，建议大家阅读以下几篇文档。

(1)iOS 人机交互指南

(developer.apple.com/libuserexperience/conceptual/

mobilehig/index.html#//apple_ref7doc/uid/TP40006556-CH66-SW1) «

(中文版 http:〃w汰 i j ikexueyuan.com/project/lOS-human-interface-guidelines/ )

(2)Materia]Design设计规范(googte.com<iesignZ)。

(中文版：http://wikiJikexueyuan.com/prqject/materialTesign/)

上述中文版由“极客学院”进行翻译，并非官方提供，所以会存在一定的滞后性，建议无英文阅读障碍的读者直接阅读英文版。该文档会随着系统的迭代更新而更新，建议大家持续关注。

1.1新建画布

Step01打开Sketch后，使用快捷键A新建画布。在右侧的检查器中可以看到系统已经内置了常用的尺寸，单击选中需要创建的画布大小即可完成画布的新建，如图9.8所示。

图9.8

Step02如果需要创建自定义大小的画布，单机右侧检查器右下方的“十”按钮，在弹出的对话框中输入需要定义画布的名称以及尺寸即可，尺寸格式为长X宽，如图9.9和圏9.10所示。

图9.9

图9.10

大家一定注意到，在所有的尺寸中，比如iOS的尺寸，以iPhone 6为例，给出的是

375X667pxo但是实际中，iPhone 6的分辨率为750X1334px。这是因为Sketch从3.3.2版本之后的一个变动一釆用单倍尺寸设计。

那么为什么会用单倍尺寸设计呢？这是因为在编程的过程中，程序员是用单倍尺寸进行编程的。

我们知道，在iPhone上，在给retina屏幕进行切图时，导出图片的命名是@2X结尾，而在iPhone 6 Plus ±是用的@3X结尾。@2X的意思是2倍。

另外，在PS中，我们设计iPhone 6的尺寸为750X1334px,根据设计规范，一般认为最小字体为20px,但是程序员编程时，这个字体为20/2=10pxo也就是说，如果按照实际分辨率设计，字体大小交给程序时，程序需要在此基础上除以倍数进行编程。这样实际上增加了沟通成本。

Sketch是矢量设计软件，使用单倍设计后，可以导出任意大小的图片。这一点也充分体现了Sketch在UI设计上的优势。

新建完画布后，在灰色的面板上会出现白色的画布，一般刚创建的画布我们会做两个基本的操作一调整到合适的显示大小以及对画布命名。和PS—样，使用快捷键command + +/-进行画布的显示缩放，根据屏幕的大小将其缩放到合适的大小。

Step03 Sketch的一个文件中可以创建无数的画布，我们按快捷键A,再次新建一个画布后，使用快捷键control+R,打开标尺，可以看到无论选择哪个画布，标尺上面都会从0开始，如图9.11所示。

对于使用Magic Mouse的用户，可以让鼠标在画布区域后，用一个手指滑动鼠标来调整画布在屏幕中的显示位置，注意是显示位置而非真正移动画布。如果使用的是触控板，可以两个手指同时滑动触控板以达到同样的目的。

图9.11

1.2图层列表面板的使用

Step01双击右侧的图层面板中的画布名，可快速进入编辑模式，输入画布名后,按回车键确认，或者在其他任意区域单击即可完成对图层的重命名，如图9.12所示。

图 9.12

重命名的好处：一个是方便自己快速定位对应图层，另一个是Sketch在导出图层的时候，默认使用的是图层名，取一个有意义的名字，会极大地节省后期维护成本，提高沟通效率。

Sketch内置了 iOS和Material Design的UI设计规范模板，在作移动端的UI设计时，一般会在设计稿中插入系统顶部的信号栏，一方面可以让画面更接近真实，另一方面因为信号栏也有一定的高度，加入信号栏后能更准确地进行设计。

Step02在Sketch的图层面板中，单击某个画布名，便可选中该画布。

选中需要添加信号栏的画布后，选择“ File>New from Template>iOS UI Design”（文件> 从模板中新建>IOS UI设计）命令，可打开iOS的UI设计规范模板，如图9.13所示。

图9.13

Step03直接在画布上单击选中需要选择的内容，注意在图层列表中也同样会选中对应图层组名。大家注意到，在列表中用蓝色和紫色两种颜色来进行显示，其中紫色的是模板图层，蓝色的是普通图层。

Step04使用快捷键command+C进行复制，快捷键command+V进行粘贴，图层面板如图9.14所示。

出现名为Status Bar Black （黑色状态栏）的文件夹名，单击文件夹名左侧的箭头可显示该组的图层列表，如图9.14所示。

Step05在紫色图层名上右击，在弹出的快捷菜单中单击" Detach from Symbol”（从符号中分离）选项，即可将模板图层转化为普通图层，如图9.15所示。

图9.14

图9.15

Step06我们注意到，在图层列表中，第一排是一个箭头、缩略图和图层名。箭头表示可以展开，展开后发现展开的图层右侧有图9.16所示的标志，这是表示这个图层组是经过布尔运算得来的（关于布尔运算，请看9.3.1小节）。

Step07在图层列表中，图层缩略图为兰的表示该图层是文字图层。选中该图层，按键盘上的回车键即可编辑文字。被选中可编辑的文字会呈蓝色高亮显示，如图9.17所示

图 9.16

图 9.17

Step08在该图层列表的最后一个图层，注意到在图层右侧有个眼睛的图标，而鼠标移动在任何一个图层，右侧也会出现该图标，这是图层的显示/隐藏功能。

把鼠标移动到需要隐藏的图层或图层组，右侧出现眼睛图标，单击该图标，即可隐藏该图层或图层组，隐藏状态的图层或图层组右侧的眼睛图标常亮显示，图层或图层名变至灰色状态，如图9.18所示。

Step09在图层中，按住command键单击图层名，可以选择多个图层，按住Shift键，可以连选多个图层。选中多个图层后，右击，选择“Group Selection"（组选择）或者按快捷键command+G可进行编组。在图层组处右击，选中“Ungroup （解组）”，或者按快捷键command+Shift+G可释放编组,如图9.19所示。

图9.18

图9.19

Step10在图层列表的上方，有图9.20所示的按钮。

Step11单击该按钮，展开画布列表。在Sketch中，不仅画布上的图层是可以无限多的，画布本身也可以是无限多的。

一般在实际工作中，为了便于图层管理，经常把同一个模块功能的界面设计放在一个画布，单击展开后图层右上方的“+”按钮即可新建画布，如图9.21所示。

图9.20

图9.21

Step12如图9.22所示，新建的画布系统会默认画布名为“Page xx” o单击选中画布，在画布名上双击即可快速重命名画布。

Step13画布编辑好后，单击如图9.23所示区域，即可退出画布编辑。

图9.22

图9.23

Step14如果不止一个画布，在图层左上方会出现一个下拉箭头，表示有多个画布，单击该区域即可快速切换当前画布，如图9.24所示。

在图层面板的下方，分别是图层搜索功能、锁定图层功能和锁定切片功能。

在搜索功能处单击，输入图层名，即可快速查找包含该图层名的图层。而单击.後按钮，即可锁定当前画布的所有图层，此时图层列表中图层和图层组收起。类于PS或者AI中的锁住图层功能。

图 9.24

而第三个按钮的切片功能，和锁定图层功能类似，只是作用的对象为当前画布的切片（关于切片，请看第9.5节）。

到现在为止,Sketch的图层面板的基本功能已经学习完毕，在本节中，我们学习了如何导入系统内置模板，以及图层面板的基本操作。

在实际工作中，图层面板功能不是一个独立存在的功能，需要和其他各个部分联系在一起。

1.3检查器面板的使用

如果说图层列表面板中的内容决定了界面中有什么内容，那么可以说检查器面板决定了这些内容长什么样。本节将带大家来深入了解Sketch的检查器的内容和使用方法，Sketch的检査器的内容会根据图层类型的不同有所差异。

1 .图层组的检查器

Step01选中某一图层组，可以看到右侧的检查器呈现如图9.25所示的内容。

图9.25

最上面一排是对齐工具，从左到右分别是左右分布对齐、上下分布对齐、左对齐、垂直居中对齐、右对齐、上对齐、水平居中对齐和下对齐。

左边第一、第二个对齐方式需要3个或3个以上图层或图层组被选中后才可用，而其他对齐方式，如果只选中了一个图层或一个图层组，则对齐对象为当前界面本身。

在需要执行对齐操作的时候，使用对齐功能，一方面能快速对齐对象，另一方面相比手动对齐更加准确。

Step02我们知道信号栏一般位于界面顶部，单击“上对齐”，将信号栏快速移动到界面顶端。如图9.26所示。

在信号栏对齐的同时，对齐按钮下方的Position （位置）处的数值发生了变化。

此处是精确定位，前面X为水平方向，从最左侧起为0,到最右侧。后面的数字丫为垂直方向，从顶部起为0,到最下方。

在位置处往下看是Size （尺寸）。这里尺寸指选中图层或者图层组的尺寸，前面的数字为宽度，后面的数字为高度，单位为px。在宽和高的中间有一个“

”=■

图标,单击可以切换锁定长宽比状态，即改变任意数值是否等比缩放。

■为未锁定，变更宽或者高的时候另一数值不发生改变：■为锁定状态，变更宽或者高的时候另一数值等比发生变化。

图9.26

在尺寸下方是Transfbm （变换），可以直接输入变换的度数，将图层旋转，正数为顺时针方向旋转，负数为逆时针方向旋转。数值输入框右侧两个按钮分别表示水平翻转和垂直反转。

需要注意的是，在Sketch中所有的属性面板的数值输入框中，鼠标移动到输入框,输入框的右侧将出现上下箭头，单击箭头可以每次变更1单位的数值。或者可以单击输入框直接输入数值。

Step03如图9.27所示，在Sketch的属性面板的输入框中，可以做简单的运算，在输入减法后按下回车键，即可算出减法的结果并调整至相应大小。支持加法、减法、乘法和除法的运算。

图9.27

在Sketch中，我们在画布中单击某一图层，如果该图层在某一图层组的操作，直接选中的是该图层组而非该图层，如果有大量需要直接选中图层本身而非图层组，则可勾选Click-through when selecting（选择时单击）。

勾选后,再次单击画布上的图层,则直接选中该图层而非该图层组，这时候如需选中图层组，只能在图层面板中选择。

值得注意的是，除非这一需求非常频繁，笔者建议一般不勾选该功能。如需选择图层组中的某一图层，Sketch也提供有快捷方式，按住command键并单击，即可快速选中图层组中的图层。

Step04再往下是样式模板，因为我们之前已经把模板图层变成普通图层，所以此处状态是No Symbol （无样式模板）。单击会出现下拉列表，分别是该Sketch文件中有的样式列表、创建新样式和编辑样式，如图9.28所示。

图 9.28

Step05在样式下方是透明度，可以通过拉杆左右快速调节透明度，0为完全透明，100%为完全不透明。也可以直接输入数值精确设置透明度。和PS—样，也可以在选中需要设置透明度的图层或者图层组，通过直接按下键盘上的0〜9数字键快速设置透明度。

Step06透明度的下方是图层的混合样式，类似于PS中的图层样式中的混合模式，默认无混合样式，即Normal （普通）。

单击出现下拉菜单，分别为Darken（加深）、Multiply（正片叠底）、Color Bum （颜色加深），这3个为变深效果。

Lighten（减淡）、Screen（滤色）、Color Dodge（颜色减淡），这3个为变淡效果。

Overlay（叠加）、Soft Light（柔光）、Hard Light（强光），这三个为饱和度的调整效果o Difference（差值）、Exclusion （排除），这两个为差集效果。

Hue （色相）、Saturation （饱和度）、Color（颜色）、Luminosity （明度），这4个为颜色调整效果。建议大家在实际操作中分别设置，以查看各效果有什么区别，因为该处的混合样式和PS中类似，在此不做过多介绍，如图9.29所示。

再往下，则是Shadows （投影）属性，单击右侧的用，可以为图层添加投影效果。系统已经给出了默认投影，我们可以对其进行修改。

在Sketch中，只能给图层组设置唯一投影样式，但是对于图层，可以多个投影效果叠加。在投影属性中，左侧的勾选代表应用该投影效果，取消勾选，则取消该效果。单击第二个Color （颜色），出现调色盘，可以对投影的颜色进行调整。关于Sketch的颜色设置请查看第9.2.4小节。

图9.29

Step07设置好颜色后，后面的四个值分别是投影的水平位置、垂直位買、投影模糊度和投影范围。大家可以试着任意调整相关数值去感受，值得注意的是，在图层组中，投影属性的Spread （投影范围）不可调整，如图9.30所示。

图9.30

2.形状图层的检查器

Step01单击里面的形状图层，如电池标，会看到右侧属性面板变成图9.31所示的状态。

图9.31

Step02对比图层组，在Transform （变换）下面多了一个Radius （半径）选项。这一属性在圆角矩形中用得比较多，改变数值大小可以调整圆角矩形的圆角大小，数值越大，圆角矩形的角度越大。

Step03另夕卜，在混合样式下，多了 Fills （填充）、Borders （描边）、Inner Shadows（内阴影）和Gaussian Blur （高斯模糊）等属性。

Step04 Sketch允许各个图层的多个样式混合，所以在Fills （填充）中，单击右侧的13可以将多个填充样式叠加（在各填充透明度不为100%时起作用），如图9.32所示。

图9.32

Fills （填充）效果的属性，从左到右分别是应用该效果勾选、填充颜色设置、填充混合样式和透明度。

Step05 Borders （描边）效果的属性，从左到右分别是应用该效果的勾选、颜色、描边位置和描边粗细。其中描边位置分别是Center （居中）、Inside （内部描边）和Outside （外描边）。描边的右方有

胺钮，单击该按钮，出现图9.33所示界面。

图9.33

第一排分别是描边端点的样式、描边合并的样式。下方是设置描边开始箭头样式和描边结束箭头，下方4个输入框通过输入不同的数值可以绘制出虚线等效果。分别代表Dash （虚线）、Gap （间隙），单位为px。

Sketch中允许同一条虚线有两种样式，比如设置数值分别为2.1.4、2,则表示这条虚线是由一个2像素的线段、1像素的间隔、4像素的线段和2像素的间隔为一组组成的。

实际工作中，如果组成虚线的线段保持一致，则任意填写前面两个或者后面两个输入框中的数值即可。

Inner Shadow （内阴影）的属性和投影的属性类似，不做过多介绍。

Gaussian Blur （高斯模糊）这一功能在iOS7后多用于制作毛玻璃透明效果，单击该处可以选择模糊效果，分别是高斯模糊、动态模糊、缩放模糊和背景模糊。选择需要设置的模糊效果类型，勾选右边的选项框，即可设置模糊效果。

模糊效果属性第一排为模糊值，第二排为模糊角度的设置，如图9.34所示。

图9.34

3.文字图层的检查器

选中任一文字图层，右侧检查器中属性值变化如图9.35所示。在样式模板下方出现了和其他软件文字属性类似的属性设置。

Typeface （字体）。可以设置字体。

Weight （权重）。可以设置该字体中的字体粗细、斜体等。需要注意的是，不

是所有的字体都有该属性可以调整。

Weight （权重）下方的齿轮图标按钮可以设置下划线等样式和文字列表样式，

如图9.36所示，该按钮右侧分别是字体颜色和字体大小。

图9.35

图9.36

再往下是段落对齐，分别是左对齐、居中对齐、右对齐和两端对齐。Width （宽度）为段落文本宽度设置，分别是自动调整和固定宽度。

这一功能在进行段落界面设计的时候用得比较多，自动调整表示随着输入的文本量让该图层自动调整大小，不会自动断行。而固定宽度则表示文本内容超过现有的宽度时会自动断行，以增加长度的形式显示。

Spacing （间距）可以设置文本间距，3个输入框的数值分别表示字符的间隔、行高和段落间的间隔。文本图层的其他属性和普通图层属性类似。

4.画板的检查器

选中某一画板，图层属性面板变成图9.37所示的样式。

该处下面3个复选框的作用分别是修剪透明像素、只导出图层组和背景色。

最常用的是背景色。虽然我们在Sketch界面中看到的是白色背景，实际上如果此处没有勾选背景色的话，是透明的。导出为PNG格式的话，也同样以透明背景导出。

在右侧检查器中最下方，是Make Exportable （生产导出），即导出功能。这一功能将在5.2小节进行介绍。

到目前为止，我们已经大致了解了 Sketch的基本组成和基本使用方式。下一小节将带领大家从零开始设计一个界面，让大家在实际设计中深入了解各功能的作用。

1.4使用Sketch进行UI界面设计实例

本节将通过一个简单的实例来介绍Sketch在日常设计中的使用。

Step01回到Sketch,之前通过快捷键A新建了一个iPhone 6尺寸的画布，现在我们将其重命名为“Welcome_P昭e”。

在Sketch中，默认最后新建的画布在图层列表中排在最前，如图9.38所示。

Step02在画布中单击信号栏，然后在右侧检查器中，选择样式模板为Bar/StatusBar/Black,注意到图层面板图层组变成紫色，如图9.39所示。

图9.39

Step03此时，我们可以按住键盘上的command键，单击任意画布中信号栏的“Sketch”文字，选中后双击鼠标，将其修改为“潮流UI”，注意因为中文字体的行高比英文字体高，需要按键盘上的上下方向键手动调整到合适位置。

Step04可以注意到，当修改了一个画布上信号栏的文字，另一画布的文字也随之改变，这便是Sketch中强大的样式模板功能的体现，如图9.40所示。

在Sketch中，我们可以给任何图层设置样式模板，可以创建样式或者设置为当前文件中已经有的样式。已经设置好样式模板的图层或者图层组，只要修改其中任何一个图层，该文件中所有画布上共享了该样式模板的图层也会随之修改。

在UI设计中，特别是多个界面中含有相同元素时，如类似信号栏，使用样式模板将极大方便后期的修改。或者为了所有文本大小样式统一，也会对其设置文本样式模板。我们在下面会介绍到文字模板的创建。

图9.40

Step05使用工具本二的a Insert>Shape>Rectangle w （插入 > 图形〉矩形），或者按下快捷键R,来绘制一个矩形。如图9.41所示。

图9.41

Step06此时鼠标变成了一个+号和一个矩形组成的光标，在画布上单击并拖动即可绘制矩形。

和其他软件（如Photoshop、Illustrator等）绘制情况类似，按住Shift键可以绘制正方形，按住command键可以以鼠标为中心绘制矩形，也可以使用Shift和 command 键。

Step07拖出任意大小矩形后，在右侧检查器中设置画布大小为375pxX667pxo注意，如果绘制矩形的时候按住了 Shift键，则在属性面板中会自动锁住长宽比，设置为长方形时需要手动解锁。

Step08在Sketch中也可以用手柄调节图形大小，注意到选中该矩形的时候，边框会出现8个方块，鼠标移动到方块处可以调整大小。

若图形的长宽比锁定，拖动进行大小缩放的时候不管有没有按住Shift键都一样会以正方形缩放。要想任意缩放,需要在检查器中的尺寸位置，将锁定的图标点开。

Step09在画布中按住图层拖动则可以任意移动该图层，在移动过程中会有红色的辅助线出现，我们称之为智能辅助线，智能辅助线的功能十分强大，能很方便地帮助我们提高对齐的速度和准确度。

我们将该矩形移动到画布的左上角，在顶部和左边会出现红色智能辅助线代表已经和画布边框对齐，在属性中也能看到位置为0,0。然后拖动右下角的方块，将其大小缩放至画布大小。因为有智能辅助线，会有自动吸附功能，所以能很方便和准确地缩放至画布大小，如图9.42所示。

图9.42

Step10将该矩形的边框去掉，颜色填充设置为白色，右侧检查器属性设置如图9.43所示。

图9.43

下面来介绍Sketch中的调色盘功能。Sketch具有十分强大的调色功能，大家可以看到调色板对话框顶部有6个圆角矩形，当前选中会蓝色高亮显示。从左往右分别为纯色填充、线性渐变、径向渐变、角度渐变、图片填充和杂色填充。

6种填充方式的效果和PS相似，选择不同的填充方式下面的界面也会发生相应的变化。我们先来看纯色填充，如图9.43所示，纯色填充中，上方是颜色区域，从左往右、从上到下分别是同一色相的饱和度越来越高和亮度越来越低。

在该矩形区域下方,是Sketch的吸色工具，单击后鼠标将变成放大镜，方便精确吸取颜色，和PS不同的是，Sketch的吸取工具不仅更加精确，即可以吸取不限于画布本身的色彩，而是可以吸取整个计算机全部屏幕的色彩。找到需要吸取的颜色后，单击即可吸取该颜色。

在吸色工具右侧有两条可以滑动的滑动条，上面那条用于色相的调节，下方的是当前填充色的透明度，从左到右分别是完全透明和完全不透明。而最右边则是当前画布上所有颜色的快捷方式，单击该按钮，可以快速选择当前画布上所有的颜色。

再往下，是精确的颜色值。Sketch中提供两种表示颜色值的方式。左边为十六进制表示，即编程中常用的#6位字母或数字表示。中间3个数值为RGB表示方式，分别代表当前颜色中的红色通道、绿色通道和蓝色通道的数值。

最右侧的数值是当前颜色的a值，100为完全不透明，0为完全透明。十六进制和RGB方式二选一，任意改变一种，另一种会对应改变。可以直接输入数值进行调整。

数值下方是系统预设的一些颜色，单击即可快捷调取，如果需要把自己调整好的颜色加入到快捷方式中，单击后方的“+”号即可。

如需删除某一颜色的快捷方式，鼠标移动到需要删除的颜色处，右键单击并选择“ Remove ”（移除）即可。再来看渐变方式的面板，3种渐变方式调色面板功能几乎一致，如图9.44所示。

图9.44

相比纯色填充，上方多了一个调节渐变的工具，渐变填充需要和图层配合使用，注意到图层上方也出现了一条线段，线段两个端点处有两个小圆点，上方的小圆点対应检查器中调色板的左侧，下方的小圆点对应调色板右侧，单击圆点或者单击调色板上左侧或者右侧的滑块均可。

在画布的线段上任意地方单击，或者在调色板上双击可以添加滑块，使渐变更加多变或者协调，渐变面板其他功能和纯色填充相似。

但是在线性渐变中，数值下方有一个Smooth Opacity （平滑不透明度）功能，勾选该功能可以自动计算，使渐变颜色过渡得更加和谐。右侧可以快速地调整渐变角度。在画布上，拖动渐变控制杆的任何一个端点均可以调整渐变角度和渐变范围。图像填充面板如图9.45所示。

图9.45

左侧是图片的缩略图，右侧上方的按钮选择图片，中间可以选择是平铺还是铺满。如果选择平铺可以在下方调整图片的显示大小。杂色填充面板如图9.46所示。

图9.46

杂色填充面板比较简单，只有两个选项，第一个是杂色类型，分别是默认、黑色杂色、白色杂色和彩色杂色，第二个用于选择杂色的强度。

Step11介绍完Sketch的调色板，我们回到纯色填充，将颜色设置为#FFFFFF的纯白色。然后将该矩形图层重命名为“Mask”，并右击，在弹出的快捷菜单中选择“Use as Mask"（使用蒙版），或者单击工具栏中的Mask （蒙版）按钮，如图9.47所示。

图9.47

设置为蒙版后，该图层上方所有的图层均只能在该图层区域内显示。

Step12插入一张图片。在Sketch中插入图片可以使用“Insert>Image"（插入a图片）命令，也可以直接从文件夹中拖到图片到Sketch的画布中。这里我们直接拖入图片，拖入后注意图层的变化，因为之前我们将Mask图层设置为蒙版，则拖入后的图片图层前会有一个小箭头，如图9.48所示。

图9.48

Step13如果需要取消蒙版，则可在该图层处右击，在弹出的快捷菜单中选择“Ignore Underlying Mask"（忽略下层的蒙版），则该图层及该图层以上的所有图层均取消蒙版效果。

或者在蒙版图层处单击鼠标右键，在Use as Mask （使用蒙版）处再次单击，则取消所有的蒙版效果，如图9.49所示。插入的图片比画布大，我们将图片等比缩放到画布大小。

Step14在当前图层上方添加一个色块，使颜色柔和一些，按下快捷键R,添加一个矩形，调整至画布大小，去掉描边，填充颜色值为# 2C2C3D,设置透明度为10%,将其重命名为“Color Layer”。

Step15再次添加一个矩形，调整至画布大小，去掉描边，设置线性渐变填充，填充为纯白色50%透明度到100%的渐变，如图950所示，将其命名为“GradientLayer"。

图9.49

图9.50

Step16 在图层列表中选中 Mask、Photo、Color Layer、Gradient Layer 4 个图层，右击，在弹出的快捷菜单中选择"Group Selection”,或者按快捷键command+G进行编组，并将图层组重命名为"Background"。

Step17注意到之前的信号栏不见了，这是因为在Sketch中，图层也有上下层次的顺序，在图层列表中，列表上方的图层或者图层组会覆盖列表下方的图层。我们按住图层，可以拖动来调整层级关系。我们将背景图层组调整到最下方。

然后在该图层组处右击，在弹出的快捷菜单中选择“LockLayer”（锁定图层），将该图层锁定,锁定的图层或者图层组最右侧“显示/隐藏”提示图标处，会变成一个白色的锁定图标，表示该图层或者该图层组已经被锁定，解锁只需要再次右击，在弹出的快捷菜单中择“Unlock Layer”（解锁图层），或者直接单击白色的锁定图标即可，如图9.51所示。

Step18绘制按钮。选择"Insert>Shape>Rounded”（插入〉形状〉圆角矩形）命令,或者通过快捷键U,在画布上新建一个圆角矩形。将其尺寸设置为315pxX60px。去掉描边，填充色值为#EB3254,并将圆角矩形的半径设为30,如图9.52所示。

大家注意，图上按钮的周围有4条显示边距的智能辅助线，按下键盘上的option键便可出现，建议大家经常使用这一功能，能在极大提高效率的同时更好地提升设计精准度。

图9.51

Step19将该图层命名为“button_solid_bg按下快捷键T,插入文字,并设置属性,如图9.53所示，按住option键使用宙能郭助线精准和按钮居中对齐。

图9.52

图9.53

Step20将按钮背景图层和文字图层选中，并编组，将组重命名为“button_log”，然后单击该按钮，选中该组，按住option键后，拖动鼠标，复制该组，如图9.54所示。

图9.54

Step21这便是快速复制图层的方式，拖动图层的同时会出现智能辅助线，并且智能辅助线会随着鼠标移动的位置自动变换参考对象。将复制的图层组和原图层组的距离调整为20px,和画布居中对齐，将该图层组重命名为wbutton_regw。

Step22按住键盘上的command键，单击按钮文字外的部分，将其属性设置如图9.55所示。

图9.55

将红色设置为该界面的主色调，为了避免重复吸取或者需要手动输入色值，我们可以单击调色板中的“+”号将该颜色存储下来。

Step23设置好后，将该图层重命名为Tine_bg”。

Step24选中该图层组中的文字图层，在右侧将对齐样式设置为居中対齐，这样可以让我们在编辑文字的时候，一直保证文字居中，将文字颜色值设置为#EB3254,并将文字内容更改为“SIGNUP” 。

至此，界面基本上设计完毕，最终效果如图9.56所示。实际工作中，一般为了避免界面上部过空，可以将公司LOGO或者其他有代表性的图片放置上方正中间。

完成设计后，选中画布，单击右侧检查器中下方的“Make Exportable"（生产导出）来导出图片。Sketch有非常强大且方便的导出图片功能，后面会专门讲解Sketch的切图和导出，在此不展开讲述。

图9.56

今天的内容就到这里，我们下期再见！

更多精彩内容，尽在《UI设计精品必修课》

点击左下角阅读原文可直接购买

- 推荐阅读-