Sketch堆栈（Stack）功能上线，帮助你重新思考布局设计

堆栈是 Sketch 中构建灵活、可适配布局的新方式。从按钮设计到复杂的UI设计，它们将深刻重塑你使用Sketch的体验。在这篇文章中，设计主管 Chris Downer 向我们展示了堆栈是什么——以及为什么它们如此重要。

在我们的Athens 版本中，我们推出了一项备受期待的功能——堆栈布局（即堆栈）。简而言之，借助堆栈，你可以创建能根据背景同比例缩放的UI 元素，或者让其内容的大小和间距随上下文变化。你还可以将堆栈嵌套在其他堆栈中，以创建强大且动态的布局。其效果类似Figma 中的自动布局或 Framer 中的堆栈。

 

从智能布局到堆栈

关于堆栈有很多值得探讨的内容。为什么现在推出？我们是如何构建它们的？它们为设计师提供了什么？我将在本文中尝试回答这些问题。关于我们如何构建它们的更详细内容，我们将留待以后再分享。目前，让我们从头开始，看看堆栈是如何诞生的。

 

想象一下：你在调整设计中某个 UI 元素的高度，然后需要手动选择并移动其下方的所有元素以校正层间距离。当你需要无数次更新和迭代设计时，这种拖动矩形的工作既繁琐又低效。

 

设计师期望工具能与他们协作而非对抗，而这正是我们在2019年推出Smart Layout时希望解决的问题。当时我们的核心目标是简洁性。使用Smart Layout的组内图层会严格遵循你设置的精确位置，仅在调整大小、插入或删除图层时才会适配。

 

Smart Layout当时反响不错，但存在局限性。在追求Smart Layout尽可能简洁的过程中，我们最终未能为用户提供他们所需的控制级别，这导致其存在一定程度的不确定性。

 

随着Swift中的堆栈、CSS中的Flexbox以及其他设计工具中类似布局系统的出现，我们自然收到了更多关于Sketch中更好布局工具的需求。我们已将Smart Layout推至极限，是时候打造全新的解决方案了。

 

这个新工具就是堆栈，同时在 Sketch 中引入了一种新的容器类型：框架。这种新的容器类型是构建堆栈的关键一步。框架既不是组也不是画板。它们更加灵活，并且关键的是，可以设置为固定大小，也可以动态调整以适应内容。我们还有一篇关于框架的博客文章值得一读。

 

使用堆栈进行设计

那么，如何使用堆栈，以及有哪些最佳实践？

 

首先，使用堆栈进行设计没有绝对的对错之分。你可以在添加任何内容之前创建一个堆栈，也可以在已经设计好的内容周围创建一个堆栈。在后一种情况下，当你将一个堆栈添加到现有设计中时，我们会根据你在画布上排列图层的方式，应用你可能需要的最相关的堆栈布局属性。

 

堆栈的最基本示例是一个根据内容大小调整的按钮。只需绘制一个矩形，并在其上方添加一个文本图层。选中两个图层并按下?L。就这样！如上所述，我们会自动应用最合理的布局设置。你还会发现，你绘制的矩形已消失，其样式属性现在已成为堆栈本身的一部分。

这个按钮是使用水平堆栈构建的——包括间距和对齐方式。

 

制作好按钮后，您可以在检查器中调整间距和对齐方式，或在画布上点击并拖动以视觉方式设置间距。如果您将图标拖放到按钮中，它将成为堆栈的一部分。所有内容将动态调整，因为堆栈的宽度已设置为适应其内容的大小（层的总和 + 间隙值 + 填充）。

 

例如，当添加文本标签时，按钮会动态调整大小，将图标拖入堆栈后它也会自动调整更新。

 

使用堆栈，您的按钮在构建过程中会自动适应。无需手动调整。

 

堆栈内的项目可沿水平或垂直方向流动。您无法像在Sketch其他区域那样自由调整堆栈中的图层位置，至少默认情况下无法实现。当然，同一堆栈内无法同时包含水平和垂直布局，但您可以将垂直堆栈嵌套在水平堆栈中（反之亦然）。

 

在这个更复杂的示例中，我们有一个模态对话框，它结合了水平和垂直堆栈，嵌套在一个垂直堆栈中，其高度会根据文本长度而变化。

 

每个部分——从按钮到复选框——都使用自己的堆栈进行组织。

 

在此堆栈内，标题和描述位于垂直堆栈中。复选框和标签位于水平堆栈中。还有一个水平堆栈包含两个按钮（这些按钮本身也是水平堆栈！），所有内容均包含在垂直堆栈中，居中对齐，并应用了统一的内边距。

 

如果你对那个关闭按钮感到好奇，它也位于堆栈内，但启用了“忽略堆栈布局”属性（可在检查器中找到）。这使我们能够将其自由放置在右上角，而不会影响其他层。有了这个功能，再加上“按图层覆盖对齐”的选项（选择一个图层，然后点击检查器顶部的对齐控件），你就可以顺利地在堆栈内进行一些“例外”操作。

 

更好的设计方式

我认为说使用堆栈能让你成为更好的设计师并非夸张。如果你对堆栈不熟悉，可能需要一些时间来理解——这没关系。但总会有一个时刻，你突然领悟到它，并完全改变你对设计布局的思考方式。

 

堆栈改变了你对布局的思考方式，迫使你对间距和对齐进行有意识的控制。

 

堆栈迫使你对间距和对齐进行有意识的控制，并减少在自由形式设计中可能出现的不一致性。它们还能帮你节省时间，让你更快地迭代、探索替代布局，并在需要更新时使设计具有前瞻性。

 

除此之外，它们还会改变你对布局的思考方式，使设计更接近实际实现方式，并改善与开发者的交接流程。说到交接，我们在网页应用的交接工具中也已整合了堆栈功能。

 

希望这篇简要概述能展示堆栈的强大功能与可能性，这些功能现已包含在Sketch最新版本中。请查阅文档以获取堆栈的详细说明及所有新设置的说明。

 

如往常一样，我们期待在社区论坛上听到您的反馈。我可以提前透露，我们计划通过添加更多选项（包括“自适应内容”功能）进一步优化堆栈。敬请期待！