During this period of time, IN order to research the controls, I took a close look at Material Design and found many innovative, useful and interesting things. If you want to take a look at the Material Design translation or control directory, you can find many of these resources. Therefore, I will not add to the cake. What I write here is mainly what Material Design brings to me to break the limitation of thinking, so every point is the key point of careful selection.
What is Material Design? This is a set of interface Design specifications for visual, interactive and front-end Design proposed by Google. Its goal is to capture classic Design principles in a visual form that will present cutting-edge innovation and technology possibilities, and unify devices of all sizes and types based on mobile.
In an era dominated by touch screens, hover has to fade away
Whether it’s dropdown boxes, buttons, hidden menus… Material Design either dispenses with the hover state entirely, or simply treats the hover state as an irrelevant visual feedback. I’m a little reluctant to give up the hover effect, but I have to admit that the future is the era of clicks and gestures, and hover is slowly on its way out.
Never assume that the user’s device size is what you can expect
Especially for designers with larger screens, don’t be fooled into thinking that a page that works on your screen doesn’t need to be rolled on the user’s device. In a future of increasingly diverse devices, scroll bars will not be an option, but an adaptation. So always let the control buttons at the bottom of the page float to accommodate a too-short screen.
The object of shadow is not beauty but depth
Google’s emphasis on hierarchy is one of the things that sets it apart from Apple. Material Design believes that the interface is not only planar, but also can have vertical height difference between elements, so the way to reflect this height difference is shadow. Material Design uses the same unit (DP) for both vertical and plane dimensions, and unifies shadow styles for different vertical heights. The result is a three-dimensional world stacked with layers.
Size for ease of use
It is a controversial topic whether interface layout and element size should be determined by interaction or by vision. Personally, I think size should start from interaction. If you have other ideas on visual design from the perspective of aesthetics, you can discuss and modify them on this basis. Because interfaces aren’t meant to look good, they’re meant to be used. Elements that are too small, too large, or not uniform in size can affect usage, so these are all things that must be considered for interaction. Material Design gives a size limit of 32DP (0.508mm), specifying that the minimum size of buttons and labels should be this high to ensure the touch screen is comfortable to use.
Hiding depends on necessity, not space
I admit and reflect that, until yesterday, MY practice was to put everything possible on the screen, and when it seemed too much or too much, I hid some of it by means of “more” ICONS. There are a lot of problems with this. If the user’s screen is big enough, then nothing needs to be hidden? Of course not. No matter how much space there is in an interface, attention is limited. So Material Design advocates showing only the necessary elements (maybe just one or two) and hiding the rest.
Careful with color
I don’t know if this is another step into the territory of visual design, color is indeed another topic that needs to be discussed jointly by visual design and interaction design. Most of the time, adding a color, or not adding it at all, doesn’t have much effect on aesthetics, and if so, it’s best not to add it. The world’s top design firms are pretty stingy with color, because the point of an interface is to use it, and the more color there is, the more intrusive it is (and the less extensible and brand identity it is).
Let the only thing that really matters break out of the box
Interaction design can be disastrous if done haphazardly; But if you do it rigorously, sometimes it gets boring. We can find a breakthrough and do something different, something that breaks the mold, but it has to be something really important and unique. This is easy to understand, if only one thing is different, then the picture will be interesting, but if everything is different, it will be confusing. Material Design’s circular hover button is the only thing that really matters.
Pop-ups don’t have to be complicated
I’ve never really looked at the title of the popup, although I know that most pop-ups have titles. A lot of people complain when pop-ups don’t have a “cross” in the top right corner, but they don’t really need that “cross”, and everyone knows that clicking outside the box will make the popup disappear. Material Design is very flexible with the use of pop-ups. In this case, if the popup is just for adding a comment, remove the title, ok buttons, and cancel buttons to make it easier to use.
Not the eye tracking element, but the element tracking the eye
As I mentioned in Design for Skilled Users, it is important to consider and even calculate the number of steps and distances the user moves. This alone may not be enough, but it is best to avoid even eye movement as it takes time to refocus. In the above image, the text area on the popup overlaps with the comment area below the popup, which prevents the user from moving their eyes multiple times. Material Design also applies eye tracking to the drop-down box. When you click on the drop-down box area, the options completely cover the previous drop-down box area, and the sequential options scroll automatically so that the default options are just above the previous drop-down box area.
Careful card
Ever since the iPhone made rounded shadows popular, there have been abuses in many places, and the “card style” has been on the rise in recent years. Material Design advocates making cards with sharp rounded corners, combined with strong shadows in depth, so that they can be distinguished from other areas. However, cards are not recommended in information-intensive areas because the borders of the cards can interfere with concentration.
Let information fragment
We rarely read anything honestly and completely. When we read a book on a page, we often scan and turn the page to find something interesting to read. When browsing the web, we also want to be able to scan the interface for something that interests us and then delve into it. As a result, designers often just throw out “leads” that users can follow if they are interested in finding what they want. All information presentation should be fragmented, focusing on richness rather than completeness.
Please inform me of the reprint, and indicate the source and author
Check out the original text of Zhihu