Sketch教程—图层自适应模式详细详解
发布时间:2022-05-11 11:53:20
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轴。
猜你喜欢
- 要怎么透过macOS 来查询AIrPods 电量呢?当AIrPods 和Mac 配对后,有的朋友想通过Mac来查询AIrPods有多少电量,
- 有Excel中有一个很方便的功能,就是可以通过拖拉单元格的右下角句柄自动生成相应序列,下面小编就为大家详细介绍el中填充的生成方法,不会的朋
- 如何让两个页面并排显示?在使用pages文稿创作的时候,两张页面并排显示可以大大提高我们的工作效率,下面我们分享一下如何让页面并排显示。1.
- Win10专业版系统电脑用户开始选择更新升级Win10时,使用Windows升级助手检测自己的电脑是否可以升级Win10系统之后,却出现“网
- Excel中的文字具体该如何进行换行的操作呢?接下来是小编为大家带来的excel表格里的文字换行操作的教程,供大家参考。excel表格里的文
- 1.打开需要繁简转换的Excel文档,选中需要转换的单元格内容2.点击工具栏的“审阅”,在审阅里我们就可以看到繁转简、简转繁或者是简繁转换的
- 通过Excel2016中的数据验证功能不但可以使用当前工作表格中的数据序列的源,还可以使用其他工作表格中的数据序列源作为当前工作表的列表选项
- Excel中如果需要进行手动进行换行的话具体该如何进行操作换行呢?下面是小编带来的关于excel表格里手动进行换行的操作方法,希望阅读过后对
- Word文档排版中经常会使用到虚线,那么你会设置虚线吗?今天给大家分享word分栏怎么设置虚线的小技巧,一起来看看吧!1、添加分栏竖向虚线操
- 我们在制作word文档的时候总会有在文档中插入图片制作图文并茂的文档的时候,但是插入的图片和文字一般都是错开的,那么还有更好的方法吗?下面给
- 日常生活中,进行通勤或到访或探索陌生地点时,免不了需要一款易用的地图应用进行查询和规划线路,那么什么样的地图应用更适合自己呢?本文从不同角度
- wps跟word一样是文本,但是有时候被制成图片格式的,或者是夹杂图片文字的文档文件,想要复制的时候,就不太好用了,需要先把wps图片文字转
- Excel怎么对一个数开n次方根?具体怎么去执行操作的呢?今天,小编就教大家在Excel中进行对一个数开n次方根的操作技巧。Excel中进行
- Excel的功能区中包含许多选项,对应着Excel的各项功能。为了便于用户进行操作,Excel 2019允许用户自定义命令或按钮。下面以添加
- 我们在Word表格中输入文字的时候,只有左半部分能输入文字,要是继续输入,就会自动换行,而且右半部分总是空着,这种情况下我们应该怎么办呢?其
- 在WPS演示中插入形状之后,都要重新设置一次图形格式。在设置里面有个功能,叫做新对象默认值,我们只要勾选它,每次插入的样式都会固定了。以下是
- 如果一篇文章想要整体把一个词语换掉,一个一个的改很麻烦,这里教大家使用Word的替换功能。那么下面就由小编给大家分享下替换word文字的技巧
- 在用word处理表格,编辑文档的时候,会出现表格在页面外面的情况。这时候在电脑页面内很难看到表格中的内容,因此需要将全部表格放页面中。但是利
- 尽管默认的Mac背景看起来不错,并且会根据您所在的位置动态变化,但无法赋予个人风格。用户可以自定义桌面背景为自己想要的图片或纯色,如何在Ma
- 如何在Mac上的“音乐”中制作光盘和DVD呢?今天小编给大家整理了在Mac上的“音乐”中制作光盘和DVD的方法,操作简单,有需要的朋友快来跟