字幕表 動画を再生する 英語字幕をプリント JON WILEY: Hi everybody. Welcome. So during the keynote you heard a little bit about material design, and we hope to give you a little bit more detail about that today and in the sessions that follow tomorrow. But first I want to tell you a little bit about our inspiration around material design. Every object in this room owes its origin to a few people throughout the millennia who paid careful attention to their environment. They sought out the very best materials, and they learned their properties. And they used this knowledge to make things. And when you consider making things, the design and the manufacture of things, we inherit thousands of years of expertise. In contrast, relatively, software design is just getting started. Much of interface design concerns itself with what people see. But with modern high resolution displays coupled with the ability to physically interact with the software your expectations are much greater. In fact, there's thousands of years of expectations. And so we took a step back. We looked at all of this software and we asked what is this made of? We challenged ourselves to define the underlying physics of our interfaces, and craft a visual language which unifies the classic concepts of good design with a solid understanding of the most fundamental physical properties. At first we thought like designers. How should it appear? How should it look? But then we thought like scientists. Why does it behave this way? And after many experiments and many observations we wrote down everything that we'd learned. These are our material principles. MATIAS DUARTE: Hello. In Android 4.0, Ice Cream Sandwich, we introduced a typographic magazines style UI, and a lot of people liked it. We were pretty happy with it. But design is continually evolving. Users are getting more sophisticated. The design landscape is more sophisticated. In particular, motion has become incredibly important over the last few years. We wanted something that was taking the very best of graphic design clarity, and the innovations in motion graphics, and motion communication, but that still taped into those elements of tangibility, of physicality that industrial designers themselves use. So this led us to a question of how do we do this? And the very first principle in material design is metaphor, which seems a little random. Why metaphor? Metaphor is basically a very, very short story. And like stories, metaphors are really powerful because they are deep and dense in meaning. They communicate more richly than verbal language can. If I'm writing a play or if I'm telling you about a character or a person in real life, if I say she was a hurricane, I don't have to tell you about her force of will or her indomitable spirit. I don't have to tell an actor that averting her gaze would be inappropriate. The metaphor is a form of knowledge transfer that depends on shared experience. And in fact, this capacity to transfer knowledge and to transfer learning is one of the things that defines humanity, and, in fact, defines intelligence. So for us the idea of metaphor is a backstory for the design. It unifies and grounds the design, and it has two functions. It works for our audience. We want to present a metaphor that they can understand, that they can connect with, that they can use to move faster into understanding how to use things. But it's also a metaphor for ourselves, for the designers, and the developers, and the PMs, and the QA people, everybody working together, because when you have a metaphor that everybody understands, intuitively understands, you don't have to explain how they violated subsection C, clause 2 of your style guideline. They just know it feels wrong. They know it's out of place. So why this particular metaphor? Why did we imagine a material that was a form of paper sufficiently advanced as to be indistinguishable from magic? Well, one part of it is of course that we do have a lot of experience as humanity communicating with paper. Paper is just rich in a history across all our cultures of conveying information, and it naturally affords so many different ways of interacting with it. But the other aspect of paper is that it is a physical thing. It exists in the world. And this idea that surfaces because they are tangible are a metaphor that we can use to accelerate understanding of our UI is really important. You have this perception of objects and surfaces that's happening in the more primitive parts of your brain. It's happening in these visual cortexes that are in the back and lower parts of your brain. And that means they're simply easier than language. They are more natural than language. You have this inherent understanding about the separation of things and the relationships of things that allow us to look at this and have it make sense, even though we know there is no material in the world that could possibly do this. It is irrational and yet feels completely natural. And that's what we want when we're creating digital, magical interfaces. Right? Because we are not constrained by the laws of the real world in our user interfaces. Surfaces are intuitive. And that's why we use them as the foundation. They organize space and rationalize the interaction. And it matters that you preserve this inherent sense of what's right. Not for the sake of artifice, but in order to make the mind work less. One of the things you'll discover in our material design documents is that our buttons rise to the surface in response to touch instead of syncing into a surface, like a fake, plastic button would. And we do this because we want this illusion to be consistent. The idea that when your finger touches that glass on your phone that surface is coming up and meeting your finger at the point where it touches. JONATHAN LEE: Content is bold, graphic, and intentional. We pushed ourselves when we were thinking about material design to make clear and deliberate design decisions regarding color and topography. So embracing these classic visual design principles Jon and Matias have both spoken about in our new framework. With Ice Cream Sandwich Android introduced a new system font, Roboto. And today we're updating Roboto to go beyond phones and tablets, and be the default typeface for the material UI. Here you can see the current version of Roboto. And Roboto is now slightly rounder, friendlier, and most importantly, redrawn to perform on desktop and beyond. And I can tell you from personal experience that it handles really well. We also developed and documented our design guidelines for typographic scale. By using one typeface and a handful of weights for emphasis we believe that it delivers consistent and clear hierarchies in your products. Using scale and appropriate display sizes you can create dynamic, print like layouts with using white space and contrasts. This focuses your users on the content that really matters. Using vertical key lines and baseline grids content is bold, elegant, and graphically clear. We also developed a complete color palette with intentional color decisions for shades, tints, and accent pops. These are not just adding white and black to a color, or using alpha. We actually looked at each of these shades and decided what they should be. So strong and intelligent application of color gives life to your UIs. And it connects users with your brand. It also can create very strong hierarchy and liven up some pretty standard UIs. As you can see in this example, it's essentially some kind of form that you're filling out. And there's a clear area for your title, and that's what we want people to focus on. Dynamic color is also really exciting. Earlier today Matias announced a new API in the L preview called Pallete. This system really makes it easy to color things, dynamically select, and extract color for use. One of the things that you could use color for is contrast accent colors. Contrast colors make this floating action button, which is the play/pause button really pop. Brand, color, and icons are accelerators that guide users through your design. When think about app icons we looked at real life studies in lighting and shadow. We started by defining a universal grid for app icons, one that supports primary geometric shapes. A product icon is the first literal touch point of your user's experience. We looked at extracting those attributes from your icon, and from your brand, and intelligently applying those to the surfaces within your UI. The top toolbar and the floating action button, again, are accelerators for those actions. Here's just another example of how to connect those services to the product icon. And finally, we took the same modern, bold, geometric approach from app icons and applied it to the UI icons you see in your app. Our design teams are now using one common set of icons between Android L, Polymer, and the web. This means one trash can across all devices. And we'll be releasing these icons later this summer through our design guidelines, available for use on both Android and the web. CHRISTIAN ROBERTSON: All right. So even if we're doing all this, and we've got great typography, as an industry we're leveling up when we start using baseline grids, we've got amazing color, it's not enough just to draw the static states and stop there. We can do more to show people how the states are changing, letting them focus on the content that matters. So when you think about it, almost all state changes in the UI start with user input. And this is why material UI puts that user input at the center of the animation story. So when I touch the screen immediately the surface responds. I can see exactly where I touched, and the intersection of the object that's responding. This does two things. First, it tells people that they've been heard. They feel powerful. They feel like they're in control. Apps feel responsive. Second, it confirms to them that the UI is going to do the thing that they expected, that it's working. This animated touch feedback is now built into the platforms for both Android and Polymer, and it's being used by all of the relevant components. So it's not just the immediate feedback though that's centered on user input. The material itself transforms to bring in new content. And all this happens on a shared stage. When I say I shared stage, I'm talking about the environment where this material lives. It's important to know as we're looking at the material that it lives in the same scale and in the same space as we do.