编辑导语： 组件库是设计系统里的一个重要分支，一个合适的组件库可以帮助设计师和开发者提高工作效率；本文作者分享了关于各个大厂已经成形的组件库，一起来看一下。

最近为了给部门制定合理的设计规范，方便各个团队更好的高效协作；为此参考了许多国内外优秀的设计规范，趁着这次机会做一个整理，而且这些设计规范基本上都是附带 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协议。

给作者打赏，鼓励TA抓紧创作！