騰訊開源最好項目（騰訊開源企業級設計體系）

2023-04-13 21:19:00

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

TDesign 是來自騰訊內部近 300 名設計師與開發者共同打造，經由 500 項目使用、驗證和錘鍊過的企業級設計體系， 秉承包容、多元、進化、連接的價值觀，TDesign 期望與用戶、行業及合作夥伴等一起打造具有競爭力的產品體驗。

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

如果你對於 TDesign 感興趣，可以打開 TDesign 官網，體驗 TDesign 。如果你對 TDesgin 誕生的歷史感興趣，不妨來看看 TDesign 誕生背後的故事。

一、騰訊開源協同，TDesign 成長的土壤

自 2019 年開始，騰訊正式宣布在內部推行開源協同，鼓勵所有原始碼對公司內部全部開放，共同協作。

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

但 TDesign 應該是什麼樣的設計體系？

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

包容，是為了讓 TDesign 兼容並蓄，既能滿足當下需求，也能應用於更廣泛場景；多元，是 TDesign 應當能夠賦能不同業務，探索無限可能；進化，是 TDesign 應當成為一個動態的設計體系，在「以用戶價值為依歸」的基礎上，成長進化；連接，是 TDesign 需要用最大的努力去連接賦能，聯動融通。

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

二、從協同到開源，TDesign 成長的歷程

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

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

藉助於這些更加「開源」風格的工具和協作方式，TDesign 的效率得以提升，讓 TDesign 在進行二期開發時，比預期更快地完成任務。

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

三、從設計到研發，TDesign 的特性有哪些？

作為一款企業級設計體系，TDesign 的特性可以總結為如下三點。

1. 完整：完整的技術、設計資源，將設計與開發者從重複勞動中釋放出來

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

為了實現開發與設計之間的高效協同，TDesign 中包含了豐富可復用的設計組件資源，如色彩體系、文字系統、動效設計、圖標元素、布局結構等，覆蓋支持 Axure、Sketch、Figma、Adobe Xd 等各大產品設計軟體，將設計和開發者從重複勞動中釋放出來。

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

2. 一致：一致的設計和開發體驗

TDesign 將騰訊內部多年設計經驗提煉總結為專業的設計指南，其所提供的通用設計解決方案，能夠幫助產品經理、設計師、開發者等角色高效完成企業級產品的設計和研發，並保持設計語言和風格的一致，滿足用戶體驗的要求。

基於 TDesign 的設計體系規範，TDesign 同時上線了組件庫的桌面端和移動端，提供了多個技術棧實現版本。通過一系列協作流程和輔助工具，保證各技術棧組件 API 和實現產物一致。藉助這些能力，使得項目即便使用了多種不同的技術架構或技術棧，開發者也可通過 TDesign 通用設計組件庫進行開發，顯著降低學習成本，在構建統一/多端覆蓋/跨技術棧的前端應用時更具優勢。

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

TDesign 設計體系在形成過程中，提煉了不同業務、場景的設計經驗，提供了通用的設計指南以降低使用門檻。對於不同企業產品的品牌定製需求，TDesign 支持使用者對設計風格進行擴展，目前已經將設計樣式梳理歸納為 Design Token，形成一套企業內部的語義化設計規範，方便後續進行統一的管理和使用擴展。

在主題配置方面，TDesign 提供了明亮和暗色兩種模式，支持一鍵切換，提升用戶的使用體驗。後續，TDesign 還會推出針對於不同垂直領域的行業組件，覆蓋更多的業務範圍。產品團隊可以藉助內置的行業主題，快速配置對應需求，啟動業務開發。

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

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

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

藉助社區，TDesign 期待與更多產品設計師和開發者有專業交流，甚至是收穫一個積極活躍的 TDesign 社區。

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

五、如何體驗 TDesign ？

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

訪問 TDesign 的官網：https://tdesign.tencent.com訪問 TDesign 的 GitHub 主頁：https://github.com/Tencent/tdesign六、致謝感謝參與 TDesign 的近 300 名同學的支持，在 TDesign 從 0 到 1 的過程中貢獻了寶貴的經驗、代碼、組件、文檔、建議等等所有的付出，使 TDesign 得以起步，得以服務用戶；感謝騰訊內部開源協同的文化和技術委員會的機制，讓 TDesign 得以在企業內部孵化孕育，讓 TDesign 凝聚滿腔的熱血；感謝開源的前行者，為 TDesign 的發展提供了理論和實踐上的參考和各類開源工具的幫助；感謝 InfoQ、CSDN、開源中國、51CTO、人人都是產品經理、優設網 等平臺以及 前端之巔、前端早讀課、前端大全、web前端開發、前端新世界、前端大學、龍爪槐守望者等自媒體，讓 TDesign 可以為更多人所知。感謝所有 TDesign 的使用者和關心者，你們是 TDesign 的啟明燈，指引 TDesign 的前進方向，TDesign 與大家共成長。

圖為 TDesign 的貢獻者們

推薦關注公眾號 「騰訊設計」（ 微信ID：TencentDesign ），第一時間獲取騰訊官方的設計方法論

本文由 @騰訊設計 原創發布於人人都是產品經理，未經許可，禁止轉載

題圖來自Pexels，基於CC0協議

,