消费互联网时代，纷繁的应用需求催生了产品和功能的指数级增长。在复杂多元的研发场景下，高效快速、保质保量、可持续交付的研发模式，方能支撑高速扩张的业务需求。

01.

Titian 是什么？

近日，微盟重磅推出多渠道移动端组件库——Titian。作为移动端前台的“底层”能力，它伴随了“微盟 WOS -新商业操作系统”的研发历程，经历了从无序到有序，从稚嫩到成熟的蜕变，并助力了需要不断实现的“产品一体化、体验一体化、服务一体化、数据一体化和开放一体化”的 WOS 终极形态。

经过一年多的不断进化，Titian 取得了大量核心业务应用及有效性验证。Titian 提供了清晰统一的 API ，满足多渠道小程序与多前端框架能力，极大的降低了研发成本与提升需求流转效率。同时，Titian 也是体验良好的重要保障，遵循用户习惯、维持用户心智，为业务提供了有序一致的产品体验。

02.

设计理念

体验设计远不止于核心任务，更需要沉淀与延续设计模式和理念，为后续的设计产出质量与效率提升做基奠。为此，微盟Titian在完成核心任务的同时并行落地了“移动端设计体系”。包含以下三部分：分别为“设计理念”、“视觉语言”、“设计规范”。体系是设计在执行时的规则、标准与指导。

针对微盟产研、微盟生态开发者、外部行业开发者3类用户群体，微盟Titian在提升效率、普适通用的核心思路下，基于“有序、普适、多元”的设计理念与价值观，打造具有自身特色的移动端组件库。

· 体验有序一致

即内外的有序，内在拥有统一的标准、规则及模式。外在有统一的设计语言让用户体验有序一致。

· 场景应用普适性

沉淀于微盟核心的 SaaS 业务，对“交易场景”拥有良好的普适性。既能满足当下需求，也能拓展延伸至更广泛的应用场景。

· 品牌调性多元化

丰富多元的场景选择性，满足不同品牌调性展现。贴合用户心智，维持品牌认知。在赋能品牌的同时，开发者更能探索出无限可能。

03.

Titian 提供的能力

3.1 完善的基础组件

Titian 目前提供了 60+ 移动端基础组件，足以支撑绝大多数的业务需求。

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

借力微盟自研的小程序多渠道转码工具（即将开放），Titian小程序组件库可在微信、支付宝、小红书、快手等渠道的小程序顺畅运行。

3.3 React 和 Vue 同步支持

Titian H5 基于 Web Components 能力，Titian H5 提供 React 和 Vue 3.0 两套组件库。该两套组件库底层互通， API 一致，满足业务方丰富的使用场景。

3.4 H5 与小程序 API 统一

小程序与 H5 组件库两者采用统一的 API 设计，方便开发者接入。

3.5  二次开发能力

在 Titian 丰富的基础组件上，用户可以快速开发满足自身需求的定制组件。在微盟已经有大量的案例落地，满足了丰富的业务需求。

3.6 多维度主题切换

在确保品牌风格统一的前提下，Titian基于品牌调性提炼了具有共性的视觉特征，分别为颜色、图标、圆角。并用这些特征组合为“通用”、“潮流”、“亲和”套风格（后续会持续增加），让开发者随心选择，让产品视觉更贴合品牌调性，保持品牌识别度，维持C端用户对品牌的心智认知。

3.7 开箱即用的体验

Titian 提供交互式的示例，对于组件最常用的功能，可以直接配置相关属性。业务方可以直接上手操作，简单直观。

04.

开发工具

· 自研打包工具

基于 esbuild ， Titian 自研了小程序打包工具，让编译流程更加快速，开发体验更加友好。

· VS Code 提示插件

帮助用户在 VS Code 中快捷使用 Titian 组件。

· WXML 格式化工具

一个 prettier 格式化插件，方便统一代码风格。

· Figma 设计组件

Titian提供了一整套完整的设计组件资源，接入引用即可立即使用，方便快速搭建页面，设计组件覆盖代码能实现的所有能力，做到了设计-研发闭环。

· UED 验收工具

对于 Titian 组件，打开验收工具配置后，长按即可变得半透明。可以帮助 UI 快速分辨出 Titian 组件。

05.

优秀案例

经过1年的迭代与不断调优，Titian已为微盟企业内部及微盟商城、CRM、CMS、商户助手、微盟客等客户，累积提供了5000+的移动端场景的应用及验证。

未来，微盟将在 Titian 组件库的基础上做更多的探索，开放优化可视化建站平台、D2C 设计图转代码工具、物料市场等新工具新平台，敬请大家多多关注～

反馈和共建

请访问Titian UI - 多渠道移动端组件库PC端官网，进行体验！

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

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

微盟云开发者可通过微盟云开发者工具中的Titian使用文档指引，查找使用方式！

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