iOS 선택기, 메뉴 및 동작으로 디자인하기

Hello and welcome to WWDC.

Welcome to our WWDC talk on iOS Pickers, Menus, and Actions. My name is Cas Lemmens, and I'm a part of the Apple Design Team. I'm very excited to talk about three new components we've added to iOS 14 that you can use in your iPhone and iPad apps. We'll talk about menus, the date and time pickers, and the brand-new color picker. So let's start with menus. iOS 14 now allows you to show a menu from any button, and they look like this.

And you might recognize them from the actions you can add to context menus in iOS 13.

So why did we add these new menus? In iOS 13, menus were presented using an action sheet on iPhone or a popover on iPad.

These components have been with us since the very first versions of iOS, and they've served us a great amount of functionality. But with iPhone screens becoming larger and iPad apps becoming richer and denser, the action sheets and popovers started to show some disadvantages. Upon appearing, they dimmed the background, which causes a heavy transition, especially on larger screens like an iPad. The actions in the list are quite large even though the labels are often quite short.

The actions are also quite limited. For example, I cannot use them to make a selection. And especially on the iPhone, I often have to move my finger all the way to the other side of the screen just to choose an action or cancel out.

The new menus on iOS 14 resolve a lot of these issues. To start, the menu appears right next to where you tapped, and that requires far less movement of your finger to select an action. The transition is very fast and light, it's shorter but it still feels smooth, and it's less drastic, as it doesn't dim the background. The items in the menu are smaller and more concise, but still easily tappable, and they support multiple lines for longer strings.

And where menus in iOS 13 could only be used for actions, these menus can also be used for selection and navigation, and we'll see more of that in a second. The content that can appear in a menu is very similar to what's already possible for the actions in a context menu.

Each action has a label on the left and an optional icon on the right. This can be an SF Symbol or a custom image.

A title can be added to help you understand what selection you need to make. And separators can be added to create hierarchy.

A menu can present itself from any button. For example, the "Sort" button here in Music.

To select an option, I can tap and hold the button, move my finger down to the option I'd like to select, and release.

Alternatively, I can simply tap the button and tap the action I'd like to select. At any given time, I can tap outside the menu to dismiss it. This will hide the menu and take me back with no changes applied. It is therefore not needed to add an additional option to your menu to cancel.

Simply tapping outside the menu has the same effect.

Instead, the menu can focus only on the actions to move forwards, which is, in this case, choosing a sort option.

The menus adhere to the Accessibility settings available in iOS and iPad OS, for example, VoiceOver, Increase Contrast, Reduced Motion, and Larger Text, as you can see here.

Menus can be used in various ways. We'll talk about the most common use cases in iOS 14: disambiguation, navigation, selection, and showing secondary options. Let's start with disambiguation. Menus can help you disambiguate your choice at the right moment. In the examples we'll see, we start from a very clear action with a clear intent, and once you select this action, a menu is shown to disambiguate. It will ask a more specific question. For example, in Photos, there's a clear "add" button in the top left corner. Tapping this will show a menu to ask you what exactly you'd like to add.

In Notes, there's a clear action to add an image to a note.

Upon tapping, it will ask you what kind of image you'd like to add.

And again in Photos, when I'm editing a video, there's a clear "Done" button to save my edited video. Tapping it will ask me how I want to save it. All of these are great examples on how to use menus for disambiguation.

Menus can also be used for navigation. For example, here in Safari, I can tap and hold the "back" button to show a list of sites I've previously visited in this session.

Similarly, the "back" button in any navigation stack brings up a similar menu.

Menus can also be used for selection. For example, here in Podcasts with the "Sort" button. Menus used for selection receive check marks next to the items that are selected.

And lastly, menus can be used to collect a range of secondary actions. A simple "more" button in a view is a great way to show a menu of actions.

These actions are often not important enough to be prominently displayed, but they still should have easy access. And they can really clean up your design a lot and help you focus on what really matters. For example, here in Files, the view focuses entirely on your content.

In comparison, Files in iOS 13 had many actions scattered across the view, and that takes attention away from your content. So by simply collecting and organizing them in a menu, the app becomes a lot easier to use.

Similar menus appear throughout iOS 14, for example, here in Messages.

Now, considering menus like this can clean up your view, you might ask yourself, why stop there? Why not collapse all the actions in the navigation bar into a "more" button and when you tap it, you get a nice list of all these options? Hiding all actions in a menu is definitely not an approach we encourage.

It hides primary actions behind an additional tap, and it doesn't give you a good understanding of what this view can do for you. So finding the right balance between your primary and secondary actions can help you decide which actions can go in a menu, if any, versus which ones should stay prominent. For Messages, we kept the ability to compose a message, as it's a very important and frequent action you might want to take. Additional options don't always have to be hidden behind a "more" button. They can also appear on a different gesture. For example, in Safari, tapping the top right action allows me to manage my tabs, but by tap and holding the same action, I get a range of actions related to those tabs.

One last thing to mention regarding secondary actions are destructive actions. For example, here in Reminders, to delete a list. As mentioned before, these new menus remove the need to move your finger to the bottom of the screen to select an action, but sometimes, that gesture can come in handy.

Since destructive actions often cause you to lose information you've entered, we want to make sure there's enough friction, and throughout our different OSes, we've always done this by asking for confirmation.

To avoid accidentally deleting something, the confirmation action needs to be in a different place than the delete action. Hence here, when I'm tapping the delete action, an action sheet appears at the bottom of the view asking for confirmation. I will have to move my finger down to either confirm or cancel out, and the time and effort it takes to do so serves as enough friction to avoid accidentally deleting this list.

Even for destructive actions outside of a menu, we still recommend to keep using action sheets on iPhone and popovers on iPad. In Mail, there's friction when you cancel a draft. It will ask you whether you want to save or delete the draft.

We wouldn't want to use menus for this, since it makes it far too easy to accidentally delete a draft.

Instead, action sheets and popovers require more movement of your finger and help prevent accidentally deleting a draft. So just when you thought you could get rid of all your action sheets, we've still managed to keep them around.

All the work we put into menus was heavily based on how they worked on a Mac for years. And you'll see now that you're able to use these menus in various similar situations, for example, disambiguation and navigation.

And so that summarizes the menus in iOS 14. It replaces the action sheets on iPhone and the popovers on iPad. You can use them for disambiguation by asking for a more specific question via a clear action. Navigation, by giving a list of pages to navigate to.

Selection, by giving a list to select an item from. Or showing secondary actions via a "more" button or tap and holding an action.

Destructive actions always need a confirmation, and for those, we keep using action sheets and popovers. And the new menus will make it easier to translate your app between iPad and Mac.

So that's it for menus. Let's move on to the new date and time picker. Previously, the date and time pickers looked like this. They consisted of multiple wheels you had to turn individually to select a date or a time. Throughout iOS 14, you'll notice these have been replaced with the following new design. This is the new date picker, the new time picker, and a new date and time picker, which combines both. Let's look at how they work.

Reminders is a great example on how to use the new date and time picker. For example, here I'm adding a date on which I would like to be reminded, and you can see the new date picker being presented.

Notice you have a much better representation of the days, weeks, and months. It's easy to jump between months by simply sliding left and right, and you can make a further jump ahead or back in time by tapping the month and selecting a different month and year.

Reminders also allows you to choose a specific time on which you would like to be reminded, and here as well you can see the new time picker being presented.

Instead of having to use the wheels, I can now simply type the time of my choosing. And so the new design makes it easier to select a date or a time with any kind of input: touch, pencil, keyboards, or cursor. Now, these new date and time pickers work really well if you can show them inline in your view, for example, as Reminders does here. But that's not always possible. Specifically for those moments where it's difficult, iOS 14 has a brand-new way to show these pickers, which we call compact.

When you ask UIKit for a date picker in compact mode, you get a button like this. It shows a date in the key color on top of a light platter. Tapping the button shows the new date picker, but it's presented inside a modal on top of the view.

The same can happen for a time picker...

and for a date and time picker.

Let's look at an example.

As mentioned before, the compact pickers are great when it's difficult to show a picker inline. These buttons can appear, for example, in rows, as you can see here in Contacts when I'm adding a birthday to a contact.

Tapping the button shows the new date picker on top of the view, and I can change the date as many times as I like, and once I've found the date, I can simply tap outside to confirm.

As with all of our new components, they of course adhere to all Accessibility settings, for example, larger font sizes, as you can see here.

And the new design also creates better parity between iPad and Mac, since the same information is shown on both. So just as with menus, this will help you scale your app between iPad and Mac. And so that wraps up the new date and time picker. It's an improved way to select a date or a time by giving you a much better representation. You can use them inline in your view or use the new compact date and time picker when showing inline is difficult or not possible. And it will make it easier to translate your app between iPad and Mac, since the same information is shown on both.

So that's the new date and time picker. Let's move on to the color picker.

iOS 14 introduces a new color picker for you to use. You can pick a color in four different ways. You can pick it from a grid, a spectrum, by filling in an RGB value...

or by selecting a color from screen. You do this by tapping the pipet in the top left corner, after which a magnifier appears. You can drag it around to the color you prefer, and once you release, the color will be selected.

The color you select will always appear in the bottom left. You can also save a color to a palette, which is accessible from any app.

So the new color picker is a great way to let you choose any color you'd like to use. For example, here, when I'm using the pencil on iPad.

And just as with menus and date and time pickers, the new design brings parity between iPad and Mac And so that's, in short, the new color picker. It's a brand-new component in iOS 14. You can select colors in four different ways: via a grid, a spectrum, an RGB value, or picking a color from screen.

It holds a palette of colors that is shared across apps, and the new picker will help align your app between iPad and Mac.

So that wraps up these three new components in iOS 14. We added these components to make your apps faster, more lightweight, and more responsive, and they provide much needed functionality with support for accessibility and localization.

So by using these new components, your app will feel more native to the iPhone and iPad, and it will save you a lot of time in making sure your app is inclusive for all people all over the world. So we're very excited for you to use them in our apps, and we're looking forward to seeing them appear in yours. That's it for pickers, menus, and actions. Thank you for watching, and until next time.