刚工作的时候，公司的产品线刚刚起步，那天天的设计图数量打开文件都需要大半天。而且产品迭代的交互和UI设计都是我自己干，你说做设计就设计吧，本来就自己的工作内容，但是最后经过前端研发出来的界面是啥东东，这是自己设计出来的产品界面吗？（吐槽归吐槽，求研发别来打我）最烦的就是明明一个样式的组件，硬生生的让前端各位大佬们实现成五花八门的样子，真的跳楼的心都有了。

这时候前端研发也来吐槽了，你一下几百张设计图甩上来，有些组件你们设计的也不一样呀，而且还那么多个前端研发也没得办法统一呀！

得，人家还有理了，但说的也不无道理，而且当时忙没办法，后来稍微闲了下来，产品也稍微稳定了点，开始调研调研别的公司都咋办的，不能一直这样呀，不仅我们自己内部不好统一，实现出来的效果也不一致。

后来看到大神文章用原子设计构建组件库来解决问题，我也就拿来学习用在公司的产品线上，最后发现设计图制作更加规范快速了，并且前端研发实现也规范了，两方都省心了。

原子设计理论是2013年Brad Forst提出此设计概念，原子设计是一个设计方法论，由五种不同的阶段组合，创建一个有层次、更规范的设计规范系统。

近年来也市面上也出现了很多的设计组件规范，而这些相对于来说都是大厂才有的，一般小公司可能就直接拿他们的组件库使用了，如：Ant Design、Element、Material Design等等。虽然这些大公司的设计组件体系根据自己的产品设计，但其核心指导理论均为原子设计。

即通过原子化设计出一套架构严谨、规则统一的框架体系，以模块化的方式实现产品运作，从而大大提高产品设计与开发效率，其中还包括设计资产的沉淀及设计工具赋能。

我最后也根据Ant Design组件库来搭建属于我们自己产品的规范组件，不过我也根据我们的产品属性去优化了一些更合理的交互逻辑。

原子是构成界面的最基础的元素，例如：颜色、字体、阴影、圆角、线条、图标等等。把原子都确定好，等于把细节进行确定了，这些细节在走查的时候也是最烦人的，这样不会在出现色号明明是1980FF，而研发给你实现198CFF的糟心事了。

颜色中最重要的就是品牌色了，确定了品牌色后，所有的组件都要已品牌色为基调。  

关于图标这边多说几句，做B端产品一般需要大量的图标，这个时候我们一个个去设计是很耗费精力和时间的，这里我推荐大家可以使用阿里的Iconfont。Iconfont不仅有大量的图标库可以使用，而且自己也可以上传自己产品的图标，可以供前端研发直接调用，不仅方便了我们也方便了前端研发下载切图。

分子是由原子组成而成的，分子也是界面中组件使用最多的，我是以Ant Design的组件库来构建自己的分子组件库，使用Ant Design组件库尽量减少组件交互逻辑的修改，因为这样会涉及修改原代码，对于前端研发来说是不太愿意的，而且修改了不一定比之前的好，还会出现一大堆的Bug，毕竟阿里的程序员肯定是牛逼的呀。

组织是由分子与原子构成，形成我们设计当中的模块模板，很多B端界面中都是差不多的界面，这个时候模板是非常便利的，有时候一个界面使用三四个组织拼接在一起，然后在改一改文案就完成了，非常的高效且规范，研发在实施的时候很容易套用已有的代码，可以减少双方的工作时间。

原子、分子、组织排列组合构成了模板，就像上面我说的三四个组织拼接在一起，就产生了一个模板。有时突然有个需求要新的界面，这个时候你可以不用重新进行设计，直接模板找前端开发就可以了，前端也乐意开发模板式界面，因为这样他们的bug产生率会大大的降低，减少他们加班的痛苦。

对模板填充了真实的内容（图片、文字等）后形成页面，也就是设计最后的高保真图，然后由前端研发实现，涉及保密就不放具体实现的页面啦。

刚开始推动UI组件库时，我和前端研发就是仇人见面，前端研发觉得要把之前开发好的组件一个个去修改统一样式，他们是百分不愿意的，尤其这种费力费时还没太大功能的事请。

但是在我们设计的眼里是非常重要的，所以我这边强力推进这件事，产品内部也同意我的推进，所以经常我就做在前端研发旁边一点点的“指导”修改。

后来发现这种效率也有点慢，后来让前端研发全部使用Ant Design的组件库，在他们的组件库上进行样式优化，然后统一调用和维护。

经过了大半年的磕磕绊绊推进，整个产品终于规范化了，属于我们自己的产品组件也深入前端研发的脑子里，经常性的还能提出自己对组件交互的优化点，促进前端研发内部生成属于自己的组件库网站。

对于我们设计或者整个团队来说，效率的提高是最主要的，再也不用因为一些组件的问题去和前端研发撕逼了，交流都顺畅了很多。

写在最后的

关注公众号“天匠设计”，添加好友，拉你进入设计交流群、大厂内推群，一大堆免费的设计资料和书籍。

在公众号后台回复关键词“大厂组件库”即可获取大厂组件库源文件~

Powered by Froala Editor