TDesign:腾讯企业级设计体系的UI组件库详解

随着时代的快速发展,产品规模不断扩大,传统的研发模式已不能满足市场需求。如何在设计和研发工作中实现高效的协调已成为一个大问题。腾讯企业级设计系统TDesign大量开源,为产品体验设计提供了新的解决方案!

TDesign是一套完整的企业级设计体系,是腾讯多年来设计项目成果的提炼总结,汇集了众多优秀的组件库和设计研发经验。它基于Vue/React/小程序等技术栈的组件库解决方案。Tdesign在构建统一设计/跨端多技术栈的前端应用时更具优势。

除了提供开箱即用的前端开发UI组件库外,还配备了设计指南和设计资源,帮助R&D团队专注于业务,从重复劳动中解放设计和R&D,大大提高工作效率。

如何体验 TDesign

你甚至不必去腾讯的官方网站,直接打开高效的协作设计平台即时设计,你可以快速体验。即时设计内置了腾讯tdesign设计系统,可以直接在编辑页面上使用,无需下载或保存,非常方便,内置的tdesign设计资源可以直接拖动使用。

TDesign移动端组件https://js.design/community?category=detail&type=resource&id=625d5a8f26cd2b5d861b9ab7&source=csdn&plan=btt510

TDesign 的起源

过去,腾讯有许多设计系统和组件库类型的项目,围绕产品进行"分散"的快速迭代。各自的组件库产品由不同的团队和开发人员维护,内部重复工作,造成人力资源浪费,不同的设计系统带来了产品设计的不一致性。

2019 年,腾讯成立了开源协作委员会,通过内部开源协作,组织不同团队共同建设类似技术产品。通过开源协作,解决了过去内部团队维护设计体系和各设计体系质量不均衡的问题。

TDesign 的发展

TDesign在创建之初就坚持开源合作的原则,包括合作方案讨论、组件设计和API 制定过程在公司内部完全开放,引起了内部开发和设计师的广泛关注。

无论什么身份,TDesign都遵循平等、开放、严格的原则。在很短的时间内,产生了大量的设计草案和组件,完成了项目的初始化建设。并不断改进,最终构建了今天的TDesign。

为什么开源

对TDesign来说,开源是一个新的起点。通过开源,TDesign期望不断打磨出更完善、更易用的组件库,获得丰富的生态。

在社区的帮助下,我们希望继续与更多的产品设计和开发者沟通,成为更有价值的产品。从而更好地为设计师和开发者服务,帮助企业提高设计研发效率,为产品体验设计带来新的理念。

TDesign 产品特性

完整

TDesign 为开发者提供了多种主流开发技术栈的支持。支持了Vue 2、Vue 3、React和移动端Vue 3、微信小程序的开发,其他技术栈如 Augular、Flutter 正在开发中。

提供色彩系统、文字系统、动态设计、图标元素、布局结构等丰富多样的设计资源,涵盖支持 Figma、Adobe XD、Sketch 等待主要设计软件,将设计师和开发人员从重复劳动中释放出来。

TDesign还支持在新一代在线合作设计工具的即时设计中使用。即时设计作为一种高效的协作软件,可以帮助多人实时协作,使设计合作不受时间和空间的限制。团队可以创建共享组件和颜色/文本样式库,建立团队资源库,帮助迭代设计版本,建立产品设计规范,设计资源管理库中的组件和样式可以重用、修改和更新。

一致

TDesign具有统一的设计规范和视觉风格,帮助产品在跨端设计和开发过程中保持一致的产品使用体验。通过一系列的协作流程和辅助工具,确保各技术栈产品的API定义和实现一致,在构建统一/多端覆盖/跨技术栈的前端应用方面具有更大的优势。

易用

在形成和开发过程中,TDsign设计系统提炼了不同业务和场景的设计经验,提供了通用完善的设计指南,以降低使用门槛,并通过Design支持用户 Token扩展了设计风格。

相关推荐
InJre2 小时前
QT widgets 窗口缩放,自适应窗口大小进行布局
开发语言·qt·ui
Lossya2 小时前
【自动化测试】UI自动化的分类、如何选择合适的自动化测试工具以及其中appium的设计理念、引擎和引擎如何工作
自动化测试·测试工具·ui·appium·自动化
包淼淼4 小时前
微信小程序自定义navigationBar顶部导航栏(背景图片)适配所有机型,使用tdesign-miniprogram t-navbar设置背景图片
微信小程序·小程序·tdesign
充值内卷6 小时前
WPF入门教学四 WPF控件概述
windows·ui·wpf
Magnetic_h1 天前
【iOS】单例模式
笔记·学习·ui·ios·单例模式·objective-c
Calvin8808284 天前
Android Tools | 如何使用Draw.io助力Android开发:从UI设计到流程优化
android·ui·draw.io
Magnetic_h4 天前
【iOS】ViewController的生命周期
笔记·学习·ui·ios·objective-c
Magnetic_h4 天前
【iOS】present和push
笔记·学习·ui·ios·objective-c
加勒比海涛4 天前
Element UI:初步探索 Vue.js 的高效 UI 框架
前端·vue.js·ui
fruge4 天前
【UI】element ui table(表格)expand实现点击一行展开功能
前端·vue.js·ui