Learning in the MATERIAL design component

Accept Change

There are many rules for buttons only. The material design has 3 different kinds of buttons: floating, embossed and flat. Material design has a variety of interfaces, a single button is difficult to meet the needs.

In all these kinds of interfaces, it is not possible to keep them unified by memory alone. However, the material design contains 3 different types of buttons that are designed to maximize the use of designs. These options are designed to deal with situations where the conventional design is not good.

"Select the type of primary button, depending on the importance of the button, the number of containers in the screen, and the overall layout of the entire screen." "--the use of the button (self-owned ladder yo, same)

Some of the buttons refer to the south is very clear, there are some more vague. In short, the guide is well thought out. It has clear details about how to use or avoid using buttons to help designers work. This is the beauty of the whole guide, and the design decisions are given to the designers to decide.

Focus on often overlooked elements

When you design an interface, do you often consider pop-up windows or warning components? The Material design document is devoted to a section of the dialog box. Designers don't always start with these boxes. However, when used, they are still part of the design and need to be addressed.

The Guide to the dialog box section is very detailed. They outline which button should be used, and why. Also clearly analyzed the dialog box, spoke extensively and deeply.

"When the text of each label does not exceed the maximum width of the button, such as the commonly used OK/Cancel button, we recommend that you use side-by button." "--dialog box

"When the text label exceeds the maximum width of the button, you can use a stacked button to hold the text." "--dialog box

The guide details the types of content and actions that the dialog box should contain. The various details it extends to are fascinating, very interesting, because it is a frequently overlooked element. It also proves that no element is trivial to create a powerful set of style guides and design languages.

It's all about visibility.

Visibility is well emphasized in this document. Create a new, unified design language designed to provide visibility across browsers/devices. A high quality style guide can embody visibility in the design language to create a high-quality design guide.

The tab page provides visibility to display the related content groupings. A label succinctly describes its related content groupings. "--label page

The way the label page is described in the Material design document is simply fantastic. Material design does not use tabs as a kind of navigation, but rather as a way of browsing content. Seeing the limitations of these special elements, such as tabs, really makes a person's eyes bright. It is nice to know that the designers of material design, in addition to the style, also deeply consider the functionality of the elements to ensure that it is not misused.

If the functions of the different elements are clearly defined, then these elements will only be used in a specific way. This, in turn, helps to shape visibility. If an element is used in a variety of situations, it can confuse the user, which is not clear and fair to the user.

The tab page simplifies the browsing of applications, toggles different views or features, and browses the categorized data. "--label page

Create your own elements

"Dim sum cabinet as a small pop-up window, appearing at the bottom of the mobile device screen and the lower left of the desktop, provides lightweight feedback for an operation." They reside on all elements, including the Suspend Operation button. "-Dessert cabinet and toast

"Toast and dessert cabinets are very similar, but they do not contain operability and cannot be slid out of the screen." "-Dessert cabinet and toast

The Metarial design document has a very interesting chapter that describes the components called "dim sum cabinets and Toast". This is a design term that is not often heard, and dessert cabinets and toast are the design elements we know. If you read the quote above, and then look at the picture below, you will realize that the concept of dessert cabinet and toast is a simple pop-up notification.

But the knowledge here is even greater. The Material design is divided into various pop-up windows. The design language needed to be done, so it was done. The dessert cabinet resembles the toast and the dialog box, but it is different, so they are separated. The Material design separates them because it requires them to assume different functions. Creating new elements is no problem. Like every other element of material design, dessert cabinets and toast have specific guidelines--using examples, dimensioning, and color matching.

Often we forget that these elements are not used in a variety of different situations or new ways. Just to define two functions for pop-up windows, it's interesting that such simple things can work. Don't forget to innovate our design, including those elements that are considered obsolete and that you want to disappear but still exist. It's good to innovate in small details because they have a big impact on the design behind them.

You and material design

Read through the material design document and tell us what you learned from it. Surprisingly, combing through such a concise document, you can learn so much design knowledge.