5

New in iOS 15 for Product Designers & Design Engineers

 3 years ago
source link: https://blog.prototypr.io/new-in-ios-15-for-product-designers-design-engineers-aa504e3374f8
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

New in iOS 15 for Product Designers & Design Engineers

WWDC week, the most wonderful time of the year for Apple enthusiasts, designers and developers. During a difficult year, Apple delivered big time on new features across all of their operating systems.

Let’s go over all the changes, new features and APIs that are interesting for product designers and design engineers.

To start here’s a recap of the first day:

Location Permission

Over the past few years, the location permission received multiple updates to enhance privacy. In iOS 13 a new option was introduced to allow access to your location just once. The native location permission would be displayed and every time you use the app, you would see the permission alert again.

With iOS 15 you can now give your permission once and allow an app to access your location only after tapping the new LocationButton. Every time you reopen the app, you will have to tap the button again, but you won’t see the permission alert. The app will still only have access to your location whenever you choose.

Screenshot of the difference between iOS 14 and iOS 15 of the location permission alerts. iOS 15 has a new permission that let’s you allow the app to access your location when you choose to.
Example of the iOS 14 Location Permission alert and the new iOS 15 alert for Location Buttons

You can use LocationButton in SwiftUI and CLLocationButton in UIKit.

Read more in Apple’s Documentation

Notifications

Notifications can be very useful to communicate information to a user, but they can also be annoying and not very welcome at certain times. With iOS 15 you will get more control over your notifications.

With the introduction of Focus (a specific mode you can put your device in while working, sleeping, reading a book, …) notifications might not be delivered the way they currently do. You can set up Delivery scheduling that only lets you receive a summary at a specific time throughout the day.

However, some notifications might make it through while in a Focus mode. For example during work you might want notifications from Slack or your Calendar. Also, Time Sensitive notifications will appear because they might need an urgent interaction.

Apple says that notifications are not displayed during Focus, will still be available on the device as soon as they arrive.

2 screenshots of iOS15 notifications. The first one shows a notification summary, the second one shows a range of notifications to show off the updated design.
Example of a notification summary and visual redesign of notifications in iOS 15

You can support the new notification system by identifying the types of notifications you send out. If you have a messaging app, you want to use communication notifications. All other notifications will be identified as noncommunication notifications.

You can specify an interruption level for these notifications:

  • Passive: Information that is non-critical (restaurant recommendation)
  • Active (default): Information that might be appreciated knowing about when it arrives (score update of your favorite sports team)
  • Time sensitive: Information that directly impacts the user and requires immediate attention (package delivery)
  • Critical: Urgent information about personal health or public safety. These are extremely rare notifications and need a special entitlement.

Passive and active notifications will be not be displayed during Focus and will not override sound settings. Time sensitive notifications will override Focus and scheduled delivery. Critical notifications will override all settings and will play a sound while delivered.

Make sure you specify your notification types correctly, to build trust with your users. They can easily turn off all notifications and might not turn them back on. Only use Time Sensitive interruption level for relevant notifications and never use it to send marketing notifications.

Read more about notificatins in Apple’s HIG

Drag & Drop

Prior to iOS 15 you were only able to drag-and-drop text, images, files, … across apps on iPad. The functionality was available on iPhone, but only within the same app. You can no also do this across apps on your iPhone.

Example of drag and drop on iPhone in iOS 15

View the developer documentation

UISheetPresentationController (aka bottom sheets)

iOS now offers native support for sheet controllers that you can drag to resize and close, similar to the ones you can find in the Maps and Stocks app.

Example of a UISheetPresentationController in iOS 15

Developer Documentation

Customize and resize sheets in UIKit (WWDC Session)

SF Symbols 3

You can now download the first SFSymbols 3 beta which introduces 600+ new symbols, enhanced color customization and improved support for custom symbols.

Example of a cloud symbol with a sun and rain in 4 different color modes (Monochrome, Hierarchical, Palette and Multicolor)
Example of a cloud symbol with a sun and rain in 4 different color modes (Monochrome, Hierarchical, Palette and Multicolor)
Example of the 4 color modes

You can now color your icons in 4 new ways:

  • Monochrome: 1 color tint
  • Hierarchical: 1 tint color that will have different opacities
  • Palette: Allows multiple colors to be specified
  • Multicolor: These have fixed colors that can not be changed

An example of a hierarchical tinted icon:

Download SF Symbols 3

Download the latest SF fonts

UIKit refinements

You can find out more in “What’s New in UIKit

UIToolbar & UITabBar

The toolbar and tabbar will no longer show a background when you are scrolled to the bottom of a page. So the focus is more on the content and less on the navigation.

The new style will be supported out of the box, but it can will issues when you’ve disabled translucency or you’ve used non-standard edgesForExtendedLayout.

If you don’t want the new default appearance, you can create a custom scrollEdgeAppearance.

Screenshot of a UIToolbar and UITabBar
Screenshot of a UIToolbar and UITabBar
New iOS 15 appearance for UIToolbar and UITabBar

In UITabBar now has enhanced support for SF Symbols, so you can use any of 3,100+ symbols in your tabbar.

List headers

List headers with the .plain style got a visual refresh, they now don’t use a background color anymore unless it’s pinned to the top of the screen. It also has extra padding on the top to create a more distinct separation between the content and the header.

You can also use a the .grouped style for a different visual look, similar to the Settings app.

New are the .prominentInsetGrouped and .extraProminentInsetGrouped list styles these will show a larger header if you want some more hierarchy.

Screenshot of all available list header styles
Screenshot of all available list header styles
Existing and new list header styles

UIDatePicker

iOS 14 introduced a brand new style of date picker where you could enter the time with your keyboard, but this could often cause some usability issues. So Apple is reintroducing the scroll wheels for time pickers to make it more easy to use. They combined this with the keyboard input, so you now get the best of both worlds.

1*jzS6Eekv1f_xb37KmOVvUw.png?q=20
new-in-ios-15-for-product-designers-design-engineers-aa504e3374f8
Updated UIDatePicker

UIButton

With iOS 15 UIButton receive new styles in addition to plain. There is now a gray, tinted and filled style which can easily be configured with a UIButton Configuration.

Screenshot of all UIButton styles: Plain, Gray, Tinted, Filled and Multiple lines
Screenshot of all UIButton styles: Plain, Gray, Tinted, Filled and Multiple lines
UIButton configuration styles

Buttons now also support multiline text for the first time and will have automatic support for dynamic type.

Here’s how you can configure the new button styles:

This button will look something like this:

Example of the button created with the code above
Example of the button created with the code above

Get an in depth look at the “Meet the UIKit button system” session

UIMenu

UIMenu was introduced in iOS 14 and now supports collapsable submenus. This will automatically be supported by iOS 15, so you don’t need to make any additional changes. In iOS 14 it would replace the menu with a new menu, now it will be overlayed on top of the current menu.

Gif of the submenu in iOS 15
Gif of the submenu in iOS 15
Animation of a submenu in iOS 15
Screenshot of the updated visual style of a submenu in iOS 15
Screenshot of the updated visual style of a submenu in iOS 15
Example of a submenu in iOS 15

Content Size Category Limits

With Dynamic Type you can change the size of text and other content based on the users preferences. With iOS 15 you can now limit the lower or upper limit to ensure your content will still look great when using a smaller or larger type preference.

Don’t use this to limit Dynamic Type but only for specific UI elements that need to have a minimum or maximum size to still be represented well. Make sure that everything is still legible for all users based on their text size preferences.

UIColor Enhancements

System colors are now unified across all Apple platforms, so you might see some changes to the colors and extra colors that are now also available in UIKit.

Overview of all System colors in iOS 14 and iOS 15
Overview of all System colors in iOS 14 and iOS 15

Dynamic Tint Color

You can now use the new UIColor.tintColor which will give you the current tint color. This can be a great way to match the color of a button with the tint of all other elements on screen.

Pasteboard Data Detectors

iOS introduced a new message on top of the screen whenever you pasted data on your pasteboard from another app. iOS 15 will no longer show that message when you have manually pasted the content of your pasteboard, it will now only be displayed when the app grabs the content automatically.

Screenshot of the notes app that copies an address from the Maps app
Screenshot of the notes app that copies an address from the Maps app
iOS 14 pasteboard “paste” message

There is now also a new API to provide new standard paste menu items:

  • Paste
  • Paste and Go
  • Paste and Search
  • Paste and Match Style

The Pasteboard Data Detector API introduced with iOS 14 is now enhanced to detect even more data types, so your app doesn’t need to access the content of the pasteboard unless it matches the required data type. New data types include:

  • Phone Number
  • Email Address
  • Address
  • Calendar Event
  • Shipment Tracking Number
  • Flight Number
  • Money Amount

More coming soon

I will be updating the article during WWDC week to include more features, APIs and changes made available in iOS 15.

You can expect updates on SharePlay, Safari 15, widgets, SwiftUI, accessibility, Screen Time, Quick note, …

Some design-focused WWDC sessions to watch this week:

As always, if you have any questions or feedback, feel free to reach out on twitter @nielsboey


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK