Those days, I was researching mobile app UI design and thought I’d share the conclusions with you. Here I hope to describe the key component here. So I’ll tell you this very briefly and in the future I’ll come back to you with more details on this one by one.

When it comes to mobile app UI designs, the two mobile domain trendsetters — Android and iOS — are also the two greatest rivals.

So here we are, with a plate full of obvious design differences between Android and iOS.

We assess and analyse even the smallest variations in the apps designed for either platform using this infographics. This will assist us in determining how one differentiates from the other.

1. Navigation

The procedure that allows users to navigate around and execute activities in mobile apps is known as navigation. These navigations may be divided into four categories:

1.1 Top-of-screen navigation

In iOS, the name of the previous tab, current tab, and action button are given.

In Android, it is the Drawer menu, name of the current tab, Search bar, and Overflow menu with back button being optional.

1.2 Primary navigation

Primary navigation destinations are shown horizontally across the bottom of the screen in iOS.

Whereas, in Android, the navigation destinations are spread across the interface.

1.3 Secondary Navigation

In iOS, secondary navigation destinations are found under the “More” tab in the global navigation bar.

In Android, they are accessed by pressing the hamburger menu in the top-left corner of the top navigation bar.

1.4 Back navigation

In iOS, press “Back” action on the upper-left corner, or slide the screen left to right.

In Android, use the back button in the navigation bar at the bottom of the screen.

2. Buttons

Buttons allow you to conduct a variety of tasks.

In iOS, buttons are flat (without shadows), designed with a title case.

In Android, buttons use shadows and support Upper case format.

In iOS, a floating action button serves as a call-to-action button in the center of the tab bar.

In Android, it promotes the primary action, which is located in the bottom-right corner of the screen.

3. Control Design

Control design includes components like search, CTA buttons, selection controls, and tabs, each of which has a specific purpose. Let’s have a look at their positioning.

3.1 Search

In iOS, the search icon is located on the upper tab, and it is sometimes necessary to move the screen from top to bottom to show the search bar.

In Android, there is no hidden search bar; it is located in the top tab.

3.2 Primary call-to-action button

In iOS apps, the primary call-to-action button displays in the upper-right corner of the page.

But in Android, the call-to-action button is a floating button. It may appear on top app bars or the edges of some components.

3.2 Selection Controls

On iOS, utilize a picker control that is anchored at the bottom to display options. When you click on an option, a picker emerges from the bottom, displaying all of the available alternatives.

There are two options for Android.

i. A drop-down menu in place.

ii. A modal confirmation dialog.

3.3 Tabs

In iOS, a segmented button replaces the tab.

Whereas in Android, flat-design tabs are used.

3.4 Cards

Cards present themselves as a novel method to display more information in less space. Both iOS and Android use them differently.

As a result of a user-initiated activity, alerts appear on the device’s screen. Both operating systems have chosen to do it in their own unique ways.

3.5 Alerts

As a result of a user-initiated activity, alerts appear on the device’s screen. Both operating systems have chosen to do it in their own unique ways.

Actions are divided by separators in iOS, whereas notifications are sentence or title case. They are positioned in the middle and at the bottom of the popup.

Alerts on Android are button-style and text-based.

4. Icon size and Screen resolution

When designing mobile apps, it is critical to design icons in predetermined sizes.

Here is a table with all of the measurements.

When building your icon files, you must create five versions to cover all possible platforms. The table below displays the pixel densities and icon sizes for the various types of Android user interface icons.

5. Typography

Only one font is chosen for each platform as the default system typeface, and it is seldom updated. The system typeface for iOS is San Francisco, whereas the usual system typeface for Android applications is Roboto.