ArcoDesign 组件库-免费版

2025-06-23 0 171

与付费版本不同付费版本是Arco D【Axure】TDesign 组件库包含了交互和优化。

此版本是老旧版本Axure,付费版基于figma设计版优化而来

ArcoDesign 组件库-免费版

TDesign 元件库介绍

一、TDesign 概述

TDesign 是腾讯推出的企业级设计体系,基于“专业、高效、一致”的设计理念,其元件库覆盖中后台系统、数据可视化、移动端应用等场景,助力设计师和开发者快速构建高质量的产品界面。

二、核心组件分类及特性

TDesign 元件库按功能可分为以下类别,每个类别包含多个核心组件:

1. 基础组件
组件名称特性描述典型应用场景
按钮(Button)支持主按钮、次按钮、虚线按钮等多种样式,内置加载状态、图标组合,支持自定义颜色表单提交、操作触发、页面跳转
输入框(Input)包含文本输入、密码输入、文本域,支持前缀/后缀图标、字数统计、清空按钮表单数据录入、搜索功能
选择器(Select)下拉选择、级联选择、标签选择,支持远程搜索、虚拟滚动和自定义选项渲染地区选择、分类筛选、多条件组合
开关(Switch)二态切换控件,支持自定义尺寸、颜色和文案,内置状态过渡动画功能启用/禁用、状态切换
2. 数据展示组件
  • 表格(Table)
    支持固定列、虚拟滚动、树形结构、单元格合并,内置排序、筛选、分页功能,可配置复杂表头。
    案例:在“订单管理”页面中,展示订单列表并支持多维度筛选(如订单状态、时间范围)。
  • 卡片(Card)
    灵活的内容容器,支持悬停效果、阴影级别、内容分层,可嵌套其他组件。
    案例:数据看板中用卡片分组展示“今日销售额”“用户增长”“转化率”等核心指标。
  • 图表(Chart)
    基于 echarts 封装的折线图、柱状图、饼图、雷达图等,支持数据绑定和交互配置。
    案例:在“数据分析”页面中,用折线图展示用户活跃趋势,饼图呈现用户地域分布。
3. 反馈组件
  • 模态框(Modal)
    支持居中/顶部显示、全屏模式、拖拽调整位置,内置确认/取消逻辑和过渡动画。
    案例:删除重要数据前弹出确认模态框,防止误操作。
  • 通知(Notification)
    顶部/底部弹出的消息提示,支持成功、警告、错误、信息四种状态,可自定义持续时间。
    案例:表单提交成功后,顶部弹出带图标的通知消息,3秒后自动消失。
  • 加载(Loading)
    全屏/局部加载动画,支持不同尺寸和颜色,可自定义加载文案。
    案例:页面初始化或数据请求时显示加载状态,提升用户等待体验。
4. 导航组件
  • 菜单(Menu)
    支持顶部导航、侧边导航、多级子菜单,内置展开/折叠动画,可配置激活状态样式。
    案例:后台系统侧边栏用折叠菜单展示功能模块(如“用户管理”“内容管理”“系统设置”)。
  • 标签页(Tabs)
    多内容区域切换组件,支持卡片式、线条式、胶囊式样式,可配置滚动和动画效果。
    案例:在“个人中心”页面中,用标签页切换“基本信息”“安全设置”“我的订单”等内容。
  • 步骤条(Steps)
    线性步骤引导组件,支持图标、标题、描述文本,可配置当前步骤和状态(进行中/已完成/错误)。
    案例:注册流程、订单支付流程、表单填写向导等场景。
5. 表单组件
  • 表单(Form)
    完整的表单解决方案,支持字段校验、表单联动、数据收集,内置多种表单项组件。
    案例:用户注册表单、商品信息编辑表单、调查问卷等。
  • 日期选择器(DatePicker)
    支持年/月/日/时/分/秒选择,范围选择,快捷选项(如“今天”“本周”),支持国际化。
    案例:活动时间设置、数据筛选时间范围选择。

三、TDesign 元件库在 Axure 中的应用优势

  1. 高保真原型设计
    元件样式与实际开发保持高度一致,减少设计与实现的偏差,便于团队沟通和需求确认。
  2. 交互逻辑标准化
    预设常用交互模式(如表单验证、模态框显示/隐藏、菜单切换),降低原型制作成本。
  3. 响应式设计支持
    部分组件(如栅格、菜单)内置响应式规则,可在 Axure 中模拟不同设备下的布局变化。
  4. 设计资源丰富
    配套设计规范文档、图标库、模板(如管理后台、数据大屏),加速原型搭建。

下载地址:

收藏 打赏

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

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

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