建議收藏｜常用的20個(gè)產(chǎn)品經(jīng)理組件庫(kù)網(wǎng)站

關(guān)注?Kevin和互聯(lián)網(wǎng)產(chǎn)品經(jīng)理們，一起成長(zhǎng)

作者?l 斜杠7濕兄

來(lái)源?l Kevin改變世界的點(diǎn)滴

分享 l Kevin

相信大家在腦海中對(duì)設(shè)計(jì)系統(tǒng)應(yīng)該會(huì)有一個(gè)全面的認(rèn)知，其實(shí)構(gòu)建一套設(shè)計(jì)系統(tǒng)也很簡(jiǎn)單，就四個(gè)字“開眼&借鑒”。

開眼：我們需要將設(shè)計(jì)系統(tǒng)作為設(shè)計(jì)師的學(xué)習(xí)工具，學(xué)習(xí)如何設(shè)計(jì)系統(tǒng)，探索最佳實(shí)踐和原理。

借鑒：世界上最好的公司已經(jīng)推出了最好的設(shè)計(jì)系統(tǒng)，聰明的設(shè)計(jì)師們知道如何利用設(shè)計(jì)系統(tǒng)(經(jīng)驗(yàn))借鑒與自己產(chǎn)品相似的部分來(lái)應(yīng)用于自己的工作流程。

整體來(lái)看，在設(shè)計(jì)體系上，國(guó)外在這方面都是先鋪開的，但是隨著這幾年國(guó)內(nèi)互聯(lián)網(wǎng)的蓬勃發(fā)展，很多國(guó)內(nèi)的設(shè)計(jì)團(tuán)隊(duì)也開始構(gòu)建適合他們自己企業(yè)業(yè)務(wù)的設(shè)計(jì)系統(tǒng)，下面我們來(lái)看看國(guó)內(nèi)國(guó)外有哪些值得我們學(xué)習(xí)的系統(tǒng)。

?01.?國(guó)外的系統(tǒng)推薦

在國(guó)外系統(tǒng)有很多，像蘋果HIG設(shè)計(jì)系統(tǒng),IBM Carbon 設(shè)計(jì)系統(tǒng),Salesforce Lightning 設(shè)計(jì)系統(tǒng),spectrum設(shè)計(jì)系統(tǒng)、Adobe Spectrum設(shè)計(jì)系統(tǒng)等，這些優(yōu)秀的設(shè)計(jì)系統(tǒng)都為企業(yè)的各個(gè)產(chǎn)品提供了指導(dǎo)，這里我推薦三款比較有代表性的系統(tǒng)：

1.Google

Google是一家專門從事與互聯(lián)網(wǎng)相關(guān)的服務(wù)和產(chǎn)品世界一流公司。我推薦的這個(gè)地址不僅包括Material Design系統(tǒng)還包括谷歌字體的詳細(xì)說(shuō)明，值得收藏。design.google/resources

2.Airbnb

Airbnb愛彼迎是全球民宿短租公寓預(yù)訂平臺(tái)，是少數(shù)設(shè)計(jì)師創(chuàng)業(yè)成功的公司，從30多人的小團(tuán)隊(duì)到服務(wù)190多個(gè)國(guó)家，涉獵多國(guó)語(yǔ)言，可以在這個(gè)系統(tǒng)上看到一些適配國(guó)際性的設(shè)計(jì)方法，比較出名的有l(wèi)ottie 、情緒版、插畫組件庫(kù)等內(nèi)容。airbnb.design

3.Windows

微軟設(shè)計(jì)系統(tǒng)包括人機(jī)界面布局、控件、樣式及資源下載，最大的特點(diǎn)就是全面，通過(guò)開源組件生態(tài)系統(tǒng)可以幫助在Web，Windows，iOS和Android平臺(tái)上創(chuàng)建一致的目標(biāo)。

地址:microsoft.com/design/in

語(yǔ)言指導(dǎo)的設(shè)計(jì)系統(tǒng)

Altassian是澳大利亞的一家軟件公司，它將其設(shè)計(jì)系統(tǒng)分為「品牌」，「營(yíng)銷」和「內(nèi)容」。其中我最為推薦的就是關(guān)于里面「內(nèi)容」的描述。

地址：atlassian.design/conten

比如我們?cè)谧鑫陌副容^多的設(shè)計(jì)時(shí)候完全就可以參考他們的內(nèi)容規(guī)范，進(jìn)行有針對(duì)性地設(shè)計(jì)，從而提升用戶的使用體驗(yàn)。

電商類設(shè)計(jì)系統(tǒng)

Shopify作為一個(gè)電子商務(wù)平臺(tái)的加拿大，為全球1,000,000家企業(yè)提供支持。設(shè)計(jì)系統(tǒng)中包括對(duì)顏色、板式、交互、數(shù)據(jù)可視化內(nèi)容的說(shuō)明，如果你做的項(xiàng)目是電子商務(wù)類型的Shopify可以著重研究。

地址：polaris.shopify.com/

*值得一提，國(guó)內(nèi)的電商公司一點(diǎn)也不遜色于國(guó)外，像阿里巴巴和京東這類電商巨頭公司，不僅有自己的設(shè)計(jì)系統(tǒng)，研發(fā)出自己的電商工具，比如阿里巴巴的鹿班和京東羚瓏工具，這里為國(guó)內(nèi)研發(fā)人員點(diǎn)個(gè)贊。

鹿班地址：luban.aliyun.com/

玲瓏地址：ling.jd.com/

?02.?國(guó)內(nèi)的系統(tǒng)推薦

目前，國(guó)內(nèi)的互聯(lián)網(wǎng)企業(yè)率先開展了技術(shù)上的大量投資和新的資源配置，開始把設(shè)計(jì)系統(tǒng)作為提升內(nèi)部效率的重要工具之一，比如鴻蒙設(shè)計(jì)組件庫(kù)、有贊設(shè)計(jì)系統(tǒng)等。

1.鴻蒙：

華為不用多說(shuō)中國(guó)民族企業(yè)，針對(duì)于鴻蒙手機(jī)系統(tǒng)他們開發(fā)了設(shè)計(jì)規(guī)范的說(shuō)明，傾向于中國(guó)本土化的設(shè)計(jì)，很值得學(xué)習(xí)和借鑒。

地址：developer.harmonyos.com

2.京東：

NutUI基于京東 APP9.0 設(shè)計(jì)語(yǔ)言結(jié)合零售眾多的應(yīng)用場(chǎng)景打造更加標(biāo)準(zhǔn)化的設(shè)計(jì)系統(tǒng)，可以搭配jdrd.jd.com/這個(gè)工具一起使用。

地址：nutui.jd.com/#

3.視圖：

是一套基于 Vue.js 的開源 UI 組件庫(kù)，主要服務(wù)于 PC 界面的中后臺(tái)產(chǎn)品。很多巨頭互聯(lián)網(wǎng)公司都有使用在國(guó)內(nèi)算是通用性比較高的設(shè)計(jì)系統(tǒng)。

地址：iviewui.com/docs/introd

兩個(gè)國(guó)內(nèi)小程序開發(fā)平臺(tái)

不僅如此還有為微信小程序這類生態(tài)產(chǎn)業(yè)單獨(dú)開發(fā)的設(shè)計(jì)組件庫(kù)，如百度、微信小程序開發(fā)平臺(tái)。

百度小程序地址：smartprogram.baidu.com/

微信小程序平臺(tái)：developers.weixin.qq.com

三個(gè)車載操作系統(tǒng)平臺(tái)

還有最近大火的車載系統(tǒng)的設(shè)計(jì)系統(tǒng)，比如阿里 AliOS 車載小程序開放平臺(tái)、百度車載生態(tài)開放平臺(tái)和谷歌駕駛生態(tài)開放平臺(tái)。

阿里OS地址：miniapp.alios.cn/index#

百度車載：chelianwang.baidu.com/h

谷歌駕駛：developers.google.com/c

中后臺(tái)組件庫(kù)平臺(tái)

今年是B端市場(chǎng)大火的一年，常規(guī)的設(shè)計(jì)組件庫(kù)我就不推薦了，我就推薦兩個(gè)我覺得作為工具使用最好的三款組件庫(kù)。

這里我比較推薦有贊的設(shè)計(jì)系統(tǒng)，有贊企業(yè)不用多數(shù)垂直服務(wù)于大型B端產(chǎn)品，結(jié)合他們的設(shè)計(jì)系統(tǒng)，體驗(yàn)他們的產(chǎn)品，你將學(xué)到很多B端設(shè)計(jì)知識(shí)。

中后臺(tái)組件庫(kù)：taro-ui.jd.com/#

阿里巴巴三件套

阿里巴巴集團(tuán)作為國(guó)內(nèi)互聯(lián)網(wǎng)大型企業(yè)，在設(shè)計(jì)系統(tǒng)一直走在前列，這里我推薦三個(gè)阿里集團(tuán)的設(shè)計(jì)組件庫(kù)。

設(shè)計(jì)組件庫(kù)地址：element.eleme.cn/#

地址2：fusion.design/pc?

地址3：ant.design/docs/spec/in

你不知道的LayuI平臺(tái)

很多企業(yè)在做中后臺(tái)業(yè)務(wù)時(shí)候都是以Ant Design組件庫(kù)進(jìn)行參考模版，設(shè)計(jì)自己的組件庫(kù)的，但是我發(fā)現(xiàn)很多設(shè)計(jì)都不知道LayuI 這個(gè)網(wǎng)站，要只知道Ant Design和LayuI 需要結(jié)合使用才能發(fā)揮最大效能。

舉一個(gè)例子，即使設(shè)計(jì)稿全部使用了Ant Design的組件庫(kù)搭建，在產(chǎn)品上線時(shí)候會(huì)發(fā)現(xiàn)最終的產(chǎn)品的用戶體驗(yàn)并不完善，這時(shí)候LayuI就派上用場(chǎng)，因?yàn)長(zhǎng)ayuI當(dāng)初建立的時(shí)候就是在Ant Design基礎(chǔ)上根據(jù)螞蟻?zhàn)约旱臉I(yè)務(wù)需求提煉、組合、封裝的組件庫(kù)，也就是說(shuō)LayuI不僅有組件庫(kù)還有其交互功能的演示功能

做組件庫(kù)最重要的就是要針對(duì)公司不同的業(yè)務(wù)類型，沉淀出不同級(jí)別的組件，而Ant Design和LayuI搭配的使用才能讓組件使用起來(lái)更加順手，所以在做組件庫(kù)時(shí)候不能只盯著Ant Design也要學(xué)會(huì)像LayuI一樣，理解業(yè)務(wù)需求搭建符合業(yè)務(wù)需求的組件庫(kù)。

·Ant Design：企業(yè)級(jí)的設(shè)計(jì)系統(tǒng)，很多公司項(xiàng)目都在使用，適用于所有人，通用的原子級(jí)別的組件庫(kù)（比如一個(gè)輸入框一個(gè)按鈕）。

·LayuI：試用于了解組合的區(qū)塊級(jí)別的組件，比如一整個(gè)表單的樣式、一個(gè)按鈕的交互狀態(tài)。與其類似的開源網(wǎng)站還有一個(gè)“Ant Design Pro”，有需要的同學(xué)可以自己體驗(yàn)。

另外還找到了兩款國(guó)外的開源工具，這兩個(gè)網(wǎng)站里面包括了全球幾乎可以叫得上名字的設(shè)計(jì)系統(tǒng)，有需要的小伙伴可以收藏起來(lái)。

地址：styleguides.io/

地址：designsystemsrepo.com/d

?03. 為什么說(shuō)組件庫(kù)是設(shè)計(jì)系統(tǒng)的核心

組件是最好推進(jìn)設(shè)計(jì)系統(tǒng)的解決方案

其實(shí)前面我講到了設(shè)計(jì)系統(tǒng)并不是簡(jiǎn)單的“開發(fā)組件庫(kù)或者設(shè)計(jì)規(guī)范”，但是大家要知道“開發(fā)組件庫(kù)或者設(shè)計(jì)規(guī)范（以下簡(jiǎn)稱公共組件）”是我們身為設(shè)計(jì)師接觸最多的一個(gè)工具，那是因?yàn)槲覀冋硎茉谝詷?gòu)建一個(gè)以公共組件為驅(qū)動(dòng)方式的設(shè)計(jì)系統(tǒng)的潮流中。

像是谷歌的 Material Design系統(tǒng)、微軟的Microsoft Fluent、華為的鴻蒙設(shè)計(jì)系統(tǒng)等都是因?yàn)檫@個(gè)原因而興起的。

設(shè)計(jì)師和開發(fā)提高協(xié)作效率的溝通方式

設(shè)計(jì)師和前端開發(fā)之間的同步，幾乎是每個(gè)設(shè)計(jì)系統(tǒng)在實(shí)現(xiàn)過(guò)程中最為頭疼的事情了，雖然設(shè)計(jì)系統(tǒng)建立了一套標(biāo)準(zhǔn)的溝通語(yǔ)言，但是還缺少一套溝通的方法，而組件庫(kù)就是這個(gè)溝通的方法。

舉一個(gè)例子，設(shè)計(jì)師給一個(gè)設(shè)計(jì)稿是由8個(gè)元素拼裝成的，但是前端開發(fā)覺得需要10個(gè)元素才能拼裝成功。雖然溝通語(yǔ)言是一樣，但是溝通方法不一樣（也就是設(shè)計(jì)師和前端的實(shí)現(xiàn)方法不一樣），但是把已經(jīng)封裝好的組件當(dāng)作溝通方法的話，設(shè)計(jì)師和前端開發(fā)看到的將不是元素而是一個(gè)個(gè)的組件，那實(shí)現(xiàn)出來(lái)的產(chǎn)品在信息框、視覺表達(dá)、交互體驗(yàn)都一致，這一點(diǎn)和建立設(shè)計(jì)系統(tǒng)的初衷是一樣的。把封裝好的組件當(dāng)成溝通方法，這種做法的好處主要有兩點(diǎn)，第一點(diǎn)就是可以保證用戶體驗(yàn)是一致，第二點(diǎn)就是可以提高開發(fā)效率。

保證體驗(yàn)一致：可保證開發(fā)出來(lái)的產(chǎn)品在設(shè)計(jì)風(fēng)格和交互體驗(yàn)上都保持一致，對(duì)于設(shè)計(jì)師進(jìn)行設(shè)計(jì)效果的還原也方便許多。

提高開發(fā)效率：方便設(shè)計(jì)師和開發(fā)人員之間的交接協(xié)作效率，從而幫助系統(tǒng)剔除重復(fù)不必要的組件提高開發(fā)產(chǎn)能效率，使開發(fā)更加便捷。

國(guó)內(nèi)的平臺(tái)也很重視

如果你打開瀏覽器就會(huì)發(fā)現(xiàn)現(xiàn)在網(wǎng)上的文章大多只是關(guān)于以“消息通知、清算系統(tǒng)、結(jié)算系統(tǒng)”等功能模塊教大家如何建立“組件庫(kù)”或是“設(shè)計(jì)規(guī)范”的教程，可見組件庫(kù)的重要性。

今天的分享就到這兒！

END