中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語：?組件庫是設(shè)計系統(tǒng)里的一個重要分支，一個合適的組件庫可以幫助設(shè)計師和開發(fā)者提高工作效率；本文作者分享了關(guān)于各個大廠已經(jīng)成形的組件庫，一起來看一下。

最近為了給部門制定合理的設(shè)計規(guī)范，方便各個團隊更好的高效協(xié)作；為此參考了許多國內(nèi)外優(yōu)秀的設(shè)計規(guī)范，趁著這次機會做一個整理，而且這些設(shè)計規(guī)范基本上都是附帶 Sketch 源文件的。

但實際上組件庫的整理工作也是比較繁復(fù)的，我們在開始之前，需要去判斷什么情況下組件庫可以真正為我們節(jié)省工作量提升效率；而這些已經(jīng)成形的組件庫，非常值得大家下載學(xué)習(xí)、參考和使用。

一、大廠

1. ANT Design（螞蟻金服）

螞蟻金服出品，非常著名的框架；企業(yè)級產(chǎn)品的設(shè)計系統(tǒng)，很多公司的項目都在使用，而且提供了對設(shè)計師友好的Sketch規(guī)范文件，可以直接拿來用。

官方鏈接：https://ant.design/

源文件規(guī)范下載：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是螞蟻金服全新一代數(shù)據(jù)可視化解決方案，致力于提供一套簡單方便、專業(yè)可靠、無限可能的數(shù)據(jù)可視化最佳實踐。（包含PC和移動端）

源文件規(guī)范下載：https://antv-2018.alipay.com/zh-cn/vis/resource/index.html

附件下載： AntV.Charts.sketch

3. Element UI（餓了么）

這是由餓了么 UED 設(shè)計開發(fā)的基于 Vue 的前端組件庫，雖然在很多交互模式和組件樣式以及設(shè)計理念上都參考了 Ant Design，但是也做了一些自己的修改和調(diào)整。

他們同樣也推出了 Axure 元件庫文件以及 Sketch 組件庫，有興趣的朋友可以參考研究一下。

源文件規(guī)范下載：https://element.eleme.cn/#/zh-CN/resource

附件下載： Element UI Kit_v2.0.sketch

3. Zan Design System（有贊）

服務(wù)于 SaaS 產(chǎn)品的設(shè)計體系。連接設(shè)計和開發(fā)，讓協(xié)作變得高效簡單；通過沉淀不同行業(yè)、場景的經(jīng)驗和思考，推動社交生態(tài)內(nèi)的用戶體驗一致性。

源文件規(guī)范下載：https://design.youzan.com/resource/resource.html

桌面端視覺規(guī)范： Zan Desgin PC_2.0_beta.sketch

視覺規(guī)范： Zan Design Vant 視覺規(guī)范 V3.0 .sketch

元件庫： Zan Design Vant 元件庫 TC_ZY.zip

4. Mand Mobile（滴滴）

面向金融場景的Vue移動端UI組件庫，豐富、靈活、實用，快速搭建優(yōu)質(zhì)的金融類產(chǎn)品，讓復(fù)雜的金融場景變簡單。

源文件規(guī)范下載：https://didi.github.io/mand-mobile/#/en-US/design/other/resource

5. Taro UI（京東）

Taro UI，一套基于 Taro 框架開發(fā)的多端 UI 組件庫，可以在微信小程序 / H5 / ReactNative 等多端適配運行。京東用戶體驗設(shè)計部的凹凸實驗室出品。

源文件規(guī)范下載：https://taro-ui.aotu.io/#/docs/resource

附件下載： TaroUI.sketch

Axure部件庫： taroui-rplib1565263474229.zip

6. AT UI（京東）

AT-UI 是一款基于 Vue.js 2.0 的前端 UI 組件庫，主要用于快速開發(fā) PC 網(wǎng)站中后臺產(chǎn)品。

源文件規(guī)范下載：https://at-ui.github.io/at-ui/#/zh/resource/design

附件下載： feather.sketch

7. WeUI（微信）

由微信團隊推出的可以用于微信小程序設(shè)計的 Sketch 組件庫，用起來也很方便，有微信端設(shè)計需求的朋友可以參考。

源文件規(guī)范下載：https://developers.weixin.qq.com/miniprogram/design/#%E5%9B%BE%E6%A0%87

8. QMUI（騰訊）

QMUI，騰訊出品，分為Web、iOS、安卓三個端，都有相應(yīng)的dome下載安裝；設(shè)計師可以下載安卓和iOS應(yīng)用，經(jīng)?？纯蠢锩娴慕M件，熟悉后，和技術(shù)的協(xié)作會更有效率。

官方文檔：https://qmuiteam.com/web/page/widget.html

二、國外

1. Apple UI Design Resources

iOS 的設(shè)計規(guī)范其實并沒有 Material Design 那么具體和細節(jié)，但作為一個 iOS 平臺的設(shè)計人員還是需要把它們的設(shè)計理念爛熟于胸。

對于 iOS 平臺的 Sketch 組件庫，我只推薦兩個，一個是 Facebook 推出的 iOS 10 組件庫，另外一個是由 Apple 官方推出的組件庫，同樣都有 Sketch 源文件。

源文件規(guī)范下載：https://developer.apple.com/design/resources/

2. Android Material Design

由 Google 設(shè)計團隊推出的 Material Design 一經(jīng)發(fā)布就紅遍了全球設(shè)計界，多個富有突破性的設(shè)計理念，將理性與感性相結(jié)合的完美標(biāo)準(zhǔn)，使得越來越多的人基于 Material Design 制作了自己產(chǎn)品的設(shè)計規(guī)范。

除了谷歌官方的 Sketch 組件庫外，還有一個基于 Material Design 色板的 Sketch 源文件下載，用起來非常方便。

源文件規(guī)范下載：https://material.io/resources#sticker-sheets-icons-components

Material Design 官方相關(guān)源文件下載

Material Design 色板 Sketch 源文件下載

3. Clarity Design

Teambition出品。Clarity Design 是一套全面的設(shè)計語言，從設(shè)計原則到字體排版，從交互到文案，從動效到樣式，從組件到設(shè)計工具…… 提供了各種解決方法和指導(dǎo)，設(shè)計師和工程師可以快速找到相關(guān)的指導(dǎo)內(nèi)容，有效地幫助完善工作并且提高效率。

源文件規(guī)范下載：https://design.teambition.com/resource/design-resource

4. Polaris

由國外 Shopify 團隊推出的 Polaris 設(shè)計規(guī)范也有比較不錯的參考價值，而且內(nèi)容非常豐富完整，感興趣的朋友可以查看官方文檔好好研究一下，他們同樣提供 Sketch 組件庫。

源文件規(guī)范下載：https://polaris.shopify.com/resources/resources

5. Atlassian Design

由國外知名軟件企業(yè) Atlassian 推出的設(shè)計語言，涵蓋了品牌、營銷、產(chǎn)品相關(guān)的設(shè)計規(guī)范和理念，其豐富程度僅次于 Material Design，可以說給了設(shè)計師很多參考與幫助，另外還提供了非常完整詳細的 Sketch 組件庫，強烈推薦大家研究學(xué)習(xí)！

源文件規(guī)范下載：https://atlassian.design/resources/sketch-library

6. Lightning Design System

Lightning Design System 是由 Salesforce 團隊推出的一個設(shè)計規(guī)范，它們的規(guī)范文檔也是相當(dāng)完整而且可參考性很強，推薦大家研究，同時它們也有 Sketch 組件庫可供下載。

官方文檔：https://www.lightningdesignsystem.com/

源文件規(guī)范下載：https://github.com/salesforce-ux/design-system-ui-kit/blob/master/README.md

7. 全球大公司組件庫集合

源文件規(guī)范下載：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 的高質(zhì)量UI 組件庫。Vue.js 是一個JavaScriptMVVM庫，是一套構(gòu)建用戶界面的漸進式框架；在網(wǎng)站中可以看到數(shù)量眾多的UI組件和對應(yīng)代碼，本質(zhì)上和我們制作UI規(guī)范是一樣的。

官方文檔：https://www.iviewui.com/

3. MacOS UI Library

非官方，由 Sketch 團隊維護

源文件規(guī)范下載：https://www.sketch.com/downloads/mac/

4. Ant V

規(guī)范文檔：https://mobile.ant.design/index-cn

5. Bootstrap

Bootstrap是Twitter推出的一個用于前端開發(fā)的開源工具包，是一個CSS/HTML框架，目前世界上的很多網(wǎng)站開發(fā)都使用了這個。其中的柵格理論、響應(yīng)式解決方案都變成了業(yè)界的參考規(guī)范。

官方文檔：https://v4.bootcss.com/

四、寫在最后

將設(shè)計規(guī)范做成 Sketch 組件庫甚至 Axure 元件庫其實任務(wù)量很大，但是這項工作做好了能夠大大提高產(chǎn)品、設(shè)計、開發(fā)團隊的協(xié)作效率！

但組件庫不是表面工作，畢竟，產(chǎn)品研發(fā)工作不是一蹴而就的，組件庫可以幫助研發(fā)團隊持續(xù)地維護產(chǎn)品。

在組件庫的研發(fā)工作中，我們需要思考：

• 組件庫在每個項目中的使用率，如果使用率比較低，那么組件庫可能太臃腫。所以要及時給臃腫的組件庫瘦身，只保留常用組件，去除不通用的組件。
• “合適” 比 “牛逼” 更重要。組件庫不是越多越好，每個團隊都與眾不同，其產(chǎn)品和業(yè)務(wù)場景也各具特色。盲目追求 “大而全” 不可取。
• 組件庫只是作為參考規(guī)范，不是照貓畫虎、一成不變的。在特別情況脫離現(xiàn)有組件庫的前提下，要保持整體的一致性，幫助我們更好的統(tǒng)一語言規(guī)范。

本文由 @七分 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。