PricingLoginStart free
Frontend Academy · 课时

原子设计：原子、分子与有机体

将组件分类为原子、分子、有机体、模板和页面，在设计与工程团队之间建立共享词汇。

第 1 / 4 课14 个步骤

原子设计：原子、分子与有机体 是 CoddyKit 上的免费 Frontend Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

什么是原子化设计

原子化设计（Brad Frost，2013 年）是一种组织用户界面组件的思维模型，将组件按复杂程度分为五个层级：原子、分子、组织、模板和页面。它为设计师和工程师提供了一套共同词汇。

原子——最小的构建单元

无法进一步拆分的单一用途组件。按钮、输入框、图标、标签、颜色样本都属于这一类。它们是抽象且可复用的，可以用于任何上下文。

// Atoms (examples)
<Button variant="primary">Save</Button>
<Input type="email" name="email" />
<Icon name="chevron-right" />
<Label htmlFor="email">Email</Label>

分子——简单的组件组

组合原子以完成有用的功能。SearchBar 由输入框 + 按钮 + 图标组成。FormField 由标签 + 输入框 + ErrorMessage 组成。它们仍然是通用组件。

function SearchBar({ onSearch }) {
  return (
    <div className="search-bar">
      <Input placeholder="Search..." />
      <Button onClick={onSearch}>
        <Icon name="search" />
      </Button>
    </div>
  );
}

组织——复杂的页面区块

由更大的组合构成界面的独立区块：页头（徽标 + 导航 + 搜索栏 + 用户菜单）、ProductCard（图片 + 标题 + 价格 + 按钮）、SignupForm。它们对上下文的感知更强。

function Header({ user }) {
  return (
    <header>
      <Logo />
      <Navigation links={navLinks} />
      <SearchBar onSearch={handleSearch} />
      <UserMenu user={user} />
    </header>
  );
}

模板——页面骨架

线框级布局，用于排列组织，但不包含真实内容。BlogTemplate 包含一个页头、一个带文章插槽的主体和一个侧边栏。

function BlogTemplate({ header, article, sidebar, footer }) {
  return (
    <div className="blog-layout">
      {header}
      <div className="main">
        <main>{article}</main>
        <aside>{sidebar}</aside>
      </div>
      {footer}
    </div>
  );
}

页面——真实内容

包含真实内容的模板。/blog/[slug] 页面会使用实际文章、侧边栏小组件和页面框架来渲染 BlogTemplate。

文件夹结构

许多团队会按照层级组织组件。

src/components/
  atoms/
    Button.tsx
    Input.tsx
    Icon.tsx
  molecules/
    SearchBar.tsx
    FormField.tsx
  organisms/
    Header.tsx
    ProductCard.tsx
  templates/
    BlogTemplate.tsx
  pages/
    BlogPage.tsx

优点

让设计师和开发者拥有共同词汇。鼓励优先组合而不是重复。使设计系统更容易构建。促使人们先思考最小的可复用单元。

批评：严格分类很困难

在实践中，分子和组织之间的界线很模糊。许多团队最终会争论某个组件应该归在哪里，反而违背了清晰分类的目标。

现代替代方案：基于功能组织

许多大型 React/Vue 代码库更倾向于按功能（auth/、checkout/、dashboard/）组织，而不是严格遵循原子化层级。对于共享设计系统这一层，原子化设计仍然适用。

Storybook 中的原子化设计

Storybook 很适合原子化设计——使用原子、分子、组织作为顶层分类，可以让组件库更易于浏览。

何时使用原子化设计

适合：多个应用共享的设计系统库、需要共同思维模型的大型团队、设计师积极参与的项目。不适合：小型应用、原型，以及更重视就近组织而非原子化结构的功能型单页应用。

快速检查

在原子化设计中，由输入框 + 按钮 + 图标构成的 SearchBar 属于哪种组件？

在交互式课程中回答

回顾：原子化设计

五个层级：原子（按钮、输入框、图标）、分子（SearchBar、FormField）、组织（页头、ProductCard）、模板（布局）、页面（真实内容）。共同词汇和优先组合的思维方式。文件夹结构会映射这些层级。原子化设计最适合共享设计系统；对于应用代码，按功能组织的文件夹通常比原子化结构更实用。

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程
41
课程
163
免费开始学习查看完整课程

常见问题解答

「原子设计：原子、分子与有机体」课时是免费的吗？

是的 — 「原子设计：原子、分子与有机体」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「原子设计：原子、分子与有机体」这节课中我会学到什么？

将组件分类为原子、分子、有机体、模板和页面，在设计与工程团队之间建立共享词汇。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。

「原子设计：原子、分子与有机体」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 原子设计：原子、分子与有机体
  2. 使用 Turborepo 设置单体仓库
  3. 微前端：模块联邦
  4. 基于功能的文件夹结构
← 返回 Frontend Academy