首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

TDesign正式开源发布,腾讯设计云布局重要能力拼图!

随着互联网的快速发展,产品规模和功能日益增加,开发场景变得愈发复杂,传统的设计研发模式已经不足以支撑业务的高速扩张。无论是互联网公司还是传统软件企业,大家都在寻找提升研发效能的路径,以面对日益复杂的软件开发需求,并期待能更高效、更高质量、更可靠、更持续地交付更优的业务价值。

在这样的背景下,腾讯推出了腾讯设计云,以期帮助企业提升设计研发效率,实现高效协同。不仅如此,腾讯还在近期宣布将企业级设计体系 TDesign 正式开源,进一步将腾讯自有能力释放给更多企业。

腾讯设计云:生于腾讯、聚于腾讯

在腾讯海量的 to B 和 to C 的业务实战中,设计团队为了服务各自的业务,在生产过程中开发了大量工具或平台,范围涵盖素材资源、设计协作、图片视频素材制作与剪辑、以及数据可视化和低代码搭建等方面。

自 930 变革以来,自研上云、开源协同就成为了腾讯重要的技术方向,如何让云服务从资源管理变成一个完整的研发体系,从而实现降本增效是腾讯一直在思考的问题。在这样的背景下,腾讯公司级联合团队将这些能力和内容提炼成设计资产、管理工具和多方面的产品能力,汇聚成了一个公司级的设计工具平台——腾讯设计云,聚焦解决产设研工作流程中的常见痛点,提供效能工具、正版素材资源、解决降本、增效的问题,希望达成高效设计、轻松协同的最终目标。

腾讯设计云的产品矩阵包括:运用于调查分析的腾讯问卷、智能化设计生产平台智绘设计、长短视频内容创作与协作平台云创多媒体引擎、一站式设计协作平台 CoDesign、团队协同平台 ProWork、低代码开发平台微搭低代码、软件研发管理协作平台 CODING 、企业级产品设计体系 TDesign 以及正版图库直通车和正版曲库直通车两大版权素材库,为企业客户提供了版权素材、用户研究、智能设计、设计协同、快速研发等能力,并且这些设计能力全部源自腾讯公司内部的 Oteam 团队。

据了解,腾讯设计云的产品服务着 QQ 音乐、腾讯云、腾讯会议、企业微信等大型产设研团队、也服务过数字广东、富途证券、蘑菇街等大型企业。除此以外,腾讯设计云不仅汇聚了多款 SaaS 化的成熟产品,还包括一些未上云但已经在腾讯内部服务于项目提效的工具。尽管各个产品的商业化阶段不尽相同,但它们都在各自所诞生的部门中发挥着作用。

所以说,“生于腾讯,聚于腾讯”便是对腾讯设计云诞生过程最好的概括。

据腾讯设计云团队透露,随着项目进度的推进和产品成熟度提升,未来还会将更多已沉淀的能力开放出来,比如在设计师比较关注的设计稿校对方面,持续为企业提供数据可视化、智能生产工具等提升生产效率的工具。

TDesign 应运而生

事实上,在产品开发的过程中,团队参与人员的痛点是各不相同的:比如设计师希望了解组件库的使用规范、适用场景、拓展方案等等;产品经理希望知道组件能否满足业务场景等等;开发更关心组件的接口、方法、属性等等。想逐一解决上述痛点成为了一个现实又复杂的问题,所以不少企业都会选择使用组件库来提升设计效率、产研效率。

腾讯自然也不例外,并且大部分部门都有各自的组件库产品。

但对于腾讯这样的企业而言,这种做法也暴露出了许多问题:首先是重复人力造“轮子”,每个业务团队都需要剥离一部分人力去维护组件库;其次,这些组件库因为人力投入程度不同,其产品质量和维护的情况层次不齐,通用交互方式的体验也不一致;此外,由于这些组件库都有各自的优势、劣势,导致腾讯内部在技术选型时困难屡现。

据了解,直到 2019 年,腾讯内部重复造轮子的情况愈发严重,公司有强烈的呼声想把这些轮子合并在一起,为了应对这一情况,腾讯内部建立了开源协同委员会,腾讯的设计师们思考到:“有没有可能通过开源协同,解决过去腾讯内部团队分别维护设计体系,各设计体系之间质量参差不齐的问题”。

于是在 2020 年 2 月份,通过多次远程会议,确定了 TDesign 的产品目标和技术路线,并在全员的参与下共同投票选出 TDesign 的名字。“它完整代表着腾讯体系下的设计语言,同时也留有概念扩展的空间,后面可以增加其他模块组件。” TDesign 团队介绍道。

设计伊始,TDesign 便是为了服务内部业务

TDesign 设计伊始,就是要方便腾讯内部的设计师与研发人员进行使用,所以 TDesign 需要支持不同的框架、不同的设计资源,还要有一套完整的设计价值观和设计风格指南,也使得 TDesign 有了一些区别于其他组件库的特性,总结来看,有以下三个方面:

完整

业界的组件库基本以支持一至两个技术栈为主,而 TDesign 则支持了 Vue 2、Vue 3、React 和移动端 Vue 3、微信小程序的开发,与此同时,Augular、Flutter 等热门技术栈也在开发当中。

目前,TDesign 的大部分组件已经完成了内测版本的发布,后续将逐步发布公测版本和正式版本。

为了实现开发与设计之间的高效协同,TDesign 中还包含了色彩体系、文字系统、动效设计、图标元素、布局结构等一系列设计组件资源,并覆盖了 Axure、Sketch、Figma、Adobe Xd 等各大产品设计软件。除了常规设计资源,TDesign 还提供了辅助设计工具如 Sketch 设计插件,也支持在腾讯 Codesign、即时设计、Pixso、墨刀等市面常用设计工具中使用 TDesign 设计物料。

一致

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

基于 TDesign 的设计体系规范,TDesign 同时上线了组件库的桌面端和移动端,提供了多个技术栈实现版本。通过一系列协作流程和辅助工具,保证各技术栈组件 API 和实现产物一致,大大降低了开发人员的学习成本。

易用

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

文档与 API 规范统一是主要的技术挑战

TDesign 团队坦言,“以前我们在做单个组件库的时候,觉得好像没什么难度,但是自从做了 TDesign 才发现跟我们原本想的并不一样。因为 TDesign 本身支持多种框架,后续还计划支持多语种,所以一般组件库在建设过程中遇到的问题,在 TDesign 体系上都会被放大到很多倍。”

具体来说,在协同过程中会遇到文档规范统一以及 API 规范统一两大难题。

首先,由于 TDesign 需要支持三种或三种以上的技术框架,所以不可能每一个框架都重写一遍文档,如果能将每个框架中公共的部分进行复用,仅重写示例代码区域就可以解决很大一部分问题。

为此,TDesign 团队输出了技术方案,以应对重复写文档的问题。TDesign 输出的架构图主要分为编译层、渲染层以及输出层:其中编译层主要用来解析 Markdown 格式,解决一系列重复的工作;渲染层来处理公共区域,使得不再需要输出组件内的文档;输出层把公共部分剥离出来以后,再把各个框架独立的部分组合起来,最后整体输出 TDesign 的官网站点。

其次,由于每个框架既有共性又有特性,从长远考虑,不仅要支持 API 文档自动化,还要支持 API TS 代码、API Props 代码自动化。为此,TDesign 团队输出了一套自动化系统的流程,把整个 API 相关的信息录入到数据库中,而后通过接口语言解析器解析成不同的框架、文档或者代码。

目前,TDesign 已经在 React、Vue 和小程序三个框架中实践并成功运行,解决了手工维护文档成本高的难题。

历经 2 年内部开源,TDesign 如何快速繁荣?

“在项目落地之初,团队也走了不少弯路,我们把大量的时间和精力消耗在了传递信息上,也因为对跨技术栈维护组件库的复杂度认识不够,各个框架中对同一组件的文档和 API 实现都有差异,所以用户使用组件库体验不一致的问题,一直困扰着 TDesign 团队,也使得 TDesign 的开发进展陷入了僵局。”TDesign 团队在接受 InfoQ 采访时表示。

为了解决上述提及的问题,TDesign 在进行第二期迭代时,就开始学习开源社区的协作方式,摒弃了企业熟悉的即时拉群沟通,而选择了更加开源风范的异步 issue 讨论,借助更加异步的讨论方式,问题可以被深刻地讨论和思考,从而更容易得出一个符合预期的结论,在开发时能够以更高的效率完成组件的封装和代码的编写。此外,在开源协作的过程中还引入了 CI / CD 流程来降低人工参与的比率,来提升信息推送的效率。

TDesign 团队表示:“无论是个人使用者还是团队使用者,我们都是坚持公平、公正、透明的原则,比如日常讨论的问题、方案以及计划,都会在 GitHub 上公开展示。”

据了解,不少 TDesign 的核心贡献者都是先从个人项目试用组件库,然后开始提交第一个 Bug Issue,再到提交第一个 Feature MR,最后逐步参与 Code Review 和方案制定的工作,经 TDesign 团队初步计算,该项目的核心贡献人数大约在 100 人左右。

正是通过这种“开源”风格的工具和协作方式,TDesign 的研发效率才能得以提升,并且超预期地完成了第二期的迭代任务。在过去的一年,随着腾讯内部有越来越多的人参与其中,TDesign 关闭了 1k+ Issue,进行了 5k+ 次 CR,保持着每周迭代一个新版本的节奏。

写在最后

在 TDesign 团队看来,决定开源的初衷非常简单,一方面,TDesign 历经了两年的内部开源,已经实现了从 0 到 1 的建设,希望用 TDesign 已经沉淀出的能力为社区贡献价值;另一方面,也希望能够借助社区的力量,将交流协作的范围扩展到公司外,帮助 TDesign 实现从 1 到 N 的跨越。

“我们深知从开源到成熟是一个漫长的旅途,非常期待同道人与 TDesign 并肩而行,共同进步。”

随着本次企业级设计系统 TDesign 的开源发布,腾讯设计云产设研一体化协同的能力拼图已基本打造成型,而这也是设计开源协同向前迈出的一小步。在未来,设计云还会将腾讯内部的设计解决方案逐渐释放,并通过智能化生产与开发可视化能力,进一步降低企业开发门槛,提升协同效率。 

TDesign 现已开放,Github 地址:https://github.com/Tencent/tdesign

TDesign 官网:https://tdesign.tencent.com/?from=nini_1

  • 发表于:
  • 本文为 InfoQ 中文站特供稿件
  • 首发地址https://www.infoq.cn/article/DICHkgMoBkqEoUhLp3J4
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券