每年，出現(xiàn)越來越多的工具和流程來優(yōu)化設(shè)計人員和開發(fā)人員的工作。設(shè)計系統(tǒng)已成為解決該領(lǐng)域問題的新工具。通過更快地構(gòu)建數(shù)字產(chǎn)品，設(shè)計系統(tǒng)最近獲得了很高的知名度。使用它們時，您不僅可以訪問圖標(biāo)，版式，深度效果，調(diào)色板，還可以訪問在移動和Web開發(fā)期間可以采用的組織規(guī)則。

它們配備了許多工具和組件，也使您不必完全自己創(chuàng)建設(shè)計。只需按照詳細(xì)的指南為您的品牌定制它，并獲得具有立即可用的解決方案，這些好處包括節(jié)省時間，降低成本，簡化項目實施流程，這些都是您將獲得的好處。

去年，Sparkbox進行了一項調(diào)查，在調(diào)查中，受訪者被問及建議使用設(shè)計語言的情況。在下面，您可以看到可以解決的難題以及所選答案的百分比。

圖片來源：2019年Sparkbox設(shè)計系統(tǒng)調(diào)查

讓我們回顧一下將在2020年占據(jù)主導(dǎo)地位的10個設(shè)計系統(tǒng)。看看它們的功能，特性和成就。

1. Google Material Design

Material Design可能是最受歡迎的設(shè)計系統(tǒng)，其中包含用于構(gòu)建精美的移動設(shè)備(iOS，Android)和Web解決方案的說明，工具和組件。它于2014年由Google發(fā)布，支持最佳的UI / UX做法，并幫助開發(fā)團隊更快，更輕松地創(chuàng)建現(xiàn)代產(chǎn)品。

Material Design的第一個版本有一個缺點，這對于想要根據(jù)其風(fēng)格進行調(diào)整的品牌來說非常重要。所有Material Design應(yīng)用程序都極為相似。因此，Google在2018年發(fā)布了Material Design 2.0。這個版本是對以上批評的回答。具有多種樣式，布局，深度效果，炫酷動畫，它們有能力制作真正獨特的品牌主題。

我們非常了解這個設(shè)計系統(tǒng)，因為我們?nèi)粘Ｉ钪惺褂玫乃袘?yīng)用都是通過Material Design制作的：YouTube，Gmail，Google云端硬盤，文檔，幻燈片等。

2. Akveo的Eva設(shè)計系統(tǒng)

Eva Design System于2019年推出。它的主要優(yōu)點是在品牌適應(yīng)方面具有強大的靈活性。Eva由Akveo團隊發(fā)明，基于Atomic Design Principles(原子設(shè)計原則)，目前有兩種實現(xiàn)方式，兩種是針對移動設(shè)備的UI Kitten(React Native UI庫)和針對網(wǎng)絡(luò)的Nebular(Angular UI庫)。兩種解決方案都是開源的，并且是免費提供的。

Eva包括258種圖層樣式，大約400種文本樣式，超過480個圖標(biāo)，800多個符號，它使制造帶有品牌的移動產(chǎn)品和Web產(chǎn)品具有很高的可用性和引人入勝的用戶體驗。重要的是，Eva可用于Sketch和Figma并具有明暗模式。

通過確保所有平臺之間的一致性并消除重復(fù)的工作，它使公司可以大大自動化軟件開發(fā)。結(jié)果，您將獲得高質(zhì)量的應(yīng)用程序/網(wǎng)站或節(jié)省時間和精力。

盡管很年輕，但Eva已被證明是數(shù)字產(chǎn)品的強大而可靠的解決方案。例如，Eva用于UI Bakery的內(nèi)核，UI Bakery是用于原型設(shè)計和創(chuàng)建應(yīng)用程序的低代碼平臺。它還內(nèi)置了先進的Eva Colors深度學(xué)習(xí)算法，因此可以在幾秒鐘內(nèi)生成自定義設(shè)計系統(tǒng)。

截至2020年1月，Eva在Gumroad上的下載量為15,000，在UI Kitten和Nebular Github存儲庫上的下載量均超過5,700星。

3. 來自IBM的Carbon

Carbon由IBM推出，是一種流行的開源設(shè)計系統(tǒng)，它提供了一組規(guī)則，標(biāo)準(zhǔn)和用于創(chuàng)建高質(zhì)量數(shù)字解決方案的教程。遵循視覺，用戶界面和代碼準(zhǔn)則，開發(fā)團隊能夠輕松制作出引人入勝的設(shè)計。使用大量元素(表單，按鈕，圖標(biāo)，表格，選項卡，滑塊等)將幫助您針對品牌進行自定義，并確保出色的用戶體驗。

Carbon還提供了其他許多很酷的功能，包括圖表類型，圖表解剖結(jié)構(gòu)，基本圖表，軸，標(biāo)簽等等。因此，它非常適合構(gòu)建軟件，而不需要支持?jǐn)?shù)據(jù)分析和數(shù)據(jù)可視化功能。

截至2019年12月，Carbon Design System在GitHub上擁有2,400星。

4. Liquid

Liquid為UX / UI專家和非技術(shù)人員提供了一套用于制作出色技術(shù)產(chǎn)品的工具，指南和要素。打包有多種顏色，插圖，版式，網(wǎng)格和組件，可確保所有設(shè)備上一致的UI和高品質(zhì)外觀。

今天，Liquid包括1,500多個UI資產(chǎn)，42個元素，18個組件，14個模塊和9個模板。使用設(shè)計和開發(fā)套件，您可以更快地構(gòu)建完全適合您的品牌的出色數(shù)字解決方案。

5. Shopify的北極星 Polaris

Polaris是幾年前由跨國電子商務(wù)公司Shopify推出的軟件設(shè)計系統(tǒng)。該解決方案允許UI / UX設(shè)計人員和工程師為Shopify商家創(chuàng)建用戶友好的應(yīng)用程序。為團隊提供大量工具，樣式和元素，它可以幫助他們建立可在每種設(shè)備，每種操作系統(tǒng)和每種語言上運行的引人入勝的用戶體驗。

Polaris的一大優(yōu)勢在于，它提供了有關(guān)構(gòu)建優(yōu)質(zhì)應(yīng)用程序的內(nèi)容，原因和方法的非常詳細(xì)的指導(dǎo)。在產(chǎn)品的官方網(wǎng)站上，您可以找到有關(guān)內(nèi)容(語音和語氣)，版式，組件，插圖等的詳細(xì)章節(jié)。

截至2020年1月，北極星在Github上擁有3,100星

6. Adob​e的Spectrum

Spectrum是Adobe的一個項目，其中包括用于創(chuàng)建Adobe應(yīng)用程序和服務(wù)的所有必要工具，組件和指南。與其他領(lǐng)先的軟件設(shè)計系統(tǒng)一樣，它也使開發(fā)團隊能夠確保在所有屏幕和平臺上都擁有自然的外觀。

使用Spectrum，您可以訪問各種資源(UI工具包，字體，圖標(biāo))，組件(數(shù)據(jù)可視化元素，按鈕，版式，導(dǎo)航等)，模式(卡片，標(biāo)題，表格)以及其他使真正有用的東西產(chǎn)品。

Spectrum設(shè)計語言具有CSS實施-Spectrum CSS，供Adobe平臺上的內(nèi)部或第三方使用。它是一個開放源代碼的可定制解決方案，其中包含強大的文檔，并能夠生成完全交互式的組件。

截至2019年12月，Spectrum CSS已在GitHub上獲得約500星的評價。

7. 微軟Fluent

Fluent Design System是微軟于2017年發(fā)明的一種開放設(shè)計語言。代表對Microsoft設(shè)計語言2的重新思考，F(xiàn)luent包含有關(guān)為所有啟用Windows 10的設(shè)備和平臺創(chuàng)建的軟件中采用的視覺效果，效果和交互作用的說明。值得注意的是，該系統(tǒng)正在根據(jù)實際客戶需求進行改進。

Fluent基于5個主要組件-燈光，縮放，深度，運動和材質(zhì)-Fluent允許構(gòu)建適用于Web，Windows，iOS和Android的應(yīng)用程序。用它制成的產(chǎn)品看起來很自然，并確保每個設(shè)備和平臺上的一致性。

到2020年1月，它在Github上擁有6,600顆星

8. Atlassian

Atlassian是一種軟件設(shè)計語言，可在Sketch中提供設(shè)計原理，代碼元素和UI資產(chǎn)庫。使用明確的指南(例如，關(guān)于印刷，運動)，預(yù)構(gòu)建的模板和演示文稿套件，您可以更快地設(shè)計產(chǎn)品。

Atlassian由各種組件組成，包括圖標(biāo)，字體，按鈕，徽章，橫幅，分頁，選項卡，標(biāo)簽，表格，微調(diào)框等，這些元素有助于建立出色的體驗。值得注意的是，《財富》 500強中有83%的公司使用Atlassian產(chǎn)品，并且在190多個國家/地區(qū)擁有150,000名Atlassian客戶

2017年9月12日，Atlassian在ProductHunt上成為當(dāng)天的第二個產(chǎn)品和一周的第五個產(chǎn)品。到目前為止，它已經(jīng)收到了2,301票贊成票。

9. Clarity

Clarity是一個開放源代碼設(shè)計系統(tǒng)，于2016年首次發(fā)布，由UX準(zhǔn)則，HTML / CSS框架，Angular和Web組件組成。它還提供詳細(xì)的文檔，模式(應(yīng)用程序布局，調(diào)色板，主題，版式，導(dǎo)航，國際化)和組件(例如警報，徽章，按鈕，復(fù)選框，卡片，表單，網(wǎng)格，列表，標(biāo)簽，進度條，表格) )。創(chuàng)建產(chǎn)品時，您可以下載Clarity的圖標(biāo)，而不必自己制作。

該系統(tǒng)正在不斷完善和更新。2019年5月23日，發(fā)布了Clarity 2.0。新版本包括許多新功能，錯誤修復(fù)以及對Angular 8的支持。添加了垂直選項卡，手風(fēng)琴組件，步進組件和支持鍵盤交互。

目前，Clarity在GitHub上擁有超過5,400顆星

10. Ant Design

作為一種設(shè)計語言，Ant為UI / UX專家和開發(fā)人員提供了構(gòu)建出色產(chǎn)品所需的所有必要資源(Sketch和Axure)。該系統(tǒng)主要用于內(nèi)部桌面應(yīng)用程序，旨在增強用戶體驗并確保不同設(shè)備之間的一致性。

Ant包含許多很酷的現(xiàn)成功能：一組React組件，可預(yù)測的靜態(tài)類型，國際化支持，主題自定義等。

到目前為止，Ant已在GitHub上獲得了約54,500個星。

最后的想法

設(shè)計系統(tǒng)提供了許多有用的東西，使企業(yè)和個人能夠自動化軟件開發(fā)，更快地發(fā)布應(yīng)用程序以及啟動品牌應(yīng)用程序和網(wǎng)站。為了真正執(zhí)行并完成所有這些事情，設(shè)計系統(tǒng)必須包括一定的功能列表。根據(jù)2019年設(shè)計系統(tǒng)調(diào)查，最重要的功能是：

• 色彩調(diào)色板
• 版式
• 表單組件
• 導(dǎo)航組件
• CSS代碼
• HTML代碼
• 使用指南

您認(rèn)為最重要的功能是什么?

本文翻譯自Alexei Malashkevich的文章《Top 10 best Design Systems for 2020》。