恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
Sketch 52版本重磅发布!为你揭秘最新的实用技巧!
0.0°
2018-11-01 原创文章 教程 举报 13582 208 358 34

先看下官方视频演示


全文共2094词,阅读大约需要12分钟


Image title


假期中间,sketch发布了一次重大更新,这次更新的主题是“让工作更加聚焦”,更新的内容也非常赞!主要有以下几点:



1、全新的UI,易用性和可读性更强,并增加了“暗黑模式”


2、更高的性能,在处理大量文件时,渲染响应更快


3、支持更多类型嵌套布尔运算,布尔运算能力得到显著增强


4、可以自定义的数据源,更高效的设计演示


5、样式覆盖


6、其他小功能更新



接下来,我将详细的介绍每一个更新内容,带大家快速了解sketch的最新变化。




一、全新的UI

Image title

图片来源:Sketch官网


在52版本中,sketch对软件UI进行了重大更新,包括界面布局,图标等等都进行了重新设计,提高了整个应用的可用性和可读性。其中,对于我个人而言,此次更新中最亮眼的就是“暗黑模式”。开启这个模式需要电脑更新到最新的macOS Mojave版本,并选择对应的颜色模式,sketch中就可以基于你的选择变换主题了。

Image title

开启暗黑模式的过程


二、更高的性能

之前的版本在处理有大量界面的页面放大缩小时,渲染会比较卡顿,更新之后会这方面性能上有很大的提升。官方给出的数据是在某些操作下性能提升2.7倍。具体的速度大家来感受下:

Image title

旧版本51时移动一个画板,明显感觉有延迟(注意看红框位置和移动渲染位置)


Image title

最新版本52时,红框位置和移动渲染位置已经基本上可以实时重合了


Image title

旧版sketch51


Image title

新版sketch52


基于以上对比更新,新版本会更加流畅,果断更新啊。


三、更强的嵌套布尔运算

1、布尔图层管理更加清晰

Image title

旧版本布尔图层层级关系


Image title

新版本新增了层级关系,更符合使用预期


2、文本与图形也能进行布尔运算

Image title

在旧版本中,文本与图形是不能直接进行布尔运算的。但在新版本中,这项运算得到了加强,不但能做布尔运算,还能实现运算后可编辑,要做像镂空字之类的效果就非常简单了。


3、symbol元件也能进行布尔运算(旧版本不行)

Image title

元件的布尔运算,可以对很多组合图形进行创意组合,还能快速编辑


布尔运算功能的强化,非常的实用,我所举的几个例子只能算是抛砖引玉,期待大家的创意发挥。如果有更新奇的发现,也欢迎给我后台留言,或者加我微信,一起探讨。


四、自定义数据源功能

先通过一个案例演示一下,让大家快速了解下这个功能。

Image title

通过案例我们会发现,本质上数据源就是做了一个数据填充的事。其实在之前的版本就有插件能做,只不过这次官方把这个功能给内置了。这个功能的方便之处就在于,大家可以自定义数据源实现填充。在一些项目中如果有很多重复使用的图片或者文本作为界面内容的时候,这个功能就可以节省很多时间了。


那数据源怎么做呢?有几个要注意的地方:

1、对于图片资源来说,选择需要的图片资源整理到一个文件夹中进行添加,在填充时需要选择一个合适的填充方式:Fill(填充)、Fit (适应)、stretch (拉伸)、Tile(平铺)

Image title


2、对于文本来说,需要注意每一条数据单独一行,并以txt文本格式存储

Image title

这个功能,在页面量大,数据重复率高的时候非常实用,进阶玩法是用js或者python来爬取页面数据就更加方便了,数据也会更加真实。


3、某些情况下,更新后在数据源菜单中没有Unsplash这个选项(官方做的一个插件示例,但是也比较实用),重启(插件管理中关闭再开启)这个插件后就能解决了。

Image title


五、样式覆盖

在旧版本中,如果要在symbol内部实现修改图形和文本的样式,是需要通过复制多个symbol或其他复杂办法来解决,但是这样会加大symbol体系的复杂程度,不便于后期维护管理。


本次更新中,通过样式覆盖很好的解决了这个问题,先看下具体案例演示:

Image title

Image title

利用一个symbol实现了图形和文字的变色,在做类似选项卡的设计时非常的方便

我在案例中只是修改了颜色,其实还可以做很多形式的修改,比如文本的大小和样式,图形的图层样式(大小的修改还不支持),或者有更多创意用法还等待大家继续去开发了。


六、其他小功能更新

1、在旋转多个对象时,选定的图层现在围绕“旋转”工具的枢轴点旋转,这样更符合用户预期。而在旧版中则是彼此独立旋转,这个在以前是需要对图形建组才能以一个轴心旋转。

Image title

旧版本的旋转,图形是相互独立旋转

Image title

新版本中,图形的旋转是围绕一个旋转中心进行旋转


2、图层的筛选变得更加方便

Image title


3、画板滚动吸附

Image title


4、Resizing功能经过几次更新后变得更加易懂,这次还增加了预览动画,操作起来更加方便了。

Image title


七、与此次更新紧密相关的插件推荐

Image title

数据源插件

Image title

此插件不但能实现随机图片,还能针对指定关键词进行填充


八、注意事项

1、使用新版本之前,记得把sketch源文件进行备份,因为用最新版sketch打开后再用低版本打开会出现data数据丢失,一些样式错误等等

2、要想开启暗黑模式,需要将mac更新到最新版

3、更新之后,sketch measure可能会遇到导不出切图标注的问题,插件的原作者还没有修复这个问题,不过已经有网友解决了这个bug。打开网页https://github.com/utom/sketch-measure/pull/474 然后下载下图中的插件包,安装并重启sketch后,就可以正常导出了。

Image title


好了,本次的更新内容就写到这里,更多可能期待各位去发现了。


过了国庆,很快就要过春节了,今年时间已经所剩不多,奋斗吧!


本文由 @彩云Sky 原创发布,未经许可,禁止转载。

微信公众号:彩云译设计

更新:2018-11-01

收藏

208人已收藏

彩云Sky

腾讯ISUX高级视觉设计师

  • 177

    作品

  • 1.3w

    粉丝

  • 13

    关注

  • 实战案例!如何从0到1为Apple Vision Pro设计
  • 苹果Vision Pro上到底有哪些设计亮点?| 视觉篇
  • 抢先体验苹果visionOS的方法
  • 深度解读VisionOS设计原则,掌握下一代设计趋势!

    猜你喜欢

      2018-11-01 原创文章 教程 举报 13582 208 358 34

      Sketch 52版本重磅发布!为你揭秘最新的实用技巧!

      0.0°

      你确定要举报Sketch 52版本重磅发布!为你揭秘最新的实用技巧!

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年10月09日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      358
      208
      34

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录