设计系统包括什么？上篇

文章内容由 Leo 设计周刊参考翻译自 Paula Borowska 文章

什么是设计系统，为什么它很重要，它包含什么呢？

在过去几年中，设计系统已经成为设计师们的热门话题。如果你正加入这个大潮流，欢迎！许多企业和公司在设计上开始投入更多。拥有一套设计系统对于公司和团队在业务发展中了解所有变化非常有益。毕竟，良好的客户体验至关重要。设计系统还可以帮助减少设计工作量，加快设计过程，并在各个团队中建立品牌意识和明确责任。在今天的文章中，我将谈论不同的设计系统中的必要元素。当然，很多流行品牌的公开的设计系统都会有很棒的例子！

网格 - 是理解和统一页面布局的基本组件。看看 MailChimp 如何使用网格。这是他们设计系统模式部分下的第一项，它涵盖了不同的主题，如网格大小，间隔槽以及如何混合使用它们。BuzzFeed 的设计系统略有不同。它们有两个不同的部分，一个叫做Grid，另一个叫做响应式。它们都指的是网格系统的工作方式。响应部分只是一个扩展。

间距 - 与网格类似，间距是另一个有用的部分。在Shopify的设计系统（称为Polaris）中，他们详细介绍了不同的填充区域和卡片等元素之间的间距。他们也将行高称为间距。

错误和验证 - 这是GOV.UK的一个设计部分的确切名称。他们谈论如何在状态发生时正确处理。甚至包括用于这些状态的设计模式的代码片段。

代码组件 - 我喜欢Zendesk系统的一个原因是它们结合了CSS和React组件。而且那么多。在React下是头像，标签和标签。每个都有使用说明和用法示例。这使得它们始终清晰易用。Predix 有一个专门为开发人员提供的大型指导库，附带有代码的CSS模块和UI组件。开发人员指南涉及使用Angular和Cue到Maps的许多元素。

命名规则 - WeWork 的系统深入研究命名和语法。保持团队，文件甚至程序之间的一致性这是个好主意。对于规模较大的团队，保持一致和清晰的命名可能很复杂。但是，通过预先的约定，它可以使事情变得更加容易。

图标集 - 我喜欢 Estonia 在他们的设计系统中处理图标和图形的方式。他们用一个快速解释来设定期望，然后展示正确的例子。此外，他们还有11条规则以及注意事项。另一方面，Priceline 采用更传统的图标集方法。他们有一个广泛的列表，列出了他们品牌中使用的所有图标。每个图标都单独显示其名称。

字体 - 没有定义文字，任何设计系统都不会完整。我非常喜欢 Nordnet’s approach。在他们的排版部分，有明确定义的排版注意事项，如错误的对齐方式。它可以很好地防止不当的使用形式和不一致性。

下篇请看下期...