oe沐鸣_Sketch 62 Beta版本探秘,看看都有什么新功能!

www.pptschool.com 沐鸣平台注册 2021-02-14 580 次浏览 没有评论

Sketch 推出了 62 Beta 版本来迎接 2020。从一月的 53 开始到现在,总共推出了 10 个大版本更新。下面就一起看下 62 版本的新功能。

Sketch 62 Beta版本探秘,看看都有什么新功能!

Sketch最新Beta版本下载

如果想知道 61 版本的新功能,请看这篇文章:

如果想体验 Sketch 最新 Beta 版本,请进入 Sketch 测试版主页下载 https://www.sketch.com/beta/。但是要记住,一定不要用在自己的正式文件中,防止修改后,低版本打不开。

Sketch 62 要求 Mac 系统版本是 macOS High Sierra 10.13.4 及以上,下面是 Sketch 各大版本对应的 Mac 系统版本,如果遇到新版的 Sketch 打不开就需要检查下自己的系统版本。

智能布局新增最大值和最小值

自从 Sketch58 新增了 Smart Layout 智能布局功能后,UI 设计师可以很方便地通过制作弹性组件来应对各种不同状态的需求。

在新建 Symbol 组件时,弹窗新增 Layout 选项,总共有 7 个属性,分别对应不同的图标,下面是每个属性的简单介绍。具体用法可以看下这篇文章:

Sketch62 版本的智能布局新增了最大值和最小值功能,选择好布局方式后,就可以在右侧属性面板区域设置。这里的最大值和最小值规定了智能布局对象的两个临界点,可以分别单独设置。

水平布局设置宽度的最大和最小值:

垂直布局设置高度的最大和最小值:

那么这个最大值和最小值对我们的工作有什么实际作用呢?

两种宽度按钮

这里用上图中最常见的按钮组件作为例子。

我们经常使用的按钮是固定宽度按钮,和字数多少没关系(当然要在合理范围之内)。例如下图,按钮宽度是80,不管是多少字,宽度始终不变。好处是整齐、标准,容易排版布局。

Sketch 62 Beta版本探秘,看看都有什么新功能!

固定宽度按钮在CSS代码中,直接把宽度写死文字居中即可,比如  width:80px

另一种按钮是弹性宽度按钮,两端留固定的边距,字数越多宽度越大。好处是灵活,遇到极端特殊情况不至于文本溢出。

Sketch 62 Beta版本探秘,看看都有什么新功能!

弹性宽度按钮在 CSS 代码中就不能写具体的宽度数值了,而是要使用padding-left和padding-right,即左边距和右边距。例如上图的弹性按钮可以写成

padding-left:16px
padding-right:16px

最小宽度的弹性按钮

但是在实际工作中也会遇到这样的问题:正常字数,常见的2、3、4个字,按钮宽度固定,比如始终保持80宽,这样可以满足大多数需求。遇到极端情况,比如8个字,我们需要让按钮两端始终保持边距16,宽度跟着字数多少走,但不能小于80,这个该怎么办呢?

在Sketch62版本之前,我们可以设置按钮为水平智能布局,字数少宽度小,字数多宽度就长,如果想保持一个最小宽度,比如2、3、4个字保持80的宽度,那么我们需要手动拉伸按钮,但这样的话会破坏弹性宽度,治标不治本。

Sketch 62 Beta版本探秘,看看都有什么新功能!

Sketch62版本更新的最大值和最小值功能就可以完美解决这个问题。

比如设置宽度最小值为80,就是说这个智能布局规定了对应按钮Symbol最小宽度是80,不能再小了。接下来试着改变数字。

Sketch 62 Beta版本探秘,看看都有什么新功能!

可以看到,由于设置了最小宽度为80,按钮中即使只有一个字,宽度也会始终不会小于80,这就是最小值的作用。

最大值同样的道理,只要设置好对应数值,在不手动拉伸的情况下,宽度不会超过设置的最大值。

实际上,Sketch这次增加的最大值和最小值,比如宽度,对应CSS中的max-width和min-width两个属性,也是Web前端中比较常用的。

文档保存优化

Sketch62中保存文档时会新增两个选项,分别是:保存在本地电脑和保存在Sketch Cloud。

Sketch 62 Beta版本探秘,看看都有什么新功能!

Sketch 62 Beta版本探秘,看看都有什么新功能!

还有其他的一些更新点,也主要是对Sketch Cloud 的优化,可见在Figma的追赶下,Sketch也逐步重视云端的相关功能。

总结

前有Figma的攻城略地,后有Adobe XD的紧追不舍,2020年Sketch将会给我们UI设计师带来哪些新功能和新的设计工作流呢?让我们拭目以待。

欢迎关注作者的微信公众号:「UI黑客」

Sketch 62 Beta版本探秘,看看都有什么新功能!

回顶部