B1 Intermediate US 2383 Folder Collection
After playing the video, you can click or select the word to look it up in the dictionary.
Loading...
Report Subtitle Errors
RACHEL BEEN: Hi, I'm Rachel.
VIKTOR PERSSON: I'm Viktor.
HANNAH CHO: Hi, I'm Hannah.
CHRISTIAN ROBERTSON: And I'm Christian.
And we're designers that have been working on this material
design project, helping our various products at Google
to bring the material designed to it.
So yesterday in our keynote, we introduced this concept
of material design.
And it's a system that uses the classical tools
of print-like graphic design, along
with some new dynamic surfaces that
appeal to our innate understanding of physics
and material.
Today we're going to talk about how some of the visual design
concepts help to define that system.
So, it's not often recognized about design
that a good portion of it happens behind the scenes.
People don't actually recognize-- or notice
actively-- a lot of the choices that we make as designers.
Sometimes even people thinking about visual design
think of it as a skinny, or covering,
that's kind of happened at the very last moment.
And today we want to show that beauty isn't skin deep.
We're going to challenge the idea of visual design
as a skin.
We want to talk about the visible and invisible
structures that make the material UI work.
So, we'll show how invisible grids
can hold the structure together.
We'll talk about the rules behind the scenes that
can help us have better imagery, and we'll pull the camera back
to show the lighting and the shadow systems.
So, I'll start with one of the more invisible, yet visible
everywhere, design practices-- typography.
Typography's a lot more than just the choice of typeface,
but the letter forms are a good place to start.
So, I'll start talking about Roboto.
Roboto's a custom typeface that's
designed with UI specifically in mind.
It's a digital native.
And we're using a new cut of Roboto
as a default typeface for the material UI.
We've extensively reworked the outlines
to make sure that the types work, not just
on mobile and tablet, where we've started using it,
but across the various form factors
that we're now covering.
So, here's some of the changes.
This way you'll be able to pick out the new version
from the old version and impress your type-obsessed friends.
So, we've calmed down some of the more unruly characters.
We also rounded out the squarer sides on the caps,
as well as the dots and the punctuation.
We also completely redrew the numbers.
And, getting into the details, we reworked all of the italics
so that we have better optical correction
to the diagonal strokes.
So, if you look at the right leg of the A versus the left leg
of the A, you might notice a very slight difference.
So, really we treat almost every single glyph
to polish and tune.
There's a lot of changes in the spacing and the metrics.
I'll spare you the rest of the details.
But the typeface itself really is only a part of typography.
In fact, if you call a type designer a typographer,
he'll point out the difference between the two.
Typography is the use of type.
One of our design principles was to enable content that's
bold and graphic and intentional.
And this graphic character starts with the typography.
In fact, when you actually look at UI's, it's
clear that on almost every screen,
type is the primary element.
So, if I block out just the type on the right,
you can see how the screen really
is structured by the typography.
In fact, this is a good exercise--
as you're designing things, just block it out and just
look at the type itself, and see if it contains a structure.
UI design really is typography.
If we're drawing screens, whether we know it or not,
we're typographers.
So, this design system uses really big type
to be expressive, but also to create
clear hierarchies of information.
It's tempting when we're doing UI design to--
just because we're always dealing
with dynamic content-- it's tempting to just
use the smallest size possible, because we don't know
in a music player if the band name is going to be super long,
or we don't know if in a calculator
that we're going to have a calculation that's super long.
Instead, we can use large type and then adjust the size
to accommodate the copy as needed.
So, it's these large display sizes
that are also another opportunity for branding, where
you might consider using a custom type,
commissioning a new type, or even licensing a type.
It's easier than it might seem.
So, to help us manage the sizes, we
use a tool called the typographic scale.
This isn't a new idea.
This has been around in print for a long time.
In fact, the classic typographic scale
uses the same math as the musical pentatonic scale.
It makes sure that there's enough contrast at each step.
And what it really does is it reduces
the amount of distinct sizes on any one screen,
so that information is clear, and you
can tell those differences.
A good rule of thumb is if you're using more than two
or three sizes on one screen, you
should make sure that there's a good reason for it.
And if you are using a size that's
not in the typographic scale, there
should be a really good reason for it.
Ultimately, though, the purpose of type
is to serve the content.
It's to help people quickly parse and communicate
the information.
And while typography uses up a good portion of our screen
real estate in many ways, it's hard to beat imagery--
photographs and illustrations-- for impact.
RACHEL BEEN: So, this epitomizing phrase
that we've been hearing a lot of content
being bold, graphic, and intentional
is especially apparent with the use of imagery in product.
So, we aren't here to encourage specific aesthetic identities.
Product brands range from being subdued and muted
to really bright and colorful.
And our intention isn't to prescribe brand.
What we want to encourage is intentionality and
thoughtfulness concerning imagery, backed
by supported principles and best practices, to make your imagery
and your products come to life and feel really differentiated.
So, we define the main principles
of imagery in a three-part statement--
be personal, be informative, and be delightful.
So personalize the imagery, where
applicable, to make your product feel relevant.
A degree of intelligence is automatically
communicated if imagery accurately reflects the user.
Inform the user with a visual translation of information.
This facilitates comprehension, and allows
for expedited understanding of information.
And delight.
Delight doesn't mean adding superfluous, fluffy imagery
just to fill space.
Delight really implies aesthetic thoughtfulness,
combined with appropriate contextual use.
Delight can make your product feel not only special,
but really considerate of the user.
So, some additional principles to talk through.
Imagery doesn't have to be consistently
conspicuous to feel appropriate.
So, this concept of being immersive, right?
The image above is a great example
of using imagery to create context and interest
without overpowering the primary information.
The artist portrait is a textual background
for the interactive music content,
which is the primary focus.
Use appropriate imagery hinting at contextualization
to create this type of depth and texture in your product.
So, be thoughtfully ubiquitous.
So ubiquitous imagery, similar to delight,
doesn't imply superfluous use without a rationale.
Ubiquity here implies searching for very intentional
visual opportunities, where previously there
might have been disparities.
So, look for these moments to introduce imagery
that supports information personalization and delight.
So, context.
User should feel that, in every instance, imagery is visible.
It feels relevant and appropriate,
and not disorienting or misleading or out of place.
So, this doesn't always mean that imagery
has to be a literal translation of surrounding information,
right?
So, the example above is perfect.
We don't see the literal facade of the location of your event,
rather, a feature image from the location that provides context.
But context in the type of context,
such as cuisine, and the general aesthetic and vibe,
and potentially even the time of day.
So, this contextual accuracy, combined with really beautiful
imagery, will create the best possible experience
for your users.
So, best practices.
I want to touch really lightly on some overarching practices
when creating or commissioning imagery.
From an aesthetic perspective, the main goal
is to create beautiful images, right?
Your users will feel inspired and excited to use
your product.
But beautiful imagery is a somewhat broad and amorphous
term, so here's some overarching tips basically
to point you in the right direction.
Ensure that a clear concept is conveyed in a memorable way
with having a point of focus.
This doesn't necessarily literally
translate as a single point of focus in your image.
Focus more so conveys that there's
clear representation that won't be lost on the user.
The user should be able to parse almost immediately what
the visual represents.
Building narratives take this concept of focus
and adds some flavor, right?
Is the mood of the image aspirational, somber,
celebratory?
So, this example of Miami is not only visually informative--
in terms of the location that the user's travelling
to-- but it's meant to also be an aspirational and immersive
image, creating really positive connotations with
your location.
So, all imagery is an editorialized decision, right?
So make intentional decisions about the narrative
of your product through imagery.
I want to end up this section about imagery speaking
about some UI integration, and how
imagery lives within the material design structure.
So, scale.
Not all assets hold the same visual weight.
An avatar in an account switcher is purposely
smaller than a main hero image, because of information
hierarchy, right?
So, be mindful of these scale differentiations
between imagery types such, as avatars, feature images,
et cetera, as well a similar asset types,
such as thumbnails within a gallery experience.
Scale in a hierarchy imply importance,
and not all of your assets are equal.
OK, So this seems obvious, but make sure
your images are appropriately sized for their containers
and across platforms.
Material designed really emphasizes
large containers, large real estate, and ideally
these assets should not appear pixelated
in your container's cross-platform.
So also, as you can see in many of the vignettes,
a lot of the UI color choices reflect content, right?
So, this was spoken about the keynote.
So, color and imagery and material design
are really symbiotic.
These bold color bars, action bars,
should look to a really intentional color sampling
story.
This not only creates a perceived intelligence
concerning the content, but will make your product feel unique.
We're building a support library called Palette, which was also
mentioned in the keynote, which is part of the Android support
library and will be part of the L Preview release.
You will be able to use it pretty much right away.
So, what the library does is automatically
extract a color palette based on a particular image.
We're still iterating on the algorithms
and the API's, so expect improvements
on this in the future.
And Viktor is going to speak more
about color in a little bit.
So, before I end, I want to talk about different image types
within the container, so you can start naming these asset types
and thinking about how to use these.
So, avatars and thumbnails.
Avatars are representations of entities-- brands and people--
and most commonly displayed in circular form.
Thumbnails allow the user to peek
into additional visual content, usually surrounded
by heterogeneous information, such as copy, titles, et
cetera.
They're always actionable into a more immersive view.
And I think this is the primary point of what a thumbnail is.
They're always thinking at more.
So, thumbnails are great assets to introduce and really tighten
constrained spaces.
In material design, we're introducing two types
of hero images-- featured heroes and integrated heroes.
A feature hero is really a bold, primary point
of focus, surrounded by a heterogeneous layout
with additional information.
But the user's eye should really look first
to this visual while still interacting
with the surrounding content.
Integrated heroes create a setting
for heterogeneous pieces of content within a layout.
They're not the primary points of focus,
but more add texture and depth to the scene.
Gallery images.
Well, gallery images are the most bold visual hero images
within your layouts.
Usually they're homogeneous layouts,
and these are visual heroes without
any other visual distractions.
These are the strongest and most unobstructed views of imagery
within your product.
So overall, imagery is a vital part of material design.
Thoughtfully incorporating informative, personal,
delightful imagery in your product,
while considering some of these best practices,
is really going to bring your product to life,
creating really memorable and beautifully crafted
experiences for your user.
So as I mentioned before, imagery is really
united with color, so Viktor's going
to come up and speak more about that.
VIKTOR PERSSON: Let's talk about color
and how to use color to enhance your branding and your user
experience.
The material design system enables bold and intentional
use of color, and I figured the best way
to show you this is to design an example app.
When choosing your color theme, you
should really use your brand colors.
If you happen not to have brand colors,
we've actually created an extensive color palette
with beautiful colors that we use ourselves
to define our own color themes.
This example app's primary color will be indigo blue.
This is the main color of the app.
So, if your brand color is red, for example,
this color should really be red.
Bold and immersive use of color is strongly encouraged.
With that said, not all screens are the same.
Density of color depends on the density of content.
So, in a screen with very little content,
it enables bolder use of color than, let's say,
a content-heavy list view.
Here are a few good examples of how
bold color is applied in more generous ways.
It brings to life otherwise utilitarian experiences,
such as the calculator, or how it
can complement immersive imagery.
OK, let's move on and choose the accent color for this app.
This color is to provide contrast
for important buttons, UI elements, and components.
Don't choose an accent color that
doesn't provide enough contrast.
This color is really supposed to pop.
Here are a few good examples of how an accent color can provide
the right focus and attention to certain areas or components.
If you've chosen an accent color that
doesn't work in certain circumstances, don't worry.
You can always fall back to a lighter or darker tint
of that same color.
Pull those colors together, and you'll
get your basic color theme.
We are very happy that we've baked this into the Android
platform and made it a lot easier for you
guys to define your own color theme.
And remember, the strongest tool we
have to unite a user experience across multiple platforms
and devices is color.
So, we talked about the design principles.
We talked about typography.
We talked about imagery and color.
Let's bring them all together and design
a beautiful and consistent UI.
As Zach mentioned earlier in the direction talk,
over the course of design history,
there have emerged rules and guidelines
that we as designers are really, really excited about that we
baked this in and included in the material design system.
So here a few examples of these rules and guidelines.
So, structural elements in the material
designed system aligns to an 8dp grid.
This will provide consistency, harmony, and rhythm
to your designs.
Content should follow a set of key lines.
16dp and 72dp on mobile, 24dp and 80dp
on tablets, desktops, and larger screen sizes.
As you can see here, it really orders the content
and structures the content so that it becomes
more predictable, and your user can read this content
a lot easier and faster.
Increments is an excellent tool, or help,
to determine the size of larger structural elements,
such as the app bar or the nav drawer.
The increments are based on the standard app bar height, which
is 56dp on mobile and 64dp on tablets, desktops,
and larger screen sizes.
When setting your type, make sure to align it
to a 4dp baseline grid.
This will make your typography and content easier
to read and make it aesthetically more pleasing.
I'm sure everyone here at some point
has seen a design or an app and just felt
like, oh, there's something off.
Not aligning your type to a consistent baseline grid
might very well have been what was the problem there.
Let's go back to our example app again and apply these rules
and guides that we've incorporated in the material
design system.
This is going to be a fairly straightforward list view app,
but I wanted to enable bolder use of color,
as I talked about before.
So, I made the app bar 3x of the increment.
When designing your layouts, start thinking in blocks.
This is extremely helpful, and will make your design process
easier, faster, and, I would say, better.
For this app, I'm going to use an avatar to the left,
with two lines of text next to it.
So for that I'll use a block of 72dp.
When placing in your content, as I said, follow the key lines.
In this example, the 16dp and 24dp key line
is reserved for icons and avatars.
That means that your typography and text
should follow the 72dp and 82dp key line.
As you can clearly see, it provides a structure
and a predictability to the eye that
is just very user-friendly and easy to scan.
Last but not least, remember the baseline grid.
Align your typography to the baseline
grid to achieve better typography.
And there we have it.
By using these-- I would say almost magical tools
and guidelines, as well as fundamental tools
and guidelines, we've created a bold, beautiful, user-friendly
UI over multiple platforms and form factors.
Over to Hannah, who is going to talk
about surface and dimension.
HANNAH CHO: Thank you.
[APPLAUSE]
HANNAH CHO: Yay.
OK, so Viktor just went over on the details
of how to create a layout.
In material design, you have to also consider
how these elements live and move in 3D space, not just 2D.
We can model how people perceive material in our UI to group
and structure our content.
The use of surface and material can solve spatial issues,
and they're not meant to be used just as decoration.
So, in material design, we use this technique
to give our UI dimension.
So, we interact with physical objects every day.
The tangible qualities and shadows
help us to quickly understand affordances.
So, we were inspired by the tactile qualities of paper
and studied how light interacts with the material
to creator our shadows.
We didn't just apply this approach to our UI.
We actually did a lot of studies.
We recreated our icons by folding actual pieces of paper
and placing them in different lighting set-ups
to understand exactly how those shadows should be constructed.
These are actual photos that we studied-- the studies
that we did-- and you can see all the cool things that
are happening in these photos.
There's soft ambient shadows caused by the light,
and you can see how the light is being reflected off
the paper, causing subtle highlights on the edges.
This process allowed us understand
how we can realistically recreate
the subtle highlights and consistent shadows in a layout.
So, how do we create the shadows?
There's supposed to be animation OK.
Imagine this animating.
So, how do we create these shadows?
In order to make our shadows feel real,
we needed to create a technically audacious system
that did more than just pre-render a static drop
shadow.
So, with our amazing engineering team,
they built a system that uses real-time soft shadows.
The shadows are projected from a virtual light source that
are also being rendered through a camera.
So, this allowed us to have consistent set of transforms
that keeps this illusion alive as the users move
from a screen to screen, or between apps.
This is the virtual light source animation
that didn't play earlier, and there's the virtual camera.
So, these two types of shadows make up
the shadow layers we use in material design.
The key shadow creates the illusion of depth,
while the ambient shadow defines the form of the material.
Together, the shadows create a halo around the material
without needing to use a hard stroke to create an outline.
Aha, animation.
OK.
Shadows also create the separation between surfaces.
What this means is that the depth of our shadow changes
scale and focus.
So, elements closer to the camera
have more diffuse shadows, and elements further away
from the camera, the shadow becomes more focused.
So, the strength of the shadow really
determines the perceived depth of our material.
You can really see the differences
between the perceived depth in these two examples.
The scale of the shadow helps to show
where these elements live spatially.
In the example on the left, the surface of the dialogue
is closer to the camera, resulting
in a softer shadow, where as in an example on the right,
cars are further away from the camera,
resulting in a more defined shadow.
And, because our shadows are dynamic,
they also move in space, depending
on the location of the material as the camera is fixed.
Like this example, when you start to see the shadows
move from the left and right and how
it's moving below the surface, you
can clearly see how the surface is being brought to life.
All of these details might be subtle,
but it really makes up the whole experience.
The shadows provide a familiar visual cue
that we just naturally understand.
So, all of the theory behind shadows
may sound super complex, but don't worry.
They're all built into the system.
Designers can download an illustrator file
that has the shadows.
And you guys can use them to design your mocks,
but don't use them to make assets.
Engineers can simply set the z-height value
and get system shadows for Polymer and Android for free.
Now that we've covered how the shadows are built,
let's look at some examples of how they are used.
A good way to think about these surfaces
is that they're tools to help focus attention
and create emphasis.
So FAB-- a floating action button--
is a great example of how we use surfaces
to help focus attention.
Just by virtue of being its own separate piece of material,
FABS have the most prominence in our UI,
and this really helps to promote the action.
A dialogue with another great example.
Bringing a dialogue to a surface creates an isolation
of the content, and allows the users
to focus on things that require either a decision or action.
Here's a bad example of how you could overuse shadows
and dimensions in your layout.
Having a surface on surface in this
is layout distracts from being able to focus attention.
So, if you see that your design requires too many layers,
then maybe your content is too complex.
Shadows should really be used to determine the surface where
you want your primary content to be.
Surfaces are powerful grouping tools for our content.
Like in this cars example, we can use surfaces
to group complex content into a digestible view.
This creates a visual system that
keeps our layout clean and beautiful
by organizing our type and imagery,
especially with complex data.
But, we want to avoid using surfaces
when it's not necessary.
In this list example, separating each list into cards
adds unnecessary visual noise, and it also
makes it very difficult to scan the content quickly.
Surfaces also indicate interaction cues,
like how things are going to move and interact in a space.
For example, the peeking surface in the calculator
is a hint to the user that they can be pulled out
to reveal something new or different
from the content they're currently viewing.
So, we have this super helpful tool
called the white frames that you guys can
download from our spec.
They're basic structures without any content,
so you guys can use them when you guys are
designing your app.
These layout structures used a consistent approach
that I mentioned today about surface layers and shadows.
And we developed these tools for us designers and developers
to support how we can better layout
our content in a meaningful way.
[APPLAUSE]
CHRISTIAN ROBERTSON: So, we've been talking today
about how bold graphic design can do more than just
look great.
You've looked at examples of typography,
and how it helps people to focus and parse the content.
We've seen how the right image at the right time
can make all the difference.
We've seen how color can bring both brand
and also help to divide space, help people to understand.
We've seen how grids and key lines can bring structure,
and they're just the coolest.
I'm excited.
[LAUGHTER]
They're like this hidden super power that you apply it,
and then all of sudden, everything
just kind of comes into focus, and things just look amazing.
And finally we've seen how implied surface can give people
cues about how they can interact,
but also to help to divide content.
It's another tool we can use to structure our apps.
Ultimately, though, the goal behind this material design
system is to create a common back story.
This back story can help bring visual designers, animators,
interaction designers, engineers together,
and help to create a story that is consistent for users.
And in some ways, this is a collaboration
between all of us.
We're creating apps that people can use based on their shared
understanding of how the system can work.
They can know how to do things without thinking about it.
So, to learn more, check out the information
in the preview release of the design specifications.
It's not short, so it'll take a few hours to read through,
but there's a lot of really good content.
Also, if you're interested in following our work or reaching
out, you can check out google.com/design.
And if you've not been able to catch some of the other design
focus sessions in I/O you can see them later.
And there's one more session this afternoon at 4:00
PM to talk about motion design.
The other thing I wanted to point out
is there's still a few more hours left.
We have designers who have been working
on this project over the past-- I
think it's been over a year and a half
down in the design sandbox.
Please take advantage of this.
Don't be shy.
We're happy to answer any questions you might have.
Thank you.
[APPLAUSE]
CHRISTIAN ROBERTSON: So, it looks like we're right on time.
We've saved some time for questions.
If you have questions, please line
up at either of the microphones in the center of the aisle.
AUDIENCE: Hi.
Any support for SVG in icons or any kind
of scalable code solution for all the resolutions
that we currently support?
VIKTOR PERSSON: We actually have Josh here
who can answer that question very, very well.
JOSH: Hi.
So, I'm an engineer who works with all these designers,
and I've been working on how we manage assets
and how we generate assets.
We're trying to use SVG more and more.
It's still a bit of a struggle to use it as the native format
that you're using within your apps.
Android L is adding some support for that.
It's getting better and better on the web,
but there's still more we need to do.
We are going to be releasing the system icons that we've
designed as part of the material on the spec.
So, you'll get those there.
And when we release them, we'll release
both Ping of various sizes and densities and also the vector
versions.
So hopefully that will help.
AUDIENCE: Thank you.
CHRISTIAN ROBERTSON: Thanks, Josh.
AUDIENCE: Hi.
When you said that the grid has been incorporated conceptually
into the material design approach,
does that mean you're strongly recommending that designers
use grids for layout, or does this
mean that there's new facilities in the framework
to actually implement grids at a high level,
and then the elements would just line themselves upright?
CHRISTIAN ROBERTSON: So, this is something
that I think starts with designers.
The tools to align things inside the platforms to some degree
have existed, and I think it does start with designers.
VIKTOR PERSSON: Yeah.
And also, all the numbers are divided
by 8-- so, 8dps increments.
You can see that in everything.
By the size of the buttons that are provided to you,
or nav drawers, or app bar heights,
they're all based on 8dp increments.
CHRISTIAN ROBERTSON: And all of the basic components
are already using the grids.
AUDIENCE: After seeing the thinking
behind the lighting and the camera
and the way shadows move with the elements on screen,
is there anything in place to handle orientation
changes so that is more animated experience,
rather than a broken experience?
CHRISTIAN ROBERTSON: Do we have some more engineering support
to talk about the way rotation works?
Yeah.
So there are system built-in animations
for rotation support.
There's also some facilities to do custom animations if there's
a particular effect that you want in your app.
AUDIENCE: Hi.
I'm a UX designer, but I have a background
in graphic design as well.
So first, I want to congratulate you
guys on the design side of things.
It's really good to see some traditional graphic design
thinking and rules being applied to the digital environment.
On my UX site, I've noticed that in terms of affordances,
there's a few instances where the outlines of buttons
and stuff like that is slightly trying to fade away.
I want to ask you guys how do you
feel that apps that have very defined affordances
will fit with the new material kind of paradigm design
language that you have designed?
CHRISTIAN ROBERTSON: Yeah, so I think
that there's two parts to the question.
One is, what are the right affordances, and two,
how do we know the right places to use those affordances?
For example, in the design system,
there are actual material buttons
that come off the surface.
And they're a really great tool for situations
where you have a lot of complex content.
So, for example, a more complex form where you need a button.
That's very clear.
We don't necessarily need it in all places,
like, for example, in the action bars on top of the screen.
We don't need to have a separate button around every icon.
So, I think what I'm trying to say
is, the role of the designer here
is to look at those situations and make sure
that there is enough affordance.
And then the system has a number of steps
you can use when you do need to have more clarity there.
AUDIENCE: Thank you.
AUDIENCE: I really liked the part about color.
And I was wondering-- I know it's a common thing
to desaturate backgrounds to reduce eye strain,
and I was wondering about the really saturated indigo
purple and the magenta.
And when does it become too much, and how much
do you take of the really bright colors?
VIKTOR PERSSON: So, thank you.
So, I think what you really should consider
as a designer is the density of color and content,
and how those two interact.
Too much color is not a good thing.
You as a designer have to figure out where the sweet spot is.
But we believe that we could incorporate more color
and express your brand stronger with color
without tiring your user's eyes.
RACHEL BEEN: And we're also doing accessibility studies
for legibility with color combinations
as well, with type overlays.
AUDIENCE: So, first, thank you.
It's absolutely beautiful-- I love
everything you guys are doing.
I had a few questions about the action bar,
because it's gone over some real changes.
And I notice that up in some of the examples,
there's like a darker yellow, but then we
see a darker icon, instead of a light icon,
but then with mixed text where it's white.
Also, I see there's no icons in the action bar,
and also the hamburger button's really crazy now.
It's longer integrated.
Just wondering if you could just give some insights on what's
going on with the action bar, because it
is a very integral part of applications,
and unique to Android, really.
CHRISTIAN ROBERTSON: So, the action bar, I think,
is a whole topic in and of itself.
There's a few things that we've started
looking at with the action bar.
As we were looking across the whole app ecosystem,
there wasn't enough flexibility for different apps
that had different needs to really
have the shape of their app really match
the purpose of the app.
And so this is where we've done a lot of work
to think about the relationship between the action
bar and, for example, a title on the page.
I think there's a number of screens
that showed a contact, where it makes a lot more sense
to have the name of the person really
live inside that same conceptual block.
So I think that was the first consideration.
And as it relates to the branding question of
whether or not we need to have an app icon up there or a logo,
there's no reason why we couldn't
have a logo type or a logo mark up in the action bar.
I think that it probably makes sense for a lot of apps
to do that, especially on the top level,
and then you can decide how much you need it
as you dig in deeper.
AUDIENCE: So it's more like a content-first type
of thing for the visual.
And the hamburger button?
Anything?
CHRISTIAN ROBERTSON: I mean, not every screen or every needs
to have a hamburger button.
The ones that do it's in an appropriate place for it,
and it lines up with the key lines.
So you really get this-- and it's true of the titles too--
you get this resonance with the page.
AUDIENCE: Thank you.
AUDIENCE: Hi.
I just want to say how all of this design system
has been very inspiring.
And I had a question about hero images.
Something that I've seen in the past
is when we've had designs that are dominated by a bold hero
image.
The problem is, if it's submitted by the user,
sometimes users don't pick very good images.
And I wondered if you had any advice on how you can protect
against bad user-submitted images?
RACHEL BEEN: Yeah, it's a really tricky question.
I think one of the things that we were really considering
is respecting the user's choices that they're
making to really personalize their own imagery.
So not manipulating a user's image, I think,
is a really important thing to consider.
Because potentially it is going to appear pixelated,
or it's not necessarily aesthetically pleasing,
but they're making that conscious decision
to include it.
It's really tough.
We're doing some affordances to play with some color overlays
and scrims, but really it's a fine line
between over-manipulation and respecting the content, right?
It kind of depends also on the brand identity
of how you're generally treating imagery within your product,
as well.
AUDIENCE: Thank you.
RACHEL BEEN: Sure.
AUDIENCE: Hi.
I'm an Android developer, and I really loved your session.
Thanks.
One question I could ask you is, could you upload an XML file
with all those typographics scale metrics [INAUDIBLE]
which you want us to use?
So, then you would imply also naming of all those [INAUDIBLE]
and [INAUDIBLE] sizes?
So it would be consistent across all teams who develop apps,
so when you move from one team to another,
it would be consistent.
CHRISTIAN ROBERTSON: You take that?
VIKTOR PERSSON: Well, no.
[LAUGHTER]
CHRISTIAN ROBERTSON: I think there's an intersection here
between the design system and the tools systems.
I'm not sure if we have anybody from the tools team
that can talk about it.
AUDIENCE: What I would like is it
you download an XML file, you drop it into your project,
and you could get all those the metrics you displayed here
in your projects.
RACHEL BEEN: I don't know if we've been working on that.
AUDIENCE: Could expect this?
CHRISTIAN ROBERTSON: I don't know
if I can comment on the future path of the tools team,
but I think that does sound like something
that would be useful to make it easier to use the metrics.
I will say that the elements that
are built into the framework do respect these grids,
and you get a certain level of alignment just there.
AUDIENCE: OK.
Thank you.
AUDIENCE: I think I've got a similar question.
I was just wondering if you were going to build something
into the system overlay-- sorry, the debugger entering
in Android or something, so that it could show the grid
and so that you could perhaps make sure elements match up
that way?
It could go in Android's studio as well.
I don't know if it's just something
that's been considered?
CHRISTIAN ROBERTSON: Yeah, I think
that sounds like a good idea.
Again, I can't speak to the future plans of the tool team.
AUDIENCE: For supporting older platforms, are you sort
of expecting to go more of incorporating the new material
elements even on the order platforms,
much in the way we've backed ported in action bars,
or to do a more Holo theme on the older platforms
and only incorporate the new material elements
on L and above?
CHRISTIAN ROBERTSON: Yeah, so I think that when
it comes to the compatibility story--
and again, I think that this is a whole topic
in and of itself-- you can kind of break it down
into some different parts.
The first part is for the layouts themselves
and for those measurements.
For the content itself, the idea of using this 8 pixel grid
is something that we've actually been doing since-- the Holo
grids actually use those measurements as well.
If you lay out your content with these new things
and use that for previous versions,
it should work very well.
The things that you can also-- I don't
know how deep I should get into talking about all
of the technical features of the support library--
but the card view element that's available in the support
library is something you should look into,
because it will help you to have shadows
that work across versions as well.
AUDIENCE: Thank you.
AUDIENCE: It's great to see such a great design
spec for the first time in Android.
Considering what the competition's done,
we all were worried.
But I think I can say it's been very good to be here
and to see what you guys have been doing.
It's pretty great.
I have no questions, but I'll say, keep doing this.
Keep coming up with design specs we can use.
Not everybody's a designer, but for developers out there,
it's a very good guideline to use.
So, keep doing what you're doing.
Great work.
Thank you very much.
CHRISTIAN ROBERTSON: Great, thanks.
That was a good wrap-up.
RACHEL BEEN: Yeah, thank you.
[APPLAUSE]
    You must  Log in  to get the function.
Tip: Click on the article or the word in the subtitle to get translation quickly!

Loading…

Google I/O 2014 - Material design: Visual style and imagery

2383 Folder Collection
Qianhui Rao published on November 8, 2015
More Recommended Videos
  1. 1. Search word

    Select word on the caption to look it up in the dictionary!

  2. 2. Repeat single sentence

    Repeat the same sentence to enhance listening ability

  3. 3. Shortcut

    Shortcut!

  4. 4. Close caption

    Close the English caption

  5. 5. Embed

    Embed the video to your blog

  6. 6. Unfold

    Hide right panel

  1. Listening Quiz

    Listening Quiz!

  1. Click to open your notebook

  1. UrbanDictionary 俚語字典整合查詢。一般字典查詢不到你滿意的解譯,不妨使用「俚語字典」,或許會讓你有滿意的答案喔