使用 Sketch 3.9 快速實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)
Sketch3.9終于發(fā)布了原生的響應(yīng)式設(shè)計(jì)解決方案。只需要設(shè)置一個(gè)屬性，便可以快速實(shí)現(xiàn)任意尺寸的適配。
昨天晚上，Sketch發(fā)布了3.9beta版
http://www.sketchapp.com/beta/
其中更新的一個(gè)非常重要的功能，就是是可以縮放 Symbol和圖層組。
其實(shí)簡(jiǎn)單來說，只是在圖層屬性面板增加了一個(gè) Resizing 的屬性選項(xiàng)。這個(gè)選項(xiàng)看似很不起眼，但只需要其中兩個(gè)選項(xiàng)，就能實(shí)現(xiàn)絕大部分設(shè)計(jì)的「適配」需求。
用自帶模版的例子舉例吧。就一般 bar 里頭的控件來說。適配起來無非就是保持邊距的情況下，按照某一角對(duì)齊。這種情況就可以選擇Pin to corner。
這樣的話，所設(shè)置的圖層就會(huì)按照中心點(diǎn)所在父級(jí)的位置進(jìn)行適配，這個(gè)選項(xiàng)無非就是9種情況，分別是相對(duì)四個(gè)角的四個(gè)點(diǎn)的編劇固定，或者分別保持縱向或橫向居中，然后分別保持固定上下左右的距離。
Resize object 則針對(duì)希望填滿父級(jí)單位的元素，比如網(wǎng)站的位圖banner，或者填充一個(gè)列表的內(nèi)容。下面的例子中，左右的標(biāo)題和圖標(biāo)都是設(shè)置的 Pin to corner，但段落文字設(shè)置的 Resize object。這樣的話內(nèi)容都會(huì)保持四個(gè)方向的邊距，跟著父級(jí)單位一起縮放。
最后一種，F(xiàn)loat in place，他會(huì)根據(jù)父級(jí)元素的縮放，來等比例縮放圖層所處父級(jí)圖層的邊距，這個(gè)屬性可能可以用于無腦縮放的 tabs。
不得不說Sketch新增的這3種屬性是一個(gè)天才的想法。邏輯簡(jiǎn)單，操作也非常快捷。
在此之前，有一個(gè)第三方插件也能很好的實(shí)現(xiàn)這樣的適配，但操作就繁瑣很多了。各位也可以參考。
https://github.com/matt-curtis/Fluid-for-Sketch
