Transcript
>> So, designing for iOS used to
be a lot more simple.
There was only one phone.
We now have three different
screen sizes for iPhone and
three iPad sizes, with different
orientations, and split screens,
and multitasking screens.
And that might seem like a lot
of different screen sizes to
consider, but there's a basic
framework for designing and
building your app that
simplifies the process.
This will save you time and your
app will look great regardless
of what device people are using.
The key things to consider are
organizing your screens into
size classes, using Dynamic
Type, and taking advantage of
standard UI elements.
And all of these things are
meant to make it easier for you
to design and build your app.
So, first let's take a look at
size classes.
All screen sizes -- all iOS
screen dimensions fall under one
of two size classes, compact or
regular.
And an easy way to think about
this is that the narrower screen
widths are compact size, like an
iPhone layout.
And a wider screen widths are
regular like the width of an
iPad.
If you stack all of the screens
on top of each other, in both
portrait and in landscape
orientations you can see that
size class applies to both width
and height.
The goal of creating these two
size classes is so that layouts
will be flexible and elements
will adapt relative to their
screen size.
So let me give you a couple
examples of what that might
potentially mean for your
layout.
The iPhone 7 Plus in landscape,
falls under regular width, which
allows it to use Split Views
like all of the iPads.
And the two smaller phones in
landscape are compact in both
width and height.
This means they will get shorter
landscape bar heights than the
standard height that you see in
portrait.
Screen widths also define UIKit
margins and margin, the margin
widths can either be standard or
like this iPad generous for
wider screens.
But in this example and a lot of
other cases, text, if text went
edge to edge with the UIKit
margins then the lines of text
would be too long making it hard
for the eye to jump down when
you get to the end of a line.
So, we use readability margins
to restrict the line lengths on
larger devices.
These margins are flexible
because they can vary with the
text size.
And smaller text needs more
narrow readability lengths, and
larger text can have longer
lengths.
And if you're using Dynamic Type
with readability margins, then
people using your app will have
a much more comfortable reading
experience.
So, let's talk more about
Dynamic Type, what it is and how
it can help people use your app.
Dynamic Type are predefined text
styles that can be scaled on a
device so that people can see
text at a size that is most
comfortable for them.
And there are a lot of people
who find text in their apps to
be way too small to read.
So, using Dynamic Type will
automatically allow text to
scale up or down without
compromising your layout.
And it also makes opting in
Accessibility Settings for even
larger type, much easier.
It also makes localizing your
app seamless.
Your text will adjust the
lettering, or line height based
on the height of the characters.
So using these features will
only make it easier for more
people to use your app.
So, this is our Dynamic Type
chart.
And this year, we've made some
adjustments to our existing text
styles by increasing the weight
of Title sizes from light to
regular.
In most cases, we recommend
using two to three of these text
styles per screen.
But with ten different text
styles to choose from, there are
countless combinations and a lot
of flexibility when you're
designing your app.
The names of the text styles are
meant to be descriptive,
suggesting where certain styles
are most appropriately used.
So for instance, Body is
intended to be used in places
where large bodies of text are
needed.
And Body is also the default
that we use throughout the
system.
And from there, we can introduce
smaller and larger styles, or in
this case bolder, to create
hierarchy.
But what if you're using a
custom font in your design?
So, this year, with our new API
we have, we can make custom
fonts Dynamic as well, which is
great.
Keep in mind that you may have
to design -- assign different
point sizes for each text style
because not all fonts have the
same proportions.
And this is important for
keeping your text optically the
same size.
Etsy is a good example of an app
that uses Dynamic Type.
Here it is at its default size,
and here it is at a much larger
size, and it looks great.
So, last but not least, let's
discuss UIKit Elements.
Rather than focusing effort on
designing a task or function
that people are already familiar
with, we want you to be able to
focus your time designing what
makes your app unique.
We have a bunch of standard UI
elements that you can use in
your app that will automatically
adapt on all screen sizes.
So, this includes things like
TableViews which not only scale
nicely with Dynamic Type, it
also inherits readability
margins and standard
interactions, like swipe
actions, and edit mode.
And there are a lot of other
resources that will help enforce
consistency and adapt seamlessly
across devices.
It's important to note that all
of these components are scaled
for iOS 7, which is the size
that we recommend you start a
new design.
Once you have an iPhone design
we have a couple tips for
adapting it to iPad.
So, going back for a minute, we
now know that regular size
classes or iPads can use Split
Views and to maintain content
hierarchy between iPhone and
iPad consider how your app will
relay out.
The left side of the Split View
can be referred to as the Master
View.
And on the right is the Detail
View.
And the Detail View on an iPhone
would be the page you have to
drill down further to see.
Remember, an iPad will share
both iPad and iPhone specific
layouts and iPad layouts should
maintain the same level of
hierarchy as the iPhone layout
including standard navigation,
toolbars, and tab bars.
If your app has enabled
multitasking, this will create
consistency when your app has to
coexist with another app.
And while in multitasking your
app will transition back and
forth between the iPhone layout
or compact, and back to regular
size classes depending on its
current screen width.
Okay, so to recap.
When designing for iOS, it's
important to keep these three
things in mind.
Considering size class will make
your app look amazing regardless
of what device people are using.
Using Dynamic Type will make it
easy for your text to scale and
translate to different
languages, and this will enable
more people to use your app.
And taking advantage of existing
UI elements will free you up
from redesigning and rebuilding
features that people might
already be familiar with.
We encourage you to take
advantage of these tools, not
only to save you time, but so
that regardless of what iOS app
people are using, your app
experience will be seamless.
Thank you.