WWDC2014 Session 209

Transcript

X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
>> Good afternoon.
Welcome.
[ Applause ]
So I'm Patrick Heynen.
I'm a manager in the
Cocoa Frameworks group,
and welcome to Adapting to
the New UI of OS X Yosemite.
Let's get started.
So Yosemite, yeah.
So it brings a pretty
fresh look to the Mac.
The astute observers among you
might have noticed there's been
some changes in the
visual department.
Well, we're here to help you
understand what has changed
and why, sort of break it all
down for you, walk through it
and to get a better
understanding of it,
and then most importantly,
how to get the most
out of this new UI in
your Cocoa applications.
So, how are we going to do this?
Well, first we're going to talk
about some fundamental
design principles that went
into the choices that
resulted in the current design
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
into the choices that
resulted in the current design
that you see in OS X Yosemite.
Then we're going to take --
get into the tour bus and
just take a tour of Yosemite
and all the key pieces of --
that have changed
that are relevant
for Cocoa app developers, from
a developer's point of view.
Then we're going to talk
about vibrancy, which is one
of these important elements,
and just deconstruct that
and get a conceptual basis for
understanding what role it plays
and how it works and
what it does for you.
Then talk about some
elements that you might bring
to your applications
fonts, colors or artwork
and how they should -- -- what
their role is and how some
of the things that we've
done to make working
with them easier in Yosemite.
And last, but definitely
not least,
we'll talk about app
compatibility and how
to mitigate the risk
of introducing this big design
change and having your app work
across different scenarios.
Okay, so with that, I'm going
to hand it over to my colleague,
and we're going to get right
into the design portion
of this talk.
Mike?
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Mike?
>> Thank you, Patrick.
Hi, everyone.
[Applause]
So I'm Mike Stern.
I'm a User Experience
Evangelist with Apple,
and I am not an engineer.
I'm a designer.
So what am I doing here at
this engineering session?
Well, we're talking about
the new design of OS X,
and I thought I would just come
here for a few minutes and talk
about some of the high-level
principles or design themes
that guided and inspired
the design of OS X Yosemite.
Now, yesterday, we
announced OS X Yosemite,
and OS X Yosemite is the
tenth release to OS X.
And in that time span, there's
been a few really major UI
releases for OS X.
And as with every one
of those releases,
elements like the
menu bar, windows,
the dock have been
refined to be friendlier,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
the dock have been
refined to be friendlier,
easier to use, more
approachable.
But they've also been redesigned
to have greater utility
and power and support
more sophisticated
and advanced work flows.
Now, Yosemite is
just another step
in a continuous process
of evolving OS X.
So let's dive in and talk
about some of the principles
that were really core to
this particular redesign.
The first one is simplicity.
Now, let's take a look
at these app icons.
In particular, let's look
at the calendar icon.
Now, as before, calendar
was redesigned,
but it still very much
looks like a realistic,
three-dimensional object,
with realistic highlights,
realistic shadows, and even
the texture of the paper.
But some of the elements of
the previous icon were removed,
like the mini-calendar
view or the metal rings.
Those elements weren't
really necessary
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
to depict a daily desk calendar,
and by removing those elements,
the new icon is more simple.
It's less cluttered.
It's more straightforward.
And simplicity also influenced
the decision to go away
from using Lucida
Grande as the system font
and towards using
Helvetica Neue.
Helvetica Neue is
a simpler typeface.
Lucida Grande is designed to
evoke handwritten letter forms.
Helvetica Neue, on the other
hand, is designed to clearly
and simply depict the
letter forms and numbers,
without any ornamentation.
So it's a more appropriate
typeface to use
for the new design language.
So what does that mean?
Well, here's a comparison.
You can see that the S is a
little bit more geometric.
It's a little simpler.
There's less variation
between the thickness
of the stroke weight,
between the thin
and the thick parts
of the letter.
The shoulder here, for the
n has a smoother form to it.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
The shoulder here, for the
n has a smoother form to it.
It's less of an abrupt
transition.
And fonts have a more
consistent width to them.
Now, the next theme
is about consistency.
Again, let's go back
to the app icons.
Now, from the beginning of OS X,
app icons were rendered to look
like they were three-dimensional
objects that was sitting
on a table in front of you.
And they were rotated a bit,
so they could be easily
distinguished from documents
or folders, plug-ins
and utilities.
But over time, there
was a little bit
of a divergence going
on, with every app sort
of doing its own thing.
And that lead to some variation,
like icons that have a
really strong perspective
and keystoning effects.
Or instead of looking like they
were lying flat on the table,
they looked to be
sitting upright.
OS X brings a harmonization
of the style of all the icons.
So here, the realistic-looking
icons --
you can see, they all
have the same perspective,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
you can see, they all
have the same perspective,
same light source,
same rendering.
And the graphical icons,
these round icons are
also internally consistent
with each other.
The symbols at the center
of them have the
same embossed effect.
The shape -- the convex shape
of the form is consistent
across all of them.
And let's go back to type.
Again, Helvetica Neue
is a new system font.
And one of the things
that this solved
for us was an inconsistency
that existed before.
Over time, some apps
like Notes had started
to use Helvetica Neue
as a content font.
And apps like iTunes,
iPhoto, iMovies, Final Cut Pro
and Logic were using
Helvetica Neue
as a content font,
as well as a UI font.
And this lead to a sort
of unfortunate mismatch
between the system and
those individual apps.
So by changing to
Helvetica Neue,
now we have this consistency
across the entire
Mac experience.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
across the entire
Mac experience.
And another side benefit to
that is there's more consistency
between Mac and iOS.
And the third major
principle or theme
of this redesign is about depth.
We believe that software
interfaces should feel
physically -- to have physical
dimensionality and that
that should be really plausible.
That dimensionality helps you
to focus on the things that are
in the foreground and pay
less attention to those things
which are in the background.
Now, in iOS, depth in conveyed
through using translucency,
for example, the Notification
Center or the control center.
And the elements that are
within those UIs also
have translucency --
meaning some of that
background color is allowed
to come through.
Now, OS X picks up on this
and uses the same kind
of translucent effect for
the Notification Center
and other parts of the UI.
Now, in iOS, of course,
we use motion effects
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Now, in iOS, of course,
we use motion effects
to show depth, as well.
So when you move the
device around in your hand,
things have a sense of parallax.
And that's great, for
something that weighs as light
as an iPhone or an
iPad, but we're not
about to encourage people
to pick up their iMac
and start moving it around,
to get the same effect.
So it's still really important
to use things like gradients
or drop shadows to
convey that sense of space
and to correctly order
things in the Z axis.
And the last major principle
for this redesign is around --
designing around content,
to be content-focused.
Content is what's
most important,
not the user interface.
So for example, one way
to be content-focused is
to just allow there to be
more space for content.
So now there's this
unified toolbar
that does what a title bar
and a toolbar had done before.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
By unifying those elements,
there's now more physical space
for the thing that
you really care about,
which is the webpage itself.
And deferring to content
or allowing content
to be the focus is also
about having a user interface
that's less heavy, less strong.
So we've stripped away a lot of
the textures and the highlights
and the shadows, to have
a simpler appearance.
That, in combination with the
translucent window chrome --
the toolbar, in this case --
allows the content to
really come through
and affect the appearance
of the entire screen.
Again, it allows your content
to be the center of your focus.
So that's all I really
have for you today.
And now I'd like to hand it off
to our tour bus driver,
Rachel Goldeen.
Thank you very much.
[Applause]
>> Thanks.
Thanks, Mike.
Good afternoon.
Thanks for being here.
As they mentioned, I'm going
to give you a little
developer's tour
of the new UI in OS X Yosemite.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
of the new UI in OS X Yosemite.
Let's start off here by taking
a look at Finder, and I'm going
to give you actually a
mini-tour before the tour
of the things that I'll cover.
We'll take a look at
the toolbars, again;
the window control buttons; the
new kind of segmented control;
the sidebar, which
is translucent now;
and then we'll move over
to Safari to take a look
at what Mike just mentioned: the
combined toolbar and title bar.
And then we'll take a
look at system preferences
to show us an example of our
animated controls: search field,
radio buttons, popup
menus and checkboxes.
And after that, we will go over
to Notification Center and look
at our new vibrant dark
appearance that's used here.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
at our new vibrant dark
appearance that's used here.
And then the context menu,
which uses the vibrant light
appearance, as do pop-overs.
All right.
Back to the top.
Translucent toolbars.
For anyone who's gone and
installed Yosemite already,
I'm sure you've played
around with this and seen,
as you scroll things up,
you can just see them coming
through the toolbar,
and it gives you a sense
of your content sliding
under the toolbar.
How do you get it?
Well, all you have to
have is an NSScrollView
that is adjacent to the toolbar.
And then it happens
automatically for you.
But if you don't have
that, you can still get it
by using this new window style
mask NSFullSizeContentView
WindowMask.
Simply ore that in with your
existing window style mask,
and you'll get the transparent,
translucent toolbar style.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
and you'll get the transparent,
translucent toolbar style.
This can be useful for things
such as toolbars or title bars
that show and hide over content
that is not in a scroll view,
or the scroll view's
not right at the top.
Lots more details about this
in tomorrow's advanced session,
Adopting Advanced Features of
the New UI of OS X Yosemite.
All right.
Tinted Sliders, hiding away
in the bottom right
corner of this window.
These are a little
new thing on Yosemite.
And to get those, you just need
to have a non-directional
slider, which is a slider
that has zero tick marks.
All right.
Now, let's take a look at the
new window control buttons.
As well as being flatter,
you'll also notice
that the full-screen button has
moved into the green button.
If you're sad about that,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
If you're sad about that,
and you'd like the zoom behavior
back, hold the Option key,
and you'll get zoom behavior.
I'd also like to point
out that any window
that can't go full-screen
reverts
to the old zoom behavior.
And then, next, the new kind
of separated segmented control.
These are useful for things like
navigation, like this backwards
and forwards button
here or other kind
of incremental step
operation, such as zooming.
And this is easy to get by
setting the segment style
to NSSegmentStyleSeparated.
And it's nice to know that the
style will automatically adjust,
whether it's in a
toolbar or in a window.
Now, I'm going to bring another
window onto Finder, here.
And we'll take a look at some
of the subtle differences
that happen between active
and inactive windows.
When a window comes
forward and becomes active,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
When a window comes
forward and becomes active,
the sidebar is translucent.
But when it goes to the
background, and it's inactive,
the sidebar is opaque.
So it's nice to know that
the translucency is only
in the active window.
And let's take a closer
look here, at the toolbar.
A couple of things to note --
it's a good chance to
say that the metrics --
we've tried to keep them as much
the same as possible so that all
of your old controls that
are automatically moved
to the new look, even
without recompiling,
should all fit in
the same space.
And there's also some
subtle things that happen
when you use template images.
These are a great
way to take advantage
of our automatic
adjustment for state changes.
And so I'm going to send
this window to the back,
and you can see the state
changes in the template images,
particularly that selected
part of that segmented control.
Look at the image.
You see it completely
change color.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
You see it completely
change color.
So you can take advantage of
that by using template images.
And let's take a look again
at the translucent sidebar.
Once again, opaque
here; translucent here.
And how do you get
translucent sidebars?
Guess what?
They're for free, if you've used
an NSOutlineView or NSTableView,
and you set the highlight style
to Source List, which you can do
in Interface Builder or in code.
All right.
And to just show how easy it
was, I downloaded a SidebarDemo,
which was put together for OS X
Lion, 10.7, and out of the box,
it had translucent sidebars.
Now, moving over to Safari to
take a look at the new kind
of toolbar that has
a hidden title bar.
Hidden window titles are
achieved using this new NSWindow
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Hidden window titles are
achieved using this new NSWindow
property: titleVisibility.
And you can set the
title visibility
to NSWindowTitleHidden in order
to get the effect
that Safari has.
And I'd like to point out to you
that Safari has some special
things that makes this work,
one of which is that they
have put the window title
into the combined
URL and search field.
And so you could still
see the window title,
even though there's
no title bar.
Also, as Andreas pointed out
yesterday, they've let room
for users to click in
the toolbar in order
to move the window around.
So you want to make sure
you have room for that,
if you're going to
use this new style.
Moving on to animated controls.
Search fields now animate
very much like they do on iOS,
with the magnifying glass and
the placeholder text moving
to the left when you click.
Radio buttons have an animation,
and one of the nice things
about them is, as you
select a radio button,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
about them is, as you
select a radio button,
the other one deselects and
animates out simultaneously.
It's a nice little touch.
Checkboxes, as well,
are now animated.
And this is a good time
for me to point out that
that first preference there --
double-click a window's
title bar to minimize --
if you leave it unchecked,
which is the default,
double-clicking a window's
title bar will zoom.
So that's a little
hidden feature for you.
And last, popup buttons.
When you select a popup
button and choose an item
from the menu, it
will animate back
into place in the popup button.
All right.
Moving on to Notification Center
and the vibrant dark appearance.
Let's take a little bit of a
closer look as what happens
when the background changes.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
I want you to pay particular
attention to those tabs
at the top that say
Today and Notifications
and see how they change
as the background changes.
It looks very close to
standard transparency,
but we're actually using
special blend modes
to pull the color
in, a little more
than just plain old
transparency.
How did they get it?
They used this new NS View
subclass -- NSVisualEffectView,
as well as the new
vibrant dark appearance,
which is an NS appearance.
So you can create an
NSVisualEffectView,
get the
NSApperanceNameVibrantDark
appearance and set
that on the effectView
in order to achieve this look.
Similarly, here's an example of
the vibrant light appearance.
Same deal: NSVisualEffectView,
but this time using the
vibrant light appearance,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
but this time using the
vibrant light appearance,
and you set that
on your effectView,
and you get this new
vibrant light appearance.
Lots more about
NSVisualEffectView
and Vibrancy in tomorrow's talk.
And now, I will hand it back to
Patrick, who will talk to you
in more depth about vibrancy.
Thank you very much.
[Applause]
>> Thank you, Rachel.
Thank you.
Okay, so vibrancy.
So as Rachel mentioned, it's
not just plain old translucency.
What is this vibrancy?
Well, it's a pretty important
visual building block for OS X,
as you -- and it makes its way
into many different applications
and many different areas,
both in light and dark.
Most prominently in
Notification Center,
but also other places in the OS.
So what is it?
What is this vibrancy thing?
Well, I'm going to try
-- and bear with me here.
But I'm going to try to
deconstruct it and break it down
and sort of explain conceptually
what it is and what it's trying
to do, what its goal is, to
help give you a framework
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
to do, what its goal is, to
help give you a framework
for understanding what
happens technically
with your application.
So vibrancy is advanced
blending on dynamic
or adaptive backgrounds.
So what's advanced about it?
Well, I'm about to -- in
the words -- the words of E.
E.
Cummings, I think -- I'm
going to try to make the case
that with vibrancy, 2 plus
2 can not only equal 4,
but we can actually
make it equal to 5.
In fact, it's all
about making --
vibrancy can actually make
the whole greater than the sum
of the parts and things
that you put into it.
It actually can end up with
something more interesting
than the two things
you put into it.
So what two things
am I talking about?
Well, it's really all
about combining foreground
and background elements.
Most of UI graphics is all
about combining some foreground
content onto a background,
whether it's a button
onto a window background,
whether it's a piece
of text onto a button
or a window content background.
It's all about combining
those individual pixels
in interesting ways.
Well, so let's do that.
We have this beautiful
poppy background.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
We have this beautiful
poppy background.
And let's do -- and
traditionally, let's --
we have here a gray, a
mid-tone gray circle that we put
on top of this background.
And we can just put it on there.
Now, it's okay, but it kind
of doesn't really
blend well at all.
It kind of sticks out,
in fact, in this image.
Now, traditionally, the tool
we would have at our disposal,
to kind of combine it or blend
it in some interesting way,
would be transparency or
using alpha or opacity.
So here, I faded
this gray circle
by about 25 percent,
maybe a little less.
I'm not a designer.
So -- but you'll notice
there's a problem with this.
And it leaves a little
bit on the table in terms
of the resulting esthetics.
Because what happens
with transparency is all
you're doing is you're taking
that foreground in
the background --
you're just taking a
fractional midpoint
in between and combining those.
And what it really ends
up being like is like --
as if you taking a foreground
element and punching a screen,
like punching and
building little holes in it
and letting the background
seep through.
With the end effect that the
background that does show
through that foreground
element ends up getting kind
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
through that foreground
element ends up getting kind
of murky and muddy and hazy.
And as you make it more
opaque, it just kind
of gets darker and muddier.
And it really doesn't -- the
background doesn't really get
to combine in an
interesting way.
Well, what if we did
this differently?
What if we -- and the other
thing I want to point out is
that we're not really
doing anything
with the color information
of either the foreground
or the background when
we combine them this way.
Well, what if we approached
the problem differently?
What if we actually took
the color information
of the foreground pixel
and the background element
and combined them in
an interesting way,
where we actually are trying
to preserve the color
tonality of the background?
And just using the actual
foreground color as a hint
as to how much of
that color to preserve
in a general sort
of intensity level?
So that's -- what
I'm illustrating here
in this slide is actually
sort of a burn effect,
a burn blend of a foreground.
Same circle, same
actual gray value here.
I have changed nothing about
the foreground element.
It's still that same
gray circle.
It's just that now I've
combined it with the background
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
It's just that now I've
combined it with the background
in a more interesting way,
where I'm using the gray value
to actually direct how much of
the color information to keep
from the background, as well
as the general tonality.
What's nice about this is you
really preserve the character
of the background,
as you can see.
And what's also very nice
about this is it kind
of works really well
as things change.
Now, we're changing the
lightness quite a bit,
as we go between the edge of
that poppy and the center,
but get this sort of
general contrast ratio
and general look
of that composite.
It's actually preserved
pretty well by that blend.
And in fact, this
design is very resilient
to completely changing
the background
out for something different.
So once again, I
have changed nothing
about the foreground
element here.
I've just changed it out,
and now we have this
lotus flower background.
And you'll see that the
actual combination is sort
of roughly the same overall
character, as a result.
Well, so okay, so this is a good
illustration of the basic sort
of foreground and
background blending,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
of foreground and
background blending,
using sort of a more
advanced blend.
But now, how do we build
this up to what we see
in OS X Yosemite today, to get
these translucent materials?
Well, now we need to combine
with a different
kind of background.
So let's build up this
light material here.
Well first, we just want
to put a nice light tint layer
that's transparent over the,
over the background, to give us
a nice sort of light substrate,
onto which to draw our UI.
Because we don't want
to draw our UI directly
onto your desktop
picture, of course.
And then all we need to do
to make it better is
just blur it a little bit
and to keep the overall color
tonality in the rough shape
of your background
but still preserve --
but give a smoother rendering
of the overall result.
Now, you notice, as I went
through and built this up,
I've changed nothing about
the foreground element.
All I've done is I've changed
that background, that it's --
that it's being blended onto.
And the nice thing
about this is,
is it still preserves
that same character.
As I'm going across and as
the background is changing,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
As I'm going across and as
the background is changing,
the overall composition
really preserves its character
and still gives you
some of that --
the important color
information in the,
of the background
that's underneath
and lets it shine through.
So in fact, I'd like to argue
the whole can be greater
than the sum of the parts
when you're doing --
when you combine using
the right blend modes
and solve some tricky
design problems.
So what are these vibrant
materials of which we speak?
So Rachel enumerated
some of the areas.
So we have built up a
couple of different styles,
one of which can be seen
in menus and popovers.
Then there's the
general light appearance,
which is what you see in the
sidebars and source lists.
Then there's the
translucent title bars.
That's another vibrant material.
And of course, the dark
appearance, which you saw
in Notification Center.
There are a couple of key
new vibrant system behaviors.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
There are a couple of key
new vibrant system behaviors.
What I mean by this is areas
where your application --
even without taking any steps,
you'll just automatically
benefit
from this new composition
style that we're using.
One of which of course
is source lists.
Then there's the
translucent title bar.
Menus and popovers automatically
get this, as their background.
And of course, menu bar and
status items in menu bars.
So how do you use
vibrancy in your apps?
How do you use it effectively?
Well, once again, it's all
about combining foreground
with background in
an appropriate way,
in an appropriate
and interesting way.
Well, NSVisualEffectView
is the view
that actually is performing
the role of this background.
This is the thing that we
built up in the slides before,
with that white and the
blur and the translucency.
This provides us the
substrate onto the canvas
onto which we are going to draw.
And it's offered in light and
dark basic material flavors.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
And it's offered in light and
dark basic material flavors.
This is stuff that you've --
that Rachel briefly
demonstrated a moment ago.
And the important thing
about NSVisualEffectView
and what it does to your
applications, it takes care
of all of the steps
needed to make sure that,
as the content -- either
underneath your window
or underneath the view, inside
of the window as it changes --
as you scroll things around,
as you drag windows around,
as your background changes --
it's going to automatically
update
as the content underneath
changes.
You don't have to worry
about any of that;
all of that is handled for you.
So let's move on
to NSAppearance.
So NSAppearance is --
in this equation --
is the one that's taking the
role of the foreground element.
And it's going to drive
both the selection
of the foreground content,
as well as drive some
of the blending behavior.
So it's offered in two
appearance variants:
NSAppearanceNameVibrantLight
and then
NSAppearanceNameVibrantDark.
And what its role in life is,
is to provide sort of a panoply
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
And what its role in life is,
is to provide sort of a panoply
of colors, controls and
template image treatments
that are appropriate and
suitable for vibrant rendering
when deployed in VisualEffect
using vibrant surfaces.
Now, this is important because,
as you saw in the earlier
section of vibrancy,
selecting the foreground
element --
now the way things
combine is very different
than traditionally.
So selecting something
appropriate
for vibrant rendering
is very critical.
And so we need alternate sets
of these design values --
alternate versions of
these foreground elements,
to get the right result
on these vibrant surfaces.
So as I said, it's really the --
NSAppearance can really
be thought of as the thing
that helps select and identifies
your foreground content source
and makes it appropriate
and locked
in for vibrant rendering
for that material.
And once it's in effect, then
AppKit can automatically pick
up the appropriate colors,
pick up the appropriate
template treatments --
pick them all up and do the --
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
pick them all up and do the --
and pick up the right
blend modes, especially,
appropriate for the view and the
material you're rendering onto.
Okay. So how do you do this?
Well, let's actually
try to do a demo here.
Little bit exciting.
Demo one. Okay.
So -- so what we're
going to do here is --
we have a very, very simple
application that's basically
just an image editor,
image editor
with some adjustment
sliders here.
And what I'm going to try to
show you is how simple it is
to just add some
vibrancy into your UI
and how little effort it takes.
So all we're going to
do is we're going --
what we're going to try to
do is we're going to try
to take a VisualEffectView
and put it inside
of that little inspector and
re-host the controls inside
of it to give it a
vibrant appearance.
So let me go ahead and do that.
So the first thing I'm
going to do is I'm going
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
So the first thing I'm
going to do is I'm going
to create a VisualEffectView,
initialize it
with the inspector's
frame, and then I'm going
to set its appearance to be
the vibrant dark appearance.
Now, the next -- and then the
only other thing I really need
to do is I need to
re-host the --
take out the existing
content, the controls
out of the existing
contentView and put them
into this new fxView and then,
place it as the contentView
of the window.
So that's all I'm doing here.
This isn't really directly
relevant to the demo,
but I just put it
here for full honesty
and full disclosure here.
So a key thing to see here
is the appearance being put
on here, and you
see, presto chango,
I have not only some nice,
dark vibrant material,
but I also have, you
know, alternate slider --
alternate controls, that app can
automatically select different
artwork that's appropriate for
vibrant rendering, specifically
for the dark material.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
for the dark material.
The text colors have inverted,
and everything is
updating dynamically.
And all it took was deploying
that VisualEffectView.
Okay. So back to the podium.
Okay. And that was a very,
very cursory demonstration.
For a lot more details
about all the ins and outs
of VisualEffectView and some
of the more advanced techniques
of using them to
build some of the --
build UI similar to some
of the things that we have
in our system, please go to
the in-depth talk tomorrow,
Adopting Advanced Features of
the New UI in OS X Yosemite.
Okay. So let's move on to
fonts, colors and artwork.
These are the elements that are
typically the things that you
as an app developer
might choose --
make some specific
design choices
and provide material for.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
So let's talk about fonts first.
So what's new in fonts?
Well, how about the system font?
That's not that big
at all, is it?
It's not a big change at all.
Actually, it is.
So this is -- here's
an illustration
of the Mavericks menu bar,
which is Lucida Grande.
And here's what it looks like
today with Helvetica Neue.
It's actually a pretty
significant difference.
It can be seen even
more dramatically
if you compare the
two side-by-side.
You'll notice it's quite --
the sizing characteristics
are a little bit different,
but in general, it is a
lot crisper typographically
and sort of a cleaner layout.
So let's talk about
this new system font.
So it's Helvetica Neue, but
it is not just plain old,
your mother's Helvetica Neue.
It is especially optimized
version of Helvetica Neue
that has been optimized
for OS X.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
that has been optimized
for OS X.
And what do I mean by optimized?
Well, any time you put a font
-- for updating a system font,
one of the key two things
to balance are aesthetics
and layout compatibility.
Now, if aesthetics were
all we were concerned with,
we would just render the font
exactly how the type designer
originally envisioned it
and try to do our best job
in rendering the
individual letter forms,
and leave it at that.
Well, the problem is, if we're
switching the system font,
this means we're updating the
typography in applications
that haven't been modified and
may not even be aware of it.
So we have to think about things
where like the layout
may change,
because ultimately these
fonts have different
size characteristics.
So the version of Helvetica Neue
that we've deployed has been
specifically tuned to sort
of balance this tradeoff, to try
to strike a good balance there,
to make sure that we still
get the aesthetic [inaudible]
that we're really looking for
with this clean typography.
But not at the cost of
application compatibility.
So let me go into that with a
little more detail and explain.
So here's -- here's an
emulation of the Finder item --
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
So here's -- here's an
emulation of the Finder item --
app menu item that you
might see on the menu bar.
And this is it rendered
in Lucida Grande.
And you can see here,
sort of approximations
of the interglyph spacing, here.
And now, as I switch
this to Helvetica Neue,
there are some interesting
things going on here.
Because you notice the overall
thing is shorter, but actually,
if you look carefully, some of
the letters actually got bigger,
and some of them got shorter.
So it's not a straightforward
thing as saying, "Oh, yeah,
Helvetica is -- everything
is just going to get shrunk
by a certain percentage."
No, it's much more
subtle than that.
It can be content-dependent.
Some things are getting winder.
Some things are getting shorter.
Some things are getting
more consistent,
where they were inconsistent
in Lucida Grande
between the capital letter sizes
and the lowercase letter sizes.
So it's a complicated equation.
So that's why it was important
to optimize these
metrics appropriately,
so that they solve this
compatibility problem
in a useful way.
Here, you can see the
two on top of each other,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Here, you can see the
two on top of each other,
and you can see more
dramatically this difference.
You see the F, in
particular, is actually shorter
in Lucida Grande, and
it's wider -- sorry.
It's thinner in Lucida Grande
and wider in Helvetica Neue.
But almost all the other letter
forms, except maybe the D,
are actually considerably
shorter.
So layout compatibility
-- that's a big topic.
It's an important topic.
And what do we do about it?
Well, for unmodified
applications, one technique
that we've applied to
apply layout compression
if there's a danger of
the texturing clipping,
given the existing balance.
So for example, if you have a
text field that was sized just
so that it just fit just
perfectly on Mavericks,
you know, there's a chance
that that same text field,
if no measures were taken, would
get clipped with the new font.
Because some string choice
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Because some string choice
in there was causing the
overall layout to be longer.
Well, in those circumstances,
we're just going to apply a bit
of an interglyph compression, to
try to make sure that it fits,
so you at least see
all the information,
that there's no information
loss.
And as I'm -- and this
is active for apps built
against 10.9 or earlier only.
So this is an important
takeaway here,
because this compression
mitigation
that we do does not apply if
your app is targeted and built
against the 10.10 SDK.
So what does this mean?
This means that you
don't have to worry
about your existing applications
having problems with your users.
But when you're going
forward, we encourage you
to really look carefully at
your text in your applications
and make sure that you're
using either auto layout
or that you're really sort
of comparing and testing,
making sure that the widths
of all your text elements
is optimized accordingly.
And I also want to mention
that this compression technique
that we apply is not a
silver bullet by any means.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
that we apply is not a
silver bullet by any means.
And one shouldn't think
of it as the cure-all.
And the reason is, is because
layout compression does not come
without a significant cost,
which is that it can
really affect legibility.
And that's especially true
on 1x non-retina displays,
where there's few pixels to
work with for every glyph.
And every pixel's doing
a heck of a lot of work,
and if you're compressing
things together,
it can really make
things suffer in terms
of the information legibility.
So how do you use
this new system font?
How do you make sure your app
is using the appropriate type?
Well, thankfully, we
have a whole bunch
of system font selectors
to choose from.
And that's what we encourage
you to use, to make sure
that you're using
the right things.
So if you're doing this
in Interface Builder,
rest assured that,
you know, if --
as long as you stick with
the standard font selections
in the font popups that show
up in Interface Builder,
you should be okay.
Otherwise, we encourage you to
use the system font selectors.
These are the ones
that are in NSFont.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
These are the ones
that are in NSFont.
An example -- there's many more,
but I'm just picking a
few to highlight here.
NSFont systemFontOfSize,
NS boldSystemFontOfSize
and a new one, actually,
labelFontOfSize.
Actually, that's not -- I don't
think that's necessarily new.
There's another label thing
coming that's a little
bit newer.
So all of these selectors
will make sure
that the appropriate UI font
-- the one that's optimized --
has been selected and
is going to be used
as appropriate for UI.
Important takeaway here, and
if you remember nothing else
about this font sections talk
is please do not explicitly set
your font, either in code
or in IB, to Helvetica Neue,
you know, as a literal string.
Because that the actual
document content font.
That's the not-optimized
version.
You'll get very unexpected
results,
and it may make your application
less compatible going forward,
as we continue to improve
upon the typography of OS X.
Okay. So colors.
So colors are an often
underappreciated element of UI,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
So colors are an often
underappreciated element of UI,
which is a shame, because if you
actually look at most windows
on most applications, about
90 percent of the pixels --
if that, you know, are
actually composed of color fill.
So they're actually a
pretty important part
of building your UI.
And it's especially
important now,
in this day of multiple
appearances
in different sections
of your applications.
So we have system
colors in Cocoa,
and these are what we urge
you to gravitate towards.
And by system colors,
I mean two things.
I mean literally the colors
provided by the system,
in terms of the color selectors
in NS color [inaudible],
but I also would like to
emphasize that you should think
of colors as a system of colors,
not just as a set of numbers
that you might pick out, you
know, from a designer like,
oh, RGB 128, 142, 136.
No. Think of them as a
system, as in like --
what is the semantic color
that would be appropriate
to use here?
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
that would be appropriate
to use here?
And this is where system colors
can really help, because many
of the standard colors
-- like for example,
NSColor controlTextColor,
NSColor
secondarySelectedControlColor
and, you know, there's a
whole host of others --
have been adapted, have
been optimized to make sure
that they work in all areas
and under all appearances
in the new UI.
And they may also change in the
future, so it's just a good way
to bulletproof yourself.
For textual elements in
your UI, we also would
like to encourage you thinking
of laying out your UI in sort
of an information hierarchy.
And by that, I mean you might
have some sort of primary sort
of information elements
or labels and then,
you have some secondary
supporting information.
You'll see this pattern in
many different applications
in Yosemite.
And we've introduced some new
color selectors specifically
to help with this.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
The two color selectors
are labelColor
and secondaryLabelColor.
And the nice thing about these
is they've been specifically
designed to work well
on almost any context
that you might put them
on, whether it be menus,
which have that light vibrant
appearance; regular windows;
Notification Center
and its dark UI.
No matter what you do,
it will look correct.
So what about control text?
What about button text,
or other things like that?
Well, the good news there
is the control text --
Cocoa is going to make sure
that control text
automatically adapts
to any particular control state
that your control
may find itself in.
So actually, I would
encourage you to --
unless you have a really
compelling, overriding reason
to do so, please let the
Kit provide the coloring
for any textual elements
on your buttons and images.
I'll get to images in a second.
Because there really are such
a wide range of interaction
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Because there really are such
a wide range of interaction
and control states, and our
designers have very carefully
selected colors and stylings
for each one of these
across all the different
appearances.
And doing so, this
will let the --
the Kit provide the optimal
appearance, including adapting
to the vibrant NSAppearances.
Here you can see in the
example of what label color
and secondary label color
look like across the light
and the dark vibrant
appearances.
And you can see that they sort
of preserve their
design intent --
they're being primary
and secondary.
They're both vibrant --
the secondary one is a
little bit more so; that is,
it's letting a little bit more
of the background through.
It's a little more translucent.
It's picking up a little
more color of the background.
But it will preserve -- it will
be a right design choice on any
of these appearances, including
the non-vibrant appearance,
the regular aqua one.
Okay. So the last item here,
in this section: artwork.
So artwork is one of the
other important elements
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
So artwork is one of the
other important elements
that you might want to
integrate into your application.
And for this -- the thing I want
to mainly highlight
is template images.
Template images can
be an excellent way
to get maximum flexibility
out of your artwork
and have it be resilient
across a wide range
of UI scenarios in
your application.
So what are template images?
A brief review.
Template images are
image resources
where the image content itself
is just providing the shape
of the control, of the element
that you want to depict.
It's providing no
color information.
It's -- I mean, you can put
color in there, but it's going
to get ignored, because it's
basically just the shape
that is critical.
And then what happens is, that
makes it possible for AppKit
to transform it, with a
context specific appearance.
It can take that shape,
and it can render it
in a translucent gray
when it's disabled,
or it can render it bright
blue when it's selected.
And it can make all these
design choices and style it
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
And it can make all these
design choices and style it
in a way that's appropriate
for a specific appearance
and for a specific
interaction state.
Okay. App compatibility.
So OS X Yosemite does
bring some big changes
to your app's look and feel.
And even for apps that really
haven't made any changes,
the visual differences
can be quite significant.
This is Dictionary here,
and even though this is a pretty
straightforward application,
you can see that the differences
are notable, both in terms
of the general aesthetics,
as well as the layout
of some of the elements.
Well, so what does this mean
for your app, and how to think
about having your
app work on Yosemite?
Well, first and foremost, we'd
really like to encourage you
to make your app as awesome
as it can be on Yosemite
and take advantage of as many
of these new UI experiences
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
and take advantage of as many
of these new UI experiences
that we've provided the
building blocks for, including
but definitely not limited to
VisualEffectView and vibrancy.
But what about deploying
on Mavericks?
You know, it's quite legitimate
to want to have an application
that works both on
Mavericks and on Yosemite,
so that you can have --
support all of your customers.
Well, having it both ways
can be quite challenging,
given the changes that we've
made in the design of OS X.
As a case study, I'd
like to show Xcode here.
Now, this is Xcode
running on Mavericks.
And notice the tab, which was
carefully designed to blend
in very well with the
title bar material.
Well, here we go in Yosemite and
change the title bar material,
and suddenly, everything
doesn't match.
Well, that -- this is an
illustration of the challenges
that an app can face
if they have
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
that an app can face
if they have
to support both the old UI
language as well as the new.
Well, we all know this had a
happy ending because this is
in fact what the Xcode that
you're living with right now --
it looks like Yosemite, because
Xcode actually did make an
optimization to make sure
that it looked perfect
for Yosemite release.
So what techniques can you use
to set yourself up for success,
in the face of these
big design changes?
Well, first and foremost,
we encourage you to stick
with the system, and
what we mean by that is,
where possible -- unless you
have an overriding reason to do
so -- stick with
standard controls,
stick with standard
template images,
stick with the system colors,
stick with system fonts.
All of those things will
be automatically managed
and adapted appropriately by
AppKit across both platforms
and will look reasonable.
Like for example, the entire
title bar or all the control --
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Like for example, the entire
title bar or all the control --
all the font selectors,
all the colors.
They'll automatically
resolve themselves
to the appropriate
thing on each platform.
Now, there are many cases where
that may not be sufficient,
and when you actually do have
to write different code; like,
for example, the selective
tab change in Xcode.
Well, you can also use runtime
checks to tailor your code
and resources for each design.
So let's go through
two techniques.
There are more, but these
are two primary ones I wanted
to show you for what
you might be able to do.
Well, the first thing
could be a symbol check.
So let's say you have an
application that's actually got
a deployment target of 10.9.
And you want to potentially
introduce some vibrant UI,
but you know you can't
just directly reference
that stuff on, you know, on
10.9, because it doesn't exist.
Well, what you can
do is you can do --
using the standard
weak-linking behavior,
as soon as you have a
deployment target set to 10.9,
you can always just check to
see if an important symbol --
like in this case,
NSAppearanceNameVibrantDark
-- is non-nil.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
NSAppearanceNameVibrantDark
-- is non-nil.
And only if it's non-nil, then
you go ahead and use that code
and set up a VisualEffectView,
for example,
for a piece of your UI that
can be vibrant in Mavericks.
Now, the nice thing
about this code is
that it automatically
brings in the vibrancy
when that application
is running on Yosemite
but does whatever it needed
to do before on Mavericks.
Another approach is
to do a version check,
to sort of check what
runtime environment am I on?
This is a little
more straightforward,
a little more old-school.
So this is the standard
technique that we recommend
for doing that, at least
for Cocoa applications,
trying to do Cocoa-type work.
Compare the
NSAppKitVersionNumber
against the pre-published
constants.
Make sure you get that
greater-than sign correct.
Don't put it the other way;
you'll end up with
rather surprising results.
And then this would allow
you to, for example,
select different
image resources or go
into totally different code
constructions across one version
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
into totally different code
constructions across one version
of the OS versus the other.
Oh, I missed that build.
So in general, what we'd
really like to encourage you
to do is look for opportunities
to freshen your design
in as many places as possible
and freshen your
design everywhere.
We really think that a majority
of your customers are going
to a majority of your users,
I should say are going to be
on the Yosemite design,
in Yosemite in the
very near future.
And it's going to be and if
you do have to make a choice
about updating your
design and you're worried
about changing things on
older platforms, I would also
like to encourage you
to, when in doubt,
favor the new visual style.
What I mean by that and
actually, Xcode is an example
of this as a case study.
It's okay to go and bring
some of the elements
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
It's okay to go and bring
some of the elements
that have been introduced
in elements
that have been introduced into
Yosemite and bring them back
into your Mavericks
App UI design language.
So for example -- and I
don't mean like, obviously,
the whole translucency thing,
because that doesn't
work on Mavericks.
But in terms of button
shapes, button glyphs --
your icon, for example
it is totally okay,
and it actually works out
reasonably well to take some
of these simpler, cleaner
design styles that are featured
in Yosemite and to have
them show up on your buttons
or in your window title bar in
your application on Mavericks.
So that can help
relieve some pressure.
So we're getting close
to wrapping up here.
So I just want to recap
what we talked about today.
So we have this -- there's a
brand new user interface design
for OS X.
We've walked through that.
We've talked a little
bit in trying
to understand the components of
vibrancy and what role it plays
and what it does for you.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
and what it does for you.
And we talked about
adapting your applications
to these new features.
Please put yet another plug
in for the advanced session,
for more in-depth exploration
of using NSVisualEffectView,
using vibrant materials and
some of the tips and tricks
of getting these UIs
together with alacrity.
So in summary, lots
of excitement lots
of exciting design
changes coming to OS X.
And if there's one message
I'd like to leave with you,
is that the Cocoa
frameworks can help guide you
through all this change,
and please avail
yourselves of their services.
For more information, we
have our excellent developer
evangelist right over here,
with the fancy sneakers,
Jake Behrens.
And I encourage you to email
him, if you have any questions.
And there are many
related sessions,
including the What's
New in Cocoa,
which happened earlier today
actually yeah, earlier today.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
which happened earlier today
actually yeah, earlier today.
Today is Tuesday.
There's also the
advanced talk tomorrow.
I also want to point out the
Creating extensions for iOS
and OS X, which happened
actually it's concluding it
happened just an hour ago.
And the reason I mention
that is I think they talk
about Notification Center
extensions, which is one
of the places where you use
the dark vibrant appearance.
And there are also some there
are some Xcode sessions,
some Interface Builder sessions
that I encourage you to go to,
where they're not going to touch
directly on some of this stuff,
but it's very important to
see some of the new features
that have been exposed in the
new UI and Interface Builder.
And if you haven't gotten enough
of my not-an-engineer colleague,
Mike Stern, he's having a
talk right following this one,
called Designing
Intuitive User Experiences.
And you can get more
design wisdom.
And with that, I'd like
to wrap up and thank you.
[ Applause ]