当前位置: 首页 > 教程 > Mac软件教程 > Sketch教程—图层自适应模式详细详解

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轴。

以上就是小编为大家带来Sketch教程—图层自适应模式详细详解。还有更多详细、实用的功能,大家快来本站Macdown自行探索一番吧。

相关文章