標籤：

「教程乾貨」- 在Sketch內探索自動布局 - 響應式系列一

01-28

大概需要 4 - 6 分鐘閱讀

如果你是干UI的，你應該經常會遇到重複元素的使用吧？比如列表或者表格之類的。雖然Sketch可以用Symbols控制大量重複元素，但相當不靈活，自適應性簡直就呵呵呵。

之前，如果我遇到一個布局很繁複的項目，為了快速迭代（比如重新設計Facebook的配置頁的「關於頁面」），我乾脆跳過了Sketch而直接更改HTML / CSS去了。

不過我幻想了一種方法，讓你在Sketch里直接設置參數，就像在瀏覽器里調CSS一樣爽。和造輪子說再見吧~

干這事起步並不難，我手頭就有一個漂亮的CSS布局庫，它是Facebook的React Native項目的一部分 - 它基本上是用Javascript實現的CSS FlexBox布局。所以我花了幾宿就做了一個基本的概念版插件：

點擊圖片動起來

感覺有點要起飛了？不過接下來處理文本略麻煩，好在我用一種笨方法實現了，它終於能自動調整文本行高和字體大小了。

點擊圖片動起來

但這還僅僅是個測試栗子??，現實項目中的布局可複雜多了。現在讓我們模擬一個常見的列表視圖，包含：一張圖片、主標、副標、Icon。樣式屬性在右側候著~

點擊圖片動起來

這樣幹活多爽啊，元素的大小、間距等等瑣碎的細節都自動處理好了，比Symbols可牛B多了！

點擊圖片動起來

這麼調整順序見過么？

點擊圖片動起來

可以控制不同寬度的屏幕

點擊圖片動起來

隨意更改其中某個元素的樣式（不像Symbols）

點擊圖片動起來

布局不受視覺層面的限制

進一步 - 製作控制項

Symbols的好處就是可以批量修改樣式，但隨之而來的，管理Symbols庫則成了新的痛點。

現在我需要直觀地看到各種尺寸，有點像我們為工程師輸出的「標註」文檔，但沒下圖這麼麻煩。

把它變成控制項只需將圖層命名正確，然後將一些不方便視覺化的樣式加上文字描述（這些圖層將來都會隱藏掉，所以不會造成干擾）。

現在讓我們在這個Table上試試效果，其背後的原理就是控制項屬性被轉換為單獨的樣式並附加到樣式表。

點擊圖片動起來

有點那意思了，我們現在可以直觀地編輯列表的布局，而不必每一塊都手動去改了。現在樣式表只作用於「組」，如果你樂意，你也可以把它變成控制項。我通常習慣保持較小單位的組，而不必把它變成控制項。下方圖例的布局完全是用控制項砌出來的。各位感受一下~

我這麼干絕不是要取代Symbols，而是用動態布局引擎來完善它。這能讓人們從繁瑣的造輪子中解放出來。Symbols是偉大的，能夠和控制項互補。你可以做一個Symbols安插在控制項里混著使。

接下來

這個插件還在研發中，進度不算快，有幾個bug是常事~不過儘管如此，我還是希望你們能試試它。希望你們多多反饋，這樣能把它打磨得更好~

它已經給我省了不少時間，我希望也能把別人拯救出來。

鏈接: pan.baidu.com/s/1b2m6Do 密碼: hxxw

原文地址（需要梯子）：medium.com/facebook-des

插件地址（需要梯子）：GitHub - hrescak/Sketch-Flex-Layout: Plugin for Sketch allowing for CSS Flexbox layouts using stylesheets and prototypes

原作者（需要梯子）：Matej Hrescak

譯者：Sketch 素材網

軟廣硬發：更多「Sketch中文教程」及「Sketch優質素材」，盡在 Sketch 素材網 ??????


推薦閱讀：

※「後台產品」 UX & UI 設計總結（下）- Style Guide 製作
※「教程乾貨」- 一些關於 Symbol 使用建議的總結
※「教程乾貨」- 想在Sketch里實現響應式網格系統？簡單！- 響應式系列三

TAG:Sketch | 用户界面设计 | 设计 |