「 Sketch超实用教程 」元素基础

一、聚焦于设计本身

Sketch是一款轻量级的设计工具，不仅能用于视觉设计，还被广泛用于交互设计。Glen本身作为产品经理，平时输出需求的时候，急需快捷的交互设计工具。之前也跟很多人一样，使用Axure。Axure虽然功能强大，但是使用起来非常的不方便，效率偏低。自从使用了Sketch后，大大提升了交互设计的效率。总之，Sketch能够让你聚焦于设计本身，而不是花费大量精力去学习一个异常复杂的工具。

二、Sketch界面介绍

目前Sketch只提供mac（苹果电脑）版本，是一款高效、轻量的矢量设计工具，也提供基本的位图样式支持（例如模糊和颜色调节）。Sketch非常适合制作产品原型，比用Axure高效10倍，而且学习成本很低，基本一两天就能上手。

界面介绍：Sketch界面主要分为工具栏（Toolbar）、页面（Page）、图层（Layer）、画布、检查器等几个部分。

页面用于新建不同的设计面板。

每个页面由1个或多个图层组成，相信有了解PS的同学会很好理解。

工具栏提供了基础的工具箱：编辑、旋转、布尔运算等。

画布就是主要的作图区域了。

检查器用于调整画布中元素的一些属性或者微调元素的位置/大小/颜色等。

三、Sketch元素基础教程

（1）新建画板：打开Sketch后，按字母「A」，鼠标就会变成「+」号，此时可以直接用界面右侧提供的常用设备尺寸画板，如iPhone 8、iPhone XS、Apple TV等；也可以选择“自定义”画板的尺寸，非常的快捷高效。

（2）快速调整元素之间的间距：Sketch快速检查两个元素之间的间距的方法也十分的快捷，选中一个元素，按住option不放，鼠标放到另一个元素上，就可以看到两者之间的间距了。

（2）新建一个元素：Sketch中插入一个元素也非常的快捷，在工具栏中点击“+”号，选择“Shape”，即可按需选择新建一个元素，然后鼠标会变为加号，可以在画布里直接添加元素。也可以使用快捷键快速添加元素：

按“O”，快捷画圆形。

按“R”，快捷画方形。

按“L”，快捷画直线。

（4）快速修改元素尺寸：选中一个元素，在面板右侧的检查器里能快速调整元素的尺寸（Width宽度和Height高度）和位置（X横轴和Y纵轴），并且可以按住Shift键再按键盘的上键或下键，Sketch 将相应地将值递增或递减10倍，按住 Option键会将其增加/减少十分之一。

（5）简单数学公式调整元素尺寸：Sketch还支持简单数学公式调整元素的尺寸。

（6）不透明度调整：要改变一个元素的不透明度的时候，有两个方法。一个是选中元素后，在右侧的检查器里调整“不透明度”的数值；另一个方法更快捷，选中元素后，可以直接键盘输入数字来调整，比如输入50即把不透明度改到50%。

（7）元素组合：Sketch中可以快捷对多个图形进行编组，选中多个图形，按Command+G即可进行多图形组合 ，按Command+shift +G即可进行多图形解组。

好的，今天主要介绍Sketch界面基础和元素的操作，一起学习努力努力再努力吧！

产品经理Glen，腾讯、迅雷、华为工作经历，感兴趣可以关注下公众号Glen，我们可以一起学习进步。