微盟移动端组件库 Titian Mobile 对外开源

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

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