如何讓一套設(shè)計(jì)自適應(yīng)不同屏幕？相信每個(gè)UI都有這樣的需求。你還在自己一個(gè)一個(gè)屏幕尺寸去慢慢調(diào)整像素值嗎？太慢啦~ 其實(shí)用sketch自帶的symbol/reszing刹泄，再加上一個(gè)超好用的插件：Auto-Layout，就能很高效的解決這個(gè)問題怎爵。下次甲方說：我想看看這個(gè)設(shè)計(jì)在 ipad/網(wǎng)頁(yè)/iphone7 plus 上是什么效果特石？ 你就可以瞬間生成設(shè)計(jì)圖啦！
先看一下最終的效果：
不論如何改變當(dāng)前sketch中artboard的大小鳖链，其中的UI都會(huì)按照我設(shè)置的要求自適應(yīng)的變化姆蘸，并且不會(huì)出現(xiàn)圖片被拉伸或者位置沒有居中之類的錯(cuò)誤。
如果你不覺得這很神奇芙委，請(qǐng)?jiān)谧约旱膕ketch artboard上拖拽一下試試：
下面具體介紹下我是如何實(shí)現(xiàn)的逞敷，整個(gè)過程分為三步：
Step1. 整理UI將其中重要組件設(shè)置為symbol
可以下載我的sketch-demo文件 ，demo頁(yè)面結(jié)構(gòu)如下：
所有symbol如下：
其中cover由user灌侣，icon和bg這三個(gè)更小的symbol構(gòu)成推捐。我很喜歡這種symbol中套symbol的結(jié)構(gòu)，可以無(wú)限復(fù)用重組~
2. 給Symbol中的元素選擇合適的resizing選項(xiàng)
好像很多人都沒用過sketch中的resizing侧啼，甚至沒注意到它的存在牛柒。resizing的位置如下圖（選中symbol時(shí)會(huì)出現(xiàn)）：
resizing這個(gè)選項(xiàng)的意義就是堪簿，當(dāng)symbol的大小變化的時(shí)候，其中的元素位置如何變化皮壁，比如我給底部導(dǎo)航欄中的每個(gè)圖標(biāo)的resizing都設(shè)置為 float in place椭更，那么當(dāng)?shù)撞繉?dǎo)航欄寬度變化的時(shí)候，圖標(biāo)會(huì)保持自己的大小和百分比位置不變：
效果：
給每個(gè)元素都設(shè)置好闪彼，具體如下：
pin to corner就是元素大小不變甜孤，位置固定在相對(duì)距離最近的corner處。具體可以看看sketch官網(wǎng)解釋畏腕，基本上試用一下就會(huì)明白了。
3. 使用auto-layout插件讓整個(gè)UI自適應(yīng)
最后一步就是用大名鼎鼎的auto layout插件啦茉稠，下載地址：Auto Layout for Sketch
這個(gè)插件使用非常簡(jiǎn)單描馅，插件安裝完成后，會(huì)在sketch上出現(xiàn)一個(gè)選項(xiàng)欄：
我們從cover開始而线，給其設(shè)置對(duì)應(yīng)的autolayout參數(shù)铭污。我們希望不論屏幕如何變化，cover都要100%的寬度膀篮，所以：
而底部的tab欄嘹狞，我們希望它始終保持在距離屏幕底部為0的地方，左右距離也為0誓竿。如圖使用pin的功能即可磅网。
關(guān)于更多autolayout的高級(jí)使用方法，可以看看官網(wǎng)的說明和視頻 guide
完成這三步筷屡，你的sketch設(shè)計(jì)稿已經(jīng)變成完全的自適應(yīng)UI了涧偷！
