腾讯对外开源的企业级设计体系-TDesign

11月/05日/开源推荐/浏览 257

TDesign 是什么

TDesign 是腾讯各业务团队在服务业务过程中沉淀的一套企业级设计体系。


TDesign 具有统一的 价值观,一致的设计语言和视觉风格,帮助用户形成连续、统一的体验认知。在此基础上,TDesign 提供了开箱即用的 UI 组件库、设计指南 和相关 设计资产,以优雅高效的方式将设计和研发从重复劳动中解放出来,同时方便大家在 TDesign 的基础上扩展,更好的的贴近业务需求。


为什么会有 TDesign

过去,腾讯内部众多团队搭建了不同的设计体系和组件库产品,以满足各自的业务诉求,提升研发效能。这些体系各自独立维护,彼此割裂。并且,随着内部业务的规模不断扩大,这种割裂的局面愈发严重。


为了应对这一情况,腾讯内部建立了 开源协同委员会,参考开源社区的组织方式,将同类项目的不同技术团队聚合在一起,开源共建。TDesign 在这样的背景下应运而生,在腾讯内部以开源协同的方式,共建一个完善、易用的设计体系和组件库产品。


TDesign 的发展

TDesign 在创建之初就严格按照开源协作的原则运作,包括源代码在内的协作方案讨论、组件设计及 API 制定的过程也完全在公司内源上开放。也得到了公司内开发和设计同学的广泛关注,无论以什么身份参与,TDesign 都同样遵循平等、公开且严格的原则来对待,很多同学从个人项目中试用组件库开始,到提交第一个 Bug Issue,再到提交第一个 Feature MR,最后逐步参与到 MR Review 和方案制定工作中,成为核心贡献者。在过去的一年中,TDesign 关闭了 1k+ Issue,进行了 5k+ 次 CR,保持 每周迭代 发布新版本。


组件库目前支持多个业界主流的开发技术栈,桌面端 Vue2 已发布 Beta 版本,桌面端 Vue3、React 和移动端 Vue3 、微信小程序发布 Alpha 内测版本:

产品特性


完整


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


为了实现开发与设计之间的高效协同,TDesign 中包含了丰富可复用的设计组件资源,如色彩体系、文字系统、动效设计、图标元素、布局结构等,覆盖支持 Axure、Sketch、Figma、Adobe XD 等各大产品设计软件,将设计和开发者从重复劳动中释放出来。


除了常规设计资源,TDesign 还提供了辅助设计工具如 Sketch 设计插件,也支持在 即时设计、Pixso、墨刀 等市面常用设计工具中使用 TDesign 设计物料。


一致


TDesign 将腾讯内部多年设计经验提炼总结为专业的设计指南,其所提供的通用设计解决方案,能够帮助产品经理、设计师、开发者等角色高效完成企业级产品的设计和研发,并保持设计语言和风格的一致,满足用户体验的要求。


基于 TDesign 的设计体系规范,TDesign 同时上线了组件库的桌面端和移动端,提供了多个技术栈实现版本。通过一系列协作流程和辅助工具,保证各技术栈 组件 API 和实现产物一致。借助这些能力,使得项目即便使用了多种不同的技术架构或技术栈,开发者也可通过 TDesign 通用设计组件库进行开发,显著降低学习成本,在构建统一/多端覆盖/跨技术栈的前端应用时更具优势。


易用


TDesign 设计体系在形成过程中,提炼了不同业务、场景的设计经验,提供了通用的 设计指南 以降低使用门槛。对于不同企业产品的品牌定制需求,TDesign 支持使用者对设计风格进行扩展,目前已经将设计样式梳理归纳为 Design Token,形成一套企业内部的语义化设计规范,方便后续进行统一的管理和使用扩展。




在主题配置方面,TDesign 提供了明亮和 暗色 两种模式,支持一键切换,提升用户的使用体验。后续,TDesign 还会推出针对于不同垂直领域的行业组件,覆盖更多的业务范围。产品团队可以借助内置的行业主题,快速配置对应需求,启动业务开发。


TDesign 同步上线了一款开箱即用的中后台框架 TDesign Starter Kit,开发者可以通过它快速体验组件能功能,也可以将它修改为项目基础脚手架工程,快速实现从 0 到 1 的产品开发上线。

发表评论

暂无评论,抢个沙发...

客服 工单