WWDC2013 Session 201

Transcript

X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
[ Silence ]
>> Good morning.
[ Applause ]
Thanks. Welcome to Building
User Interfaces for iOS 7.
My name is Jason Beaver
and I'm going to be joined
on stage a little bit
later by Andy Matuschak.
And we both work on UIKit.
And we're going to spend
most of the morning,
talking about the changes
we've made in UIKit
to support the new
user interface.
But before we do, I want
to take a moment to talk
about the design themes that
were mentioned yesterday.
Because the change that we've
made in UIKit were really driven
by these design themes.
The first of these is clarity.
Applications in iOS 7 should
be clear and easy to use,
should strip away the irrelevant
and unimportant information
and focus on what's really
important to the user.
And the design
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
of the application should make
it clear how user uses it.
The second is deference.
The application shouldn't
get in the way
of connecting the
user to their content.
In the Weather application,
for example,
we've removed the boarders
and other extraneous bits
of the user interface and put
what the user cares about most
which is the current conditions.
Filling screens edge to
edge, in fact, it even runs
up under the status bar.
And of course, it goes
way beyond Weather.
We've done this throughout
the user interface.
The user's content is what's
really important to them
and it should fill the screen.
And the third is depth.
Applications on iOS
7 make extensive use
of blurring transparent layers
as well as new mechanisms
like dynamics and motion effects
to create rich three-dimensional
experiences
that are really engaging.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
So let's move on and talk about
the changes we've made in UIKit
in support of these
design themes.
And one of the biggest
is typography.
Beautiful typography
is at the core of many
of the design changes
across iOS.
And our type designers and our
human interface designers worked
closely with engineering to
define an entirely new approach
to user interface typography
called Dynamic Type.
And nothing has been
tried like this
in an operating system
before and it's going
to change the way we
build application.
Dynamic Type let's us
specify fonts semantically.
We no longer specify fonts
by phase and type size.
Users have control over the size
of text in their applications
and we've made extensive
changes in the fonts
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
to make them beautiful
and easy to read
at a wide variety of sizes.
And finally, it contains
built-in support for those
who have vision impairments.
So let's talk about
these changes.
Typically, in operating systems
and in all prior versions
of iOS, fonts are
simply scaled up or down.
And this means that a
font that is easy to read
at large size become-- can
become very thin and difficult
to read it at small size.
And conversely, a font
that is comfortable to read
at a small size can be overly
heavy and uncomfortable
to read at large sizes.
But we make size-specific
adjustments
to the character weight,
the character spacing
and the line spacing to result
in fonts that are beautiful
and easy to read at
wide variety of sizes.
On top of this, we're
introducing text styles.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Instead of specifying
specific fonts and sizes,
you specify fonts semantically.
And these are set of fonts
that our designers have chosen
that work really well together.
And you can access
the corresponding font
for these styles using
a new method on UIFont
to get the preferred font
for a particular text style.
The users want control
over the size of text
in their applications.
Some users with great eyesight
want maximum information density
on the screen.
And others, like myself,
are getting a little older
and want a little bit bigger
text to make it comfortable
to read, wants something larger.
And so it's not just one set of
sizes our designers have chosen.
They've chose an entire family.
And everyone of these fonts
contains those careful
adjustments with literarily
pixel level accuracy
on every single font
that was scrutinized.
So let's take a look
at an application
which is adapted Dynamic Type.
This is the Mail application
and on the left you
see the message list
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
and on the right you
see the message body.
And this is at the smallest
size available to the user.
And as we step up
through the sizes,
notice that not only are
the fonts getting larger,
but the layout is changing.
The space between the
lines of text and the space
between the text and adjacent
UI element is all changing
to make this application
look beautiful even
at the largest font sizes.
And notice that even at
this very large size,
the text is thin and crisp.
But even this largest size
isn't large enough for someone
with the vision impairments.
And for those users, we've
added a mechanism to expand
to that range of sizes.
This has the effect
of increasing the size
of the body font
which is the font used
to display the most important
content to the users,
given them the ability
to access their content.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
But not all users with the
vision impairments have a
problem with the size of a text.
For some of these users it
has to do with the contrast
between the text
and its background.
So we've added another mechanism
to enhance text legibility.
And this has the effect
of increasing the weights
of the font used
across this entire grid.
For most users, the
default fonts
that our designers have
chosen work really well
and are beautiful
on retina displays.
Before those users that have
those contrast vision issues,
hopefully, you can see
on the screen how enhancing the
weight really does increase the
contrast and make this content
that makes more accessible
to the user.
So in addition to these eight
styles there are wide ranges
of variance that you can use.
From Bold and Italic variance,
to variance that have looser
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
or tighter line letting as well
as the wide variety of others.
So you've actually have an
enormous spectrum of fonts
to use to design your
application, and everyone
of those contains those
specific size adjustments
and accessibility enhancements.
So Dynamic Type includes
the text styles,
it includes user settable
sizes including enhance
to accessibility sizes
and it contains these
legibility enhancements.
And so, by simply changing
the way you specify your
application, from specifying
specific fonts, specific sizes,
to using text styles and letting
the system pick the font for you
and adjusting your
layout appropriately,
and adapting this
single new method,
you get all of these features
and users benefit from this.
So let's talk about
Letterpress for a second.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Letterpress is a form of
relief printing where text
and graphics are
pressed into the paper
and it deforms the paper
creating the highlights
and shadows which creates
a real sense of depth.
And we use this to
ourselves in the notes,
in reminders applications
and we want
to make it available to you.
So you can see there're this
complex shadows and highlights.
And if you compare this to
a piece of printed text,
you can really see
how they compare.
Now this have an incredibly
complex graphical effect
but it's trivial for you to
turn on in your application.
You set a single
additional attribute
on your attributed string
and now anywhere in your UI
that you're displaying text,
you can now display
Letterpress text.
[ Applause ]
So part of beautiful typography
is kerning and ligatures.
And we've turned on kerning
and ligatures everywhere
in the OS and iOS 7.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
And so text which rendered like
this in prior version of iOS,
now renders properly kerned.
And text like the word "shuffle"
here when rendered in a font
that contents ffl ligature will
automatically take advantage
of that ligature.
But it goes way beyond
simple kerning and ligatures.
In iOS 7, we've opened
the entire spectrum
of advance typographical
features to you--
for you use to use
in your applications
from ornamental ligatures
to advance rendering
effects like text etching.
[ Pause ]
I've been excited to talk about
this next topic for a long time.
We've been working on this
technology for nearly two years
and it's at the heart of all
of the advance typographic
features we see
in iOS 7, and that's Textkit.
Textkit is a modern
object-oriented,
high level text API that's
built on top of Core Text.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
And we've rewritten all of our
text related controls in UIKit
to take advantage of
the power of Textkit.
It gives you complete control
over the layout and rendering
of text and other
related components.
And it works great for
simple runs of texts
like this all they way
through advanced page layout
functionality including multiple
text regions, imbedded content
and either wrapping text
around arbitrary shapes
like the flowers you
see in the left corner.
TexKit is powerful and easy
enough to do all these things
and it's one to two
orders of magnitude easier
than doing the same
things in Core Text.
[ Applause ]
So there's a lot
here in Textkit.
And because of the increased
emphasis on typography in iOS 7,
I encourage you all to make
it to these sessions and find
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
out about Textkit and find
out how you can use this
powerful new framework
in your applications.
And with that I'd like
to turn it over to Andy,
who's going to take us through
a few more changes in UIKit.
[ Applause ]
>> Thanks Jason.
You know, text is so important
to us, and we've spent
so much time making
it better on iOS.
Not just because
of the aesthetics--
we think they're
really beautiful--
but also because
of the function.
You know, one of those principle
design themes that we considered
when designing iOS 7
was that of deference--
that the content comes first--
and the ornamentation and the
chrome of the system needs
to get out of the way
and exalt that content.
So looking now at Mail,
you notice a few things.
One, we've expanded those
photos horizontally all the way
to the edge of the screen.
But we haven't just
expanded them horizontally:
we've also expanded the main
scrolling text view vertically
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
underneath the bars at the top
and the bottom of the screen.
You'll see the-- the
boy's purple shirt
and red pants scroll
underneath those bars.
That gives you a
sense of context,
and it also gives
a little more space
for the content to ring through.
So, we're actually doing this
on navigation bars, toolbars,
tab bars, all throughout our
operating system, not just Mail.
And so there are some things
you need to know about changes
in the View Controller
system and elsewhere in UIKit
that make all of this full
screen concept possible.
Now, obviously, one of the
first changes is just layout.
You'll see first
that we're not trying
to avoid those bars anymore.
We're now putting the geometry
of your View Controller's views
and your modally presented View
Controller's views all the way
up underneath the
navigation bar,
underneath the status
bar by default.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
And those bars, yes,
they're transparent,
but they're not just
transparent in the way
that iOS 6's transparent
bars can be configured.
They're actually blurred.
And they're not even
just blurred
when there's a photo
behind them for instance.
We up the saturation of that
photo and we adjust the levels
to really make those colors pop.
And when there's text
behind those bars,
we increase the opacity
of the bars so that
that text doesn't
interfere with what's on top.
The status bar has
changed as well.
And in fact, it no longer
has a background of any kind.
What you're seeing there is
actually the navigation bar
extending up and
under the status bar.
And so, if you had a design
without a navigation bar,
you would have to make
sure that the content
that appears underneath
that status bar is
appropriate for you.
Now, when we scroll all they way
to the top of this Mail Message,
we want to make sure
that the header
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
of the Mail Message still
appears below the navigation
bar, and we do this by default
in iOS 7 by automatically
and aggressively
adjusting the content insets
of your View Controller's
content views
if there are scroll views,
just to make sure that all
that content will be
visible for the user.
Now, let's take a look at
another user interface.
This is Game Center on iOS 7.
In Game Center, this content
is actually not scrollable.
And that's okay, but it might
mean that it's a little awkward
to specify this UI, which
is really appearing inside
of this gold box, with
respect to the full screen.
You might like to specify
it as you did on iOS 6.
And so there is API to
permit that kind of design.
New on UIViewController, we have
a property called Extended Edges
for Layout, which describes
the edges of the screen along
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
which we're going
to extend the layout
of your View Controller's views.
So by default, it's All because
we're extending them everywhere.
We want your views
to be full screen.
But if you'd like, you can
specify None, for instance,
which would put your views
pretty much as they looked
in iOS 6, trying to
avoid the bars at the top
of the bottom of the screen.
There's another layout issue
that you need to be aware of
and it looks a little bit
like here in the photos.
Now, if you look
at this HDR icon,
it's positioned just a couple of
points below the Navigation Bar.
But of course, the Navigation
Bar is a different height
in portrait and in landscape.
So the origin of that
HDR icon is different
in each orientation.
And we need a good
way to specify that,
hopefully as simply as possible,
and we've introduced
that with iOS 7.
View controllers now
have a top layout guide
and a bottom layout guide that
describe where those features
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
at the top and bottom
of the screen
that might overlap
your content are.
And even better, you can
actually now use them
with Auto Layout.
So a single constraint
like this one would keep
that HDR icon three points
below that navigation bar.
And when you rotate from
portrait to landscape,
it would get automatically
adjusted for you.
So as I said, the status
bar styles have changed
and they don't have
a background.
They have dark content
by default.
And so what that means is that
if you're putting dark content
in your views behind
the status bar,
you probably want a light status
bar foreground, and we've made
that available to
you via this new API.
These other two APIs describe
the nature of the background
of the status bar, so they've
been deprecated in iOS 7.
And if you specify them, you'll
get the light content style.
Now, because in iOS
7, it is so important
to specify the correct
style and visibility
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
for the status bar
due to the fact
that it doesn't have
a background,
we've made that a
little easier for you.
Rather than having to
manually manage the disposition
of the status bar across
the various UI screens
of your application, you can now
specify the styles declaratively
by using these properties
on UIViewController.
In that way, as View Controllers
are pushed and popped
or switched between on tab
controllers, modally presented
and dismissed, UIKit will
automatically manage the status
bar for you.
Now, this is a pretty big change
in behavior, so it's controlled
by a switch in the
info key list.
It's off by default in Seed I.
So if you'd like to experiment
with this API, just go ahead
and set that key to YES
because we're going to turn it
on by default in future seeds.
Now, we're going to
leave it there so that
if you have a legacy code
base which does a lot
of manual status bar management,
you can keep that code around
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
and just set this key to
NO to get the old behavior.
So that's full screen content.
But when it comes to content,
it's not just about giving it
as much space as possible.
It's also about making sure
that the user can quickly access
the part that they want to get
to and quickly perform
the actions that they want
to perform within
that application.
So we've sought to add that kind
of functionality in a number
of places throughout
the operating system,
and I'd like to talk about
one of those places now.
So here's Mail again, and note
that we can move our finger
from the edge of the screen
inwards to navigate backward.
And the navigation
controller tracks interactively
that transition.
There's a piece of API that
allows you to get access
to that gesture recognizer.
So if you need to temporarily
disable it or if you need
to specify for instance that one
of your gesture recognizers
should recognize simultaneously
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
with this interactive pop, you
can do that using this API.
But we're really excited about
what this gesture portends,
not just because it lets us
easily navigate backwards
in navigation stacks.
The transitions throughout all
of iOS 7 have been made
a great deal more fluid.
And so, you'll see
here in Calendar
that as we start tapping
from year, to month,
to day that we're zooming
on this infinite plane,
and that's communicating
something about the nature
of the information
in this application.
It's not just laid out in a
series of horizontal screens.
We're moving through
it in a new way.
It also gives the Calendar
app some personality.
So this technique is
very exciting to us.
And we're actually going
to provide it to all of you
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
in the form of a new
UIViewController API
that allows you to
specify custom animated
and interactive transitions
for your View Controllers.
We're using it in a number of
places throughout the system,
and I'd like to show
you this one
because this is a Collection
View, and we've made this kind
of transition even easier.
So here's Photos, and we'll zoom
in from years, to collections,
to moments, to a single photo.
Note that we get this new
spatial representation
of the information, and
we'll zoom all the way back
out to SpringBoard, and you see
that concept is reinforced
throughout the system.
So we've made it really easy
for you to implement these kinds
of transitions, if you're using
UICollectionView in iOS 7.
And I'd like to briefly describe
how that works to you now.
So to make it easy
we're just going
to consider the top two levels
of that navigation stack,
the year's user interface, and
the collection's user interface.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
And I just want to run
through how you'd go
about implementing them.
Now you would start with perhaps
a Collection View flow layout
that you've customized
to make your layout,
and that would describe the
geometry of that user interface,
and then you'd make a
Collection View Controller
with that layout, and the
Collection View controller would
manage the Collection
View as you see here.
Now, this is going to be a
hierarchy, so you would push
that Collection View Controller
onto a navigation stack.
Turning our attention now
to the "collections" view,
we would similarly
create a layout for it
and make a Collection
View Controller for that.
But before we push it on, we're
going to use this new piece
of API, usesLayoutToLayout
NavigationTransitions.
And when we set that to YES
on the second Collection
View Controller and push it
on the navigation stack,
behind the scenes UIKit
is actually going to use
that same Collection View
for both View Controllers.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
And it's going to
animate the transition
between the CollectionV
iew layouts
at each level alongside
the navigation transition.
And in fact, if the user scrubs
their finger along the side
of the screen like I was
showing you with Mail,
we'll actually scrub
through the transition
between those layouts.
And you can even define your own
interactions which drive those
like a pinch for instance.
So we're really excited about
what you can do with these kinds
of custom animated transitions
and the custom interactions
that drive them.
We're using them throughout
iOS in order to communicate
where information is in the
applications and in order
to give our applications
a personality.
So we have a whole talk
that goes into more detail
of how all this stuff works, and
I encourage you to check it out.
Now, another way we're
communicating in iOS 7 is
through the use of color.
We stripped out a lot of
ornamentation in this interface.
But in order to make sure
that things are still clear,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
we're using color to signify
interactivity and selection.
So you'll see for instance
that those buttons on the top
and bottom bars are red, whereas
the rest of the content is black
and white, except of course for
that 11 which is the day's date.
So it quickly draws the
user's eye to those things.
And that red also creates a
nice theme for the Calendar app.
It's cohesive.
And as we look at Notes,
you'll see that we're
using yellow there,
and purple in Game Center.
So this is one of the
techniques that we've used
to create an identity for
each of these applications
in the user interface which
is otherwise explicitly devoid
of the ornamentation and imagery
that we might have
previously used to do that.
So this is all made
possible available to you
through a new top
level UIKit API.
We've promoted tint color
from certain UIControls
all the way up to UIView.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
You can set it on any UIView.
And it's actually a
hierarchical property.
And so for instance, if you were
to set red color on your window,
then any UIViews in
that window which looked
at tint color would get red.
By default, that includes
all default UIKit controls,
but we encourage you to
implement any kind of custom UIs
in your application which
take advantage of key colors
in this way using this API.
The reason for that is what
I'm about to show you here,
and that's that when we present
an action sheet, we dim that UI.
It's no longer interactive.
It's no longer selected.
It's no longer important
to the user.
We're trying to make clear
that the buttons at the bottom
of the screen are what
you need to address.
And we actually, we
haven't just laid a grain--
a gray overlay over
that Notes Back button.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Take a look at that Back
button for a second.
If we had laid a gray overlay
over that button,
it would like this.
Now, there's still some yellow
there, and that yellow distracts
from the buttons of the bottom
of the screen and it's also kind
on muddy because we've mixed
a bunch of gray with it.
So instead we're desaturating
the tint color that you give us.
And so, if you have any custom
UIViews in your application
which should desaturate in
the same way, all you have
to do is implement
tintColorDidChange
on those views.
And then when you next consult
the tint color you'll get the
saturated or desaturated version
as appropriate given the
application's present state.
Now, customization in UIKit
has changed a great deal
with this new look.
A lot of UIAppearance methods
have different semantics.
And of course we're
using color in new ways
that I've barely
scratched the surface
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
of in this brief discussion.
So later this week, we have a
talk specifically on this topic,
and I encourage to check out how
you can use UIAppearance calls
and some new APIs that we've
created especially for tinting
and color to make your
application look unique,
to give it an identity
on the platform,
and to pursue the
same kinds of things
that you were using the existing
UIAppearance APIs for on iOS 6.
So with that, I'd like to
turn it back over to Jason.
He's going to show you some
more of the great stuff
that we've been doing in iOS
7 for your user interfaces.
[ Applause ]
>> Thanks Andy.
Table Views are one of those
commonly used controls in UIKit
and we've change the appearance
fairly significantly in iOS 7
and there have always been
two styles of Table View,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
a plain Table View you see
on the left and a grouped
that you see on the right.
We made most of the changes
to the grouped style.
We've removed the rounded
rects and background textures
and extended the
content edge to edge.
This is because we're
trying to put the focus
on the user's content.
We've also change the way we're
using Separators in Table Views.
They're now indented a little
bit to help show relationship
between related items
in the table view.
You have control
over this indentation
with the new property on table
view cell called Separator
in Set.
And we respect for the left and
the right in set on a separator.
Alert views have also changed
appearance fairly significantly
in iOS 7.
But we haven't changed the
API with one exception.
We've added the ability for you
to insert your own
content into Alert Views.
[ Applause ]
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
We know a lot of you guys
have been doing this,
have been asking
for way to do it.
It's actually super simple.
There's just a content new
property on the alert view.
And we'll adjust the layout
to add your content in.
[ Applause ]
All right let's take a walk
through the remaining
controls in UIKit.
And first off is buttons.
Buttons have a dramatically
simpler look.
They're just represented by
a piece of text or an icon.
We've remove the back--
the borders and the
background textures
and exactly the same
way we did for the bars.
And for the same reason, because
those heavyweight controls
distract the user from the
content, from what's important.
We've added a new system style
and deprecated the old rounded
rect style in support of this.
And we've done a similar
thing for bar button items
with a new plain style.
A segmented controls
in iOS 7 also look
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
significantly different.
They're largely transparent now
and they support tint color.
And so they look great across
a variety of backgrounds.
And because of this we don't
need multiple styles anymore.
And so we've deprecated the
segmented control style.
And so whether you're
looking at a white background
such as Calendar here with a red
tint color or black background
of an application like Stocks
with a blue tint color.
Segmented controls look great.
And we've done a very
similar thing for steppers.
They are also largely
transparent.
They also support tint colors
so they, too, will look great
over a wide variety
of backgrounds.
Now we haven't changed the API
for switches and--
switches and sliders.
But we have changed the metrics.
They're different size now.
And if you haven't yet
adapted Auto Layout
in your application this is
a fantastic way to account
for metrics changes like
this in the operating system.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
PickerViews have a beautiful
new three-dimensional appearance
in iOS 7.
We haven't changed the
API for PickerViews,
but we are changing the way we
are encouraging you to use them.
Previously, PickerViews were
often presented as input views
on the bottom of the screen.
In fact, they often came in
as part of the navigation push
which brought in an
entirely new view controller
to allow the user to
interact with their content.
We're now encouraging you
to present these
PickerViews in line.
So we look at the Calendar here.
When the user edits the time,
you'll see that TableView opens
up revealing the
picker and it goes away
when they no longer need it.
This creates a more
lively engaging interface,
but it's also a lighter way
that doesn't involve this big
heavy weight context shift
for the user.
For applications that use
the SearchDisplayController,
we're not typically displaying
the search bar inside the
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
navigation bar.
And this is, again,
because we want
to put the focus on the content.
We want the chrome to
get out of the way.
And when you're searching,
you don't need to have excess
to the navigation bar.
It's just easy for
you to do yourself
with a simple additional
Boolean property
on SearchDisplayController
to indicate that you want
to put the search bar
inside the navigation bar.
And finally, I want
to talk a moment
about Adaptive Multitasking.
It's very important
to users in iOS 7--
their applications feel
like they're always running
and always up-to-date.
So we have several
new mechanisms
to allow your application
to get launched and updated
in the background
and updated snapshot.
So when the user goes into
the multitasking switcher,
when they launch your app,
they see up-to-date content,
giving the impression that your
application has been running all
along and is always up-to-date.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
We have a session
about this afternoon,
at 2 o'clock in this room.
And I encourage you
all to come to this,
so that you can make your
application still exactly the
same way to your users.
With that, I'd like to turn it
back over to Andy to take us
through the remaining
changes in UIKit for iOS 7.
[ Applause ]
>> Thanks Jason.
Now, we've talked
a lot about clarity
and deference so
far in this talk.
And I'd like to steer
the direction
of our discussion
now towards depth.
If we look at iOS
7's Lock screen,
we see it's been
totally redesigned and
yet it's very familiar.
And one of the aspects of
that familiarity is the Camera
button, down in the lower right.
So as I'm upgrading from iOS
6 to iOS 7, I still know--
if I drag my finger up along
the right side of the screen,
I can get to the camera.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
But look at the way it responds,
it bounces differently,
from different heights,
I can even throw it down,
and it creates this
wonderful bounce effect.
It feels like the user
interface is responding to me,
it feels like a much
more rich interaction.
And, of course, we could
have done this before.
But with iOS 7, we're
introducing a piece
of technology that made it easy
to do this, has made it easy
to do this kind of thing
throughout the operating system
and will make it incredibly
easy for you all to do this kind
of thing in your applications.
That's UIKit dynamics.
The idea behind UIKit
dynamics is
that you'll specify high
level, physics like behaviors
for your application, so
that you can really quickly
with just a few lines
of code get these kinds
of rich interactions that
I've just been showing you.
So for instance, for
this Lock screen here,
all we have to do is specify
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
that the Lock screen has a
certain amount of gravity,
a certain amount of bounciness,
that it should collide
with the edges of the
screen-- just a few lines--
and we got this lovely effect.
We're using in multiple places
throughout the operating system:
Messages for instance.
We create kind of a playful
feel for the chat bubbles.
You see that they lag a
moment behind scrolling.
We're able to do that
using attachment behaviors
in UIKit dynamics
which allow you
to specify spring-like
behaviors for elements
in your user interface.
Now, we have a number of talks
on this topic throughout
the week.
And so I don't need to
go into the details.
Two full talks on
UIKit dynamics,
and we'll also discuss a
new spring animation API
that we've added to UIView
and we're very excited about.
I'd like to also direct your
attention towards the ScrollView
talk which is always
amazing year after year.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
But this year in particular,
it's going to have a demo
that specifically goes into
that Messages bouncy effect
that you all just
reacted so positively to.
And I know a lot of you are
really curious how we did that.
So check out that talk.
It will give you all the
details, live code demos.
It's going to be great.
Now we've looked at the Lock
screen, this is the Home screen.
But the Home screen
doesn't stay like this.
As soon as you pick the phone
up and you start interacting
with it in your hand
making small movements,
the UI in the Home
screen changes,
starts to communicate depth.
Let's look at the stars at
the edges of the screen.
They move in and out
in a way that suggests
that background is
recessed beneath the screen.
And if we look at that
red "1" badge on top
of the Messages icon, it's
moving in a way that suggests
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
that it's really floating there.
Now you've seen this slide
because Toby stole my slides.
But there are more places
where we're using this
throughout the system.
Here's Safari.
Look at how when we tilt back,
we can see more of each tab,
and here it's hiding
a little bit.
And actually, the wallpaper
is even behind those tabs
and it's moving consistently
with the last slide as well
to create this very
rich sense of depth.
And here, we're actually
using it
in standard system UI elements.
Look at the way that
alert floats.
[ Applause ]
So even without you doing
anything, you're going
to get this kind of effect
in your application, alerts,
action sheets, activity
view controller, popovers.
And I just want to
show you a quick A/B
of what the screen looks
like with and without.
I don't have to tell
you which is which.
I could watch this
all day [laughter].
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
The best news I have is not
just that we've done this thing,
Bbt similarly to the
UIKit dynamics case,
because we think this feeling
of depth is so important
in communicating richness
in your interface and also
in explaining how information
is organized in your interface,
we want to make it really easy.
So we've made an API for it:
it's called motion effects.
It's going to be really easy
for you all to adopt this kind
of behavior in your
application as well.
Now motion effects
works by using all
of the advanced sensors on our
devices in order to estimate
in any given moment where
the device is facing relative
to the user.
And it can handle things like
subtle shifts in position,
if I'm lying in bed and
I roll over to my side,
or even dramatic shifts,
like, I turn my phone around
and hand it to my friend.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
And once you know
the disposition
of the phone's arrangement,
you can easily specify how your
user interface should react
in response to that motion.
Well, this effect isn't
free and you wouldn't want
to put it everywhere
in your application due
to the battery implications,
but we've done a great deal
of work all the way up and
down the stack to make sure
that the impact of
this is as low
as we could possibly pull off.
So if you're going to
implement this kind of effect
in your application, we
encourage you to use this API.
I want to show you in
particular what's going
on on-screen while this
motion is happening.
So on the screen to the right
you'll see what's on the display
of the device in the left.
So as it starts moving,
we adjust the position
of the alert along with
the rotation of the device.
We're adjusting the lighting
of the shadows between the tabs
in order to create a
nice shading effect.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
And then we're doing this
perspective skew distortion
on the tab as well.
So you can specify
any kinds of effects
for your application
using this API.
It's not just positioning.
So later this week, we have--
going to have a talk that I
think you'll all very excited
to attend called "Implementing,
Engaging UI on iOS",
where there are going to be live
code demos and examples of how
to get this kind of beautiful
effect in your applications.
There's one more big way that
we're using depth on iOS,
and that's with these
blurring layers.
So you'll see here,
we have these albums.
We're even starting to
suggest depth by the way
that they're stacking up here.
But I want to draw your
attention specifically
to what happens when I
pressed this Edit button.
You see that green
album through this sheet
and that helps communicate
without really getting
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
in the way or taking
up space on screen
that that content is
still underneath this
modal ViewController.
If I were to dismiss it, I know
it's still going to be there
because I can see it right now.
Similarly, you'll see
a Notification Center
that your content is
visible behind it.
And as I mentioned earlier
with the navigation bars,
we're doing a bunch of
processing to make sure
that while we communicate
depth in this way, we don't get
in the way of the
concept which is on top
of the Notification Center.
So you can see that
that text is still crisp
and readable even while
we see the icons through.
We have different styles for
each of these blurring effects
that we're using to
communicate different materials.
And so you'll see for
Control Center for instance,
it's a much lighter style.
It feels almost as
if someone has turned
on an extra backlight
underneath the screen.
So, in order to make this kind
of advance image processing fast
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
and easy for you and
your applications,
one of the things
we're introducing
with iOS 7 is radically
faster snapshotting APIs.
[ Applause ]
And this method is
coming in Seed II.
There's a method in Seed I
that you can use for a number
of application, although,
not this blurring effect,
that will be discussed
later on this week.
But this method will allow you
to get an image representation
of a hierarchy in
your application.
And you could have
done this before.
But this particular piece
of API is turbo charged.
It's about an order
of magnitude faster.
So it'll make possible a
number of really wonderful
and advanced image processing
effects in your applications.
That same talk which is going
to go over motion effects
and show you more of what
you can do with them is going
to give you more information
on implementing these
blurring layers
for communicating depth
in your applications.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
So I think this one is
going to be a must-see.
So we've toured around
the system.
We've talked about
everything we've changed.
But I'm sure that one
of the chief questions
on your minds is, okay,
what do I have to change?
And so I'd like to
close out this session
by discussing strategies
and tips
for adapting your
application to iOS 7.
And I thought that a nice way to
do that might be to discuss some
of those strategies we used
with our own applications
moving them to iOS 7.
So as we've been saying, the
change to the user interface
in the iOS 7 is not
just an aesthetic one.
It's a highly functional one.
And so for each application,
the first thing we did
was we broke it down.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
We asked ourselves, "What is the
primary information the user is
trying to access in
this application?
What are the primary actions
the user is trying to perform?
What's secondary,
what's tertiary?"
Once we have those lists,
we were able to build
that application back
up in order to make sure
that what was primary, the
content, the chief task,
were easy to access, were
beautiful, were available.
That secondary tasks
are just a moment away,
or where they are hard to get
to in previous versions of iOS,
we would create interactions
or change the architecture
around to make them
easier to access.
And unnecessary elements
of our application,
we realized in the study
that we could strip away.
But we didn't just strip away.
In so many cases, we made
these interactions much richer,
and we did that using the
new physics-like system
that I've been describing
to you, UIKit dynamics.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
We did it with the
motion effects.
We did it with these
blurring layers.
We did it with use of
color and typography.
And where it made sense,
we took special advantage
of those beautiful and
dense retina displays
that we have in our devices.
No longer is all of our
art, simply a scaled up
and more detailed
version of the 1X work.
You see that right off
with the typography,
which is taking full advantage
of the retina display in order
to create these extremely crisp,
beautiful, but readable lines.
But also in many places where
we wanted to avoid competing
with the application's content,
we would lower the visual weight
of the system's chrome
by using 1 pixel elements
on retina displays,
1 pixel hairlines.
And so you'll see those kinds
of touches throughout iOS 7.
That is all very
abstract and we've gone
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
over a lot of API today.
So I would like now to
turn our attention to some
of the most important
things that we've called
out from this session
that I encourage you
to adapt first in
your application.
We've been harping on this
idea that content comes first.
And so often content is text.
That's why we spent
so much time on it.
And so I would encourage
you, first thing,
to adopt these new text APIs.
They'll make sure that the text
in your application is beautiful
at all sizes, it will make
sure that it looks and fits
in with the rest of
the operating systems,
is part of that cohesive
design theme.
We'll make sure that users with
accessibility means will be able
to use your application
and get access
to all that great content.
We'll make your application
look better than ever.
It's absolutely fantastic.
Secondly, again, with
the theme of content,
your controllers are
going full screen,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
that's the default behavior,
you don't have to turn that on.
And so if you have
custom layout methods
on your ViewController's views,
you may need to adapt them
to this new reality, or may
need to take advantage of some
of the APIs that
I've been discussing
in order to make that happen.
But once you do, I think, you'll
see that giving content all
that more room to breathe
is a really wonderful thing.
It helps suggest place
in your application
and it gives a much richer
sense of motion as you scroll.
You'll see that content moving
up underneath the navigation bar
and the toolbar, it's
going to be great.
The Adaptive Multitasking,
we only touched
on today in this talk.
And we're going to go into a lot
more detail just later today.
Oh, goodness.
A lot more detail
just later today.
But I want to describe just
again how important the Adaptive
Multitasking API is not just to
the functionality of the system
or the convenience
that, for instance,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
your users will have their
content all the time.
That's true.
And that will be really great
because functionality
is extremely important.
But the other thing this
Adaptive Multitasking system
does is when we wake
your application
up to fetch any data,
once you're done,
we take a screen shot.
And then we use that screen
shot in the app switcher,
and also when you're
launching applications.
And so if we have a recent
screen shot, it's up to date
because you've adopted this
API, it really feels to the user
like your App is
running all the time.
And it's the best of both
worlds, because it feels
that way, it's a
really persuasive trick,
even while you're not paying
the enormous performance
ramifications that
would be necessary
to actually make that true.
It makes the whole
experience fluid and fast;
it's great; adopt this API.
So we have a lot less
ornamentation in iOS 7,
and we're really
pleased about that
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
because it gives the
content room to shine.
And in exchange for that
change in ornamentation,
you're not conveying
the personality
of your application using
this heavy, dense imagery.
You're not conveying
the structure
of your application
using that either.
We'd like to encourage you to--
now use these advanced
animated transitions
between the various labs
of your application.
In order to create these new
kinds of rich feelings to moving
through screens and
also in order
to help give the user
some more detailed context
for what's happening as
they're zooming into a month
in the Calendar for instance.
They can create a mental model
with that much more easily
than simple navigation
controller transitions.
We've given you a
lot of power here
and I encourage you to use it.
Finally, where it's appropriate,
we think these new dynamics
and motions effects
APIs are going
to create some really
amazing designs.
Obviously, it's important to
be tasteful with these effects
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
because they're dramatic.
But when they're executed well,
they make the phone
feel so lively.
When you pick the phone up
off the desk, it's responding
to you before you've
even touch it.
And with the physics-like
effects in the dynamic system,
the interactions, feel so
much deeper and more rich.
It's really lovely.
Now I'd like to spend
a moment on the issue
of supporting both
iOS 6 and iOS 7.
Why are you laughing?
[laughter] And you
saw-- you saw yesterday,
you saw our upgrade numbers
they are really exciting.
People are moving
to new versions
of iOS at a ridiculous pace.
And iOS 7 is so exciting that
we're confident people are going
to move to it at the same pace.
And so we would suggest that you
consider focusing your efforts
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
on iOS 7 first.
Now, I know that's not going
to be possible for all of you.
So if you need to support
both operating systems,
I have a few words of
advice for you here.
In particular first, the iOS
7 UI Transition Guide goes
into a fair amount of detail,
the nitty-gritty of doing this.
And it gives you
some code samples
that will make the
tasks somewhat easier.
It talks about some of
the pitfalls as well.
So I would encourage
you to check that out.
It's on our website.
I'm going to be giving
you a link in a moment.
Jason mentioned earlier that
Auto Layout will help you deal
with metrics, that's
absolutely true.
But it's really essential
in dealing
with supporting both
iOS 6 and iOS 7.
It will do so much of the
heavy lifting for you.
So if you've already adopted
Auto Layout, I think you'll find
that at least around
standard controls and bars,
a lot of the layout work
has taken cared for you.
And if you haven't already
adopted Auto Layout,
now might be a good
time to start.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Finally, as you're considering
design for your application,
perhaps reviewing the themes
we've been discussing today:
a lot of what's new in
iOS 7 is not aesthetic.
It's structural.
And so, as you consider the
design, I would encourage you
to consider a user interface
which is structurally
in the spirit of iOS 7, even
if it's not aesthetically
in the spirit of iOS 7 on iOS 6.
So start with the structure
and get the aesthetics right
on iOS 7, too, of course.
And then move the structure
backwards to iOS 6 rather
than taking an iOS
6 application,
keeping all of its
structure the same,
and moving the aesthetics
to iOS 7's style.
I think that will yield a less
satisfying result for users.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Now, if you have more questions
about this topic or any
of the things that we've
been discussing today,
I'd encourage you to email
Jake Behrens, the gentlemen
on the right over here.
His email address is right there
and he'll be happy to help you
with anything you need.
The Transition Guide
is available
on our developer website.
And, of course, we encourage you
to help each other
on the forums.
Now we've pointed you at
a lot of sessions today.
These are a few of the ones
we think are most important.
And right up next, Chris Parker
will be telling you about all
of the wonderful things
we've added to our APIs
that are not specifically of
how the new user interface.
And so we're really
excited about that as well.
[ Silence ]