品牌行銷策略，產品行銷與設計，各類型行銷推廣案例分享-品牌行銷點點讚
編輯導語： 組件庫是設計系統里的一個重要分支，一個合適的組件庫可以幫助設計師和開發者提高工作效率；本文作者分享了關于各個大廠已經成形的組件庫，一起來看一下。
最近為了給部門制定合理的設計規范，方便各個團隊更好的高效協作；為此參考了許多國內外優秀的設計規范，趁著這次機會做一個整理，而且這些設計規范基本上都是附帶 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協議。