About Android Lollipop

For some replacements for previous features:
1.app Bar Replace Action Bar
2. About the shared elements animation demo:
Http://material-design.storage.googleapis.com/videos/animation-meaningfultransitions-view_contact_large_xhdpi.webm

Peng
Links: https://www.zhihu.com/question/24276709/answer/27693028
Source: Know
Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source.

Turn over the wall and learn the official code:
Http://www.google.com/design/spec/material-design/introduction.html

A few surprise points:
1. Cards
This should be the most ingenious and practical result of Google's years of style exploration. Waited so long, finally in material design by Google righting, I even feel that the entire material design is around the card this idea born!

Google's use of the card scene, appearance, interactive way to do a very rigorous specification

But on the one hand Google is still very restrained, in the specification highlighted some unsuitable for the use of cards, such as the display of a list of similar content, cards such a strong block segmentation will lead to a decline in browsing efficiency.

2. The concept of Z-axis
The layering of elements on the screen, through layout and shading, makes it easy for users to understand the importance of elements and their relationships with each other.

While Apple's IOS and OS X have used a lot of shadows, there is no concept of Z, and more is a decoration. So Google says: Depth is not ornament. The sense of depth is not for decoration but for function!

For this reason Google is incredibly insane to define 5 different z-axis states, and their corresponding shadow size!

In actual use, such as, the shadow can give a good outline of the button, so that the button highlighting, feeling floating on the white background, there is the impulse to press down.

3. Meaningful animations
The Material Design specification, the animation alone out of a chapter particularize, and placed in the second chapter (the first chapter is a guide), it can be seen that Google's long-term animation in the subtle effect of Apple to prepare a blood before the determination of shame.

In addition to emphasizing the importance of animation to the interaction, Google also proposed to make a meaningful animation effect, the specification of elements in the animation transitions in the performance of three categories:
Entry element
Exit elements
Shared elements
The first two are well understood, such as the contact picture and name in the share element, that is, the element of the interactive implementation. This makes it easy for users to focus and easily understand the relationship between elements before and after transitions.

Do not support GIF, please go to the original address to see the effect: (may need to turn over the wall)
Http://material-design.storage.googleapis.com/videos/animation-meaningfultransitions-view_contact_large_xhdpi.webm

In addition, this section of the animation rate, layering, details and other explanations are also very enlightening.

Some other optimizations for Android legacy features
1. Drop-down menu
The Android 4.X era spinner is directly upgraded to Menu, and the expanded style is easier to understand in the original location. I'm going to puke. The controls on IOS that have been lacking such a simple, lightweight drop-down menu ...

2. Tips
Replace the Android 4.X era with Snackbars Toasts, you can choose whether to include an Actions button, and finally can be native to Gmail for Android to delete the effect of the undo when the message.

3. Drawer
Also the Android 4.X ERA drawer navigation, also known as Side Nav, from the z-axis to see Side nav is on the top floor.

4. Button
The specification is redefined for all buttons:
Floating action button: Floating buttons are live buttons on the page, only one in the page, which represents the only action on the page's core
Raised button: Use when highlighting buttons when used for mixed graphic display
Flat button: For dialog boxes

The floating button can be said to be a very bright eye in Material design, but also a bold one, in order to prevent misuse, Google has done a lot of specifications to explain the use of the scene ...

The part of the compliment is over, the following is The Spit Groove:
All in all, in the field of mobile device interaction design, Google is slightly more immature than Apple.

Apple's 6.0 Design Guide (IOS Human Interface Guidelines), in the two chapters on interface design principles and user experience Guidelines, devotes a lot of space to the reader's understanding of the design of the smart device age, and reads like a white bearded old man sitting in front of you, Open a thick history book and make a statement: "Long ago ..."

After all, Apple redesigned the handset and redefined the human-computer interaction guidelines for smart devices, a follower of both Google and Microsoft, a follower of impatience in their design code, eager to preach their language to the developers, instill their ideas, More like a manual, not a textbook.

(Of course, Apple in the iOS7 updated HIG, about the principles and guidelines are also a lot of reduction, so the sense of iOS7 design language to launch a relatively hasty, there are a lot of contradictions and difficult to self-consistent place, it can be seen that Apple is not perfect, and still in continuous improvement)

Google's big move, there is a feature is the whole platform of universal design language, I understand should be the main purpose is to standardize their product line, followed by the guidance of Android manufacturers follow-up, as to lead the design trend, I think Google can not be such a heat, and no such ambition ...

About motion in Android material design:
1. About movement:
http://www.google.com/design/spec/motion/movement.html#
2. About choreography (mainly shared elements):
http://www.google.com/design/spec/motion/choreography.html#
3. About duration and easing:
http://www.google.com/design/spec/motion/duration-easing.html#

an interpretation of Android material Design :
Liu Yan
Links: https://www.zhihu.com/question/24276657/answer/27262112
Source: Know
Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source.

Refer to The Verge's interview with Matias Duarte:
http://www.theverge.com/2014/6/27/5849272/material-world-how-google-discovered-what-software-is-made-of
Note that this paragraph (underlined and bold is the author's addition):
Material Design "Unified US thinking," Duarte says, admitting that "it ' s absolutely a constraint." These constraints, he says, made design decisions easier and more consistent. Take, for-example, the idea of flipping a card-over-to-see-the-back. In Material Design's world, that's a cheat that doesn ' t work. It's as if the software is actual, physical stuff inside these devices, and there's not space inside a phone to flip a car D over, so Google doesn ' t allow itself to do it.

Material Design Principles This session specifically mentions: these floating pieces of paper, the scale and mobile phone is the same; the screen is not the window of another world. What does that mean?

Material is metaphor, this is a metaphor for the whole cell phone, how do we understand this flat black box in hand?

The early iphone was the "hundred-variable Box" that, by running different apps, simulates a variety of things we're familiar with: cell phones, cameras, calculators ... Within the limits of screen technology, apps try to get close to the objects they want to emulate. In this metaphor, the various buttons on the screen should have been highlighted outside the screen, although we cannot simulate this effect on the tactile.

Windows phone refuses to use metaphors at the phone level. A mobile phone is a brand new item without simulating other items, and the screen's properties are pixels without having to emulate the properties of other materials. WP's screen is completely flat, there is nothing back and forth, all UI elements are on the screen surface.

Android didn't seem to think much about this level until holo. The Android UI inherits the desktop UI, which is primarily functional.

Where's iOS7? From the point of view of shrinkage, perspective and the heavy use of frosted glass, it seems that the screen is viewed as a window to another world. The UI element may be located quite far behind the screen, and the screen itself can move freely in the virtual world.

Back in material Design, these floating little pieces of paper, "real" floating in the small box of mobile phones, and the screen is a piece of transparent glass, the user can see through it inside the box. The depth of the UI through the shadows should not exceed the thickness of the phone itself.

Summarize:
IOS (1-6): The phone is a hundred-variable box. The UI is highlighted on the screen.
Android (~kitkat): The phone is a small computer. What the UI has not thought about.
Windows Phone: The phone is the phone. The UI is on the screen surface.
IOS7: The mobile phone is the mirror that observes the different world. The UI is in another space.
Android L: The mobile phone is a box with a glass lid that floats with small pieces of paper. The UI is inside the box.

P.S.
When it comes to the paper in the box, the first thing to think about is paper mario:http://papermario.nintendo.com/

Look at keynote when material design This formulation is very puzzled, because the new UI style does not pay attention to the performance of materials, also does not reflect the physical characteristics of the paper.

But after looking at material Design's panel, I think Matias Duarte really has two words to say the core of material design, that is the so-called material, not paper/frosted glass/leather/wood, but a kind of in reality does not exist "Magical material".

1. Material, that is, the elements on the screen or objects similar to real-world materials, have similar physical properties (the shape is fixed, occupy a certain space, there is a front and back occlusion relationship, will cast shadows, can move ...) ）。 In contrast, Metro (more extreme) and holo (more moderate) tend to have elements on the screen that need only the attributes of the pixel itself, rather than simulating the real world.

So we see that in the trend of removing shadows, shadows become ubiquitous. On the other hand, because real-world objects usually do not appear and disappear instantaneously, in a vacuum, panning, rotating, expanding, and flying out of the picture instead of the transition animation that originally appeared from the middle of the screen.

1. Magical that this material does not mimic a specific material in the real world. One of the problems of quasi-materialization is that users have a lot of expectations for real-world materials. By drawing the interface too much like a real object, you can't achieve the user's expectations. For example, you can draw on the screen like a paper address book, but users expect the paper Address Book can be page, can be folded, can be used pen annotations, and even the touch of paper, and you did not do.
   
   In contrast, it is easier to control the user's expectations than to visually simulate a particular material. A card made of unknown material, the user's expectations may only be movable, and this is precisely the metaphor we want to express through the card.

2. The other side of the magical is that this material is not subject to real-world material limitations. Still take the packing quality address book as an example, the user does not expect the text on the paper can slide up and down, on the screen to achieve this function will be contrary to the user's knowledge of the material.

This abstract, "magical" material, when necessary, is not subject to real-world rules. For example, a large number of use of the card stretch deformation animation, on the one hand in line with daily experience, deformation to be continuous animation rather than instantaneous completion, on the other hand we do not have to worry about and show how the card is stretched (such as the performance of the reel), it is a magical material anyway. And as UI elements have a relationship and cast shadows like the real world, we don't have to think about how they hover in the air or add support structures.

Conclusion: We should make full use of the real world metaphor brought by "material", and not be bound by the law of the real world. Material design looks right, but it's hard to grasp.

About Android Lollipop