騰訊開源企業級設計體系 TDesign
編輯導語: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協議
需要安裝的嗎?
不需要,對axure來說只是組件庫
嗯,昨天有下載下來配到axure里了,下次畫圖可以拿來用用
你這樣把UI的活干了,UI又要下崗了
1,借助axure組件庫,產品經理自己就能拖拽出 UI,并且 前端開發 可以根據相配套的前端組件,快速輸出界面,TD 其實是產品經理和前端 高效協作產出的利器:https://tdesign.tencent.com/source
2,中后臺產品不用重新畫原型了,直接現成的搭建:https://tdesign.tencent.com/starter/
好奇Axure的組件庫在哪可以下載呀
訪問 官網 – 資源 欄目
https://tdesign.tencent.com/
好,但是現在還沒上線…
修復些問題,預計2-3周上線
好的,感謝~期待效果
目前有鏈接嗎?
文中給了呀