Sketch的Resizing功能竟然还能这么用，以后做界面再也不怕加班了
跟着越来越多的设想团队利用Sketch构建UI界面，那颗金光闪闪的大钻石已成为浩瀚UI设想师的标配，设想消费力被极大地解放出来。并且在组件化设想、响应式设想、团队协做、款式治理等方面越来越发扬着不成取代的感化。
固然Sketch有那么多的长处，但还有良多设想师根据传统的PS习惯利用，并没有足够发扬Sketch的强大功用，仅仅简单地把它做为一款视觉设想软件。在日常平凡的UI工做中碰着效率问题仍是利用繁琐的操做来处理，增加了使命量，久而久之加班便成为常态。
好比下面那个音乐播放条，宽度是320px，为了可反复利用，转化为symbol组件，定名为小组件/音乐/播放条。但是如今有个页面需要用到480px的播放条，那个时候间接拉伸会发现组件被毁坏。
假设再做个480px的播放条组件又会觉得反复：明明长得一样，只是宽度差别，为什么不克不及间接利用统一个组件呢？
Sketch Resizing就是那么一个功用，在它的加持下，我们能够把构造不异的组件转化为弹性的响应式组件，实现效率提拔。
好比上面的音乐播放条利用了Resizing之后就会变得富有弹性，只需要一个组件就能够实现差别的宽度。
在以前的PS时代，拉伸是属于毁坏性的一种操做，我们在碰着款式一样、宽度纷歧样的组件时，只能从头成立一个新组件，那就形成了款式反复。而那在前端的面前都不是事儿，只需要改动宽度，内部利用的float、position等属性就能够发扬响应式感化，实现组件的复用。Resizing其实就是付与组件响应效果的。
Resizing介绍
Resizing又喊做智能缩放，能够对组内或者symbol内的元素停止位置和尺寸的约束，从而实现组件的弹性化。
到目前最新的55版本为行，Resizing界面总共履历了三个阶段的变更。
1-最后只要四个属性，别离代表拉伸、固定位置、缩放和浮动。需要多多操练才气深进理解。
2-接下来四个属性被打散，分为右边的上下摆布固定和右边的宽高固定，设想师能够自在搭配，进步了乖巧性。
3-最初进化到了现在的Pin to Edge +Fix Size形式，题目规划的改动让空间加大，增加了预览窗口，整体愈加乖巧和曲看。
其实到了Sketch54版本自带中文后，Resizing有了官方中文名称：调整尺寸，两个重要属性也有了更曲看的中文阐明，让设想师更随便理解。
关于若何切换54版本以后的中英文界面，能够看那篇文章《还我英文界面！Sketch54设置英文版的办法》
Resizing属性解析
Resizing次要有下面的几种搭配用法。例子中，UI黑客的logo与布景一路编组，我们修改的是组内logo的Resizing属性。
1-什么都不选，表达一般的拉伸，和PS拉伸效果一致，但是具有毁坏性量。
2-边沿位置不固定，宽高固定，表达浮动。logo没被毁坏，但是位置不合错误。
3-边沿位置固定，宽高不固定，表达边沿吸附缩放。上下摆布的间距都对，但是logo被拉伸毁坏了。
4-边沿左上角固定，宽高固定，表达logo固定在左上角，实现了我们所需要的效果。
除此之外还有其他的搭配组合，都是在以上的四个根底上扩展而来的，操做都类似，但是会在差别的界面中构成差别的效果。
关于上面的logo例子来说，构造很简单，组内只要一个元素，但是在现实的设想需求中，我们往往会面对更复杂的文字、图片、外形等元素搭配，那就要求设想师通过更多的实例来停止操练。
播放条图层阐发
回到刚起头的播放条，它就是一个比力复杂的构造，既有文字又有外形。无论我们怎么拉伸，内容城市根据宽度来停止适配，里面当然也利用了我们的上面讲到的Resizing功用。
在利用Resizing造造复杂弹性组件之前，我们起首要梳理清晰组件内部各个元素，只要如许才气愈加准确地搭配利用位置与宽高。
播放条次要分为三个部门：
A-右边时间和播放按钮
B-中间进度条和B1
C-右边时间
我们想要实现的效果：
A-整体与播放条右边缘的间距始末固定，而且大小稳定
B-整体与播放条摆布边沿间隔固定，此中灰色进度条宽度会改变，B1大小始末稳定
C-整体与播放条右边沿的间距始末固定，而且大小稳定
整个播放条的图层构造是如许的
播放条添加Resizing
接下来起头给播放条添加Resizing属性。
关于A和C来说很简单，只需要固定大小，然后摆布间距固定即可。
A的Resizing设置
C的Resizing设置
到如今为行我们设置好了A和C，B还没有设置，看下效果。
能够看到A和C很听话，老诚恳实地坚守在本身的位置，并且不跟着拉伸而发作宽高改变。
接下来我们起头B的Resizing设置。
关于B来说，内部又分为灰色条和B1。此中灰色条我们其实不用给它停止任何设置，因为以B为参照物来说，灰色条自己就需要被拉伸的，所以我们需要设置好B1。
B1需要的效果是大小稳定，位置固定在左侧，现实上和A的设置一样。
接下来我们再看一下设置好A、C、B1之后的拉伸效果。
快胜利了，只是B的位置不断在发作改变，我们最初需要让B的两头与播放条边沿间距连结固定，宽度跟着拉伸而改变，那么就需要两头固定即可。
颠末上面的设置，我们最末就完成了那个弹性伸缩自若的音乐播放条。只需要一个组件即可适应任何宽度改变，不消再因为宽度的差别而往反复造造组件，削减工做量，进步文档的可庇护性。
在我们以后的UI设想中，会碰着各类各样的需要自适应宽度或者高度的组件，那就需要我们足够掌握和操纵Resizing的功用，把控好每个组件的特征，实正做到效率提拔。
来源收集