Mand Mobile is a Mobile component library developed by the front-end team of Didi Chuxing Strategic business Group based on Vuejs 2.0. It follows a uniform visual design specification and consists of four categories of components including basic, forms, operational feedback and business. Mand Mobile is committed to improving the user experience of finance-related products, improving the efficiency of design and development, and simplifying complex scenarios.

Project background

Financial products have a variety of functions, relatively complex, high design and development costs. From form filling, captco/password entry, to chart presentation, to numeric keypads and cash registers. These features tend to be used more frequently and have higher requirements for visual consistency and compatibility.

In this context, we tried to accumulate some frequently used components in the design and development process of the project, and gradually combed out the unified visual and development specifications, in order to help the team quickly iterate the product. After a year of accumulation, the component library has been applied to more than 10 products in the four major business segments, and is constantly maturing in the test of business.

Sweep code experience

Project characteristics

Mand Mobile has 30+ useful components that meet most of the needs of Mobile page development. The business component is also targeted at the financial field, including the extraction of charts, numeric keypads, so as to better meet the development needs of related products.

Unified visual specifications Visual design should not only take into account the usability, but also have the intuitive degree of information transmission and interface display aesthetics. To achieve this goal, Mand Mobile’s visual design specification is divided into functional component specifications and non-functional visual specifications. Functional components include but are not limited to floating layers, hints, pop-ups, forms, etc., emphasizing unified reuse of platforms and efficient implementation of docking research and development. Non-functional visual specifications define primary and secondary color schemes, scene buttons, etc.

Mand Mobile’s visual specifications are designed and maintained by Didi strategic Business Group designers to ensure a high degree of visual consistency within and between applications. The simple and atmospheric design style not only ensures the overall appearance and style of the project, but also enables it to adapt to a wider range of application scenarios.

We have written detailed documentation for each component, from the introduction Methods of the component, to properties Props, Events, and common Methods. In order to give a more intuitive introduction to how to use the components and their effects, we have provided multiple real-time demos for each component, so that users can understand the functions of the components more intuitively.

Mand Mobile excelled in Bundle size as well as being fully functional and powerful. Mand Mobile can export es and UMD packages. The es package size is only 139KB (GZIP 34KB), and the umD package size is only 135KB (GZIP 33KB), which helps users to control the project volume. In addition, Mand Mobile supports Tree Shaking and load on demand, which further reduces the size of projects that use only a few components. For detailed configuration methods, see the reference section in Getting Started.

While Mand Mobile’s design is simple and elegant enough to suit most projects visually, you can still customize your own style themes. Mand Mobile internal styles are based on Stylus, and theme styles can be adjusted through global and component style variables.

Project feedback

Mand Mobile is still in its infancy and still has some imperfections. As we continue to improve the existing components, we will continue to accumulate more practical components, and we will also try to separate visual and logical components to meet a wider range of needs.

We sincerely hope that Mand Mobile will help you in your work. In the meantime, we look forward to your support, feedback and participation as we work together towards the goal of making the development of financial scenarios easier. Any questions you encounter can be submitted on GitHub at any time.

A link to the

  • Home: didi.github.io/mand-mobile
  • Making: github.com/didi/mand-m…