如何搭建组件库

• 什么是原子设计
• 以原子理论为依据构建的设计体系
• 以原子理论为依据搭建的前端组件库

什么是原子设计

原子设计（Atomic Design）理念最早是由国外网页设计师Brad Frost提出的，他从化学元素周期表中得到启发，发现原子结合在一起，可以形成分子，进一步形成组织，从科学的角度来讲，在宇宙中的所有事物都是由一组有序的原子组成。

宇宙中的物质都可以被分解成为原子元素

Brad他觉得页面规律跟化学规律是相同的：页面是由一些基本的元素组成，文字、颜色、和图形等，通过这些基本的元素进行不同的组合，从而创造出统一且层次丰富的设计系统。

碰巧的是，Josh Duck的从代码角度也发现了网页跟化学的相同之处，他提出的“HTML元素周期表”完美阐述了我们所有的网站、APP、等是如何由相同的HTML元素组成的。

元素周期表链接：https://www.xuanfengge.com/fu...

Brad将这个概念应用到页面设计中形成了原子设计理论

它的五个不同阶段是：

原子(Atoms)：为页面构成的基本元素，例如文字、颜色等；
分子(Molecules)：由原子构成的简单UI元素，例如按钮；
组织(Organisms)：相对分子而言，较为复杂的构成物，由原子及分子所组成；
模板(Templates)：以页面为基础的架构，将以上元素进行排版；
页面(Pages)：将实际内容（图片、文章等）放置在特定模板内；

这五个阶段修改上一层会影响下一层，层层递进从而达到牵一发而动全身的效果。

以原子理论为依据构建的设计体系

原子

在团队开始新的项目时，为了保证各个页面具有统一的设计风格，首先会定制一套简易的视觉规范，定义的内容包括、字体、颜色、栅格和图标等，这些就是界面中最基础的原子。

在关键的设计元素上，各设计师同学达成一致，保证不同页面的风格统一，并在这个基础上去探索更有创新意义的设计方案。

分子

原子组合建立的元素，两个原子即可组成一个分子 。

以按钮为例，它的组成元素包含了文字、色块背板、图标和栅格。在组合后这些抽象的原子从毫无关联到有一个共同的目的，图标和文字互相配合传达意义，颜色定义了按钮的特性，栅格为按钮定义了一个尺寸和规范。

组织

通过组合分子和原子，可以构建更复杂和可拓展性的模块，也就是组件

模版

多个组织和分子的组合，形成了一个完整的页面框架，模板的本质其实可视为线框图。

到这一步已经可以看到一个产品的基本形态。

页面

将占位符内容替换为有代表性的真实内容，在模板的基础上进行优化和完善 就形成了页面最终的视觉方案

切换主题

以原子理论为依据搭建的前端组件库

了解了原子设计理论后，我们实现前端组件库只需按照设计师的思路来实现就可以了。

文件目录结构

从上文知道，原子设计是分层的，且修改上一级会影响下面层级，那我们开发怎么实现这种逻辑呢？

下图是Ai Design 样式库的目录结构

它遵循了ITCSS方法论，代码做了如下图的分层，可以看出来是一个倒三角形，下面的层级依赖上面的层级，修改上面的层级下面的层级也会改变。这刚好符合原子设计理论。在后期维护中修改代码也可以很清晰的预判到影响面。

定义好文件目录结构后，我们就开始写代码开发了。

原子

首先在样式库中定义变量一对标设计稿的原子

$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);

分子

定义好原子后，我们开始开发分子， 分子对标设计稿的基础组件 - 按钮、输入框、开关等组件, 组件样式绑定原子变量

// Buttons
//
// For each of Bootstrap's buttons, define text, background and border color.
$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:          inset 0 0 0 2px rgba($white, .3);

$btn-primary-color:              $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:inset 0 0 0 2px rgba($brand-primary, .3);

$btn-info-color:                 $white;
$btn-info-bg:                    $brand-info;

$btn-success-color:              $white;
$btn-success-bg:                 $brand-success;

$btn-warning-color:              $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;
  --page-color: #4B576B;
  --page-light-color: #727C94;
  --page-primary-color: #455DDC;
  --page-disabled-color: #A0A9C0;
  --page-dark-color: #2F394C;
}

// card 组件
.card {
  margin-bottom: 40px;
  cursor: pointer;
  color: var(--page-color);
}

// toolbar
.toolbar-btn {
  display: inline-block;
  padding: 0 12px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  background: var(--page-light-color);
  border-radius: 2px;
  color: var(--page-color);
  margin-left: 8px;
  &__txt {
    margin-left: 6px;
  }
}

总结

原子设计为界面元素提供了应用规则和组织原理，这套方法论对于设计系统建立、团队协作、产品迭代都具有非常重要的指导意义。