专栏首页钱曙光的专栏滴滴开源基于金融场景的Vuejs组件库Mand Mobile

滴滴开源基于金融场景的Vuejs组件库Mand Mobile

4月11日消息,滴滴今日宣布开源一款基于金融场景的Vuejs组件库——Mand Mobile。该工具是基于Vuejs 2.0开发的移动端组件库,它遵循统一的视觉设计规范,由包括基础、表单、操作反馈和业务在内的四类组件组成。Mand Mobile致力于提升金融相关产品的用户体验,提高设计和研发效率,让复杂的场景变得简单。

由于金融产品种类繁多,功能相对来说较复杂,设计及开发成本较高。从各种表单的填写,验证码/密码输入,到图表展示,再到数字键盘和收银台等,这些功能使用频率较高,对于视觉一致性和兼容性都有着更高的要求。

在这一背景下,滴滴出行战略事业群前端团队尝试在项目的设计和开发过程中积累了部分高频使用的组件,逐渐梳理出统一的视觉和开发规范,以期能帮助团队快速地迭代出产品。经过一年时间的积累,组件库已应用于四大业务板块共10余款产品中,并在业务的考验中逐渐成熟。

项目特点

  • 丰富的组件

Mand Mobile提供了30+的实用组件,能够满足移动端页面开发中的大部分需求。其中的业务类组件还针对金融领域,提取了包括图表、数字键盘等,从而更好地满足相关产品的开发需要。

  • 统一的视觉规范

视觉设计既要兼顾可用性,又要具备信息传达的直观度和界面展现的美观度。为了达成这一目标,Mand Mobile的视觉设计规范划分为功能型组件规范和非功能性视觉规范两部分。功能型组件包括但不限于浮层,提示,弹窗,表单等,强调平台化的统一复用和对接研发的高效率实现。非功能性视觉规范会定义主辅颜色体系,场景按钮等。

Mand Mobile 的视觉规范由滴滴战略事业群设计师设计并维护,保证了应用的项目内部、项目之间都能保持高度的视觉一致性。简洁大气的设计风格,在保证项目整体的美观与格调的同时,也让其有能力适应更广泛的应用场景。

  • 详细的文档和示例

我们为每个组件编写了详细的说明文档,从组件的引入方法,到属性Props,事件Events,公共方法Methods等都有详细的介绍。为了更直观的介绍组件使用方法以及效果,我们针对每个组件都提供了多个可以即时操作的demo,从而让用户能更直观地了解组件的各项功能。

Chart Demo

Chart API

  • 严格控制的Bundle体积

在保证功能完善、强大的同时,Mand Mobile 还在Bundle体积上表现出色。Mand Mobile可导出es,umd两种格式包,其中es打包大小仅为139kb(gzip 34kb),umd格式最终大小仅为135kb(gzip 33kb),从而为使用者在控制项目体积上提供有力的帮助。

除此之外,Mand Mobile还支持tree shaking以及支持按需加载,对于仅需使用部分组件的项目来说,这能进一步减小项目的体积。具体的配置方法可参考快速上手中的引用部分。

  • 灵活转换的样式主题

尽管Mand Mobile 的设计风格简约优雅,足以适应大部分项目的视觉要求,但您仍可为其定制专属的样式主题。Mand Mobile内部样式基于Stylus开发,可通过全局和组件的样式变量对主题样式进行调整。


项目反馈

该项目开源负责人表示,Mand Mobile 刚刚起步不久,目前仍存在一些不够完善的地方。在继续完善现有组件的同时,我们还会继续积累更多的实用组件,另外也会尝试将视觉和逻辑抽离,从而来满足更多更广泛的使用需求。

目前该项目已经在开源平台GitHub上线,感兴趣的工程师可以去感受这款开源组建的强大功能,也可以在页面提交宝贵建议。

相关链接

  • Home: didi.github.io/mand-mobile
  • Github: github.com/didi/mand-mobile

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 滴滴开源在2019:十大重点项目盘点,DoKit客户端研发助手首破1万Star

    2018 年,科技企业纷纷布局开源战略后迎来的第一个“丰收年”。但对滴滴来说,2019 年才迎来其第一波开源小高潮。

    AI科技大本营
  • Vue 移动端框架

    vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约。 中文文档 | github地址 | 在线预览

    grain先森
  • 盘点大厂的那些开源项目 - 滴滴出行

    滴滴出行是涵盖出租车、 专车、滴滴快车、 顺风车、代驾及大巴、货运等多项业务在内的一站式出行平台。

    全球技术精选
  • 基于Vue实现一个有点意思的拼拼乐小游戏

    笔者去年曾写过一个类似的拼拼乐小游戏,技术栈采用自己的Xuery框架和原生javascript实现的,脚手架采用gulp来实现,为了满足对vue的需求,笔者再次...

    徐小夕
  • 【一周简报】听云APM:如何让春水堂给用户带来“快感”

    智选SDK一周资讯大事记,将会为您呈现过去一周最受欢迎的SDK资讯、投融资、企业活动、人物访谈和创业故事等信息。让您在最短的时间内了解最火爆的前沿信息。 云通讯...

    BestSDK
  • 如何选择一个 vue ui 框架?

    “Material Design 并不是一种单一风格,而代表着一套源自纸张与墨水的适应性设计系统。经过精心编排,你将能够更快构建起美观且实用的产品。”

    程序员LIYI
  • 滴滴开源基于 Vue.js 的移动端组件库 cube-ui

    综合自:https://didi.github.io/cube-ui/ ? 继 6 月份开源Android 端插件化框架 VirtualAPK后,滴滴近日又开源...

    企鹅号小编
  • 以数据智能引领产业数字化,滴普科技宣布完成5000万美元A+轮融资

    数据猿报道 5月28日,滴普科技DEEPEXI®3.0新品暨A+轮融资发布会在深圳举行。滴普科技在会上正式宣布完成A+轮融资,融资金额达5000万美元,由高瓴创...

    数据猿
  • 马上!拼多多领衔三家中概股登陆美股,纽约的钟也不够用了?

    相信大家都还记得7月12日,八家公司在港交所同时敲钟的盛况:由于敲钟必须跟开市时间同步,所以港交所机智地准备了四面锣,两家公司一面锣,共同敲钟,成为港股奇观,当...

    罗超频道

扫码关注云+社区

领取腾讯云代金券