隨著越來越多的設(shè)計(jì)團(tuán)隊(duì)使用Sketch構(gòu)建UI界面，這顆金光閃閃的大鉆石已成為眾多UI設(shè)計(jì)師的標(biāo)配，設(shè)計(jì)生產(chǎn)力被極大地解放出來。而且在組件化設(shè)計(jì)、響應(yīng)式設(shè)計(jì)、團(tuán)隊(duì)協(xié)作、樣式管理等方面越來越發(fā)揮著不可代替的作用。

雖然Sketch有這么多的優(yōu)點(diǎn)，但還有很多設(shè)計(jì)師按照傳統(tǒng)的PS習(xí)慣使用，并沒有充分發(fā)揮Sketch的強(qiáng)大功能，僅僅簡單地把它作為一款視覺設(shè)計(jì)軟件。在平時(shí)的UI工作中遇到效率問題還是使用繁瑣的操作來解決，增加了任務(wù)量，久而久之加班便成為常態(tài)。

比如下面這個(gè)音樂播放條，寬度是320px，為了可重復(fù)使用，轉(zhuǎn)化為symbol組件，命名為小組件/音樂/播放條。但是現(xiàn)在有個(gè)頁面需要用到480px的播放條，這個(gè)時(shí)候直接拉伸會發(fā)現(xiàn)組件被破壞。

如果再做個(gè)480px的播放條組件又會覺得重復(fù)：明明長得一樣，只是寬度不同，為什么不能直接使用同一個(gè)組件呢？

Sketch Resizing就是這么一個(gè)功能，在它的加持下，我們可以把結(jié)構(gòu)相同的組件轉(zhuǎn)化為彈性的響應(yīng)式組件，實(shí)現(xiàn)效率提升。

比如上面的音樂播放條使用了Resizing之后就會變得富有彈性，只需要一個(gè)組件就可以實(shí)現(xiàn)不同的寬度。

在以前的PS時(shí)代，拉伸是屬于破壞性的一種操作，我們在遇到樣式一樣、寬度不一樣的組件時(shí)，只能重新建立一個(gè)新組件，這就造成了樣式重復(fù)。而這在前端的面前都不是事兒，只需要改變寬度，內(nèi)部使用的float、position等屬性就可以發(fā)揮響應(yīng)式作用，實(shí)現(xiàn)組件的復(fù)用。Resizing其實(shí)就是賦予組件響應(yīng)效果的。

Resizing介紹

Resizing又叫做智能縮放，可以對組內(nèi)或者symbol內(nèi)的元素進(jìn)行位置和尺寸的約束，從而實(shí)現(xiàn)組件的彈性化。

到目前最新的55版本為止，Resizing界面總共經(jīng)歷了三個(gè)階段的變換。

1-最初只有四個(gè)屬性，分別代表拉伸、固定位置、縮放和浮動(dòng)。需要多多練習(xí)才能深入理解。

2-接下來四個(gè)屬性被打散，分為左邊的上下左右固定和右邊的寬高固定，設(shè)計(jì)師可以自由搭配，提高了靈活性。

3-最后進(jìn)化到了如今的Pin to Edge +Fix Size模式，標(biāo)題布局的改變讓空間加大，增加了預(yù)覽窗口，整體更加靈活和直觀。

其實(shí)到了Sketch54版本自帶中文后，Resizing有了官方中文名稱：調(diào)整尺寸，兩個(gè)重要屬性也有了更直觀的中文解釋，讓設(shè)計(jì)師更容易理解。

對于如何切換54版本以后的中英文界面，可以看這篇文章《還我英文界面！Sketch54設(shè)置英文版的方法》

Resizing屬性解析

Resizing主要有下面的幾種搭配用法。例子中，UI黑客的logo與背景一起編組，我們修改的是組內(nèi)logo的Resizing屬性。

1-什么都不選，表示正常的拉伸，和PS拉伸效果一致，但是具有破壞性質(zhì)。

2-邊緣位置不固定，寬高固定，表示浮動(dòng)。logo沒被破壞，但是位置不對。

3-邊緣位置固定，寬高不固定，表示邊緣吸附縮放。上下左右的間距都對，但是logo被拉伸破壞了。

4-邊緣左上角固定，寬高固定，表示logo固定在左上角，實(shí)現(xiàn)了我們所需要的效果。

除此之外還有其他的搭配組合，都是在以上的四個(gè)基礎(chǔ)上擴(kuò)展而來的，操作都類似，但是會在不同的界面中形成不同的效果。

對于上面的logo例子來說，結(jié)構(gòu)很簡單，組內(nèi)只有一個(gè)元素，但是在實(shí)際的設(shè)計(jì)需求中，我們往往會面臨更復(fù)雜的文字、圖片、形狀等元素搭配，這就要求設(shè)計(jì)師通過更多的實(shí)例來進(jìn)行練習(xí)。

播放條圖層分析

回到剛開始的播放條，它就是一個(gè)比較復(fù)雜的結(jié)構(gòu)，既有文字又有形狀。無論我們怎么拉伸，內(nèi)容都會根據(jù)寬度來進(jìn)行適配，里面當(dāng)然也使用了我們的上面講到的Resizing功能。

在使用Resizing制作復(fù)雜彈性組件之前，我們首先要梳理清楚組件內(nèi)部各個(gè)元素，只有這樣才能更加準(zhǔn)確地搭配使用位置與寬高。

播放條主要分為三個(gè)部分：

A-左邊時(shí)間和播放按鈕

B-中間進(jìn)度條和B1

C-右邊時(shí)間

我們想要實(shí)現(xiàn)的效果：

A-整體與播放條左邊緣的間距始終固定，并且大小不變

B-整體與播放條左右邊緣距離固定，其中灰色進(jìn)度條寬度會變化，B1大小始終不變

C-整體與播放條右邊緣的間距始終固定，并且大小不變

整個(gè)播放條的圖層結(jié)構(gòu)是這樣的

播放條添加Resizing

接下來開始給播放條添加Resizing屬性。

對于A和C來說很簡單，只需要固定大小，然后左右間距固定即可。

A的Resizing設(shè)置

C的Resizing設(shè)置

到現(xiàn)在為止我們設(shè)置好了A和C，B還沒有設(shè)置，看下效果。

可以看到A和C很聽話，老老實(shí)實(shí)地堅(jiān)守在自己的位置，而且不隨著拉伸而發(fā)生寬高變化。

接下來我們開始B的Resizing設(shè)置。

對于B來說，內(nèi)部又分為灰色條和B1。其中灰色條我們并不用給它進(jìn)行任何設(shè)置，因?yàn)橐訠為參照物來說，灰色條本身就需要被拉伸的，所以我們需要設(shè)置好B1。

B1需要的效果是大小不變，位置固定在左側(cè)，實(shí)際上和A的設(shè)置一樣。

接下來我們再看一下設(shè)置好A、C、B1之后的拉伸效果。

快成功了，只是B的位置一直在發(fā)生變化，我們最后需要讓B的兩端與播放條邊緣間距保持固定，寬度隨著拉伸而變化，那么就需要兩端固定即可。

經(jīng)過上面的設(shè)置，我們最終就完成了這個(gè)彈性伸縮自如的音樂播放條。只需要一個(gè)組件即可適應(yīng)任何寬度變化，不用再因?yàn)閷挾鹊牟煌ブ貜?fù)制作組件，減少工作量，提高文檔的可維護(hù)性。

在我們以后的UI設(shè)計(jì)中，會遇到各種各樣的需要自適應(yīng)寬度或者高度的組件，這就需要我們充分掌握和利用Resizing的功能，把控好每個(gè)組件的特點(diǎn)，真正做到效率提升。

本文經(jīng)作者授權(quán)轉(zhuǎn)載。

作者：UI黑客

原文地址：http://www.uihacker.com/sketch-resizing/