"Material" is translated as "材料" in Chinese, which stands for the composition of matter, and if put into the design of cell phone system, this word will easily remind people of the interface style design of cell phone system, such as anthropomorphic and flat style. style. However, Google's Materialdesign is not a system interface design style, Materialdesign is actually a design language, which includes system interface style, interaction, UI, etc. In addition, for Google, Materialdesign has a great mission, which is to create a unified design language across all devices, such as mobile phones, desktops, and mobile phones.
System interface style
"Sharp, graphic, and thoughtful". Materialdesign's interface style design this time is best described in these words.Materialdesign provides a new visual language for Android, drawing on traditional typography, font layout, grid system, space, scale, color scheme, and image use in the treatment of basic elements. Working on these design foundations enables the construction of visual hierarchies, visual meaning, and visual focus. Careful selection of colors, images, choice of proportional fonts, and white space were used to create a sharp, graphic user interface that made the new system interface so beautiful.
Materialdesign's principles for choosing color are "bold, graphic, and meaningful". In MaterialDesign, the UI color scheme promotes one primary color and one complementary color. In the larger part of the area, the color of the main color is 500 shades, and in the smaller part of the area, such as the status bar, a darker shade is used. This clever color scheme makes the app look bold, full of color, and highlights the content.
Materialdesign puts a lot of emphasis on typography. As we all know, good typography makes an interface look fresh and uncluttered, and a "baseline" is absolutely essential for good typography. Google's official document "MaterialDesign Typography Margins" has mentioned the placement of the baseline, from the figure below we can see that MaterialDesign will be the first baseline placed in the distance from the border of the 16dp place, with the text items aligned with the second baseline is placed to the distance from the left border of the place of the 72dp, the alignment rules so that the interface looks fresh, with a printed This alignment rule gives the interface a crisp, print-ready look and a sense of reading rhythm. It allows users to read information quickly and is more in line with the Gestalt principles.
Overall, Materialdesign for Android to bring a reform, the system's interface style and layout have changed a lot, and the Android system's own style is gradually revealing the prototype. Finally, there will be no one to say that the Android native system is ugly.
Pleasant interaction design
Materialdesign's interaction design uses responsive interaction, which elevates an app from simply presenting information requested by the user to a tool that creates a stronger, more concrete interaction with the user. Let's take a look at Materialdesign's unique interaction design by choosing a few simple motion graphics.