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 和小程序三个框架中实践并成功运行,解决了手工维护文档成本高的难题在线课堂。