在实现自己的网站的时候，我经常会感到混乱。这并非是因为我不知道某些效果在技术上如何实现。

真正的问题在于：我不知道应该如何设计。

页面应该如何布局？某个控件应该居中还是靠左？上下左右补白多少？某个按钮的样式应该是方的还是圆的？等等……

这些问题在所有的页面上都困扰着我。有时拿到一些现成的模板页面，照着改起来的时候挺轻松；但如果想进一步发挥，照猫画虎，就感觉各种不协调。使用各种 UI 框架或者工具，并没有太大帮助。

我思考了一下，这些问题其实可以总结成一个，我缺乏设计相关的知识基础。

为了解决这个问题，我先学习了《写给大家看的设计书》，知道了亲密性、对齐、重复和对比。感觉了解了一点点理论，但仍然没有学到更系统的设计方式。

直到今天，看到了设计系统这个关键字，一番搜索后，我觉得我可能找到了解决问题的关键。

简单来说，设计系统的本质，就是定义设计时需要遵守的规则。

如果一个网站只有一个页面，那么没必要搞什么设计系统。

但如果有多个页面，又希望网站的使用者在各个页面上感觉到一致性。那么很可能就需要定义这样一套规则。

在 Atomic Design by Brad Frost 这本书里，更精确一点，在第二章。作者提出了原子设计的概念，将页面的设计分为以下几部分：

• 原子：无法分解的基本页面元素，如按钮
• 分子：基本页面元素的简单组合，如搜索控件
• 有机体：相对复杂的元素组合，比如标题栏
• 模板：页面结构（即排版），不包括内容（可使用占位符查看效果）
• 页面：最终页面，包含内容的范例

引用作者的一段话：

Atomic design is not a linear process, but rather a mental model to help us think of our user interfaces as both a cohesive whole and a collection of parts at the same time. Each of the five stages plays a key role in the hierarchy of our interface design systems.
原子设计不是一个线性过程，而是一个心智模型，可以帮助我们将用户界面同时视为一个有凝聚力的整体和部分的集合。 这五个阶段中的每一个都在我们界面设计系统的层次结构中发挥着关键作用。

换句话说，这是一套帮助我们建立自己的设计系统的心智模型。按照这个模型，可以使得设计模块化。持续完善的话，就可以实现自己的设计系统。

Talk is cheap。这套概念是否合理且有效，后续我会在自己的网站上实验一下。

P.S. 扩展阅读的时候，我看到有人提出，不应使用 Tailwind 实现设计系统。对于这篇文章，我个人的理解是这样的。设计系统是一套规则，而这套规则需要一个方便重用的载体，而载体必然是使用模板语言实现的代码。作者实际说的是，Tailwind 或者其他 UI 框架都是一样的，不适合被用来保存设计系统。但是，目前对于设计系统，并没有一套通用的方式来保存并重用。因此，作者也在文章的最后提到，可以在 Tailwind 之上做一个中间层，而这也正是我接下来想使用的方式。