《共建前端基礎設施解放設計開發生產力.pdf》由會員分享,可在線閱讀,更多相關《共建前端基礎設施解放設計開發生產力.pdf(27頁珍藏版)》請在三個皮匠報告上搜索。
1、共建前端基礎設施,解放設計開發生產力TDesign 的對外開源之路孫哲TDesign 簡介推行統一的設計/UI 組件體系設計與開發流程打通維護跨技術的組件庫產品目錄TDesign 簡介TDesign 簡介具有統一的設計語言和視覺風格,幫助用戶形成連續、統一的體驗認知,提供開箱即用的 UI 組件庫和設計資源減少設計和研發的重復勞動。是騰訊各業務團隊協同共建的企業級設計體系。TDesign 簡介官網上線主題生成器 1期提供多端轉化模板設計方案提供web 三期組件/mobile 二期組件starter 快速上手項目,支持 React 技術棧Mobile-Vue 設計驗收完成,代碼對外開源桌面端提供f
2、igma變體版本桌面端提供figma頁面模板Starter 支持1套移動端模板迭代物料市場,確定新定位移動端提供figma變體版本完成桌面端組件動效優化Starter 上線主題配置能力Mobile-React 版本建設和對外開源為設計師提供 Figma UIKit Variant騰訊內部 Tea 升級到 TD上線多端轉化解決方案模板和生態工具合作,內置 TDesign 基礎組件庫發布正式版本,孵化至少2個成功案例支持 國際化支持無障礙與適老化適配物料市場迭代2月4月6月3月5月8月11月12月卷入更多的oteam,例如 flutter oteam、數據可視化oteam,一起協同和完善新增 智慧
3、零售、醫療、金融 行業組件庫,并對外開源9月總結設計體系和組件庫專業文章/課程,建立技術影響力TDesign 簡介為什么還要做組件庫?統一公司設計體系同一個公司體系下,不同產業線用戶體驗卻有比較大的差別01滿足騰前端團隊技術需求業界還沒有哪一種技術棧產品占據明顯優勢地位0TDesign 簡介 大企業產品體驗統一的痛點02TDesign 簡介 官方多技術棧/多端支持桌面端 50+組件移動端 40+組件騰訊第一個對外開源的公司級前端通用 UI 組件庫與設計體系推行統一的設計/UI 組件體系TDesign 簡介 從設計源頭做起一般設計-研發流程統一 UI/設計體系 化繁為簡,輕而易用包容多元進化連接
4、TDesign 的設計價值觀統一 UI/設計體系 物料市場承載組件分享和復用需求物料市場通過標簽區分不同資源類型從組件、頁面模板、行業類型、下載熱度等不同維度推薦第三方物料,在逐步運作中沉淀出優秀的社區產品統一 UI/設計體系 解決業務“最后一公里”的需求行業組件通用組件解決項目 40%的 UI 需求行業組件解決剩下的大部分需求統一 UI/設計體系 公司內已有組件庫產品共建共贏統一 UI/設計體系 主流設計工具支持統一 UI/設計體系 方便快捷的全局定制主題Style Code可視化編輯設計與開發流程打通設計與開發流程打通 TDesign 組件上線流程新組件需求發起招募生成 APIUI 開發交
5、付技術棧 PRCRPMC 例會交互稿API 評審設計指南設計稿設計走查縮略圖物料評估階段準備階段開發階段驗收階段PMC 例會交互稿API 評審設計指南設計稿設計走查縮略圖物料設計與開發流程打通 Design Token 貫穿設計開發流程FigmaStyle Code可視化編輯設計與開發流程打通 Figma Variants 對應組件 APIFigma組件 API官網 live demo維護跨技術棧的組件庫產品維護跨技術的組件庫產品 API 設計先行API 線上評審維護跨技術的組件庫產品 工具化維護 API自動生成各技術棧對應組件產物維護跨技術的組件庫產品 工具化維護 API抽象 Tnode 概念,各自表達實現跨技術棧維護 代碼復用組件庫分層治理跨技術棧維護 代碼復用組件 UI/公共邏輯復用謝謝觀看THANKS