The background,

In recent years, there are more and more front-end UI frameworks, some of which are of high quality, such as Bootstrap, which provides a set of basic UI component libraries for users (mainly developers) to use. Using mature component libraries can greatly improve the development efficiency. As users’ requirements for product quality improve, they often need to customize the style of component libraries, so they are often designed to be basic but not beautiful enough. On the way of personalized customization, each designer has different ideas, making the design style is not unified, as the design members change, the design style will be difficult to maintain.

Later, Material Design and Ant Design, thinking from the perspective of Design, introduced a set of Design and language to standardize the Design of developers. This ensures a consistent, soulful design style across development languages and platforms.

In many YMFE development and maintenance projects, due to the change of members, lack of UI design, technology stack is not unified and other factors, there are various page styles. We hope to write a set of design specifications to unify the front-end UI design of team projects, shield design differences, inject soul into many team projects, and create a personalized team culture. Therefore, the author conducted some research on the design specifications.

Two, clear concept

Design specifications are often talked about. What exactly do design specifications refer to?

In Web development, both Style Guide and Pattern Library have the meaning of design specifications, which are different from each other:

1. Style Guide

  • Style Guide focuses more on vision and makes specifications for the design of text, color, LOGO, ICON and other designs. The output is generally calledGuideline;
  • Generally suitable for the design team to maintain a unified visual design style, easy to unify and reuse style, standard;
  • Example: iOS Human Interface Guidelines, Material Guidelines;
  • Difficulty: It is not easy for the Design team or even the development team to understand the Design concept. For example, the metaphor of “Material” in Material Design is abstract and difficult to understand and use.

2. Pattern Library

  • Pattern Library focuses more on front-end development, implementing the style of interface elements, whose code is available for preview, and the output is generally calledComponent library UI frameworkAnd so on;
  • Generally used for development team collaboration, improve component reuse and ensure the consistency of user experience;
  • Example: Bootstrap;
  • Difficulty: It is difficult for the development team to completely use components provided by the component library to build pages. Developers often write their own styles when they cannot find the required components, and it is very easy to make styles inconsistent with the overall style without a design draft.

The definition of the design specification is quoted from zhihu “How to Establish a SET of UI Design Specifications”.

Guideline: Material Design Guideline belongs to the Style Guide. In addition to Guideline, Material Design also provides the implementation of the component library: Material Components and Material Design Lite. Ant Design is similar in that it includes Design guidelines and provides the React implementation.

Third, the overview

Previously, the connection between Material Design and Ant Design was explained from the concept of Design specification. Now, the differences between the two are understood from other aspects.

Material Design

As a set of relatively mature design language, its application scenarios are extremely wide, including the whole line of Google products: Chrome OS, PC and mobile (including iOS) build a complete and excellent interactive experience around the metaphor of “Material”, and its goal of “cross-platform underlying system” is realized and gradually improved:

  • The design language is introduced from the categories of animation effects (hereinafter referred to as dynamic effects), styles, layouts, components, patterns, growth communication strategies, usability, platforms and resources.
  • Created a whole new virtual world view on the electronic screen.
  • Provides comprehensive, scientific interaction examples, is well worth studying.
  • Suitable for different platforms.

Ant Design

In terms of Design language, it is far from Material Design, but its goal of “comprehensively improving product experience and r&d efficiency in Taiwan” is well achieved:

  • Design languages are introduced in terms of guidelines, components, patterns, and resources.
  • The design principles are sorted out, and the ten design principles are summarized. The text is introduced with pictures and examples, so that these design principles can be easily accepted by us.
  • For the complex interactive logic of the products in Taiwan, especially the form, form design has done a relatively in-depth study, and shows the easy to understand the example.

From the perspective of both goals, Ant Design, which serves mid-background systems, is obviously not as far-reaching as Material Design. The goals of both have something in common: to build a relatively low-level system that actually sets the floor for design, and to build systems based on this specification that have a relatively consistent style of presentation and are not ugly. From the point of view of aesthetics, Material Design layout is more bright atmosphere, dynamic effect is outstanding, while Ant Design Design is regular, compact layout, simple and rigorous.

Fourth, further contrast

1. The concept

Material Design

  • With the popularity of electronic screens, the concept of “electronic paper” has been continuously explored by frontier designers, and a unique interactive experience has been formed on electronic screens.
  • Bold, graphic, intentional, follow the basic graphic design norms to scientifically build users in the visual perception, bright image user interface users to get immersive interactive experience.
  • Motion provides meaning. Motion provides meaning is especially important. It can give users hints and guidance, so that they can naturally know the interaction behavior occurring on the interface.

Ant Design

  • Small, the pursuit of excellence in details, users continue to find surprising details in use.
  • Define, define design scientifically, interpret design principles in popular form.
  • Happiness, the pursuit of “users” and “designers” happiness, smooth completion of each interaction.

In the design concept of both of them, science defines design, which is common. In terms of visual design, both of them hold science in awe. Among other ideas, Material Design takes a further step in pursuing dynamic effect and typography. Although Ant Design lacks dynamic effect Design and is restricted by the medium stage system, it will not display the Design in a bright and radical way (it is also natural for the medium stage system to pursue simplicity and clarity). However, the interaction design of the whole system is also emphasized.

2. The dynamic effect

Material Design

Material Design attaches great importance to dynamic effect. Personally, I think the unique dynamic effect of Material Design is one of the essence of this Design. Many Material Design Design works only learn basic styles and use some distinctive components (such as Floating Action Button), but seriously lack dynamic Design. Such Design works are not good Material Design works (such as the domestic MDUI performance of dynamic effect is not sufficient).

The Material Design document gives a comprehensive and vivid description of dynamic effects. We strongly recommend that you enjoy the description and example of dynamic effects on the Material Design official website: Material Design document-Motion

Ant Design

Ant Design’s handling of dynamic effects is not as dazzling as Material Design’s, but it is still not satisfactory. Emphasis is placed on motion in some details, such as Modal pop-ups and folded animations, with a transition effect from the button to the center of the screen.

Ant Design separately extracts the Motion effects into Motion Design, providing the React animation scheme. Ant Design does not put forward new concepts like electronic paper like Material Design, but it also considers the dynamic effects of interface elements from the perspective of the real world. It has launched a set of animation Design language and its solutions, and thinks more from the perspective of page content presentation. Cleverly build and extend virtual space with hints brought by dynamic effects.

By comparing their treatment of dynamic effects, it is found that Chinese people have been trying to explore interaction design. However, in the daily project development THAT I have contacted, interaction design is somewhat lacking. In the projects involving interaction designers, interaction designers generally do not make extremely complicated dynamic effect design (especially H5 pages that pursue development efficiency). In projects where there is no interaction designer involved, the UI designer usually provides static drawings, and the interaction design is usually done by the front-end developer.

Any good work will go through the process from nothing to something, from something to excellence. In the stage from good to excellent, we can improve the quality of works to a higher level by implementing dynamic effects through rigorous and scientific interaction design and improving interactive experience.

3. The component library

While the Guideline alone is generally for designers, Guldeline needs to work with the component library to be accepted by more developers.

Material Design

Material Components, divided into Android, ios, Web three parts, respectively using Java, Objective-C, JavaScript implementation. Material Design Lite, JavaScript implementation.

Third-party implementations of Material-UI and Materialize are also popular.

Ant Design

Ant – Design, JavaScript implementation.

There are also implementations of other frameworks

Although Ant-Design has fewer stars, it is growing fast and has complete Documentation in Chinese.

4. Guide

In addition to the component library, design guide is indispensable, not every team or every project has a UI/UX staff support, design guidelines can be customized to guide the UI/UX staff development, can also help the front-end developer in the absence of designers can also be developed with good interaction experience and beauty of the page.

Material Design

Design guidelines for dynamic effects, layout rules, interface design patterns, growth communication strategies, usability, platforms can be said to be comprehensive and professional. For each category of guidelines, Material Design provides easy-to-understand examples in the form of graphic illustrations that are very easy for users to understand.

There are many more guidelines for other platform adaptations and mobile interactions than Ant Design.

Ant Design

Guidance on design principles, colors, ICONS, fonts, layout, navigation, data entry display, feedback, dynamic effects, interface design patterns, resources and more. Some practical cases are shown for the middle platform system, and the form has a more in-depth study, and is displayed in the introduction of the interface design mode.

Another highlight of Ant Design is that it introduces ten Design principles in plain language, with graphics showing users how to use these principles correctly in Web development, which is the concept of “certainty” in its philosophy.

Both design languages provide as comprehensive and easy-to-understand guidelines as possible, and it’s worth it for front-end developers to browse through these guidelines to learn some of the basics of design and interaction, even if they’re not using their component libraries.

5. Cost of use

Material Design & Ant Design as a Design language, there are various programming language implementations.

The cost of Material Design is higher:

  • MaterialThe concept of “is not easy to understand;
  • English documents are still not easily accepted by many developers in China;
  • Too many spatial layers (24 floors);
  • It takes a high level of visual and interaction design to really take advantage of it.

Ant Design is much cheaper to use:

  • Guideline is easier to learn and master than Material Design.
  • Sound Chinese documents;
  • No concept of complex layers and materials;
  • The component library example is relatively complete;

Five, the summary

Material Design and Ant Design are both high quality Design languages with different goals and philosophies, but both aim to solve problems more elegantly.

With the rapid development of the Internet industry, people have higher and higher requirements for user experience. Front-end developers’ programs directly communicate with users, so they should improve their visual and interactive literacy while conducting business development, so as to better understand the design concept of the developed products and give users more excellent use experience.