当前位置：首页 > news >正文

Axure版TDesign 组件库-免费版

news 2025/6/27 8:02:11

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

添加图片注释，不超过 140 字（可选）

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 中的应用优势