The Chinese translation of "matter" is "matter", which stands for the composition of matter. If placed in the design of mobile phone system, this word is easily associated with the interface style design of mobile phone system, such as imitation and flattening style. However, this time, Google's material design is not the system interface design style. Material design is actually a simple design language, including system interface style, interaction, UI and so on. In addition, for Google, material design has a very great mission, which is to create a unified design language across all devices, such as mobile phones, desktops, wearable devices and so on. Please follow the footsteps of this small series today to see the brand-new design concept of Google Material design.
System interface style
The words "distinctive, vivid and thoughtful" are the most appropriate words for Material design's interface style design. Material design provides a new visual language for Android. In the treatment of basic elements, the traditional printing design, font layout, grid system, space, proportion, color matching, image application and so on are used for reference. On the basis of these designs, we can construct visual hierarchy, visual meaning and visual focus. Carefully select colors, images, proportional fonts and spaces, and strive to build a vivid user interface to make the new system interface so beautiful.
In the choice of color, the principle of material design is "bold, graphic and meaningful". In material design, UI color matching advocates a main color and a complementary color. In the larger area, the color is 500 shades of the main color, and in the smaller area, such as the status bar, the color is darker. Such clever color matching makes the application look very bold, full of color and highlight the content.
Material design attaches great importance to the layout of the interface. As we all know, good typesetting will make the interface look very refreshing and there will be no clutter. To do a good job of typesetting, "baseline" is absolutely essential. Google's official document "Material Design Typesetting Margin" mentioned the placement of the baseline. As can be seen from the figure below, Material Design places the first baseline at a distance of 16dp, and the second baseline is aligned with the text item at a distance of 72dp from the left boundary. This alignment rule makes the interface look refreshing and has a sense of reading rhythm of printing design. It allows users to read information quickly, which is more in line with the gestalt principle.
Generally speaking, the material design has brought a reform to Android, the interface style and layout of the system have changed greatly, and the style of the Android system itself has gradually emerged. Finally, some people will say that the Android native system is ugly.
Pleasant interaction design
The interactive design of material design adopts responsive interaction, which can upgrade an application from simply displaying information requested by users to a tool that can interact with users more strongly and concretely. Next, we choose several simple dynamic diagrams to look at the unique interactive design of material design.
The above two pictures show the surface response in reactive interaction. When the user clicks on the screen, the system will immediately draw a visual graph on the interactive contact for the user's perception. For example, when the user clicks on the screen, uses a microphone, or uses a keyboard to input, a visual effect shape similar to ink diffusion will appear.
The click-float interaction in the response interaction shown in the above two figures shows that when a card element or separable element is activated, it should float to indicate that it is in an activated state.
Practice notes
From the above introduction, the material design looks very beautiful. Next, let's look at an app based on material design-inbox. It completely shows the design of materials. Full of layers, bold colors and intuitive animation.