深度拆解原子设计理论，及高效扩展运行的设计方法

什么是原子设计？ 可查询我们过去的文章 ，其实原子设计允许您创建可重用的UI设计组件，从而在您创建新数字化产品时，可节省时间并减少错误。

原子设计是如何构建的？
原子设计的核心是使用一组五个元素：原子、分子、有机体、模板和页面。所有原子设计项目，包括遵循原子设计原则的 React 开发项目，在构建时都考虑了这些元素。

原子
原子是离散的内容单元，类似于文本或图像块。称为分子的原子组可以填满整个页面或部分。构成完整部分或页面的分子组称为有机体。更不用说，模板是构成完整程序的生物集合。

分子
分子是键合在一起的原子团，具有独特的新特性。它们形成相对简单的 UI 元素，作为一个单元一起运行。一些示例是：表单标签、搜索输入和按钮。

有机体
有机体是由分子和/或原子组组成的相对复杂的 UI 组件。大多数有机体都可以独立运行，而不依赖于页面上的其他元素。一些示例是：导航、侧边栏、表单和弹出窗口。

模板
模板是没有实际内容的页面，它阐明了设计的底层内容结构。本质上，它们将有机体组合成适当的网站布局。

页面
页面是模板的特定实例，用于展示最终 UI界面 的设计外观并具有真实的代表性内容。

可扩展性
创建可扩展设计系统的能力是原子设计的主要优势之一。设计人员和开发人员可以构建可重复使用的设计组件库，通过将设计分解为最小的组成部分，这些组件可用于创建新的组件、页面和界面。从长远来看，这可以节省时间和精力，因为它消除了为每个项目创建新设计元素时从零开始的需要。

一致性
原子设计的另一个优点是鼓励整个设计系统的一致性。通过创建原子元素的集合，设计人员和开发人员可以确保所有组件和界面具有一致的外观和感觉。一致性可以让用户更轻松地浏览网站和应用程序并与之交互，从而改善用户体验。

最后，使用原子设计，我们的数字化产品（网站、APP、HMI）的 UI界面会被充分分解为1.原子、2.分子、3.有机体、4.模板、5.页面。最后我们通过将页面分解为这几个组件来开发一种有助于 UI 设计构建的心智模型。我们维好维可-设计公司基于原子设计理论结合自身团队特点和当下设计环境结构，通过深度思考和学习衍生出了自己公司的UI组件设计与构建的心智模型，希望可推动行业发展。