Material Design: Flat but not level

Preface

This article was originally just a short article written for my classmates - because he has always believed that "Android has been a flat design since 4.0"... Unexpectedly, there are many people who think so, so I wrote such a popular science article. The whole article is for beginners and does not contain any useful information, so please feel free to read it.

Let’s start with Android Design

Look closely at this button. What do you notice?

This button looks "flat", right? But if you look closely at the button, you'll notice something - there's a one-pixel highlight around the button.

This is the "simulation" style emphasized by Android Design. The original meaning of "simulation" is to retain the "three-dimensional" properties and light and shadow effects of the control itself, while removing the imitation of materials and styles.

To put it simply, taking the button in the picture above as an example, it has thickness and light and shadow effects, but it does not look like any button that exists in the real world.

Google has emphasized the importance of "simulation" countless times in the Android Design era. The two attributes of "thickness" and "light and shadow" are reflected in a large number of controls.

"Simulation" has also become the biggest difference between Android Design and the "flat" represented by Windows Phone and the "skeuomorphism" represented by iOS 6 (and below). From the figure below, we can see how big the difference is between the three design languages ​​for the same controls.

To sum up, during the Android Design era, Google emphasized the "simulated" design style, which represents the simulation of "thickness" and "light and shadow".

Material Design is here

Since iOS 7, the flat design language once represented by Windows Phone has become popular, and the "three-way split" of "simulacrum/flat/simulacrum" has been completely broken. The discussion of "whether Android should use a flat design language" has also begun to emerge since then. However, Google chose to take a different approach and launched Material Design, a new design language of Google, with Android L at the I/O 2014 conference.

Misunderstandings about Material Design also began to emerge at this time. Some people have a preconceived notion that Material Design is a flat design language. Is this true?

To answer this question, I would like to use an analogy I saw earlier to illustrate:

Assume that the skeuomorphic style represented by iOS 6- and the current Smartisan OS represents an extreme of the design language:

The flat style represented by iOS 7+ and Windows Phone represents another extreme of design language:

Then Material Design went from one extreme to another, and then took a big step back to a "middle-right" position.

(Slide screenshot from NovaDNG)

Therefore, Material Design is neither flat nor realistic - but it is different from the "realistic" mentioned above. In short, as the title says, it is flat but not flat.

First, let's talk about "flat". The "Material" in Material Design is actually a fictional material (that's why it's called Material Design). The setting of this material is simply: the thinnest thickness, the largest area, can change shape, and can move according to rules. Since it is extremely thin (the official number given by Google is 1dp), the thickness issue is naturally downplayed.

Not only is it so thin that there is no thickness issue, but the interpretation of light and shadow has also changed. Although there is still a main light source and additional ambient light in Material Design, you can't see the obvious expression of the light source like in the above text: now their role is mainly to create conditions for shadows.

So, is Material Design flat? Of course it is flat. Without thickness, how can it not be flat?

But whether it is fair or not is another matter.

Three-dimensional Material World

Although each piece of Material is flat, the environment they are in is actually a 3D space.

What does this mean? All controls in this three-dimensional environment set by Material Design have three dimensions: XYZ.

What does the Z-axis dimension represent? That’s right, it’s the height. So what does the height of a control represent in Material Design?

It’s a hierarchical relationship.

I believe some of you must have seen this animation. After a piece of Material is lifted, its shadow appears darker than other Materials:

Why does this happen?

As shown in the above picture, the App interface looks flat on the screen, but in fact, there is a hierarchical relationship between different controls. In Material Design, the hierarchical relationship is very important. The hierarchical relationship between different controls is represented by shadows. Google provides 5 depths of shadows to indicate the level of hierarchy.

The depth of the shadow represents the height of the control on the Z axis.

Take the following figure as an example. When the layer of the upper Material is higher than the other Material, its height is also increased from 2dp to 6dp, and its shadow will be darker than the other one accordingly.

This logic is exactly in line with the situation in the real world - suppose you place two wooden blocks in parallel on the same area. If the light source remains unchanged, their shadows will naturally be the same. When you lift one of the wooden blocks, its height will be higher than the other one, and its shadow will be darker than the other one.

Google applies this logic derived from reality to Material Design. For example, when you press a button, it will float up and then fall back, and the shadow will change accordingly. At this time, it is like you "lifted" the control, briefly increasing its height, and then you release your finger, and the control will fall again due to inertia.

In summary, Material Design is not “flat” at all, but creates a three-dimensional world that emphasizes the laws of physics. This is very different from “flat”.