什么是AtomicDesign？基于原子理论的设计系统？基于原子理论构建的前端组件库。什么是原子设计？受化学元素周期表的启发，他发现原子结合形成分子并进一步形成组织。从科学的角度来看，宇宙万物都是由一群有序的原子组成的。宇宙中的所有物质都可以分解成原子元素。Brad认为页面的规律就像化学定律一样：页面是由一些基本元素组成的，比如文字、颜色、图形等，通过这些基本元素的不同组合，就形成了一个统一的、分层设计系统。无独有偶，JoshDuck也从代码的角度发现了网页和化学的相似之处。他的“HTML元素周期表”完美地解释了我们所有的网站、应用程序等是如何由相同的HTML元素组成的。.元素周期表链接：https://www.xuanfengge.com/fu...Brad将这一概念应用到页面设计中，形成了原子设计理论。它的五个不同阶段是：Atoms：为页面形成的基本元素，如文字、颜色等；分子：由原子组成的简单UI元素，例如按钮；生物体：相对于分子，更复杂的结构是由原子和分子组成的；模板（Templates）：一种基于页面的架构，对上述元素进行排版；页面：将实际内容（图片、文章等）放置在特定模板中；在这五个阶段修改上一层会影响下一层，逐层达到移动全身的效果。基于原子理论构建的设计体系团队在开始一个新项目时，为了保证每个页面都有统一的设计风格，首先定制了一套简单的视觉规范，包括字体、颜色、网格和图标等等，这些是界面中最基本的原子。在关键的设计元素上，所有的设计师和同学都达成了一致，保证不同页面的风格统一，并在此基础上探索更多创新的设计方案。分子由原子结合产生的元素，两个原子可以形成一个分子。以按钮为例，其组成部分包括文字、色块底板、图标和网格。把这些没有联系的抽象原子组合起来有一个共同的目的，图标和文字配合传达意思，颜色定义了按钮的特性，网格定义了按钮的尺寸和规格。组织可以通过分子和原子的组合来构建更复杂和可扩展的模块，即组件模板中多个组织和分子的组合形成一个完整的页面框架，模板的本质可以看作是一个线框。此时，你已经可以看到一个产品的基本形态。页面将占位符内容替换为具有代表性的真实内容，并根据页面最终视觉方案对模板进行优化改进。切换主题基于原子理论构建的前端组件库了解了原子设计的理论后，我们只需要按照设计者的想法来实现前端组件库即可。文件目录结构从上面我们知道原子设计是有层次的，修改上层会影响下层，那么我们如何开发这个逻辑呢？下图是AiDesign样式库的目录结构。它遵循ITCSS方法。代码分层如下图所示。可以看出是一个倒三角形。下层依赖于上层。修改上层也会影响下层。改变。这与原子设计理论非常吻合。后期维护的时候修改代码，也可以很清楚的预测到影响。定义好文件目录结构后，我们就开始写代码开发了。Atoms首先将样式库中的变量定义为标准设计稿的atom$brand-primary:#147BD1!default;$brand-primary-10:rgba($brand-primary,.1);//主色和辅助色$brand-primary-5:rgba($brand-primary,.05);//主色和辅助色//中性色$white:#fff;$black:#000;$gray-light-2:rgba($black,.02);//背景色$gray-light-4:rgba($black,.04);//背景色$gray-light-9:rgba($black,.09);//分割线$gray-light-15:rgba($black,.15);//边框颜色$gray-light-25:rgba($black,.25);//不可用状态$gray-light-45:rgba($black,.45);//文本颜色$gray-light-65:rgba($black,.65);//文本颜色$gray-light-85:rgba($black,.85);//文本深色//安全颜色$brand-success:#6DC41F!default;$brand-success-10:rgba($brand-success,.1);$brand-info:#147BD1!default;$brand-warning:#EDA30F!default;$brand-warning-10:rgba($brand-warning,.1);$brand-danger:#D11429!default;$brand-danger-10:rgba($brand-danger,.1);Molecules定义好原子后，开始开发分子，分子基准设计稿的基本组件——按钮、输入框、开关等组件，组件样式绑定原子变量//Buttons////为每一个Bootstrap的按钮，定义文本、背景和边框颜色。$btn-prefix-cls:$css-prefix+"btn";$btn-padding-x:16px;$btn-height:32px;$btn-font-size:$font-size-sm;$btn-icon-font-size:$font-size-lg;$btn-active-box-shadow:inset0002pxrgba($white,.3);$btn-原色：$white；$btn-primary-bg：$brand-primary；$btn-secondary-bg：$white；$btn-secondary-color：$body-color；$btn-secondary-border：$gray-light-15;$btn-secondary-active-box-shadow:inset0002pxrgba($brand-primary,.3);$btn-info-color:$white;$btn-info-bg:$brand-info;$btn-success-color:$white;$btn-成功-bg:$品牌成功；$btn-警告颜色：$white；$btn-warning-bg：$brand-warning；$btn-danger-color：$white；$btn-danger-bg：$brand-danger；组件开发完成后，再开发窗体、下拉树、对话框等复杂组件。复杂的成分由原子和分子组成。例如，表单由按钮、输入框、下拉框等组件组成。模板和页面模板页面体现在我们修改主题的模板工程http://10.1.241.36:9102/基于原子设计理论构建的组件库可以让我们轻松切换主题。原子设计在项目中使用原子设计理论不仅可以用在组件库中，也可以用在我们的项目中。//原子变量：root{--page-bg-color:#1D2437;--页面颜色：#4B576B；--页面浅色：#727C94；--page-primary-color:#455DDC;--页面禁用颜色：#A0A9C0；--page-dark-color:#2F394C;}//卡片组件.card{margin-bottom:40px;游标：指针；颜色：var（--页面颜色）；}//toolbar.toolbar-btn{显示：内联块；填充：012px；高度：32px；行高：32px；文本对齐：居中；背景：var(--page-light-color);-半径：2px；颜色：var（--页面颜色）；左边距：8px；&__txt{左边距：6px;}}总结原子设计为界面元素提供了应用规则和组织原则。这种方法论对于设计体系的建立、团队协作、产品迭代都具有非常重要的指导意义。
