iOS 16 Navigation

Many designers are struggling with the navigation of their app. It should be familiar and intuitive. In iOS, your content should be structured based on the type, information hierarchy and by using navigation elements like the tab bar, navigation bar and modal presentation.

Tab Bar

The Tab Bar is the most used menu in iOS. It is placed at the bottom, categorizing an app's content into different sections. It reflects your information hierarchy and help people orient as they interact with your app.

App Hierarchy

The Tab Bar represents your top-level content that branches out into more specific content. Each tab should be descriptive and communicate your app’s theme. For example, Fitness , Training , Sharing.

Avoid Using Home

Avoid using Home with repetitive functionality because it can lead to confusion. Instead of using Home, you can navigate directly to each content type.

Floating Button

A floating action button performs the most common action on a screen placed within the Tab Bar or above. It appears in front of the screen content, typically as a circular shape with a plus icon.

Navigation Bar

A Navigation Bar provides a natural place to display a screen title and action buttons specific to the screen or for navigating to a previous screen.

Push Transition

There are two common forms of transition when navigating between screens. By default, there is a push transition from right to left. Also, you can transition with a modal presentation sliding from the bottom.

Modal Presentation

The modal presentation is used for self-contained tasks. It can take a portion of the screen or the entire screen. It appears from bottom and covers the previous screen.

Sponsored Course

Thanks to Sketch’s sponsorship, this course is 100% free. Sketch is one of the best design tools for iOS design because Apple provides the UI Kit. It is fully native, has real-time collaboration, developer handoff and prototyping.

Getting Started

To follow this course, make sure to install Sketch and download the assets file. You’re going to need to create an account and it’s free to try. You will also need SF Fonts, SF Symbols 4 and the iOS UI Kit.

Sketch : https://www.sketch.com/apps/ SF Fonts: https://developer.apple.com/fonts/ SF Symbols 4 : https://developer.apple.com/sf-symbols/ iOS UI Kit: https://developer.apple.com/design/resources/

Recommended Video

I recommend that you watch this video to learn more about navigation. It has all the necessary resources to guide you about iOS navigation. https://developer.apple.com/videos/play/wwdc2022/10001/