在 Sketch，来自不同团队的设计师定期聚会，分享和讨论新的想法。在我们的其中一次会议中，前 Sketch 产品设计师 André Gonçalves 和我发起了一场关于原型设计和有意义的设计的对话。我们的讨论很快演变成一个完全成型的概念，我们现在用它来设计 Sketch 的新功能。我们称之为语义化设计。
在这篇文章中，我将讨论我们最初的语义化设计方法，以及它是如何影响我们的一些新功能的。
什么是语义化设计？
语义化设计是一种专注于为我们用于制作用户界面的工具和功能添加一层意义的方法。对我们来说，这意味着在全面了解设计师需求的基础上构建我们的设计平台。
例如，如果我们给画布上的内容赋予意义会怎么样？如果 Sketch 能够理解一个矩形实际上是一个按钮，或者一个组中的图像实际上是一个头像呢？
提出这个问题的目的是通过改善平台和设计师之间的沟通（双向的）来使 Sketch 更易于使用。虽然工具的直观易用性很重要，但我们也希望开始设计能够更好地预测用户需求的功能。
我们的讨论很快演变成一个完全成型的概念，我们现在用它来设计 Sketch 的新功能。我们称之为语义化设计。
语义化设计的影响
为了帮助您了解情况，让我们来谈谈灵感。我们最初从语言和技术中语义的使用中获得了语义化设计的想法。
例如，HTML 和 markdown 非常擅长将代码中的抽象概念翻译成标题、段落和输入，然后浏览器可以将它们转换为文档或网站。
通过将语义应用于代码，屏幕阅读器可以解释页面上的内容，并使其对具有功能多样性的人可访问。
语义化设计层
虽然回报是值得的，但理解和应用语义化设计可能很复杂。您必须对抗先前存在的逻辑，并在执行和过度执行之间取得平衡。
例如，虽然我们都知道红色的六边形标志意味着我们需要停止我们的汽车，但事故仍然会发生。但是，将停车标志换成更花哨的视觉提示会更有效吗？还是会导致混乱？
对于我们如何理解和传达意义，也有多个层次。当我们将语义引入设计时，这个过程本身就变成了一个系统。因为我是一名产品设计师，所以我喜欢将这个三层系统称为设计堆栈。
您也可以将堆栈视为语义意义的构建块。
为了让您在继续之前更好地理解，让我们分解这些设计堆栈层中的每一层，从底部开始。
您必须对抗先前存在的逻辑，并在执行和过度执行之间取得平衡。
数据
数据由构成画板一部分的每个书面或可变内容组成。这包括像头像和标题这样的图像，以及像标题、段落和标签这样的文本。
视觉
视觉效果为您的数据添加上下文、节奏和结构。它们是设计堆栈最重要的元素。视觉效果可以是组件、形状、颜色和图标——本质上是各种单个图层或复杂的图层组，例如符号。
原型设计
原型设计层连接视觉效果和画板，通过交互创建叙事。它通过链接组件、文本和画板来与用户进行通信。
接下来，让我们看一下语义化设计的一些应用。
Sketch 中语义化设计的例子
语义化设计在 Sketch 中仍处于早期阶段，但已经有一些功能正在使用它。让我们来看两个例子。
叠加
在语义化设计中，画板上的元素应该知道它们的用途。Sketch 内部应用语义化设计的一个很好的例子是将画板变成叠加的能力。
当从屏幕切换到叠加时，Sketch 会向您显示一组新的选项，以帮助您设计更逼真的原型。这种动态性对于交付也很有用，因为开发人员可以在编码之前完全可视化和理解交互。
您可以轻松地在屏幕和叠加之间切换，以根据您选择的画板类型自定义不同的行为。
颜色令牌
颜色令牌将您文档的颜色变量转换为 JSON 或 CSS 格式，以便您可以直接在代码库中使用它们。通过启用设计和代码之间的通信，已经涉及到一层语义。
我们通过允许您为颜色令牌提供描述性标题来进一步改进它。例如，假设您在设计中使用黑色。您可以从 #000000 十六进制或 0、0、0、1 RGBA 代码更改为类似“foreground.primary.1”的内容。
当您将此颜色令牌添加到您的代码中时，开发人员、浏览器和屏幕阅读器可以清楚地知道您页面的前景色应该是黑色。在设计方面，一旦您正确识别了颜色，也更容易进行更改。
使用颜色令牌，您可以使用任何描述性文本，例如颜色（绿色）或用途（品牌）来传达其含义。
语义化设计规则
虽然将语义引入你的设计可能是一个很大的优势，但很容易过度，开始改变一切。因此，在实施任何新的语义功能之前，请确保它：
- 不会剥夺设计师的创作自由
- 有研究支持，证明新模型与人们已有的工具使用习惯相符
- 真正属于你平台的生态系统，因为它增加了有形的、可衡量的价值。
因为语义设计通常会影响多个功能，所以一旦发布，禁用或调整该功能会更加棘手。这就是为什么记住语义设计的最终目标是更好地沟通非常重要。
在我们的案例中，由于我们正在使用设计工具，我们的目标是改善以下沟通：
- 设计师 ↔ 设计师
- 设计师 ↔ 利益相关者和开发者
- 设计师 ↔ 工具
记住，语义设计的最终目标是更好地沟通。
UI 之外的语义设计
向 Sketch 等工具添加语义设计功能可以帮助设计师创建更真实的体验，并更好地与其他利益相关者沟通。
但这还没有结束。有人可能会说，语义设计延伸到我们生活的其他领域：在路上、在机场、在商场，甚至在家里。
