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