Google Designer's material design practice experience

Not long ago, we released the Google I/O APP, the source code has been released, you are interested in, you can go to GitHub to see how we are in this app to implement material design features and details. In this article, I'm going to share some of the design ideas we have for material.

We update Google I/O-related apps every year after Google I/O, and we do this app for 2 purposes. First, let those who watch live at home, or even have no chance to the scene, more immersive understanding of the Google I/O conference. Second, we use material design language to interpret the application, and provide the source code, can be used as a demo for developers to reference.

This application is designed using the material design (translated in the official document), and features a reference to the Android L Developer Preview (Android L developer previews, which must be FQ. ), finally, the content is presented in a reasonable, consistent and tolerant manner. Let's take a look at the design ideas for this application.

Surfaces and Shadows

In material design, surfaces and shadows play an important role in demonstrating the hierarchical architecture of the application. The Material design Official document outlines a series of layout principles that give us a lot of reference to our designs and let us know when shadows should appear. Here are some of the iterations we experienced when designing the "timeline" in this app:

First iteration, two iterations, three iterations

The first iteration version is a lot of questions. First, the shadow beneath the app bar feels like there are only 2 sheets of paper in the interface: one that hosts the app Bar and the other that carries the tab bar and screen content. and the app bar under the paper carrying too much content, too complex: the original splash effect to simplify, but in real life, the larger the paper, ink evenly open the slower, so may cause a certain degree of confusion. In addition to the design of 2 sheets of paper, there is another way of thinking is to separate the label into a piece of paper, between the app bar and the content layer, but too many levels, it is easy to feel distracted.

The second and third iterations are much better, creating a clearer sense of identity between the functional interface and the content, while allowing the ink to focus on text and icons.

Another is the "surface layer" of the design concept, this in our detail page accounted for a large proportion, we have the first action is to do this: when you scroll in the detail page. The top banner fade away and convert from the image to a solid color. And the speed of the image scrolling is half of the title scrolling speed, resulting in the parallax scrolling effect. But we found that this effect and the physical laws of reality, people feel that the image of the text and image is not one, it feels like text floating on a piece of paper, both do exercise.

First edition, upgrade version

In the application upgrade of June 25, we provided a better approach, we introduced a more novel, shorter surface layer design concept, the title text to the person's feeling is no longer suspended, but the real print on the paper texture. This surface layer has a consistent color and transparency. The dynamic effect is: when scrolling down, the surface layer (and the attached button above) will be stuck to the top of the content, when scrolling upward, due to space conflicts, the content will be inserted into the bottom of the surface layer.

Scrolling effect more in line with physical laws

This method is more consistent with the law of Material design language, and the result is more consistent with visual coherence, more interactive, and more meaningful. (See Code:: Fragment, Layout XML)

Color

One of the key principles of Material design is that the interface should be "bold, graphical and meaningful", using some of the basic elements of print design to achieve excellent visual guidance. Let's take a look at these two elements: color and layout alignment.

In material design, UI coloring advocates a primary color, a complementary color. The color of the larger part of the area takes 500 tones of the main color, and the smaller parts of the area, such as the status bar, use a darker hue, for example, 700.

Complementary colors need to be cleverly applied to attract the attention of key elements. The gentle main color, paired with a slightly brighter complementary color, makes the app look bold, full of color, highlighting the content.

In I/O applications, we have selected two complementary colors for use in different situations. Most of the complementary colors selected Pink 500 (self-contained ladder), which is the more obvious complementary color, some places selected light Blue 500, more conservative, in the application, we use this color to fill the "Add to Calendar" button, The page indicator and the tag selected in the tag bar (code see: XML Color definitions, Theme XML)

Application of complementary color in app

The color selection of the surface layer of the topic area below the image is selected according to the specific topic, the specific page, the specific image color, the basic color and the image. We use the color table provided in the material design document to make a slight adjustment to ensure overall brightness consistency, as well as a sense of visual fit between the topic area and the hover.

The following image represents our quest for color matching.

The topic goes to the color de-saturation as well as the all-inclusive and version, all with hover buttons for comparison. The de-saturated version helps to evaluate the consistency of the color table brightness.

Edge Distance

It is also important to consider layout margins in traditional printing designs. The most serious "baseline" is mentioned in Google's official document material design typesetting margin. Although we are accustomed to using 4DP grids to train vertical layouts (buttons and simple list items are 48DP, the Standard toolbar is 56DP), but in material design, baselines differ from before. In general the title and other text items will be to "second baseline (Keyline 2)" (Mobile phone is 72DP, tablet is 80DP), this alignment rule makes the interface look refreshing, with a print design reading rhythm. Allows users to quickly read information, more consistent with the Gestalt principle.

Grid System

Another key tenet of Material design is that "this is a self-adapting system"

A separate underlying design system that effectively organizes interactions and uses space. Multiple devices can use the same underlying system, but the display effect is different. The display effect on each device depends on the screen size and the device interaction characteristics. colors, icons, hierarchies, and spatial relationships remain consistent.

Now, many interfaces in I/O applications need to present a collection of topics for the user to choose from. To present a collection of content, Material design offers a number of containers: cards, lists, grid systems (with their own ladders). But since we are showing the same nature, it is inappropriate to take a card because the rounded corners and shadows of the cards add too much visual interference and cannot efficiently group the rendered content. Adaptive grid is the best choice, we can define the number of changes and screen size (source code), it is also convenient to add text information.

Delightful Details

In this app, there are two details that we spent a lot of time, one is touch ripple effect/leveling effect, the other is to click on the "Add to Timeline" button when the small action.

In the ripple effect style, we take two kinds, one is to cut the ripple effect, one is not cropped, while ensuring that the color of the ripples can be customized to ensure the visible ripples in different background colors (but not too obvious, faint if the best, code see: Light Ripples, Dark Ripples)

In this application, my personal favorite part is the dynamic effect of clicking the hover button, the personality is full.

We have used a series of new API methods in the Android L Developer Preview document:

• View.setoutline and Setcliptooutline are used to clip the ripple effect, as well as dynamic shadow rendering
• Android:statelistanimator is used to achieve when the finger presses the button, the button suspension effect (actually increases the visual deception caused by the projection)
• Rippledrawable is used to achieve a uniform ink feedback effect when pressing
• Viewanimationutils.createcircularreveal used to display blue/white background
• Animatedstatelistdrawable is used to define keyframe animations to change the state of the icon (from the "+" sign to "tick")

The end result is that the entire application looks very beautiful and enjoyable, and we are satisfied. I hope you can learn from the development and design of our application.

Material Design Good article:

What is material Design? Learn the basics first!
MATERIAL DESIGN: The material world of building software

Material Design Fresh Resources a big wave!
"Fresh and hot!" A set of practical material design style materials! 》

Apple also has a change of details, take a look!
"Fresh Express!" Take a look at the 17 UI details changes in iOS 7.1

Google Designer's material design practice experience