Atomic Design — 基础，UI 中的原子、分子和有机体

什么是 Atomic Design？

Atomic Design — 创建分层界面系统的方法论，其中每个 UI 元素属于五个层次之一：原子（基本元素）、分子（原子的组合）、有机体（复杂模块）、模板（页面框架）和页面（带数据的具体屏幕）。这个类比来自化学：原子结合成分子，分子结合成有机体，有机体结合成模板，模板填充内容后成为页面。

该方法论由网页设计师 Brad Frost 于 2013 年提出，以回应“页面思维”的问题——即每个新屏幕都是从零开始设计，不考虑现有组件。在《Atomic Design》（2016）一书中，Frost 描述了该方法在大公司项目中的应用：IBM、GE、Starbucks。根据 Nielsen Norman Group（2022）的数据，Atomic Design 通过重用现成组件将新屏幕的设计时间缩短 30–50%。

Atomic Design — 与其说是一种技术，不如说是一种 UI 组织哲学。它不依赖于特定的框架，既适用于 Web（React, Vue），也适用于移动开发（Jetpack Compose, SwiftUI）。在 IT Sectr，我们使用 Atomic Design 为客户构建设计系统：在设计阶段识别原子组件，并将其转移到 Compose/SwiftUI 的代码组件中。

五个层次：原子、分子、有机体、模板、页面

Atomic Design 的每个层次都解决自己的任务，并有严格的职责范围。原子 — 界面最小的构建模块，无法在不失去意义的情况下进一步分解：按钮、文本字段、图标、标签、复选框。原子不包含业务逻辑，不依赖于上下文。它们定义基本的视觉特征：颜色、大小、间距、排版。

分子 — 两个或多个原子的组合，形成简单的功能单元。带标签和错误消息的输入字段 — 分子。带图片、名称和价格的商品卡片 — 分子。分子可以包含基本逻辑（显示/隐藏错误），但不包含业务流程。分子是组件在不同屏幕之间变得可重用的第一个层次。

有机体 — 由分子和原子组成的复杂界面模块，实现应用的特定功能。登录表单（电子邮件字段、密码字段、提交按钮、"忘记密码"链接）— 有机体。带 Logo、搜索和导航的页眉 — 有机体。有机体可以包含业务逻辑并访问 API，但仅在其功能范围内。

模板 — 页面框架，确定有机体在屏幕上的位置而不包含具体内容。模板定义网格、列、内容区域 — 代码级别的线框图。模板不包含数据，只包含占位符。它们允许在填充内容之前评估页面结构。

页面 — 应用的具体屏幕，模板填充了真实数据。在此层次上检查组件在真实内容下的表现（长字符串、数据缺失、错误）。页面是最终用户唯一看到的层次。页面级别的更改不应影响原子、分子和有机体——如果需要更改组件，更改在其级别上进行，页面自动接收更改。

Atomic Design 的优势与局限

优势 Atomic Design 在界面扩展时显现。统一的组件库保证视觉一致性：按钮在所有屏幕上看起来相同，因为它是同一个原子。根据 Brad Frost（2016）的数据，采用 Atomic Design 的公司通过重用现成的分子和有机体将新屏幕的开发时间缩短 30–50%。

局限 — Atomic Design 不描述如何管理应用状态。该方法论只回答"如何组织 UI 组件"的问题，但不涉及业务逻辑、路由和数据处理。第二个局限 — 边界确定的困难：分子在哪里结束，有机体从哪里开始？在实践中边界模糊，不同团队可能对同一组件进行不同分类。建议在设计标记和组件目录（Storybook, Jetpack Compose Preview）中固定规则。

第三个局限 — 对小型项目过度抽象。如果应用由 5 个屏幕组成，创建原子和分子的层次结构是多余的工作。当屏幕数量超过 20 个且组件在不同页面上重用时，Atomic Design 才变得有益。

Atomic Design 与 Feature-Sliced Design

Atomic Design 和 Feature-Sliced Design (FSD) 解决不同的任务，可以一起使用。Atomic Design 是组织 UI 组件的方法论，FSD 是组织业务层和整个应用的方法论。Atomic Design 回答"如何将 UI 分解为可重用部分"，FSD 回答"如何围绕业务功能组织代码"。它们不竞争：可以拥有具有 features 和 entities 层的 FSD 结构，并在每一层内使用 Atomic Design 来组织 UI 组件。

典型组合：FSD 定义应用的模块结构（层、切片），Atomic Design — 每个切片内 UI 组件的内部结构。例如，feature.auth 切片包含分子（LoginForm, PasswordInput）和有机体（AuthPage），按照 Atomic Design 规则组装。共享层包含在所有功能中可重用的原子（Button, Input, Label）。

移动应用中的 Atomic Design：Compose 和 SwiftUI

Jetpack Compose 和 SwiftUI 通过组件组合自然地支持 Atomic Design 层次结构。原子在 Compose 中 — 基本的 @Composable 函数：AppButton、AppTextField、AppCheckbox。每个函数接收定制参数（颜色、大小、状态），不包含业务逻辑。原子在共享层定义并作为 UI-kit 导出。

分子 — 组合多个原子的 @Composable 函数：LabeledTextField（标签 + 输入字段 + 错误消息）、ProductCard（图片 + 名称 + 价格）。分子可以包含基本状态（字段有效性），但不访问 API 或 ViewModel。它们在不同有机体中可重用。

有机体 — 功能级别的 @Composable 函数：LoginForm（用于电子邮件的 LabeledTextField + 用于密码的 LabeledTextField + 发送 AppButton + 恢复链接）。有机体通过 Intent 函数与 ViewModel 交互，可以包含业务逻辑。在 SwiftUI 中，类似的层次结构通过 @ViewBuilder 和自定义 View 结构构建。

在 SwiftUI 中，原子 — 自定义 View 结构 AppButton，分子 — HStack 上带标签的输入字段，有机体 — 登录表单。这种结构允许在所有屏幕上重用组件——原子的更改（按钮颜色）自动应用到所有屏幕。Atomic Design 与设计系统的结合保证了界面的一致性，无需手动控制每个屏幕。