用Sketch制作弹性可伸缩的音频播放条-UI黑客

20180211-用Sketch制作弹性可伸缩的音频播放条

看完本文你将解决以下问题

  • 如何只用一个symbol实现宽度不一样的音乐播放组件
  • Sketch的Resizing功能详解

问题场景再现

之前有个项目,需要用到音频播放条,400px,长这个样子

用Sketch制作弹性可伸缩的音频播放条-UI黑客

很简单,三下两下搞定,同时养成习惯,转化为symbol,万一其他页面也用到呢?

但实际工作中我们经常会遇到这样的需求,在另一个页面,这个播放条需要340px,而且有些页面的进度条要随着页面宽度改变,实现宽度响应该怎么办呢?

试着拉伸播放条,就变成了这样

用Sketch制作弹性可伸缩的音频播放条-UI黑客

难道还需要再制作一个340px的吗?明明这两个组件一模一样。

在html中,这个问题很容易解决,对于相同结构的组件,宽度并不影响样式展现,用定位浮动即可解决。

那么Sketch能用一个symbol实现不同宽度吗?

可以,答案就是Resizing。

Sketch中的Resizing功能

这个Resizing,汉化插件把它翻译成智能缩放。

有个小插曲,前段时间公司有UI招聘需求,我面试了好几位设计师,问到Resizing好多都不知道。说到中文智能缩放,会和Sketch的另一个功能Scale混淆,大家需要注意下,这两个是完全不同的概念。

用Sketch制作弹性可伸缩的音频播放条-UI黑客

左边代表位置的上下左右,可以组合使用,点击对应的就是固定。

右边代表宽和高的拉伸与否,点击对应的就是禁止拉伸。

这样就会组合出不同的位置和拉伸效果,如下图

用Sketch制作弹性可伸缩的音频播放条-UI黑客

制作可伸缩音乐播放条

在解了Resizing的特点后,分析一下我们的需求

1:左边的播放按钮、时间、蓝色条和滑动点需要固定在左侧

2:右边的总时间需要固定在右侧

3:中间的灰色进度条可以根据需求弹性伸缩

结合Resizing的特性,弹性播放条就能制作出来了。

用Sketch制作弹性可伸缩的音频播放条-UI黑客
用Sketch制作弹性可伸缩的音频播放条-UI黑客

上图红框中的元素编成一个组,组也可以使用Resizing,并且组里面的元素也适用对应属性。

结语

Resizing的功能类似于css中的float属性,让Sketch设计界面变得更加自由化。我们可以把结构相同的组件统一归纳为一个symbol,大大减少组件维护的成本,也提高了设计效率

随着Sketch不断更新,UI设计理念和css理念会越来越接近,所以各位设计师有空还是多少了解一些前端知识,扩展自己的技能树。

最后附上播放条的源文件

链接: https://pan.baidu.com/s/1NXvfmN5YsOCSRAOe-PT4wg 提取码: rpsq