The Basics: iOS 13 Interface Changes

Know The Power of the Dark Side

The iPhone has finally found its dark side. Here’s a brief look at the UI implications of Apple’s update. We created a cheat sheet of things to keep in mind while creating apps for iOS 13.

Dark mode

• Can set to light or dark for all times, or to switch automatically at night

Adaptive colors:

• Can set individual colors to work with light, dark, and high con
• Any appearance: for older OS that do not support
• Light Appearance: for light mode
• Dark Appearance: for dark mode
• Additional segmentation for high contrast accessibility
• A range of iOS system colors were created to work with all appearances
• You can also create adaptive images with the same settings

Materials:

• Provides 4 levels of translucency combined with blur for interface backgrounds
• Material values: thick, regular (default), thin, and ultrathin

Vibrancy

Vibrancy values control the transparency of text and UI elements, as well as the extent to which they reflect the underlying colors of the background.

• Text vibrancy values: Primary, secondary, tertiary, and quaternary
• Fill vibrancy values: Primary, secondary, and tertiary

Modal sheet

• Card style that covers most of the prior view
• Can be dismissed by swiping down or tapping a button
• Full screen modals are still available but recommend for immersive content or complex tasks

Share sheet

• Now always full width
• Two rows of icons: common contacts and apps
• List below icons
• Note: Action sheets still look the same

Contextual menus

• Available through touch and hold
• Similar to the peek and pop with 3D touch, but provides a contextual list menu with it

Segmented control

• More rounded
• No longer using lines to define elements
• Deselected state uses a fill
• Selected looks like a raised platform
• Items are separated by a small stroke that aligns with the text baseline and cap height

Steppers

• More rounded
• No longer using lines to define elements
• Deselected state uses a fill

Switches

• No longer using lines to define elements, the background of the switch uses a fill

Icons

• Apple created a whole SF symbol font comprising over 1,500 symbols
• Generally rounder and heavier but come in different line weights and sizes

Of note: Apple’s HIG does not have the most up to date UI as of December 3, 2019

For more info: https://developer.apple.com/videos/play/wwdc2019/511/

Author Stephanie Casper is a Creative Director at Small Planet. She’s worked on all kinds of things: mobile apps, food trucks, charity events, board games, TV spots, a bib for a bull riding contest … you name it. She has an awesome dog named Lucy and an obsession with hot sauce.