編輯導(dǎo)語：TDesign是騰訊打造的一款企業(yè)級設(shè)計體系，那么TDesign是一個什么樣的設(shè)計體系？它又有哪些設(shè)計特性值得注意？本篇文章里，作者對騰訊打造的這款企業(yè)級設(shè)計體系TDesign做了詳細解讀，一起來看一下吧。

TDesign 是來自騰訊內(nèi)部近 300 名設(shè)計師與開發(fā)者共同打造，經(jīng)由 500+ 項目使用、驗證和錘煉過的企業(yè)級設(shè)計體系， 秉承包容、多元、進化、連接的價值觀，TDesign 期望與用戶、行業(yè)及合作伙伴等一起打造具有競爭力的產(chǎn)品體驗。

從設(shè)計出發(fā)，TDesign 提供了完整的設(shè)計語言、視覺風(fēng)格指南和設(shè)計資源，以及基于 Vue2、Vue3、React （Vue3、React 目前仍在 Alpha 版本迭代中）等業(yè)界主流技術(shù)棧的組件，幫助開發(fā)者可以快速開發(fā)桌面端、移動端和小程序端等多個版本的應(yīng)用程序。

如果你對于 TDesign 感興趣，可以打開 TDesign 官網(wǎng)，體驗 TDesign 。如果你對 TDesgin 誕生的歷史感興趣，不妨來看看 TDesign 誕生背后的故事。

一、騰訊開源協(xié)同，TDesign 成長的土壤

自 2019 年開始，騰訊正式宣布在內(nèi)部推行開源協(xié)同，鼓勵所有源代碼對公司內(nèi)部全部開放，共同協(xié)作。

也正是這樣的開源協(xié)同的背景，使得騰訊的設(shè)計師和開發(fā)者們思考到：“有沒有可能通過開源協(xié)同，解決過去騰訊內(nèi)部團隊分別維護設(shè)計體系，各設(shè)計體系之間質(zhì)量參差不齊的問題”。出于這樣的目的，在騰訊內(nèi)部建立起了開源協(xié)同團隊，來共同思考和研究這個問題，在 2020 年 2 月份，通過多次遠程會議，確定了 TDesign 的產(chǎn)品目標(biāo)和技術(shù)路線，并在全員的參與下共同投票選出 TDesign 的名字。

但 TDesign 應(yīng)該是什么樣的設(shè)計體系？

設(shè)計師們找到了答案：TDesign 應(yīng)當(dāng)是一個擁有包容、多元、進化、連接的價值觀，期望為用戶、行業(yè)及合作伙伴等打造具競爭力的品牌與產(chǎn)品體驗的設(shè)計體系。

• 包容，是為了讓 TDesign 兼容并蓄，既能滿足當(dāng)下需求，也能應(yīng)用于更廣泛場景；
• 多元，是 TDesign 應(yīng)當(dāng)能夠賦能不同業(yè)務(wù)，探索無限可能；
• 進化，是 TDesign 應(yīng)當(dāng)成為一個動態(tài)的設(shè)計體系，在“以用戶價值為依歸”的基礎(chǔ)上，成長進化；
• 連接，是 TDesign 需要用最大的努力去連接賦能，聯(lián)動融通。

有了目標(biāo)和價值觀，TDesign 也真正開始進入落地的階段。

二、從協(xié)同到開源，TDesign 成長的歷程

在項目剛剛落地時，通過內(nèi)部發(fā)起的貢獻者招募，大批設(shè)計師和開發(fā)者帶著原有業(yè)務(wù)組件的經(jīng)驗、成果和滿腔的熱血，在很短的時間內(nèi)產(chǎn)出了大量的設(shè)計稿和組件，完成了項目的初始化建設(shè)。但因為對跨技術(shù)棧維護組件庫的復(fù)雜度認識不夠，各個框架中對同一組件的文檔和 API 實現(xiàn)都有差異，用戶使用組件庫體驗不一致的問題，一直困擾著 TDesign 團隊。

為了解決協(xié)作的問題，TDesign 在進行第二期迭代時，通過一系列工具和工作流程來規(guī)范組件的開發(fā)過程，選擇更加開源風(fēng)格的異步 issue 討論，開發(fā)了工具來自動生成各個框架的 API 定義和描述文檔，引入 CI / CD 流程來降低人工參與的比率，從而減少因為人而犯錯的可能。通過引入機器人的方式，來提升信息推送的效率，讓每一個人都可以時刻知道什么事情是需要做的，什么事情是不需要做的。

借助于這些更加“開源”風(fēng)格的工具和協(xié)作方式，TDesign 的效率得以提升，讓 TDesign 在進行二期開發(fā)時，比預(yù)期更快地完成任務(wù)。

借助于異步和聚焦的討論方式，問題可以被更加深刻地討論和思考，從而更容易得出一個符合預(yù)期的結(jié)論，在開發(fā)時能夠以更高的效率完成組件的封裝和代碼的編寫。也正是這樣更加開源的方式，最終構(gòu)建出了如今的 TDesign。

三、從設(shè)計到研發(fā)，TDesign 的特性有哪些？

作為一款企業(yè)級設(shè)計體系，TDesign 的特性可以總結(jié)為如下三點。

1. 完整：完整的技術(shù)、設(shè)計資源，將設(shè)計與開發(fā)者從重復(fù)勞動中釋放出來

TDesign 為開發(fā)者提供了多種主流開發(fā)技術(shù)棧的支持：TDesign 已經(jīng)支持了 Vue2、Vue3、React 和移動端小程序的開發(fā)，其他技術(shù)棧如 Augular、Flutter 也有相應(yīng)貢獻團隊正在開發(fā)。

為了實現(xiàn)開發(fā)與設(shè)計之間的高效協(xié)同，TDesign 中包含了豐富可復(fù)用的設(shè)計組件資源，如色彩體系、文字系統(tǒng)、動效設(shè)計、圖標(biāo)元素、布局結(jié)構(gòu)等，覆蓋支持 Axure、Sketch、Figma、Adobe Xd 等各大產(chǎn)品設(shè)計軟件，將設(shè)計和開發(fā)者從重復(fù)勞動中釋放出來。

除了常規(guī)設(shè)計資源，TDesign 還提供了輔助設(shè)計工具如 Sketch 設(shè)計插件，也支持在騰訊 CoDesign、即時設(shè)計、Pixso、墨刀等市面常用設(shè)計工具中使用 TDesign 設(shè)計物料。

2. 一致：一致的設(shè)計和開發(fā)體驗

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)物一致。借助這些能力，使得項目即便使用了多種不同的技術(shù)架構(gòu)或技術(shù)棧，開發(fā)者也可通過 TDesign 通用設(shè)計組件庫進行開發(fā)，顯著降低學(xué)習(xí)成本，在構(gòu)建統(tǒng)一/多端覆蓋/跨技術(shù)棧的前端應(yīng)用時更具優(yōu)勢。

3. 易用：清晰的設(shè)計指南和開箱即用的解決方案

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)一的管理和使用擴展。

在主題配置方面，TDesign 提供了明亮和暗色兩種模式，支持一鍵切換，提升用戶的使用體驗。后續(xù)，TDesign 還會推出針對于不同垂直領(lǐng)域的行業(yè)組件，覆蓋更多的業(yè)務(wù)范圍。產(chǎn)品團隊可以借助內(nèi)置的行業(yè)主題，快速配置對應(yīng)需求，啟動業(yè)務(wù)開發(fā)。

TDesign 同步上線了一款開箱即用的中后臺框架 TDesign Starter Kit，開發(fā)者可以通過它快速體驗組件功能，也可以將它修改為項目基礎(chǔ)腳手架工程，快速實現(xiàn)從 0 到 1 的產(chǎn)品開發(fā)上線。

四、從過去到未來，TDesign 還將做些什么？

通過開源，TDesign 期待持續(xù)打磨出更加完善易用的組件庫，包括在國際化、無障礙和適老化方面有更成熟的解決方案，對更多的產(chǎn)品和使用者有幫助。

借助社區(qū)，TDesign 期待與更多產(chǎn)品設(shè)計師和開發(fā)者有專業(yè)交流，甚至是收獲一個積極活躍的 TDesign 社區(qū)。

非常期待你對 TDesign 的持續(xù)關(guān)注和反饋意見。更歡迎同道中人的你參與 TDesign 的開源共建，與 TDesign 從開源到更加成熟的旅程中一起進步。

五、如何體驗 TDesign ？

您有兩種方式使用或體驗 TDesign：

1. 訪問 TDesign 的官網(wǎng)：https://tdesign.tencent.com
2. 訪問 TDesign 的 GitHub 主頁：https://github.com/Tencent/tdesign

六、致謝

• 感謝參與 TDesign 的近 300 名同學(xué)的支持，在 TDesign 從 0 到 1 的過程中貢獻了寶貴的經(jīng)驗、代碼、組件、文檔、建議等等所有的付出，使 TDesign 得以起步，得以服務(wù)用戶；
• 感謝騰訊內(nèi)部開源協(xié)同的文化和技術(shù)委員會的機制，讓 TDesign 得以在企業(yè)內(nèi)部孵化孕育，讓 TDesign 凝聚滿腔的熱血；
• 感謝開源的前行者，為 TDesign 的發(fā)展提供了理論和實踐上的參考和各類開源工具的幫助；
• 感謝 InfoQ、CSDN、開源中國、51CTO、人人都是產(chǎn)品經(jīng)理、優(yōu)設(shè)網(wǎng) 等平臺以及 前端之巔、前端早讀課、前端大全、web前端開發(fā)、前端新世界、前端大學(xué)、龍爪槐守望者等自媒體，讓 TDesign 可以為更多人所知。
• 感謝所有 TDesign 的使用者和關(guān)心者，你們是 TDesign 的啟明燈，指引 TDesign 的前進方向，TDesign 與大家共成長。

圖為 TDesign 的貢獻者們

推薦關(guān)注公眾號 “騰訊設(shè)計”（ 微信ID：TencentDesign ），第一時間獲取騰訊官方的設(shè)計方法論

本文由 @騰訊設(shè)計 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Pexels，基于CC0協(xié)議