为了更深入地了解语义我们可

RAHIM104

以探索抽象概念的大量应用、切线和层次——对于本文来说太多了，本文旨在向您简要介绍概念，以便您在继续学习时了解它们。 抽象是一种具有广泛应用的基础工程范例——就本文而言，抽象是将形式与功能分离。我们将在三个领域应用它：令牌、组件和“不要重复自己”原则。 代币如果您使用现代设计工具一段时间，您可能已经遇到过令牌的想法。甚至 在也有在集中式库中共享样式的想法 - 您无需将值硬编码到设计中，而是使用令牌。如果您熟悉 CSS 或 SASS 变量的概念，那么您也已经熟悉了标记。 令牌的一层抽象是将名称分配给颜色 - 例如，$blue-00可以映射到十六进制值（或 HSL 值，或任何你想要的值） - 比FF。现在，您不再在样式表中使用十六进制值，而是使用标记值 - 这样，如果您决定实际上是blue-00，6CE那么您只需在一个地方更改它。这是一个很好的概念。 Lexicon Alerts 组件中的颜色标记有助于保持事物干燥。

大预览） 如果您采用相同的抽象范式并更进一步，您可以进行令牌感知，并将变量 特殊数据 分配给函数值。如果您有一个强大的系统并且希望在系统中拥有不同的主题，那么这尤其有用。一个功能示例是分配一个变量，$primary-color并将其映射到$blue-00- 所以现在您可以创建标记，而不是引用蓝色，而是引用一个功能变量。如果您想使用相同的标记，但具有不同的样式（主题），那么您只需映射$primary-color到新颜色，并且您的标记根本不需要更改！魔法！ 组件在过去的 3-4 年里，组件和组件化的想法对于设计人员来说变得更加相关和容易理解。符号的概念（由 Macromedia/Adobe Fireworks 首创，后来由 Sketch 扩展，然后由 Figma 和 Framer 提升到新的水平），现在在大多数设计工具（Adobe XD、InVision Studio、Webflow 和许多其他的）。



组件化甚至比令牌更能将事物的形式与其功能分开——这有助于改进形式和功能。 更值得注意的早期例子之一是Nicole Sullivan 的媒体对象组件。乍一看，您可能没有意识到整个页面本质上是由以不同方式呈现的单个组件组成的。通过这种方式，我们可以重复使用相同的标记（表单），通过传入选项或参数以及样式对其进行轻微修改 - 并让它提供各种值（功能）。 不要重复自己（不要重复自己）是我最喜欢的原则之一——创建可以反复重用的东西是编码时可以取得的小胜利之一。 虽然您通常不能（并且可以说不应该）每次都努力 100% 地应用 DRY 原则，但了解这一点至少是有益的，这样您在工作时就可以考虑如何可以使您正在处理的任何内容更加可重用。 关于三法则的注释： DRY 原则的推论是三法则——本质上，一旦你重复使用（复制/粘贴）某个东西三次，你应该将其重写为可重复使用的组件。与海盗守则一样，它更多地是一个指南，而不是一个硬性规定，并且可能因组件和项目的不同而有所不同。