細說sketch 39新必殺:Resizing,創建響應式UI

Sketch 39中新增了一個重要的功能:Resizing,可以給圖層設置布局改變時圖層的響應策略。
Sketch官方發了一個簡短的演示視頻(需翻墻):Sketch 39 Brings Symbol Resizing


下面詳細的介紹這4種策略

Stretch:拉伸

  • 這就是圖層默認的策略,和以前sketch中一樣
  • 當外圍尺寸變化時,圖層也按照變化的百分比拉伸自身


Pin to Corner:固定邊距

  • 組內圖層的尺寸不變
  • 每個圖層到最近的邊的距離保持不變
  • 當圖層到兩邊的距離一致時,此時會保證圖層居中

Resize Object:改變圖層尺寸

  • 圖層會改變自己的尺寸來保證到每條邊的邊距保持不變
  • 當圖層和group的3條或者4條邊相接的時候卻會改變行為,圖層會保持自身尺寸,然后改變和剩下那條沒有相接的邊的邊距,注意下面gif的第二個圖就是這個邏輯。這個屬性用來做titlebar正合適啊。但是這個邏輯和float in plcae有點像。

Float in Place:保持邊距比例

  • 和CSS里面的float不一樣!
  • 組里的圖層保持尺寸不變,圖層的位置會根據邊距的百分比重置。外圍拉伸后,圖層會保證到兩邊的比例不變。如下圖所示,上圖中綠色矩形到左邊距為25,到右邊距為125,比例為1比5。當組拉伸到下圖的尺寸后,到左邊的邊距為50,則此時右邊距為了保持比例調整為50 * 5 =250
  • 根據實際體驗,因為百分比時常會得到小數,所以有時拉伸后圖層的位置會有百分1這樣的偏移。

溫馨提示

  • 強烈建議打開設置中的Pixel fit when resizing layers
  • pin to corner 和 float in place都可以達到居中的設置。pin to corner只能保證離邊緣最近的那個軸方向居中,只能保證一個方向的居中。而float in plcae 則每次都按照比例計算,兩個方向都可以保證居中。
  • resizing的設置被認為是圖層的核心屬性,不是樣式屬性。所以不被包括在Shared Styles中。
  • 選擇圖層后可以使用快捷鍵 ctrl+1,2,3,4快速設置resizing策略

相關鏈接:
https://medium.com/sketch-app-sources/sketch-39-resizing-cheat-sheet-feec0450e7e2#.g0j7cdv35

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容