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

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

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

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

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

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

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

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

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

TDesign 應(yīng)運而生

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

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

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

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

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

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

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

完整

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

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

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

一致

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

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

易用

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

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

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

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

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

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

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

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

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

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

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

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

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

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

寫在最后

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

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

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

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

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