近日，基于 Ant Design 的 Web3 開源組件庫 Ant Design Web3 正式發布，Ant Design 家族又添一員。Ant Design 是螞蟻金服推出的一個服務于企業級產品的設計體系，這個體系不斷迭代，衍生出很多相關產品，給前端開發帶來很大的便利。本文就來盤點一下 Ant Design 家族的產品，你用過幾個？

圖片

Ant Design

Ant Design 組件庫是一套基于 Ant Design 設計體系的 React UI 組件庫，主要用于研發企業級中后臺產品，其提供了大量常用UI組件，包括表格、按鈕、表單、提示框、樹形控件等等。這個組件庫主要用于研發企業級中后臺產品，提煉自企業級中后臺產品的交互語言和視覺風格，開箱即用的高質量React組件。使用TypeScript開發，提供完整的類型定義文件。

圖片

Ant Design 是使用 React 實現的，社區還提供了一些其他技術的實現：

• NG-ZORRO - Ant Design of Angular[1]
• NG-ZORRO-MOBILE - Ant Design Mobile of Angular[2]
• Ant Design of Vue[3]

官網：https://ant.design/

Ant Design Pro

Ant Design Pro 是一個企業級中后臺前端/設計解決方案，使用 React 和 Ant Design 作為基礎框架，提供多功能的布局和設計組件，支持自動建立前端應用程序，并提供完整的開發和構建工具。它專門用于構建企業級管理后臺和前端應用，提供一整套前端中后臺項目的解決方案，包括路由、權限管理、國際化、數據mock、工程化等，幫助開發者快速搭建功能豐富的管理系統。

圖片

官網：https://pro.ant.design/

Ant Design Web3

Ant Design Web3 是一個基于 Ant Design 的 Web3 React 組件庫，它提供了一系列的組件，可以幫助你快速構建去中心化應用（DApp）。除了提供基本的組件之外，還提供了和鏈交互的能力，多層架構的設計可以兼容不同的鏈，也讓組件擁有了超越 UI 的能力。

圖片

Ant Design Web3 的特點如下：

• Ant Design 友好：Ant Design Web3 的設計體系與 Ant Design 無縫銜接，開發者使用更容易。
• 開箱即用的體驗：可以快速設置項目，并利用預構建的組件來創建 DApps。
• 與不同鏈的兼容性：Ant Design Web3 設計具有良好的擴展性，允許通過適配器適應不同的鏈。

Ant Design Web3 定義了一套通用的 API，基于這套 API 可以通過適配層對接不同的區塊鏈。目前，支持了以太坊（包括兼容 EVM 的鏈），未來會嘗試支持更多的鏈。

圖片

官網：https://web3.ant.design/

Ant Design Pro Components

Ant Design Pro Components 是基于Ant Design而開發的模板組件，提供更高級別的抽象支持，開箱即用，可以顯著提升制作CRUD頁面的效率，更加專注于頁面。ProComponents 是在Ant Design的基礎上進行封裝的頁面級組件庫，一個組件就可以搞定一個頁面。這個組件庫是 Ant Design Pro 中后臺框架所用的主要組件庫，內置了一系列的設計規范，預設了常用的邏輯，同時提供了靈活的支持。

圖片

官網：https://procomponents.ant.design/

Ant Design Mobile

Ant Design Mobile 是 Ant Design 的移動規范的React實現，提供40+高質量基礎組件，用于研發移動端產品，能夠輕松適應各類產品風格。同時，UI樣式高度可配置，拓展性更強。這個組件庫全面兼容react/preact，可以全面覆蓋各類場景。它基于React Native的iOS/Android/Web多平臺支持，提供豐富的組件和特性，滿足各種功能需求。

圖片

官網：https://ant-design-mobile.antgroup.com/

Ant Design Mini

Ant Design Mini 是一套基于 Ant Design 的小程序 UI 組件庫，目前支持在支付寶小程序、微信小程序（Beta）、uniapp 中使用，其特性如下：

• 高性能：無需配置，即可擁有最佳的包體積大小和極致的性能
• 可定制：可以高效地對組件外觀進行調整或創造自己的主題
• 原子化：每個組件的功能不多也不少，恰好就是你所需
• 流暢感：擁有流暢的手勢和細膩的動畫，助力產品打造出極致體驗

圖片

官網：https://ant-design-mini.antgroup.com/

Ant Design Charts（Antv）

Ant Design Charts 一套數據可視化組件庫，作為Ant Design的官方圖表組件解決方案。這個組件庫支持多種視覺效果，可以快速生成漂亮的圖表和圖形，并且提供了一些基本圖表類型（如柱狀圖、折線圖、餅圖等），并支持自定義配置選項，比如圖表的數據源、樣式、標簽等。此外，Ant Design Charts 是 AntV 的 React 版本，對 React 技術棧的同學更加友好。

圖片

AntV 是螞蟻集團提供的一套全新的視圖可視化圖表庫，以圖形出發，覆蓋了傳統統計圖表、關系數據可視化、地理空間數據可視化、移動端圖表、2D繪圖引擎和智能可視化等多個領域，主要包含 G2、G6、X6、L7、F2、AVA 等十數個項目以及一套完整的圖表使用和設計規范。

圖片

官網：https://ant-design-charts.antgroup.com/

Ant Design Landing

Ant Design Landing 是針對產品首頁的解決方案。它秉承 Ant Design 的設計價值觀，延用 Ant Design 的設計原則，可以快速搭建出用戶需要的首頁，進一步提升工作效率。這個產品可以說是前端開發者“偷懶”的神器，不用寫代碼，就能開發出一個個精美的網站首頁。平臺擁有豐富的各類首頁模板，下載模板代碼包，即可快速使用。

圖片

圖片

官網：https://landing.ant.design/

Ant Motion

Ant Motion 是從 Ant Design 中提煉出來的動效語言，是一套React框架動效解決方案。它不僅僅是一種動效語言，還可以幫助開發者更容易地在項目中使用動效。通過使用 Ant Motion，開發者可以通過簡單的配置實現所需的動畫效果，包括單項動畫、組合動畫等，快速地提高工作效率。

圖片

官網：https://motion.ant.design/

Scaffolds

Scaffolds 是一個豐富實用的腳手架集合。

圖片

官網：https://scaffold.ant.design/

[1]Ant Design of Angular： http://ng.ant.design/

[2]Ant Design Mobile of Angular： http://ng.mobile.ant.design/

[3]Ant Design of Vue： http://antdv.com/