Sketch图层自适应模式（Resizing Controls）详解

网页适配十分常见，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轴。

---

延伸阅读：

Sketch50正式版更新解读，以增强功能和bug修复为主

Sketch49正式版发布，这次它说要成为可交互的原型设计工具（附教程）

Sketch文字工具描边、文本路径、转换为形状等使用介绍

Sketch制作简单剪影效果