AntDesign 元件庫概述
一、AntDesign 元件庫概述
添加圖片注釋，不超過 140 字（可選）
AntDesign 是螞蟻集團推出的企業級設計體系，在 Axure 中使用 AntDesign 元件庫，可幫助設計師快速搭建符合現代企業級產品標準的高保真原型，尤其適合中后臺系統、數據管理平臺等復雜場景的設計。
鏈接地址
二、AntDesign 元件庫核心組件分類及特點
AntDesign 元件庫按功能可分為以下幾類，以下是核心組件的詳細說明：
1. 基礎交互元件
| 組件名稱 | 功能描述 | 原型應用場景 |
|---|---|---|
| 按鈕（Button） | 支持主按鈕、次按鈕、虛線按鈕等多種類型，可添加圖標、加載狀態和尺寸調整 | 操作觸發（如提交、刪除、導出） |
| 輸入框（Input） | 包含單行輸入、多行文本域、搜索框，支持前綴/后綴圖標、實時校驗和清空按鈕 | 表單數據錄入、搜索功能 |
| 選擇器（Select） | 下拉選擇框、多選框、穿梭框，支持遠程搜索和虛擬滾動，適合大數據量場景 | 角色選擇、權限配置、標簽分類 |
| 開關（Switch） | 二態切換組件，可顯示開/關狀態文案，支持大小和顏色自定義 | 功能啟用/禁用、狀態切換 |
2. 數據展示與布局元件
-
表格（Table）： 支持固定列、排序、篩選、分頁、行選擇和虛擬滾動，可配置復雜表頭和單元格渲染。 案例：在“訂單管理”頁面中，用 AntDesign 表格展示訂單列表，通過篩選按鈕快速定位特定訂單。
-
卡片（Card）： 帶陰影和邊框的容器，可包含標題、操作欄和內容區，支持懸停效果和響應式布局。 案例：數據看板中用卡片分組展示“今日銷售額”“用戶增長”等指標模塊。
-
柵格系統（Grid）： 基于 24 列網格布局，支持響應式斷點（xs/sm/md/lg/xl/xxl），可快速搭建自適應頁面結構。 案例：后臺系統首頁采用“1:5”柵格比例（側邊欄:主內容區），在移動端自動折疊為頂部導航。
3. 反饋與交互組件
-
模態框（Modal）： 支持自定義標題、內容和按鈕，可配置居中顯示、全屏模式和動畫效果（如淡入、縮放）。 案例：刪除操作時彈出確認模態框，包含“取消”和“確認刪除”按鈕，并顯示風險提示。
-
通知（Notification）： 頂部/底部彈出的提示框，支持成功、警告、錯誤等多種類型，可自定義持續時間和位置。 案例：表單提交成功后，頂部彈出帶對勾圖標的通知，3 秒后自動消失。
-
標簽頁（Tabs）： 多內容區域切換組件，支持頂部、底部、左側布局，可配置動畫過渡和懶加載。 案例：在“用戶詳情”頁面中，用標簽頁切換“基本信息”“操作記錄”“權限分配”等板塊。
4. 數據可視化組件
-
圖表（Chart）： 集成折線圖、柱狀圖、餅圖、雷達圖等，基于 G2Plot 實現，支持數據綁定和交互配置（如tooltip、圖例篩選）。 案例：在數據分析頁面中，用折線圖展示近 30 天的流量趨勢，餅圖展示用戶來源占比。
-
進度條（Progress）： 支持線性進度條、環形進度條，可顯示百分比、狀態（成功/警告/錯誤）和動畫效果。 案例：文件上傳時用線性進度條展示上傳進度，任務完成率用環形進度條直觀呈現。
5. 導航與流程組件
-
菜單（Menu）： 支持頂部菜單、側邊菜單、下拉菜單，可配置多級子菜單和激活狀態樣式，適合復雜導航結構。 案例：后臺系統側邊欄用折疊菜單展示功能模塊（如“用戶管理”“訂單管理”“數據報表”）。
-
步驟條（Steps）： 線性/非線性步驟展示，支持圖標、標題和描述，可配置當前步驟和狀態（進行中/已完成/已失敗）。 案例：注冊流程分為“填寫信息→驗證身份→設置密碼”三步，用步驟條引導用戶操作。
)
