每年，出現越來越多的工具和流程來優化設計人員和開發人員的工作。設計系統已成為解決該領域問題的新工具。通過更快地構建數字產品，設計系統最近獲得了很高的知名度。使用它們時，您不僅可以訪問圖標，版式，深度效果，調色板，還可以訪問在移動和Web開發期間可以采用的組織規則。

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

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

圖片來源：2019年Sparkbox設計系統調查

讓我們回顧一下將在2020年占據主導地位的10個設計系統。看看它們的功能，特性和成就。

1. Google Material Design

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

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

我們非常了解這個設計系統，因為我們日常生活中使用的所有應用都是通過Material Design制作的：YouTube，Gmail，Google云端硬盤，文檔，幻燈片等。

2. Akveo的Eva設計系統

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

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

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

盡管很年輕，但Eva已被證明是數字產品的強大而可靠的解決方案。例如，Eva用于UI Bakery的內核，UI Bakery是用于原型設計和創建應用程序的低代碼平臺。它還內置了先進的Eva Colors深度學習算法，因此可以在幾秒鐘內生成自定義設計系統。

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

3. 來自IBM的Carbon

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

Carbon還提供了其他許多很酷的功能，包括圖表類型，圖表解剖結構，基本圖表，軸，標簽等等。因此，它非常適合構建軟件，而不需要支持數據分析和數據可視化功能。

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

4. Liquid

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

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

5. Shopify的北極星 Polaris

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

Polaris的一大優勢在于，它提供了有關構建優質應用程序的內容，原因和方法的非常詳細的指導。在產品的官方網站上，您可以找到有關內容(語音和語氣)，版式，組件，插圖等的詳細章節。

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

6. Adob​e的Spectrum

Spectrum是Adobe的一個項目，其中包括用于創建Adobe應用程序和服務的所有必要工具，組件和指南。與其他領先的軟件設計系統一樣，它也使開發團隊能夠確保在所有屏幕和平臺上都擁有自然的外觀。

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

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

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

7. 微軟Fluent

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

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

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

8. Atlassian

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

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

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

9. Clarity

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

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

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

10. Ant Design

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

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

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

最后的想法

設計系統提供了許多有用的東西，使企業和個人能夠自動化軟件開發，更快地發布應用程序以及啟動品牌應用程序和網站。為了真正執行并完成所有這些事情，設計系統必須包括一定的功能列表。根據2019年設計系統調查，最重要的功能是：

• 色彩調色板
• 版式
• 表單組件
• 導航組件
• CSS代碼
• HTML代碼
• 使用指南

您認為最重要的功能是什么?

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