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

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

從智能布局到堆棧

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

更好的設(shè)計(jì)方式

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

堆棧改變了你對(duì)布局的思考方式，迫使你對(duì)間距和對(duì)齊進(jìn)行有意識(shí)的控制。

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

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

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

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