堆棧是 Sketch 中構建靈活、可適配布局的新方式。從按鈕設計到復雜的UI設計，它們將深刻重塑你使用Sketch的體驗。在這篇文章中，設計主管 Chris Downer 向我們展示了堆棧是什么——以及為什么它們如此重要。

在我們的Athens 版本中，我們推出了一項備受期待的功能——堆棧布局（即堆棧）。簡而言之，借助堆棧，你可以創(chuàng)建能根據(jù)背景同比例縮放的UI 元素，或者讓其內容的大小和間距隨上下文變化。你還可以將堆棧嵌套在其他堆棧中，以創(chuàng)建強大且動態(tài)的布局。其效果類似Figma 中的自動布局或 Framer 中的堆棧。

 

從智能布局到堆棧

關于堆棧有很多值得探討的內容。為什么現(xiàn)在推出？我們是如何構建它們的？它們?yōu)樵O計師提供了什么？我將在本文中嘗試回答這些問題。關于我們如何構建它們的更詳細內容，我們將留待以后再分享。目前，讓我們從頭開始，看看堆棧是如何誕生的。

 

想象一下：你在調整設計中某個 UI 元素的高度，然后需要手動選擇并移動其下方的所有元素以校正層間距離。當你需要無數(shù)次更新和迭代設計時，這種拖動矩形的工作既繁瑣又低效。

 

設計師期望工具能與他們協(xié)作而非對抗，而這正是我們在2019年推出Smart Layout時希望解決的問題。當時我們的核心目標是簡潔性。使用Smart Layout的組內圖層會嚴格遵循你設置的精確位置，僅在調整大小、插入或刪除圖層時才會適配。

 

Smart Layout當時反響不錯，但存在局限性。在追求Smart Layout盡可能簡潔的過程中，我們最終未能為用戶提供他們所需的控制級別，這導致其存在一定程度的不確定性。

 

隨著Swift中的堆棧、CSS中的Flexbox以及其他設計工具中類似布局系統(tǒng)的出現(xiàn)，我們自然收到了更多關于Sketch中更好布局工具的需求。我們已將Smart Layout推至極限，是時候打造全新的解決方案了。

 

這個新工具就是堆棧，同時在 Sketch 中引入了一種新的容器類型：框架。這種新的容器類型是構建堆棧的關鍵一步?？蚣芗炔皇墙M也不是畫板。它們更加靈活，并且關鍵的是，可以設置為固定大小，也可以動態(tài)調整以適應內容。我們還有一篇關于框架的博客文章值得一讀。

 

使用堆棧進行設計

那么，如何使用堆棧，以及有哪些最佳實踐？

 

首先，使用堆棧進行設計沒有絕對的對錯之分。你可以在添加任何內容之前創(chuàng)建一個堆棧，也可以在已經設計好的內容周圍創(chuàng)建一個堆棧。在后一種情況下，當你將一個堆棧添加到現(xiàn)有設計中時，我們會根據(jù)你在畫布上排列圖層的方式，應用你可能需要的最相關的堆棧布局屬性。

 

堆棧的最基本示例是一個根據(jù)內容大小調整的按鈕。只需繪制一個矩形，并在其上方添加一個文本圖層。選中兩個圖層并按下?L。就這樣！如上所述，我們會自動應用最合理的布局設置。你還會發(fā)現(xiàn)，你繪制的矩形已消失，其樣式屬性現(xiàn)在已成為堆棧本身的一部分。

這個按鈕是使用水平堆棧構建的——包括間距和對齊方式。

 

制作好按鈕后，您可以在檢查器中調整間距和對齊方式，或在畫布上點擊并拖動以視覺方式設置間距。如果您將圖標拖放到按鈕中，它將成為堆棧的一部分。所有內容將動態(tài)調整，因為堆棧的寬度已設置為適應其內容的大小（層的總和 + 間隙值 + 填充）。

 

例如，當添加文本標簽時，按鈕會動態(tài)調整大小，將圖標拖入堆棧后它也會自動調整更新。

 

使用堆棧，您的按鈕在構建過程中會自動適應。無需手動調整。

 

堆棧內的項目可沿水平或垂直方向流動。您無法像在Sketch其他區(qū)域那樣自由調整堆棧中的圖層位置，至少默認情況下無法實現(xiàn)。當然，同一堆棧內無法同時包含水平和垂直布局，但您可以將垂直堆棧嵌套在水平堆棧中（反之亦然）。

 

在這個更復雜的示例中，我們有一個模態(tài)對話框，它結合了水平和垂直堆棧，嵌套在一個垂直堆棧中，其高度會根據(jù)文本長度而變化。

 

每個部分——從按鈕到復選框——都使用自己的堆棧進行組織。

 

在此堆棧內，標題和描述位于垂直堆棧中。復選框和標簽位于水平堆棧中。還有一個水平堆棧包含兩個按鈕（這些按鈕本身也是水平堆棧！），所有內容均包含在垂直堆棧中，居中對齊，并應用了統(tǒng)一的內邊距。

 

如果你對那個關閉按鈕感到好奇，它也位于堆棧內，但啟用了“忽略堆棧布局”屬性（可在檢查器中找到）。這使我們能夠將其自由放置在右上角，而不會影響其他層。有了這個功能，再加上“按圖層覆蓋對齊”的選項（選擇一個圖層，然后點擊檢查器頂部的對齊控件），你就可以順利地在堆棧內進行一些“例外”操作。

 

更好的設計方式

我認為說使用堆棧能讓你成為更好的設計師并非夸張。如果你對堆棧不熟悉，可能需要一些時間來理解——這沒關系。但總會有一個時刻，你突然領悟到它，并完全改變你對設計布局的思考方式。

 

堆棧改變了你對布局的思考方式，迫使你對間距和對齊進行有意識的控制。

 

堆棧迫使你對間距和對齊進行有意識的控制，并減少在自由形式設計中可能出現(xiàn)的不一致性。它們還能幫你節(jié)省時間，讓你更快地迭代、探索替代布局，并在需要更新時使設計具有前瞻性。

 

除此之外，它們還會改變你對布局的思考方式，使設計更接近實際實現(xiàn)方式，并改善與開發(fā)者的交接流程。說到交接，我們在網頁應用的交接工具中也已整合了堆棧功能。

 

希望這篇簡要概述能展示堆棧的強大功能與可能性，這些功能現(xiàn)已包含在Sketch最新版本中。請查閱文檔以獲取堆棧的詳細說明及所有新設置的說明。

 

如往常一樣，我們期待在社區(qū)論壇上聽到您的反饋。我可以提前透露，我們計劃通過添加更多選項（包括“自適應內容”功能）進一步優(yōu)化堆棧。敬請期待！