Understanding the iOS and Android UI Guidelines

Visual Design Differences

Let’s begin with iOS, whose UI has a flat design style. Its skeuomorphic features from earlier iterations have been removed. Android design relies on shadows to show hierarchy, and its UI resembles layers of paper.

iOS has San Francisco as the system font, while Android uses Roboto.

Ofcourse, elements like UI controls, buttons, icons etc., also vary. iOS uses centre alignment for the title, whereas Android has a left-aligned title.

Look closely, and in iOS, the title is often replaced with the brand logo. In the case of button styles, Android uses uppercased text, and iOS uses title cased text, though this rule can differ.

Both human interface design and material design guidelines define an assortment of button styles. iOS design guidelines dictate buttons that are more flat as compared to Android controls.

Grid Specifications in Android & iOS

iOS UI is developed in points (pt). Android apps, with their material design guidelines, are developed with what are called density-independent pixels (dp).

The design needs to be within the specified safe area. In UI design, it’s regarded as a good practice to design for narrow screen size first.

According to iOS design guidelines, 375 pt is deemed the right screen size (width) for designing. For Android it is 360 dp.

Height is not a limitation when considering the screen size. The size of the navigation bar/app bar and tab bar/bottom navigation bar also needs to be followed.

Navigation Differences between iOS and Android

Starting from the bottom – Android app UI design features the back button at the bottom, whereas on iOS, it is present on the screen’s top-left corner.

Primary navigation in iOS is called the Tab bar, and it is located at the bottom. In Android app UI design, the primary navigation bar finds itself bottom and is called the bottom navigation bar.

Android app UI design also features tabs for top-level navigation. Tabs in Android are for same level navigations, wherein segmented controls in iOS control the content on the same page.

iOS UI design features a ‘More’ button on the Tab Bar in the secondary navigation. In Android apps, we get a hamburger menu on the top left corner.

UI Control Differences in Android & iOS

In iOS app UI design, the primary call-to-action button is located in the upper right corner.

In contrast, the Floating Action Button (present mostly on the bottom right corner) is the primary call-to-action button in Android.In iOS, the search icon is usually present in the tab bar, whereas, In Android, it is present in the upper right corner.

Other Differences

As discussed above, the Search may occupy different positions in the UI, depending on the system. The controls used to operate the Search and the visual style also varies.

iOS Alert boxes have dividers that separate the action buttons from the sentences.

In Android, there are three kinds of alert boxes: Snackbars, Banners and Dialogs, and they all have several levels of interaction priority.

When switching between platforms, users might have to pick a few new habits of interactions. Overall though, material design in Android and human interface design in iOS, both maintain familiar patterns for a better experience despite all their differences and unique features.

Both operating systems have identical section divisions. All the navigation and action-based buttons/icons are largely present either on the top or the bottom, and the middle area is devoted to content. This ensures ease of access to the content.

Both the platforms follow necessary conventions like the use of universally understood icons/symbols. This means the magnifying glass icon (search icon) might have different styling on both systems, but the meaning remains the same.

Similar UI Patterns in both systems

The similarity in touch gestures like tap, scroll, drag, pinch and swipe (with a few exceptions) help users intuitively navigate. Users do not have to relearn these every time. If there are any different interactions, the user is informed about it through labels, colours etc. E.g. The ‘More’ icon on iOS might be new for Android users, but the labelling gives an idea about the meaning.

When brands have their apps on different operating systems, they ensure consistency in branding style, interactions, content, and UX design, so it’s easy for users to switch between both systems. The goal is to deliver as much consistency as possible, while adhering to both human interface design principles and material design guidelines.

These universal patterns help users quickly adjust to any platform they are interacting with.