You will learn to develop sophisticated user interfaces for iOS, with a focus on user interface design best practices, UI animations, and responsive design. You will learn about the key UI widgets, mapping interfaces and view restoration.
iOS Design Concepts
Loading...
来自 University of California, Irvine 的课程
iOS 用户界面设计最佳实践
176 个评分
University of California, Irvine
176 个评分
课程 3（共 6 门，Specialization iOS Development for Creative Entrepreneurs）
从本节课中
Getting to know iOS Design Concepts
Welcome to Best Practices for iOS User Interface Design! This week, we will take a deep dive into getting to know iOS design concepts. We will cover iOS, HCI, and HIG plus complete a peer review assignment called Layout with Dynamic Constraints that, as the name suggests, uses the auto-layout engine to make dynamic user interfaces.
与讲师见面
Don PattersonAssociate Professor
Informatics and Computer Science
Sam KaufmanPartner at Gradient
[MUSIC]
In this video,
I wanna talk about some of the high-level concepts that iOS design entails.
I wanna think about it, kind of soberly, and reflect on both on what the current
Apple viewpoint is on design but also put it in context to what other people
are saying and to what other people are doing with design.
It's easy when you look at the Apple documentation when you get in to
the descriptions of what they're doing, to think that this is the way it's
always been or to think that this is the only way It can be done.
And that's just not really true regardless of how good the design is.
So in this video we're gonna look at some of that.
So first let's just acknowledge that Apple's design concepts have changed
over time.
It wasn't very long ago where skeumorphism
was the dominant way in which the interface on Apple devices were designed.
And that has given way to flat design.
Skeumorphism is a design approach in which you try and replicate aspects of the real
world in the digital interpretation of the interface that's being rendered.
It's kinda complicated, but it's pretty easy to understand once you've seen some
examples, and I'll show you a few of them.
Skeumorphism was the way it was and now it's primarily in a flat design motif.
So here's a collage of a bunch of skeumorphic interfaces.
So I'm gonna bring those up for us.
You may recognize these if you've been working with iOS devices for
not too long, but there's a variety of them.
You see the contact book in the upper left.
In the upper right, you see the opening of the camera app.
In the lower left, you see a compass application.
And the lower right, you see a calculator application.
In front, you see a voice recorder and
you see a notes app there that says skeumorphism on it.
So let's look at what the notes design looks like today.
If you compare what it used to look like, with that yellow paper, and
what it looks like now in flat design, you can see it's a radically different look.
The skeumorphic design makes it look like you're actually
typing notes onto a legal pad.
It has a little piece at the top that looks like the stub that you tear off
the paper from.
It has a little shadow.
What your typing on has lines like paper and
even renders a little bit like theirs a texture to the paper.
And contrast that to what we have now where it's just a plain
white canvass on which text is placed.
There's nothing about the new, the current notes app with the white background that
suggests any kind of physical relationship to a notepad.
Definitely not in the way that the yellow one does where there's
this clear reference back to physical paper.
Another example is if we look at the calculator.
The calculator, even in the schemorphic version was still a little bit abstract.
But you can see that in the buttons, there's a shading and a gradient that
suggests that the buttons themselves are physical or have physical form.
Of course, they're flat because they're rendered on a glass interface.
And the LED screen or the output screen of the calculators is meant to look like
an old liquid crystal display with sort of the coloring and a reflective property,
a gradient on there that makes it suggest that there's glass over an LCD display.
Now, contrast that to the current calculator app, on the right there,
where all the buttons are completely flat, there's very, very little shading.
There's no sense in which, this is any kind of a physical interpretation or
any sort of a mirror of a physical device.
The buttons are color-coded to help you understand the meaning, but
the display is just numbers in a font that's easy to read.
Some of this transition had to do with Apple's belief that people were now
getting used to interacting with basically flat glass touch displays, and so
the need to reference back to physical objects was not as great.
Another example of how this has shifted is if you look at the application here,
the original compass application, and the current compass application.
Not the original one but the previous generation of compass application.
You can see it really referenced a physical compass that you might hold,
and that would turn as you rotated the physical compass.
With a pointer and
bezels on the edge of the round container that holds the compass arrow.
And, now, in contrast to that, the display for
the compass application is very digital.
It looks like an overlay from some sort of a movie interface, an Ironman interface,
or Minority Report, or something.
But there's nothing very physical, doesn't reflect the physical
object even though it is presenting data that is drawn from the physical world.
Let's see, finally let's look at the library application.
The library application in a skeuomorphic world actually had wooden paneling on it,
there's a wooden texture, there were shadows.
It looks like the books are resting on a shelf.
And to a great degree that has been largely reduced almost eliminated and
the current books app in which just the front cover of the PDF is being
placed onto different rows.
And there's still a little bit of a suggestion that these are shelves and
books are being placed on the shelves.
But the sense of there being wood paneling or shadows behind the documents has
largely been removed in favor of just these plain black rows.
Flat design is also popular in other platforms though, as well.
It's not just an iOS convention.
In fact,
some of the other platforms actually introduced this kind of flat design first.
On the Android platform its called Material Design.
And it has a very similar kind of effect.
Android has some descriptions of their design that suggest that it's not just
a flat or digital display, but actually kinda based on the paper model, where you
have lots of different kinds of paper that are, maybe, layered on top of each other.
But it's definitely not skeumorphic, and it's definitely not a glossy,
shiny, button-driven interface.
It's very flat, very simple, very digital.
Windows, Microsoft, also has a similar design in Metro Design.
Their design is much more vibrant, has more saturated colors,
but also projects the sense of trying to recreate a physical object.
In their start screen here, in the Metro display,
you see a bunch of tiles that are just digital reflections of content,
and they don't really reflect any sort of physical tile.
They just are abstract containers for information that are very flat and
you'll fill up the whole screen, really focus on the content.
So in the human interface guidelines, Apple tries to give some of these
designer approaches, these words to kind of help name these ideas that
they're trying to bring into the interface design, into the aesthetics of the design.
The three first once that they talked about are Deference, Clarity, and Depth.
When they say Deference, what they've say, what Apple says in their interface
guidelines is that the UI, the user interface, helps people to understand and
interact with the content but never competes with it.
So, this reflects a value in Apple's design where the content is
the central reason why users are interacting with the application.
And so, as app designers, both graphic designers and as the programmers
who are implementing it, the focus should be on making the content shine through and
letting the user interface differ to the content.
So on the right is this weather app shows the content very clearly,
it focuses on the temperature as the main thing.
And the user interface is really reduced to maybe the toolbar at the bottom.
And the fact that you can interact with some of the data elements on it.
That's really been deferred to the background, and In exchange for
bringing that data to the forefront and showing that data to the user.
Clarity is the second high concept,
the focus here is on making sure that things are legible,
specially text, that it's legible at every size, that you're not using fonts that
are difficult to read at small sizes when you're rendering them in small sizes.
Icons are supposed to be precise, and clear, and understandable, lucid.
Adornments, meaning embellishments or things that you're adding to the screen,
should be very subtle and appropriate.
And there should be a sharpened focus on functionality that motivates the design.
So the weather example on the right, this is a static image.
But if you look at it in the actual app, the sunshine pattern in the background
actually is animated, and you see those lens flares shift really subtly
as you are reading the temperature or reading other aspects of the weather.
And in that way you have an adornment.
This kind of bright picture reflecting what the weather is,
very subtly animated in the background.
Finally, depth.
Depth is the idea that you can create excitement,
you can create realistic motion by considering that are several
virtual planes on which your content is being displayed.
And because of that, you can move those planes in different ways to
different types of parallax, and that's a fact that Apple to
leverage in order to heighten people's delight and understanding.
So on the weather app there's a background plane that has this
weather animation on it.
Now the ways that the human interface guidelines want you to do that,
is by making sure that your application is relevant,
that it builds on what exists, and that in my words, it acknowledges fragmentation.
So by relevance,
Apple really wants app developers to focus on developing things that people need.
They want the design process to include a reflection on whether
what is being pursued is something that is gonna be valuable to users, and
isn't just some kind of a way to showcase a fancy
user interface at the expense of actually delivering some value to the user.
Building on what exists means that application developers shouldn't reinvent
the wheel with all of the icons and the frameworks that are available already.
And this is just both just common sense, because as a developer you don't want to
be spending all of your time duplicating functionality that already exists.
But it's also important for Apple to encourage this because by using
existing buttons, and fonts, and the layout containers, and
methods of interacting with different views by going forward and backward,
and menu bars, but using consistent UI framework elements,
it makes one app and another app seem consistent.
And that helps the user experience if every time a user brings up a new app,
they don't have to completely re-learn all the interface and
metaphors that are present.
And then finally, I encourage you to acknowledge fragmentation.
And by this I mean that, we just live in a world in which there
are many many different devices, and many many different users.
And it's just gonna take a lot of work in order to make sure that the design,
the beautiful design that maybe you thought of or that you've implemented,
it takes a lot of work to make sure that it's gonna operate on every screen size,
and every device, and every orientation.
But it's important in order to be able to reach the biggest market possible and
to make sure that you're delivering a consistent and
good user experience across all of those different platforms, and
orientations, and devices that are available.
So some strategies for that.
So one of the ways that you can actually defer to content in your design
is to use the whole screen.
Make sure that the whole screen is dedicated to content.
Don't fill up a lot of borders with unnecessary graphics.
For example, in this case, the picture of the weather fills up the whole screen.
Reduce or eliminate skeumorphism, meaning as much as possible
getting away from the idea of trying to replicate physical objects.
So for example here in this map it uses the whole screen.
The user interface, of course you can touch it,
there's a direct manipulation aspect of working with this map.
You can touch it and zoom and pan.
But really the content of the map dominates this interface.
The user interface elements are kept to the very bottom and the very top,
and are emerge when you interact with the app as well with the map.
There's not very much skeumorphism on this at all with the exception of perhaps of
that pin.
That pin is definitely a reflection of a physical pin that you might place
onto a cork board or a bulletin board map.
Otherwise it doesn't look like paper.
It doesn't look like some kind of a map you might have bought in a book ten
years ago.
Another way that you can defer to the content is to leverage translucency.
So here's an example of Apple and
the way that they built translucency into the control center
view that you get when you swipe up from the bottom of your screen.
What's happening here is you're seeing some of the content from the map behind
this pop up window shine through that display.
And that does a couple things.
It reflects the nature of the interface that you're working with
that is a temporary interface, that is gonna go away in a second, and
it also reflects a little bit about what's gonna happen when it goes away.
You see a suggestion of the color of the data that's behind it, so when that
window scrolls down, it's not gonna be a jarring transition for the user.
It's gonna be something that fades in pretty smoothly, and
creates a more subtle, not so
drastic transition from using this control center until going back into the map.
So that translucency is a way to defer to content,
defer to the content that's behind the window, and
also to reflect the nature of what's going on,
when something is translucent, namely that it's sort of temporary or transient.
To promote content clarity, one thing that you can do is allow white space to exist.
So if you look at the Notes design,
there's a lot of white space in this particular view.
And that's okay.
That enables a user to feel like things are ordered and enables the user to
have some control over how much is being displayed at one time in the Notes app.
Another way to promote content clarity is to leverage color.
So in this case there's a consistent color that's being used for
all of the different things that you can interact with.
So in the Notes app you know that if you touch something that's yellow,
something's gonna happen.
The things that are black, the user comes to know, is their text, and
that's where they're going to edit the notes that they wanna take.
Apple recommends using it sparingly, using it to actually communicate something and
not just have color all over the place because you can have different colored
things, but to actually think about not just the fact that the text is colored,
but what does the color communicate?
Make sure that that color communicates the same thing.
So every time you have something yellow,
make sure that it means that you can touch something, if your app uses that metaphor.
In this case it indicates interactivity.
Apple recommends using dynamic type,
meaning type that able to change sizes cleanly.
And they also introduced this idea of borderless buttons.
So in the bottom of this interface you see the trash can, the camera,
the squiggle and the little pencil and paper there.
And you notice that those are buttons, but
they don't have a border indicating the extent to which you can touch them.
And so this is a design, an aesthetic, that Apple wants to have consistently
represented in all of their current generation of applications..
Here's an example of a messaging conversation I had with Sam and
you can see some of those same aesthetics reflected here.
You can see that the top title bar is translucent,
suggesting the content that's underneath it.
You see that white spaces leverage in order to communicate structure to the data
You can see that the color bubbles are consistent, according to the author that
wrote them and that the color of the text reflects, something that is interactive.
But, there's not a lot of colors.
There's just, primarily, two colors and gradients on them, in this example.
And then, finally, here in this contact manager,
this being my entry in my contact book, where I've grayed out or
I've fuzzed out all the different details of the phone numbers.
You can see border less buttons, a lot of them, phones and text and
face time and email.
You can see that, color is used very sparingly.
You've got the blue color, indicating something that you can interact with.
And then there's a fair amount of white space here,
that is helpful for helping you to not to feel overwhelmed or confused.
Another strategy is to use depth to reflect the content relationships.
So, in the calendar application,
as you move from one view to another view the way that, that view is animated,
isn't just pretty it also reflects the structure of the data.
it reflects that you're digging down and going deeper into the data.
So, when you start with this year long view and
you drill down into a particular date, what happens is that it expands, oops!
Sorry.
What happens is, that it expands, see if we can get that to happen, there we go.
Into the month view, and then we click on a date and it expands into the day view.
And then when you go back, it reverses that animation, in a smooth way,
helping the user to keep oriented to where they are,
in what's fundamentally a pretty complicated data structure of a calendar.
But, those smooth transitions and allowing the presentation of the data to reflect
the structure helps the user to maintain a good mental model of what's happening.
And not everyone loves iOS design.
In fact, there's some pretty heavyweight Designers, researchers,
academics, scholars,
that really have some problems with the way that Apple's design has emerged.
One of the big ones, is that functionality is often hidden.
And this means, that it's not clear to someone who has never used
an IOS device before, where you can swipe.
Like, what things are swipeable?
Should you swipe with one finger?
Or two fingers?
How do you know what's going to happen when you do that?
Now with the introduction of force touch, it's also not clear.
Where can you force touch?
What happens when you force touch?
You can swipe left, you can swipe right, you can swipe up, you can swipe down.
And now, you can press.
But, there's not a lot of indication to the user to tell them that they should
expect something to happen, or that they should know what's going to happen.
Another example of this is, the shake interface.
On some interactions, if you shake the phone, it acts as an undo function.
But not consistently and not everywhere and not without any sort of understanding,
that shake is something that's available to you.
Another critique, is that a lot of the icons and
in effort to be minimal is simple have become very unclear.
So, an example of these are icons like the Cloud and the.
This arrow and this other kind of arrow, arrowhead and then this chevron.
These are all icons that maybe you have come to know what they mean,
now that you've interacted with the iOS platform for a while, but for
someone who's new to the device, who knows what a cloud icon is supposed to do, or
who knows what a moon icon is supposed to do, or what the chevron is supposed to do?
It's just kind of not very clear at all.
This is a critique.
And finally, much like their hidden functionality, another critique
is that a lot of the interactivity, interactive components disappear.
And a good example of this is scroll bars, when you scroll of some of the interfaces,
you'll see a scroll bar appear showing you your position within the document, but
then as you wait a second, the scroll bar will go away and it becomes not clear
that there's a functionality to see where you are in the document at all.
So, here's some critiques of the direction in which gestural interfaces are going,
basically that they are hiding interactive elements.
All right, so in summary, at a high level, this high concept of
design that Apple is trying to bring to the table, focuses on content.
Trying to bring the content of whatever you're working with to the forefront.
And letting the user interface be subtle adornments to that content,
hopefully fading to the background.
And when they do appear, that they're very clear,
both on their visual design, the way and which they are rendered.
Both in their color and also that,
they communicate as much as possible,the function of what they offer to the user.
And then, the other high concept ideas,
allowing the UI to emphasize the nature of the content.
As opposed to the UI being there, for its own sake or to be a decoration.
Allowing the UI to fade to the background.
So, these are the high concepts.
We're drilling down from the idea of Apple's marketing strategy,
on focusing on user experience.
This brings us into the human interface guidelines where we talk about,
how do we use design language,
in order to think about what we want our app to be structured like?
And then, we're going to move even further into the X code to say, okay, well,
how were these design concepts enabled
through the functions that are exposed through UI kit.
That's coming up next.
Thanks. [MUSIC]
