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制作简单剪影效果

推荐阅读更多精彩内容

  • 本书讲了什么 Sketch3基本操作介绍。 作者什么来头 郑成云,社会化媒体营销实践者,专注网络社交领域。从业6年...
    少穻阅读 1,085评论 0 1
  • 不知从什么时候,我们开始用朋友圈交谈了。 你谈了恋爱、去了马尔代夫、领了结婚证、生了孩子、做起了小生意.....这...
    老糯米阅读 141评论 1 1
  • 我喜欢的你 是初春的暖阳 填了心房 ​​​ 迷了眼
    阿阿阿阿俗阅读 21评论 0 1
  • 卖麻花的叫卖声远去了 槐叶在风中打着转 像蝴蝶在飞舞 宛转悠扬 把思念藏进雁翼 飞往温暖的地方 生根发芽 爷爷牵着...
    王二小姐whJ阅读 89评论 1 8
  • 在这样一个风雨大作的日子里,我想起了你,一个许久不联系的朋友,那时我是风风火火的傻女孩,你是直率纯真的大学霸,是什...
    图抒馆阅读 24评论 0 0