隨著互聯(lián)網(wǎng)的快速發(fā)展，產(chǎn)品規(guī)模和功能日益增加，開發(fā)場景變得愈發(fā)復(fù)雜，傳統(tǒng)的設(shè)計(jì)研發(fā)模式已經(jīng)不足以支撐業(yè)務(wù)的高速擴(kuò)張。無論是互聯(lián)網(wǎng)公司還是傳統(tǒng)軟件企業(yè)，大家都在尋找提升研發(fā)效能的路徑，以面對日益復(fù)雜的軟件開發(fā)需求，并期待能更高效、更高質(zhì)量、更可靠、更持續(xù)地交付更優(yōu)的業(yè)務(wù)價(jià)值。

在這樣的背景下，騰訊推出了騰訊設(shè)計(jì)云，以期幫助企業(yè)提升設(shè)計(jì)研發(fā)效率，實(shí)現(xiàn)高效協(xié)同。不僅如此，騰訊還在近期宣布將企業(yè)級(jí)設(shè)計(jì)體系 TDesign 正式開源，進(jìn)一步將騰訊自有能力釋放給更多企業(yè)。

騰訊設(shè)計(jì)云：生于騰訊、聚于騰訊

在騰訊海量的 to B 和 to C 的業(yè)務(wù)實(shí)戰(zhàn)中，設(shè)計(jì)團(tuán)隊(duì)為了服務(wù)各自的業(yè)務(wù)，在生產(chǎn)過程中開發(fā)了大量工具或平臺(tái)，范圍涵蓋素材資源、設(shè)計(jì)協(xié)作、圖片視頻素材制作與剪輯、以及數(shù)據(jù)可視化和低代碼搭建等方面。

自 930 變革以來，自研上云、開源協(xié)同就成為了騰訊重要的技術(shù)方向，如何讓云服務(wù)從資源管理變成一個(gè)完整的研發(fā)體系，從而實(shí)現(xiàn)降本增效是騰訊一直在思考的問題。在這樣的背景下，騰訊公司級(jí)聯(lián)合團(tuán)隊(duì)將這些能力和內(nèi)容提煉成設(shè)計(jì)資產(chǎn)、管理工具和多方面的產(chǎn)品能力，匯聚成了一個(gè)公司級(jí)的設(shè)計(jì)工具平臺(tái)——騰訊設(shè)計(jì)云，聚焦解決產(chǎn)設(shè)研工作流程中的常見痛點(diǎn)，提供效能工具、正版素材資源、解決降本、增效的問題，希望達(dá)成高效設(shè)計(jì)、輕松協(xié)同的最終目標(biāo)。

騰訊設(shè)計(jì)云的產(chǎn)品矩陣包括：運(yùn)用于調(diào)查分析的騰訊問卷、智能化設(shè)計(jì)生產(chǎn)平臺(tái)智繪設(shè)計(jì)、長短視頻內(nèi)容創(chuàng)作與協(xié)作平臺(tái)云創(chuàng)多媒體引擎、一站式設(shè)計(jì)協(xié)作平臺(tái) CoDesign、團(tuán)隊(duì)協(xié)同平臺(tái) ProWork、低代碼開發(fā)平臺(tái)微搭低代碼、軟件研發(fā)管理協(xié)作平臺(tái) CODING 、企業(yè)級(jí)產(chǎn)品設(shè)計(jì)體系 TDesign 以及正版圖庫直通車和正版曲庫直通車兩大版權(quán)素材庫，為企業(yè)客戶提供了版權(quán)素材、用戶研究、智能設(shè)計(jì)、設(shè)計(jì)協(xié)同、快速研發(fā)等能力，并且這些設(shè)計(jì)能力全部源自騰訊公司內(nèi)部的 Oteam 團(tuán)隊(duì)。

據(jù)了解，騰訊設(shè)計(jì)云的產(chǎn)品服務(wù)著 QQ 音樂、騰訊云、騰訊會(huì)議、企業(yè)微信等大型產(chǎn)設(shè)研團(tuán)隊(duì)、也服務(wù)過數(shù)字廣東、富途證券、蘑菇街等大型企業(yè)。除此以外，騰訊設(shè)計(jì)云不僅匯聚了多款 SaaS 化的成熟產(chǎn)品，還包括一些未上云但已經(jīng)在騰訊內(nèi)部服務(wù)于項(xiàng)目提效的工具。盡管各個(gè)產(chǎn)品的商業(yè)化階段不盡相同，但它們都在各自所誕生的部門中發(fā)揮著作用。

所以說，“生于騰訊，聚于騰訊”便是對騰訊設(shè)計(jì)云誕生過程最好的概括。

據(jù)騰訊設(shè)計(jì)云團(tuán)隊(duì)透露，隨著項(xiàng)目進(jìn)度的推進(jìn)和產(chǎn)品成熟度提升，未來還會(huì)將更多已沉淀的能力開放出來，比如在設(shè)計(jì)師比較關(guān)注的設(shè)計(jì)稿校對方面，持續(xù)為企業(yè)提供數(shù)據(jù)可視化、智能生產(chǎn)工具等提升生產(chǎn)效率的工具。

TDesign 應(yīng)運(yùn)而生

事實(shí)上，在產(chǎn)品開發(fā)的過程中，團(tuán)隊(duì)參與人員的痛點(diǎn)是各不相同的：比如設(shè)計(jì)師希望了解組件庫的使用規(guī)范、適用場景、拓展方案等等；產(chǎn)品經(jīng)理希望知道組件能否滿足業(yè)務(wù)場景等等；開發(fā)更關(guān)心組件的接口、方法、屬性等等。想逐一解決上述痛點(diǎn)成為了一個(gè)現(xiàn)實(shí)又復(fù)雜的問題，所以不少企業(yè)都會(huì)選擇使用組件庫來提升設(shè)計(jì)效率、產(chǎn)研效率。

騰訊自然也不例外，并且大部分部門都有各自的組件庫產(chǎn)品。

但對于騰訊這樣的企業(yè)而言，這種做法也暴露出了許多問題：首先是重復(fù)人力造“輪子”，每個(gè)業(yè)務(wù)團(tuán)隊(duì)都需要?jiǎng)冸x一部分人力去維護(hù)組件庫；其次，這些組件庫因?yàn)槿肆ν度氤潭炔煌洚a(chǎn)品質(zhì)量和維護(hù)的情況層次不齊，通用交互方式的體驗(yàn)也不一致；此外，由于這些組件庫都有各自的優(yōu)勢、劣勢，導(dǎo)致騰訊內(nèi)部在技術(shù)選型時(shí)困難屢現(xiàn)。

據(jù)了解，直到 2019 年，騰訊內(nèi)部重復(fù)造輪子的情況愈發(fā)嚴(yán)重，公司有強(qiáng)烈的呼聲想把這些輪子合并在一起，為了應(yīng)對這一情況，騰訊內(nèi)部建立了開源協(xié)同委員會(huì)，騰訊的設(shè)計(jì)師們思考到：“有沒有可能通過開源協(xié)同，解決過去騰訊內(nèi)部團(tuán)隊(duì)分別維護(hù)設(shè)計(jì)體系，各設(shè)計(jì)體系之間質(zhì)量參差不齊的問題”。

于是在 2020 年 2 月份，通過多次遠(yuǎn)程會(huì)議，確定了 TDesign 的產(chǎn)品目標(biāo)和技術(shù)路線，并在全員的參與下共同投票選出 TDesign 的名字。“它完整代表著騰訊體系下的設(shè)計(jì)語言，同時(shí)也留有概念擴(kuò)展的空間，后面可以增加其他模塊組件。” TDesign 團(tuán)隊(duì)介紹道。

設(shè)計(jì)伊始，TDesign 便是為了服務(wù)內(nèi)部業(yè)務(wù)

TDesign 設(shè)計(jì)伊始，就是要方便騰訊內(nèi)部的設(shè)計(jì)師與研發(fā)人員進(jìn)行使用，所以 TDesign 需要支持不同的框架、不同的設(shè)計(jì)資源，還要有一套完整的設(shè)計(jì)價(jià)值觀和設(shè)計(jì)風(fēng)格指南，也使得 TDesign 有了一些區(qū)別于其他組件庫的特性，總結(jié)來看，有以下三個(gè)方面：

完整

業(yè)界的組件庫基本以支持一至兩個(gè)技術(shù)棧為主，而 TDesign 則支持了 Vue 2、Vue 3、React 和移動(dòng)端 Vue 3、微信小程序的開發(fā)，與此同時(shí)，Augular、Flutter 等熱門技術(shù)棧也在開發(fā)當(dāng)中。

目前，TDesign 的大部分組件已經(jīng)完成了內(nèi)測版本的發(fā)布，后續(xù)將逐步發(fā)布公測版本和正式版本。

為了實(shí)現(xiàn)開發(fā)與設(shè)計(jì)之間的高效協(xié)同，TDesign 中還包含了色彩體系、文字系統(tǒng)、動(dòng)效設(shè)計(jì)、圖標(biāo)元素、布局結(jié)構(gòu)等一系列設(shè)計(jì)組件資源，并覆蓋了 Axure、Sketch、Figma、Adobe Xd 等各大產(chǎn)品設(shè)計(jì)軟件。除了常規(guī)設(shè)計(jì)資源，TDesign 還提供了輔助設(shè)計(jì)工具如 Sketch 設(shè)計(jì)插件，也支持在騰訊 Codesign、即時(shí)設(shè)計(jì)、Pixso、墨刀等市面常用設(shè)計(jì)工具中使用 TDesign 設(shè)計(jì)物料。

一致

TDesign 將騰訊內(nèi)部多年設(shè)計(jì)經(jīng)驗(yàn)提煉總結(jié)為專業(yè)的設(shè)計(jì)指南，其所提供的通用設(shè)計(jì)解決方案，能夠幫助產(chǎn)品經(jīng)理、設(shè)計(jì)師、開發(fā)者等角色高效完成企業(yè)級(jí)產(chǎn)品的設(shè)計(jì)和研發(fā)，并保持設(shè)計(jì)語言和風(fēng)格的一致，滿足用戶體驗(yàn)的要求。

基于 TDesign 的設(shè)計(jì)體系規(guī)范，TDesign 同時(shí)上線了組件庫的桌面端和移動(dòng)端，提供了多個(gè)技術(shù)棧實(shí)現(xiàn)版本。通過一系列協(xié)作流程和輔助工具，保證各技術(shù)棧組件 API 和實(shí)現(xiàn)產(chǎn)物一致，大大降低了開發(fā)人員的學(xué)習(xí)成本。

易用

TDesign 設(shè)計(jì)體系提煉了不同業(yè)務(wù)、場景的設(shè)計(jì)經(jīng)驗(yàn)，提供了通用的設(shè)計(jì)指南，以降低使用門檻。對于不同企業(yè)產(chǎn)品的品牌定制需求，TDesign 支持使用者對設(shè)計(jì)風(fēng)格進(jìn)行擴(kuò)展，目前已經(jīng)將設(shè)計(jì)樣式梳理歸納為 Design Token，形成一套企業(yè)內(nèi)部的語義化設(shè)計(jì)規(guī)范，方便后續(xù)進(jìn)行統(tǒng)一的管理和使用擴(kuò)展。

文檔與 API 規(guī)范統(tǒng)一是主要的技術(shù)挑戰(zhàn)

TDesign 團(tuán)隊(duì)坦言，“以前我們在做單個(gè)組件庫的時(shí)候，覺得好像沒什么難度，但是自從做了 TDesign 才發(fā)現(xiàn)跟我們原本想的并不一樣。因?yàn)?TDesign 本身支持多種框架，后續(xù)還計(jì)劃支持多語種，所以一般組件庫在建設(shè)過程中遇到的問題，在 TDesign 體系上都會(huì)被放大到很多倍。”

具體來說，在協(xié)同過程中會(huì)遇到文檔規(guī)范統(tǒng)一以及 API 規(guī)范統(tǒng)一兩大難題。

首先，由于 TDesign 需要支持三種或三種以上的技術(shù)框架，所以不可能每一個(gè)框架都重寫一遍文檔，如果能將每個(gè)框架中公共的部分進(jìn)行復(fù)用，僅重寫示例代碼區(qū)域就可以解決很大一部分問題。

為此，TDesign 團(tuán)隊(duì)輸出了技術(shù)方案，以應(yīng)對重復(fù)寫文檔的問題。TDesign 輸出的架構(gòu)圖主要分為編譯層、渲染層以及輸出層：其中編譯層主要用來解析 Markdown 格式，解決一系列重復(fù)的工作；渲染層來處理公共區(qū)域，使得不再需要輸出組件內(nèi)的文檔；輸出層把公共部分剝離出來以后，再把各個(gè)框架獨(dú)立的部分組合起來，最后整體輸出 TDesign 的官網(wǎng)站點(diǎn)。

其次，由于每個(gè)框架既有共性又有特性，從長遠(yuǎn)考慮，不僅要支持 API 文檔自動(dòng)化，還要支持 API TS 代碼、API Props 代碼自動(dòng)化。為此，TDesign 團(tuán)隊(duì)輸出了一套自動(dòng)化系統(tǒng)的流程，把整個(gè) API 相關(guān)的信息錄入到數(shù)據(jù)庫中，而后通過接口語言解析器解析成不同的框架、文檔或者代碼。

目前，TDesign 已經(jīng)在 React、Vue 和小程序三個(gè)框架中實(shí)踐并成功運(yùn)行，解決了手工維護(hù)文檔成本高的難題。

歷經(jīng) 2 年內(nèi)部開源，TDesign 如何快速繁榮？

“在項(xiàng)目落地之初，團(tuán)隊(duì)也走了不少彎路，我們把大量的時(shí)間和精力消耗在了傳遞信息上，也因?yàn)閷缂夹g(shù)棧維護(hù)組件庫的復(fù)雜度認(rèn)識(shí)不夠，各個(gè)框架中對同一組件的文檔和 API 實(shí)現(xiàn)都有差異，所以用戶使用組件庫體驗(yàn)不一致的問題，一直困擾著 TDesign 團(tuán)隊(duì)，也使得 TDesign 的開發(fā)進(jìn)展陷入了僵局。”TDesign 團(tuán)隊(duì)在接受 InfoQ 采訪時(shí)表示。

為了解決上述提及的問題，TDesign 在進(jìn)行第二期迭代時(shí)，就開始學(xué)習(xí)開源社區(qū)的協(xié)作方式，摒棄了企業(yè)熟悉的即時(shí)拉群溝通，而選擇了更加開源風(fēng)范的異步 issue 討論，借助更加異步的討論方式，問題可以被深刻地討論和思考，從而更容易得出一個(gè)符合預(yù)期的結(jié)論，在開發(fā)時(shí)能夠以更高的效率完成組件的封裝和代碼的編寫。此外，在開源協(xié)作的過程中還引入了 CI / CD 流程來降低人工參與的比率，來提升信息推送的效率。

TDesign 團(tuán)隊(duì)表示：“無論是個(gè)人使用者還是團(tuán)隊(duì)使用者，我們都是堅(jiān)持公平、公正、透明的原則，比如日常討論的問題、方案以及計(jì)劃，都會(huì)在 GitHub 上公開展示。”

據(jù)了解，不少 TDesign 的核心貢獻(xiàn)者都是先從個(gè)人項(xiàng)目試用組件庫，然后開始提交第一個(gè) Bug Issue，再到提交第一個(gè) Feature MR，最后逐步參與 Code Review 和方案制定的工作，經(jīng) TDesign 團(tuán)隊(duì)初步計(jì)算，該項(xiàng)目的核心貢獻(xiàn)人數(shù)大約在 100 人左右。

正是通過這種“開源”風(fēng)格的工具和協(xié)作方式，TDesign 的研發(fā)效率才能得以提升，并且超預(yù)期地完成了第二期的迭代任務(wù)。在過去的一年，隨著騰訊內(nèi)部有越來越多的人參與其中，TDesign 關(guān)閉了 1k+ Issue，進(jìn)行了 5k+ 次 CR，保持著每周迭代一個(gè)新版本的節(jié)奏。

寫在最后

在 TDesign 團(tuán)隊(duì)看來，決定開源的初衷非常簡單，一方面，TDesign 歷經(jīng)了兩年的內(nèi)部開源，已經(jīng)實(shí)現(xiàn)了從 0 到 1 的建設(shè)，希望用 TDesign 已經(jīng)沉淀出的能力為社區(qū)貢獻(xiàn)價(jià)值；另一方面，也希望能夠借助社區(qū)的力量，將交流協(xié)作的范圍擴(kuò)展到公司外，幫助 TDesign 實(shí)現(xiàn)從 1 到 N 的跨越。

“我們深知從開源到成熟是一個(gè)漫長的旅途，非常期待同道人與 TDesign 并肩而行，共同進(jìn)步。”

隨著本次企業(yè)級(jí)設(shè)計(jì)系統(tǒng) TDesign 的開源發(fā)布，騰訊設(shè)計(jì)云產(chǎn)設(shè)研一體化協(xié)同的能力拼圖已基本打造成型，而這也是設(shè)計(jì)開源協(xié)同向前邁出的一小步。在未來，設(shè)計(jì)云還會(huì)將騰訊內(nèi)部的設(shè)計(jì)解決方案逐漸釋放，并通過智能化生產(chǎn)與開發(fā)可視化能力，進(jìn)一步降低企業(yè)開發(fā)門檻，提升協(xié)同效率。 

TDesign 現(xiàn)已開放，Github 地址：https://github.com/Tencent/tdesign

TDesign 官網(wǎng)：https://tdesign.tencent.com/?from=nini_1