什么是原子设计？在设计系统中如何构建？

在进行大型的产品设计时，比如银行内部的系统，通常有几百个子系统，会用到原子设计的方法，原子设计改变了我们处理设计系统的方式，首先来看一下什么是原子设计？原子设计是一种设计的方法，用于制作具有明确顺序和层次结构的设计系统。顾名思义，它源自一个基本的化学概念，所有物质由原子组成。

原子设计的五层原则
1、粒子
2、原子
3、分子
4、有机体
5、模板页

粒子
粒子将是您所有UI组件所需的最低限度的基本元素。这些由调色板、排版、阴影和间距等元素组成。

原子
奠定好了基础，是时候专注于UI界面了。与化学一样，UI设计系统中的原子是无法进一步分解的最小元素。其中包括按钮、输入字段、开关等。就像搭乐高积木一样，可以组合这些组件来构建更大、更好的组件。

分子
由多个原子组合而成的分子。在这种情况下，我能想到的一个很好的例子就是卡片元素。它通常由一个图像块、一些文本和一个号召性用语按钮组成。这些卡片所包含的原子是独立存在的，但当它们结合在一起时，我们会得到一个稍微先进一点的分子，并且具有更多的复杂层次。

有机体
这些是任何给定接口组件的最高复杂度级别。生物体可能很难识别，因为他们由多个分子组成。有时，这些是完全不同的，有时相同的分子会重复多次。标题、菜单栏、数据网格等是我接触过的大多数设计系统中常见的定义有机体。

模板
现在我们已经定义了所有组件，是时候指定界面本身的结构布局了。设计系统中的模板有助于定义跨多个具有相似功能的页面的标准页面布局。简而言之，模板是用于组织产品中的原子、分子和有机体的标准化布局。

页面
我喜欢将模板视为骨架结构，将页面视为顶部的肉体。原子设计中的页面是用户界面中模板的实例，但保真度很高。页面是您的用户将在成品中看到的内容。页面采用多种模板形式，帮助设计师思考我们的基本原子和分子将获得的不同状态。

定义页面是构建稳健设计系统的最关键步骤之一，因为它有助于我们评估设计系统本身的构建。如果您发现自己不断地在页面状态下“定制”，那么是时候回到您的基本原子和分子来填补空白了。

总的来说，通过原子设计构建设计系统可以节省我们的时间和成本、提高产品的一致性、获得更好的团队协作和增强可访问性。