国外方案 组件化_设计干货: 目前最流行的组件化设计网站推荐

组件化设计我想大家都不陌生，最近看了很多组件化相关的文章里有一句话“分子是由原子组成的，分子分成原子，原子也可以重新组合成新的分子”。这是2016年，由布拉德·弗罗斯特（Brad Frost）提出的“原子设计”方法论，这也奠定了设计系统组件化的基础。

其实原子设计不难理解，就是把UI界面的单个元素理解成化学里的单个原子，这些原子可以通过不同的组合方式，组成分子组件，继而组成新的界面。

如果想更深的了解“原子设计”方法论，可以通过阅读下面原文链接来真正的理解设计系统是如何构成的，提高组件化思维。

http://atomicdesign.bradfrost.com/table-of-contents/

运用组件化有什么好处呢？试想一下，在快速发展的今天，市场变化如此之快，很多公司就需要快速的构建和迭代产品。在保持交互统一和视觉统一的情况下，构建更快可扩展的产品是企业成功不可缺失的一部分。

说直白一点，组件化对我们设计而言，可以保持产品视觉的高度统一，不管是创建新的界面，还是给界面换肤，都是可以高效完成的。

对开发而言，开发人员可以把设计组件的单个元素整理成一个库，如果需要创建新的界面，开发只要调用之前写好的组件就可以了，快速准确而且方便修改。

对交互而言，基本所有的交互状态都在组件库里已经提前准备好，比如按钮的各种状态，文字的状态，提示框的展示形式等等。

目前Skech的Symbol功能仍是创建组件化的利器，Figma和XD也很强势，Figma大家可以提前了解，国外很多大公司都在用了。

下面到了福利环节，小胖搜集了几个比较好的组件库网站，我们可以通过研究学习好的组件化模版，运用到自己的工作中去。

1. ant.design/index-cn

一个服务于企业级产品的设计体系，国内最好的设计系统没有之一 —— Ant Design。通过模块化解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。

2. eva.design

强烈推荐！EVA基于原子设计原则，所有的组件都基于共享样式的元素构成，可以自定义但又能保持统一。

3. fusion.design

阿里推出的一个适合设计、技术共同使用的设计规范框架。基本目的也是为了让设计师在一个标准框架内设计界面，同时也提供了Sketch插件，让设计的组件直接转化为代码，技术直接调用。

4. qmuiteam.com

互联网设计怎么能少的了腾讯呢？QMUI，腾讯出品，分为Web、iOS、安卓三个端，都有相应的dome下载安装，设计师可以下载安卓和iOS应用，经常看看里面的组件，熟悉后，和技术的协作会更有效率。

5. taro-ui.aotu.io

Taro UI，一套基于 Taro 框架开发的多端 UI 组件库，京东用户体验设计部出品。

6. element.eleme.cn/#/zh-CN

饿了么出品，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，很适合开发后台产品。

7. designsystemsrepo.com

如果觉得上面的设计系统看不够，那么这个网站就王炸了！集合很多设计系统的组件库，希望你可以好好的研究组件化设计，会对我们的高效设计提供帮助。

最后，小胖自己在这里也特意整理了一份组件化的素材，如果需要的话，评论领取。