编辑导语： 组件库是设计系统里的一个重要分支，一个合适的组件库可以帮助设计师和开发者提高工作效率；本文作者分享了关于各个大厂已经成形的组件库，一起来看一下。
最近为了给部门制定合理的设计规范，方便各个团队更好的高效协作；为此参考了许多国内外优秀的设计规范，趁着这次机会做一个整理，而且这些设计规范基本上都是附带 Sketch 源文件的。
但实际上组件库的整理工作也是比较繁复的，我们在开始之前，需要去判断什么情况下组件库可以真正为我们节省工作量提升效率；而这些已经成形的组件库，非常值得大家下载学习、参考和使用。
一、大厂
1. ANT Design（蚂蚁金服）
蚂蚁金服出品，非常著名的框架；企业级产品的设计系统，很多公司的项目都在使用，而且提供了对设计师友好的Sketch规范文件，可以直接拿来用。
官方链接：https://ant.design/
源文件规范下载：https://ant.design/docs/resources
移动端： AntDesignMobile Template V1.0.sketch
首页： Ant.Design.home-3.0.sketch
Pro： Ant.Design.Pro.sketch
web端： Ant.Design.3.0.Components.sketch
2. AntV Charts（蚂蚁金服）
AntV是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。（包含PC和移动端）
源文件规范下载：https://antv-2018.alipay.com/zh-cn/vis/resource/index.html
附件下载： AntV.Charts.sketch
3. Element UI（饿了么）
这是由饿了么 UED 设计开发的基于 Vue 的前端组件库，虽然在很多交互模式和组件样式以及设计理念上都参考了 Ant Design，但是也做了一些自己的修改和调整。
他们同样也推出了 Axure 元件库文件以及 Sketch 组件库，有兴趣的朋友可以参考研究一下。
源文件规范下载：https://element.eleme.cn/#/zh-CN/resource
附件下载： Element UI Kit_v2.0.sketch
3. Zan Design System（有赞）
服务于 SaaS 产品的设计体系。连接设计和开发，让协作变得高效简单；通过沉淀不同行业、场景的经验和思考，推动社交生态内的用户体验一致性。
源文件规范下载：https://design.youzan.com/resource/resource.html
桌面端视觉规范： Zan Desgin PC_2.0_beta.sketch
视觉规范： Zan Design Vant 视觉规范 V3.0 .sketch
元件库： Zan Design Vant 元件库 TC_ZY.zip
4. Mand Mobile（滴滴）
面向金融场景的Vue移动端UI组件库，丰富、灵活、实用，快速搭建优质的金融类产品，让复杂的金融场景变简单。
源文件规范下载：https://didi.github.io/mand-mobile/#/en-US/design/other/resource
5. Taro UI（京东）
Taro UI，一套基于 Taro 框架开发的多端 UI 组件库，可以在微信小程序 / H5 / ReactNative 等多端适配运行。京东用户体验设计部的凹凸实验室出品。
源文件规范下载：https://taro-ui.aotu.io/#/docs/resource
附件下载： TaroUI.sketch
Axure部件库： taroui-rplib1565263474229.zip
6. AT UI（京东）
AT-UI 是一款基于 Vue.js 2.0 的前端 UI 组件库，主要用于快速开发 PC 网站中后台产品。
源文件规范下载：https://at-ui.github.io/at-ui/#/zh/resource/design
附件下载： feather.sketch
7. WeUI（微信）
由微信团队推出的可以用于微信小程序设计的 Sketch 组件库，用起来也很方便，有微信端设计需求的朋友可以参考。
源文件规范下载：https://developers.weixin.qq.com/miniprogram/design/#%E5%9B%BE%E6%A0%87
8. QMUI（腾讯）
QMUI，腾讯出品，分为Web、iOS、安卓三个端，都有相应的dome下载安装；设计师可以下载安卓和iOS应用，经常看看里面的组件，熟悉后，和技术的协作会更有效率。
官方文档：https://qmuiteam.com/web/page/widget.html
二、国外
1. Apple UI Design Resources
iOS 的设计规范其实并没有 Material Design 那么具体和细节，但作为一个 iOS 平台的设计人员还是需要把它们的设计理念烂熟于胸。
对于 iOS 平台的 Sketch 组件库，我只推荐两个，一个是 Facebook 推出的 iOS 10 组件库，另外一个是由 Apple 官方推出的组件库，同样都有 Sketch 源文件。
源文件规范下载：https://developer.apple.com/design/resources/
2. Android Material Design
由 Google 设计团队推出的 Material Design 一经发布就红遍了全球设计界，多个富有突破性的设计理念，将理性与感性相结合的完美标准，使得越来越多的人基于 Material Design 制作了自己产品的设计规范。
除了谷歌官方的 Sketch 组件库外，还有一个基于 Material Design 色板的 Sketch 源文件下载，用起来非常方便。
源文件规范下载：https://material.io/resources#sticker-sheets-icons-components
Material Design 官方相关源文件下载
Material Design 色板 Sketch 源文件下载
3. Clarity Design
Teambition出品。Clarity Design 是一套全面的设计语言，从设计原则到字体排版，从交互到文案，从动效到样式，从组件到设计工具…… 提供了各种解决方法和指导，设计师和工程师可以快速找到相关的指导内容，有效地帮助完善工作并且提高效率。
源文件规范下载：https://design.teambition.com/resource/design-resource
4. Polaris
由国外 Shopify 团队推出的 Polaris 设计规范也有比较不错的参考价值，而且内容非常丰富完整，感兴趣的朋友可以查看官方文档好好研究一下，他们同样提供 Sketch 组件库。
源文件规范下载：https://polaris.shopify.com/resources/resources
5. Atlassian Design
由国外知名软件企业 Atlassian 推出的设计语言，涵盖了品牌、营销、产品相关的设计规范和理念，其丰富程度仅次于 Material Design，可以说给了设计师很多参考与帮助，另外还提供了非常完整详细的 Sketch 组件库，强烈推荐大家研究学习！
源文件规范下载：https://atlassian.design/resources/sketch-library
6. Lightning Design System
Lightning Design System 是由 Salesforce 团队推出的一个设计规范，它们的规范文档也是相当完整而且可参考性很强，推荐大家研究，同时它们也有 Sketch 组件库可供下载。
官方文档：https://www.lightningdesignsystem.com/
源文件规范下载：https://github.com/salesforce-ux/design-system-ui-kit/blob/master/README.md
7. 全球大公司组件库集合
源文件规范下载：https://www.figma.com/community/ui_kits
https://www.figma.com/community/ui_kits
三、其他
1. H5/触屏
开源前端组件&交互Demo
官方文档：http://vue.ydui.org/demo/#/
http://vue.ydui.org/demo/#/
2. iview
一套基于 Vue.js 的高质量UI 组件库。Vue.js 是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架；在网站中可以看到数量众多的UI组件和对应代码，本质上和我们制作UI规范是一样的。
官方文档：https://www.iviewui.com/
3. MacOS UI Library
非官方，由 Sketch 团队维护
源文件规范下载：https://www.sketch.com/downloads/mac/
4. Ant V
规范文档：https://mobile.ant.design/index-cn
5. Bootstrap
Bootstrap是Twitter推出的一个用于前端开发的开源工具包，是一个CSS/HTML框架，目前世界上的很多网站开发都使用了这个。其中的栅格理论、响应式解决方案都变成了业界的参考规范。
官方文档：https://v4.bootcss.com/
四、写在最后
将设计规范做成 Sketch 组件库甚至 Axure 元件库其实任务量很大，但是这项工作做好了能够大大提高产品、设计、开发团队的协作效率！
但组件库不是表面工作，毕竟，产品研发工作不是一蹴而就的，组件库可以帮助研发团队持续地维护产品。
在组件库的研发工作中，我们需要思考：
- 组件库在每个项目中的使用率，如果使用率比较低，那么组件库可能太臃肿。所以要及时给臃肿的组件库瘦身，只保留常用组件，去除不通用的组件。
- “合适” 比 “牛逼” 更重要。组件库不是越多越好，每个团队都与众不同，其产品和业务场景也各具特色。盲目追求 “大而全” 不可取。
- 组件库只是作为参考规范，不是照猫画虎、一成不变的。在特别情况脱离现有组件库的前提下，要保持整体的一致性，帮助我们更好的统一语言规范。
本文由 @七分 翻译发布于人人都是产品经理，未经作者许可，禁止转载。
题图来自Unsplash，基于CC0协议。