堆棧是 Sketch 中構(gòu)建靈活、可適配布局的新方式。從按鈕設(shè)計到復(fù)雜的UI設(shè)計，它們將深刻重塑你使用Sketch的體驗。在這篇文章中，設(shè)計主管 Chris Downer 向我們展示了堆棧是什么——以及為什么它們?nèi)绱酥匾?/p>

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

 

從智能布局到堆棧

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

 

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

 

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

 

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

 

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

 

這個新工具就是堆棧，同時在 Sketch 中引入了一種新的容器類型：框架。這種新的容器類型是構(gòu)建堆棧的關(guān)鍵一步。框架既不是組也不是畫板。它們更加靈活，并且關(guān)鍵的是，可以設(shè)置為固定大小，也可以動態(tài)調(diào)整以適應(yīng)內(nèi)容。我們還有一篇關(guān)于框架的博客文章值得一讀。

 

使用堆棧進行設(shè)計

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

 

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

 

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

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

 

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

 

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

 

使用堆棧，您的按鈕在構(gòu)建過程中會自動適應(yīng)。無需手動調(diào)整。

 

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

 

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

 

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

 

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

 

如果你對那個關(guān)閉按鈕感到好奇，它也位于堆棧內(nèi)，但啟用了“忽略堆棧布局”屬性（可在檢查器中找到）。這使我們能夠?qū)⑵渥杂煞胖迷谟疑辖?，而不會影響其他層。有了這個功能，再加上“按圖層覆蓋對齊”的選項（選擇一個圖層，然后點擊檢查器頂部的對齊控件），你就可以順利地在堆棧內(nèi)進行一些“例外”操作。

 

更好的設(shè)計方式

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

 

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

 

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

 

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

 

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

 

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