MandMobile是滴滴出行战略事业群前端团队基于Vuejs2.0开发的移动端组件库。它遵循统一的视觉设计规范，由基础、表单、操作反馈、业务四类组件组成。MandMobile致力于提升金融相关产品的用户体验，提升设计研发效率，让复杂场景变得简单。项目背景金融产品种类繁多，功能相对复杂，设计开发成本相对较高。从填写各种表格，输入验证码/密码，到显示图表，再到数字键盘和收银机。这些功能经常被频繁使用，对视觉的一致性和兼容性有更高的要求。在此背景下，我们尝试在项目的设计和开发过程中积累一些常用的组件，逐步梳理出统一的视觉和开发规范，希望能帮助团队快速迭代出产品。经过一年的积累，组件库已经应用于四大业务板块的十余款产品，并在业务的考验中不断走向成熟。功能丰富的扫码体验项目组件MandMobile提供了30+实用组件，可以满足移动页面开发中的绝大部分需求。其中，业务组件也针对金融领域，包括图表、数字键盘等，以更好地满足相关产品的开发需求。统一的视觉规范视觉设计不仅要考虑易用性，还要具有信息传递的直观性和界面展示的美观性。为实现这一目标，MandMobile的视觉设计规范分为两部分：功能组件规范和非功能视觉规范。功能组件包括但不限于浮层、提示、弹窗、表单等，强调平台统一复用，高效实现研发对接。非功能性视觉规范定义了主次配色方案、场景按钮等。MandMobile的视觉规范由滴滴战略事业群的设计师设计和维护，保证了滴滴内项目内和项目间的视觉高度一致性。应用。简洁大方的设计风格，既保证了项目的整体美观和格调，又使其能够适应更广泛的应用场景。详细的文档和示例我们为每个组件都写了详细的文档，从组件的引入方法，到属性Props、事件Events、公共方法Methods等等。为了更直观的介绍组件的使用和作用，我们为每个组件提供了多个可以立即操作的demo，让用户更直观的了解组件的功能。严格控制BundleSize在保证功能完整强大的同时，MandMobile在Bundlesize方面也表现出色。MandMobile可以导出es和umd两种格式的包，其中es的包大小只有139kb（gzip34kb），umd格式的最终??大小只有135kb（gzip33kb），为用户控制项目规模。此外，MandMobile还支持treeshaking和按需加载，对于只需要使用部分组件的项目可以进一步缩减项目体积。具体配置方法参见快速入门中的参考部分。风格主题灵活变换虽然MandMobile简洁大方的设计风格足以满足大部分项目的视觉需求，但您仍然可以自定义自己的风格主题。MandMobile内部样式基于Stylus开发，可以通过全局和组件样式变量调整主题样式。项目反馈MandMobile刚刚起步，还有一些不完善的地方。在不断完善现有组件的同时，我们会不断积累更多实用的组件，我们也会尝试将视觉和逻辑分离，以满足更多更广泛的使用需求。我们衷心希望MandMobile的出现能够对您的工作有所帮助。同时，我们也期待您的支持、反馈和参与，共同努力，让金融场景的开发变得更简单。遇到任何问题都可以随时在GitHub上提交。相关链接首页：https://didi.github.io/mand-mobileGithub：https://github.com/didi/mand-mobile
