Sketch教程—图层自适应模式详细详解

Sketch 是一款适用于所有设计师的矢量绘图应用。矢量绘图也是目前进行网页，图标以及界面设计的最好方式。但除了矢量编辑的功能之外，我们同样添加了一些基本的位图工具，比如模糊和色彩校正。

图层是 Sketch 中最基本的构成单位。不同于其他将图层和对象混为一谈的应用，在 Sketch 里每个对象都有自己的图层。所以在这个手册中，我们所说的“图层”和“对象”其实是一样的意思，这两个词是可以相互替换的。编组和画板能让你在 Sketch 里有效的管理内容，他们也会被视为多个图层的组合。网页适配十分常见，Sketch提供了图层自适应模式（Resizing Controls），方便了我们在设计时可以向上下游快速直观地展示设计适配方案。

1、Resizing选项介绍
在Sketch中选中一个图层，然后在检查器就会看到Resizing选项，左边是位置选项，可以理解为能钉在上、下、左、右4个方位的钉子；右边是大小选项，可以固定宽度或高度。
我们先来看一个位置选项设置的具体例子：原图是一个矩形和头像的编组，然后分别设置左、左上、垂直居中、垂直居左、四周固定和无设置，当把原图200*220等比例放大到260*286时，他们的变化如下图所示。从中，我们可以看出，某个方位的位置固定后，头像和边框的距离会相应地保持不变，见绿色距离标记。

我们再来看看大小选项的具体例子：分别设置固定宽度、固定高度和固定宽高，依旧是把原图200*220等比例放大到260*286时，他们的变化如下图所示。从中，我们可以看出，头像设置宽/高固定后，宽高不会变化，见橙色大小标记。

2、Resizing的实际应用
了解完Resizing的设置之后，我们来看看在实战中的应用。在实际工作当中，网页适配十分常见，我们只要利用好Resizing，就可以很方便地向上下游快速直观地展示设计适配方案。这里以App Store的Today推荐详情页“哈士奇”应用，在不同尺寸中iPhone SE、iPhone 8、iPhone X中的适配表现为例，具体说明Resizing的实际解决方案。首先我们来看看效果图：

接下来，我们可以分析一下页面元素的变化情况：背景图像大小有缩放；右上角关闭按钮大小不变，位置固定在右上方；APP图标大小不变，位置固定在左下方；APP名称和简介位置固定在左下方；“获取”按钮大小不变，位置固定在右下方…
如果把这些元素转换为Resizing设置选项，则得到如下图所示的指示图：

把所有元素细心设置完成之后，我们就会发现，即使任意变化到iPad mini的大小，也能稳稳地完成适配展示，注意，如果是以画板作为编组的缩放，则需要在画板的设置选项中选中“Adjust content on resign”。

3、Resizing的其他妙用
值得注意的是，Resizing的设置不是针对整个画板或者整个页面的，而是针对成组的元素，所以，合理利用这个规则，就可以在其他组件中应用中达到意向不到的效果，例如柱形图组件，可以设置柱形固定宽度和贴底，这样在放大缩小柱形时，也能保证柱子宽度不变，且贴住X轴。