AntDesign 元件库-免费版

2025-06-23 0 168

与付费版本不同付费版本是包含了交互和优化

一、AntDesign 元件库概述

AntDesign 元件库-免费版

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)
    线性/非线性步骤展示,支持图标、标题和描述,可配置当前步骤和状态(进行中/已完成/已失败)。
    案例:注册流程分为“填写信息→验证身份→设置密码”三步,用步骤条引导用户操作。

下载地址:

收藏 打赏

感谢您的支持,我会继续努力的!

扫码打赏,加速更新更多文章。
常见问题
  • 本站资源版权属 AxureMost.cn 所有。任何非官网途径下载均属于盗版,后台有检测机制一经发现传播,共享,出售会起诉追会本站损失。
查看详情
  • 请比对下载完压缩包的与网盘上的容量。
查看详情
发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务