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

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

如果你對(duì)于 TDesign 感興趣，可以打開(kāi) TDesign 官網(wǎng)，體驗(yàn) TDesign 。如果你對(duì) TDesgin 誕生的歷史感興趣，不妨來(lái)看看 TDesign 誕生背后的故事。（ps：文末送福利的哦）

* TDesign 官網(wǎng)：

https://tdesign.tencent.com

本文約3200字

預(yù)計(jì)閱讀時(shí)間：8分鐘

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

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

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

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

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

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

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

為了解決協(xié)作的問(wèn)題，TDesign 在進(jìn)行第二期迭代時(shí)，通過(guò)一系列工具和工作流程來(lái)規(guī)范組件的開(kāi)發(fā)過(guò)程，選擇更加開(kāi)源風(fēng)格的異步 issue 討論，開(kāi)發(fā)了工具來(lái)自動(dòng)生成各個(gè)框架的 API 定義和描述文檔，引入 CI / CD 流程來(lái)降低人工參與的比率，從而減少因?yàn)槿硕稿e(cuò)的可能。通過(guò)引入機(jī)器人的方式，來(lái)提升信息推送的效率，讓每一個(gè)人都可以時(shí)刻知道什么事情是需要做的，什么事情是不需要做的。借助于這些更加“開(kāi)源”風(fēng)格的工具和協(xié)作方式，TDesign 的效率得以提升，讓 TDesign 在進(jìn)行二期開(kāi)發(fā)時(shí)，比預(yù)期更快地完成任務(wù)。

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

作為一款企業(yè)級(jí)設(shè)計(jì)體系，TDesign 的特性可以總結(jié)為如下三點(diǎn)：

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

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

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

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

2.一致：一致的設(shè)計(jì)和開(kāi)發(fā)體驗(yàn)

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

基于 TDesign 的設(shè)計(jì)體系規(guī)范，TDesign 同時(shí)上線了組件庫(kù)的桌面端和移動(dòng)端，提供了多個(gè)技術(shù)棧實(shí)現(xiàn)版本。通過(guò)一系列協(xié)作流程和輔助工具，保證各技術(shù)棧組件 API 和實(shí)現(xiàn)產(chǎn)物一致。借助這些能力，使得項(xiàng)目即便使用了多種不同的技術(shù)架構(gòu)或技術(shù)棧，開(kāi)發(fā)者也可通過(guò) TDesign 通用設(shè)計(jì)組件庫(kù)進(jìn)行開(kāi)發(fā)，顯著降低學(xué)習(xí)成本，在構(gòu)建統(tǒng)一/多端覆蓋/跨技術(shù)棧的前端應(yīng)用時(shí)更具優(yōu)勢(shì)。

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

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

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

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

* TDesign Starter Kit ：

https://tdesign.tencent.com/starter/

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

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

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

您有三種方式使用或體驗(yàn) TDesign：

① 訪問(wèn)官網(wǎng)

https://tdesign.tencent.com

② 訪問(wèn) GitHub 主頁(yè)

https://github.com/Tencent/tdesign

③ 通過(guò) CoDesign 預(yù)覽 TDesign 組件樣式

點(diǎn)此查看

也歡迎加入我們的企業(yè)微信群交流：

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

圖為 TDesign 的貢獻(xiàn)者們

學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)

騰訊開(kāi)源企業(yè)級(jí)設(shè)計(jì)體系 TDesign

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

也歡迎加入我們的企業(yè)微信群交流：

學(xué)習(xí)更多技能請(qǐng)點(diǎn)擊下方公眾號(hào)

學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)