消費(fèi)互聯(lián)網(wǎng)時(shí)代，紛繁的應(yīng)用需求催生了產(chǎn)品和功能的指數(shù)級(jí)增長(zhǎng)。在復(fù)雜多元的研發(fā)場(chǎng)景下，高效快速、保質(zhì)保量、可持續(xù)交付的研發(fā)模式，方能支撐高速擴(kuò)張的業(yè)務(wù)需求。

　　01.Titian 是什么?

　　近日，微盟重磅推出多渠道移動(dòng)端組件庫(kù)——Titian。作為移動(dòng)端前臺(tái)的“底層”能力，它伴隨了“微盟 WOS -新商業(yè)操作系統(tǒng)”的研發(fā)歷程，經(jīng)歷了從無(wú)序到有序，從稚嫩到成熟的蛻變，并助力了需要不斷實(shí)現(xiàn)的“產(chǎn)品一體化、體驗(yàn)一體化、服務(wù)一體化、數(shù)據(jù)一體化和開(kāi)放一體化”的 WOS 終極形態(tài)。

　　經(jīng)過(guò)一年多的不斷進(jìn)化，Titian 取得了大量核心業(yè)務(wù)應(yīng)用及有效性驗(yàn)證。Titian 提供了清晰統(tǒng)一的 API ，滿足多渠道小程序與多前端框架能力，極大的降低了研發(fā)成本與提升需求流轉(zhuǎn)效率。同時(shí)，Titian 也是體驗(yàn)良好的重要保障，遵循用戶習(xí)慣、維持用戶心智，為業(yè)務(wù)提供了有序一致的產(chǎn)品體驗(yàn)。

　　02.設(shè)計(jì)理念

　　體驗(yàn)設(shè)計(jì)遠(yuǎn)不止于核心任務(wù)，更需要沉淀與延續(xù)設(shè)計(jì)模式和理念，為后續(xù)的設(shè)計(jì)產(chǎn)出質(zhì)量與效率提升做基奠。為此，微盟Titian在完成核心任務(wù)的同時(shí)并行落地了“移動(dòng)端設(shè)計(jì)體系”。包含以下三部分：分別為“設(shè)計(jì)理念”、“視覺(jué)語(yǔ)言”、“設(shè)計(jì)規(guī)范”。體系是設(shè)計(jì)在執(zhí)行時(shí)的規(guī)則、標(biāo)準(zhǔn)與指導(dǎo)。

　　針對(duì)微盟產(chǎn)研、微盟生態(tài)開(kāi)發(fā)者、外部行業(yè)開(kāi)發(fā)者3類(lèi)用戶群體，微盟Titian在提升效率、普適通用的核心思路下，基于“有序、普適、多元”的設(shè)計(jì)理念與價(jià)值觀，打造具有自身特色的移動(dòng)端組件庫(kù)。

　　· 體驗(yàn)有序一致

　　即內(nèi)外的有序，內(nèi)在擁有統(tǒng)一的標(biāo)準(zhǔn)、規(guī)則及模式。外在有統(tǒng)一的設(shè)計(jì)語(yǔ)言讓用戶體驗(yàn)有序一致。

　　· 場(chǎng)景應(yīng)用普適性

　　沉淀于微盟核心的 SaaS 業(yè)務(wù)，對(duì)“交易場(chǎng)景”擁有良好的普適性。既能滿足當(dāng)下需求，也能拓展延伸至更廣泛的應(yīng)用場(chǎng)景。

　　· 品牌調(diào)性多元化

　　豐富多元的場(chǎng)景選擇性，滿足不同品牌調(diào)性展現(xiàn)。貼合用戶心智，維持品牌認(rèn)知。在賦能品牌的同時(shí)，開(kāi)發(fā)者更能探索出無(wú)限可能。

　　03.Titian 提供的能力

　　3.1 完善的基礎(chǔ)組件

　　Titian 目前提供了 60+ 移動(dòng)端基礎(chǔ)組件，足以支撐絕大多數(shù)的業(yè)務(wù)需求。

　　3.2 更豐富的多端小程序支持

　　借力微盟自研的小程序多渠道轉(zhuǎn)碼工具(即將開(kāi)放)，Titian小程序組件庫(kù)可在微信、支付寶、小紅書(shū)、快手等渠道的小程序順暢運(yùn)行。

　　3.3 React 和 Vue 同步支持

　　Titian H5 基于 Web Components 能力，Titian H5 提供 React 和 Vue 3.0 兩套組件庫(kù)。該兩套組件庫(kù)底層互通， API 一致，滿足業(yè)務(wù)方豐富的使用場(chǎng)景。

　　3.4 H5 與小程序 API 統(tǒng)一

　　小程序與 H5 組件庫(kù)兩者采用統(tǒng)一的 API 設(shè)計(jì)，方便開(kāi)發(fā)者接入。

　　3.5 二次開(kāi)發(fā)能力在 Titian 豐富的基礎(chǔ)組件上，用戶可以快速開(kāi)發(fā)滿足自身需求的定制組件。在微盟已經(jīng)有大量的案例落地，滿足了豐富的業(yè)務(wù)需求。

　　3.6 多維度主題切換在確保品牌風(fēng)格統(tǒng)一的前提下，Titian基于品牌調(diào)性提煉了具有共性的視覺(jué)特征，分別為顏色、圖標(biāo)、圓角。并用這些特征組合為“通用”、“潮流”、“親和”三套風(fēng)格(后續(xù)會(huì)持續(xù)增加)，讓開(kāi)發(fā)者隨心選擇，讓產(chǎn)品視覺(jué)更貼合品牌調(diào)性，保持品牌識(shí)別度，維持C端用戶對(duì)品牌的心智認(rèn)知。

　　3.7 開(kāi)箱即用的體驗(yàn)

　　Titian 提供交互式的示例，對(duì)于組件最常用的功能，可以直接配置相關(guān)屬性。業(yè)務(wù)方可以直接上手操作，簡(jiǎn)單直觀。

　　04.開(kāi)發(fā)工具

　　· 自研打包工具

　　基于 esbuild ， Titian 自研了小程序打包工具，讓編譯流程更加快速，開(kāi)發(fā)體驗(yàn)更加友好。

　　· VS Code 提示插件

　　幫助用戶在 VS Code 中快捷使用 Titian 組件。

　　· WXML 格式化工具

　　一個(gè) prettier 格式化插件，方便統(tǒng)一代碼風(fēng)格。

　　· Figma 設(shè)計(jì)組件

　　Titian提供了一整套完整的設(shè)計(jì)組件資源，接入引用即可立即使用，方便快速搭建頁(yè)面，設(shè)計(jì)組件覆蓋代碼能實(shí)現(xiàn)的所有能力，做到了設(shè)計(jì)-研發(fā)閉環(huán)。

　　· UED 驗(yàn)收工具

　　對(duì)于 Titian 組件，打開(kāi)驗(yàn)收工具配置后，長(zhǎng)按即可變得半透明?？梢詭椭?UI 快速分辨出 Titian 組件。

　　05.優(yōu)秀案例

　　經(jīng)過(guò)1年的迭代與不斷調(diào)優(yōu)，Titian已為微盟企業(yè)內(nèi)部及微盟商城、CRM、CMS、商戶助手、微盟客等客戶，累積提供了5000+的移動(dòng)端場(chǎng)景的應(yīng)用及驗(yàn)證。

　　未來(lái)，微盟將在 Titian 組件庫(kù)的基礎(chǔ)上做更多的探索，開(kāi)放優(yōu)化可視化建站平臺(tái)、D2C 設(shè)計(jì)圖轉(zhuǎn)代碼工具、物料市場(chǎng)等新工具新平臺(tái)，敬請(qǐng)大家多多關(guān)注～

　　反饋和共建

　　請(qǐng)?jiān)L問(wèn)Titian UI - 多渠道移動(dòng)端組件庫(kù)PC端官網(wǎng)，進(jìn)行體驗(yàn)!

　　https://titian.design.weimob.com/

　　github鏈接：https://github.com/weimob-tech/titian-design

　　微盟云開(kāi)發(fā)者可通過(guò)微盟云開(kāi)發(fā)者工具中的Titian使用文檔指引，查找使用方式!

　　https://doc.weimobcloud.com/word?menuId=53&childMenuId=58&tag=3764