这几天,北京气温突破40度,晚上7点还是炎热难耐,各位小伙伴一定要在工作之余做好防暑,毕竟互联网行业身体才是本钱。
不过随着今天降雨的到来,Sketch 56 Beta版本也悄然发布。这颗蓝色的大钻石在炎炎夏日给我们带来了清凉。
![c11bf5db4883a60b6df9ad18ec65fc32.png](https://i-blog.csdnimg.cn/blog_migrate/e3b8e2bc33817441ca0c708f3f5df9b3.jpeg)
如果想体验56Beta版本,请进入Sketch测试版主页下载 https://www.sketch.com/beta/。但是要记住,一定不要用在自己的正式文件中,防止修改后,低版本打不开。
需要注意的是,Sketch 56要求Mac系统版本是macOS High Sierra 10.13.4及以上。下面是Sketch各大版本对应的Mac系统版本,如果遇到新版的Sketch打不开就需要检查下自己的Mac系统了。
Sketch56系列版本需要macOS High Sierra 10.13.4及以上
Sketch55系列版本需要macOS High Sierra 10.13.4及以上
Sketch54系列版本需要macOS High Sierra 10.13.4及以上
Sketch53系列版本需要macOS High Sierra 10.13.4及以上
Sketch52系列版本需要macOS High Sierra 10.13.4及以上
Sketch51系列版本需要macOS Sierra 10.12.2及以上
Sketch50系列版本需要OS X El Capitan 10.11.2及以上
Sketch49系列版本需要OS X El Capitan 10.11.2及以上
Sketch每次的整数版本都会带来新的功能,这次也不例外,一起来看下吧。
直接在组件上编辑文本
对于Sketch来说,它的便利性体现在很多地方,与PS做UI界面相比,组件的文本替换功能绝对是大家最熟悉的。
比如同一个按钮,只有文本不一样,在PS中需要做多个,而Sketch中只需要做一个按钮组件,接着在右侧直接替换文本,即可创建多个不同文案的按钮,非常方便。
![46bb6999b7e378fcb8718fe54820867a.gif](https://i-blog.csdnimg.cn/blog_migrate/d3d9772d79ef4132ab3eb9724685d38e.gif)
这次56版本更加直接,可以直接双击组件中的文字进行编辑。在复杂的组件中会很有用,不用再去一个个寻找目标文字输入框,直接双击修改即可。
![1d77ac6ef5c41fd9a8aefdefacf6b486.gif](https://i-blog.csdnimg.cn/blog_migrate/24cd2be54f950389d81445136f1495ef.gif)
值得注意的是,以前在文本替换输入框中换行,需要按alt+return才可以。56版本可以在双击编辑时直接按return键换行,按esc键或者点击空白处完成编辑。
文本范围属性优化
Sketch中的文字,除了字体、颜色、大小、对齐方式等基本属性之外,还有个文本范文属性也会经常使用。
文本范围其实有三个状态:默认是单行,如果遇到换行,可以直接改变宽度数值,使其变为宽度固定高度弹性的文本。如果再拉伸高度,就会变为固定高度文本,这个时候超过高度的多余文本就会无法显示。
![039917591f62fc50dceea2dcc297a581.png](https://i-blog.csdnimg.cn/blog_migrate/bf3f8f40297f940febac1eac47c7eb33.jpeg)
在之前版本中,这三种状态只用了两个图标来切换显示,会给一些设计师带来疑惑。56版本对文本范围进行了优化,把文本范围状态都表示出来了,分为宽度弹性、高度弹性、固定宽高三个,更加明显和易用。
![e880e10237997c4862d56ad84f105677.png](https://i-blog.csdnimg.cn/blog_migrate/02ffca53ad2712755657c3e4ed90c7c4.jpeg)
三者区别可以看下图。注意看下右侧文本范围的三个属性变化,随着内容的改变, 属性也在不断变化。
![0707ea1d99fd81dcee5ab0b5fb757219.gif](https://i-blog.csdnimg.cn/blog_migrate/8a0bf98de322f5d2dccf80e7285fe4b7.gif)
需要注意的是,文本范围属性不算在文字样式内,如果文本调用了文字样式,改变文本范围是不影响样式的。
智能排列新增组和负值功能
55版本新增的智能排列功能比较鸡肋,因为无法作用在组上,只能用在多选元素上。要知道,优秀的UI设计师对图层分组是很重视的。谁也不想看到乱七八糟的图层结构。
56版本终于让图层组也获得了智能排列功能。不用再全选每个元素,只需要选中父级的组即可进行智能排列。同时新增了整理按钮,可以一键对齐和平均分布组内元素。此外还支持负值间距,比之前更加贴心。
![8405325fc2a345a918313609703f47ef.gif](https://i-blog.csdnimg.cn/blog_migrate/b6db228620e77f1c84141b1a4afac87c.gif)
Data数据源中新增头像
这个好像没发现有什么变化,反正都是随机的,增加了多少也看不出来。不过有个小改变是,默认的头像图片从原来的单身帅哥变成了一对接吻的恋人……
![bf4845136ce815ff236e6ee0be97b1d6.png](https://i-blog.csdnimg.cn/blog_migrate/f7d80bf4992a9c788214f1f26efb2c35.jpeg)
但是在实际工作中,Sketch自带的头像填充功能不符合国内设计师的需求,因为大多数是欧美人物头像,设计稿展示会有点违和感。这里推荐大家使用Kitchen插件的数据填充,除了符合国情的东亚人物之外,还有卡通、游戏、扁平等多种选择。
![3c701e81263d45560d73d0a8170a3fd4.gif](https://i-blog.csdnimg.cn/blog_migrate/90f84102be4de420f5329b4b3f40ee5d.gif)
Kitchen插件下载地址:https://kitchen.alipay.com/
设置新增账户功能
其实没什么新的,只是把账户和云功能都一起整合到设置中,并且新增了Sketch Cloud登录窗口。
![178d4edf219cbb96ec47dad66bbfc37d.png](https://i-blog.csdnimg.cn/blog_migrate/3b66465c6a59e2bbdf167e27e9ac5b42.jpeg)
![55f091fbeedba85ef039285f87774ba4.png](https://i-blog.csdnimg.cn/blog_migrate/9c224027dadf37f6356f4f1420223494.jpeg)
一个重要的Bug修复
此外还有一些Bug修复,其中要重点介绍下面这个Bug修复。
在之前版本中,很多设计师有时候会发现自己的symbol页会无缘无故多出同样的组件,如果不及时清理会严重影响整体规范。这次的56版本修复了这个Bug,原文是这样的:
Fixed a bug where copying and pasting a Symbol instance would also duplicate its master
希望官方56版本可以把这个Bug修复,真的是很影响设计效率。
总结
以上就是Sketch 56 Beta版本的新功能,总体上并没有特别惊艳的特点出现,主要是现有功能改良和提升。正式版估计会在7月中旬发布,大家敬请期待。