Building User Interfaces for iOS 7

Session 201 WWDC 2013

Learn how UIKit has changed to create iOS 7’s new UI, both conceptually and practically. Join us in considering new approaches to your app’s design based on these principles and explore your newly expanded toolbox so you can bring those designs to life.

[ 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 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.

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 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.

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 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.

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 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.

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.

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.

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 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 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.

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 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 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 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 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 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 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 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.

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.

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, 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.

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.

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 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, 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 ]

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 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.

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 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.

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.

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 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.

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 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].

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.

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.

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 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 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.

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.

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.

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 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, 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, 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 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 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 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.

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.

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 ]

Apple, Inc. AAPL
1 Infinite Loop Cupertino CA 95014 US