Super comprehensive! Comparison of design differences between Android apps and iOS apps

Editor's note: For the same app, why are the interactive operations on iOS and Android so different? This article will use a lot of native design cases to explain to you why they should be done this way. Hurry up and learn!

Only by understanding and appropriately combining platform specifications and advantages can we achieve the best user experience.

In order to create the best native app, you need to keep in mind the differences between iOS and Android platforms. These platform differences are not only different in visual aspects, but also in structure and flow. Keeping these differences in mind can give native apps the best user experience.

Native apps for iOS and Android have special system-built-in features. Apple and Google specifications recommend using platform standard controls whenever possible: page layouts, tab bars, dividers, table views, collection views, and split views. Users are familiar with how these controls generally operate on each platform, so if standard controls are used, users will know how to use them very intuitively. This article will focus on the differences between interaction design patterns on iOS and Android, explaining why apps on iOS and Android look different, and why they should do so. In addition, this article will provide native app design examples to help you better understand what this article is about.

1. Differences in Navigation Modes

Switching between interfaces is a common operation in mobile applications. Considering the differences between iOS and Android native application control specifications, it is critical to design navigation patterns. There is a global navigation bar at the bottom of Android devices. Using the back button in the navigation bar is an easy way to return to the previous interface or step, which is applicable to all Android applications.

Compared with Apple, the design approach is completely different. iOS does not have a global navigation bar, so we cannot expect to support global return like Android native controls. This feature will affect the design of iOS applications. The application needs to design a navigation bar and add a return button in the upper left corner.

Strictly speaking, iOS also has a global back action, which allows you to return to the previous page by swiping right on the interface. (Translator's note: I didn't know about this feature before, but now I use it very easily.)

The difference between iOS and Android in this case is that swiping right on a page on an iOS device returns to the previous level, while on Android it switches tabs.

To maintain consistency with other mobile apps, it's important to keep in mind the differences between platforms.

2. The navigation pattern within the app is different on iOS and Android

There are several different navigation patterns in the Material Design specification. The most well-known navigation pattern in Android apps is a combination of drawers and tabs.

The drawer navigation is actually a menu that slides out from the left or right side by clicking the hamburger icon. The tab bar is usually located below the title bar, so that the content can be well managed. Through the tab bar, users can switch between the views, data sets, and functions of the application.

There is also a component called bottom navigation in Material Design. This component is also very important for Android native applications. The menu items at the bottom are easy to click and operate. However, the Android specification does not recommend using bottom navigation and tabs at the same time, because it may cause confusion during navigation.

In Apple's human-computer interaction specifications, there is no standard navigation control similar to the drawer menu. Instead, Apple recommends placing the global navigation in the tab bar. The tab bar is placed at the bottom of the app, allowing the core functions of the app to be quickly switched.

Usually, there are no more than 5 bottom bar tabs. As you can see, this component is very similar to the bottom navigation on Android, but this form of navigation is more commonly used in iOS.

While there are similar features in both operating systems (switching tabs and segmented controls, bottom navigation and tab bars), the form of navigation is still one of the main differences between iOS and Android. There are some objective differences between the two, such as the global navigation bar in Android and the lack of it in iOS, as well as the visual differences between the two.

Apple believes that frequently used navigation entrances should be placed externally as much as possible, and some functions that users rarely use should be placed in the hamburger menu. In contrast, Android specifications usually put the main navigation in the hamburger menu.

3. Modifying standard controls requires additional development time, and users lack experience in using them

If you want every element in your app to look the same on every platform, then additional development work will be required to create the best mobile app design. The most troublesome ones involve default controls, such as radio buttons, checkboxes, tab switches, etc. These controls require a custom view to implement to display iOS-like controls on Android or Android-like controls on iOS.

Each platform has its own unique way of interaction. Good design is a design that respects the habits of users on different platforms. When designing mobile apps for iOS and Android, it is important to keep in mind the differences between the platforms so that you can design an app that meets user expectations.

An example of the difference between the two platforms is the date picker. Android users are not familiar with the slot machine-style date picker commonly seen in iOS. Using this type of date picker in Android also requires a new layout, which invisibly increases the difficulty and time of development and makes the interface look out of tune with the system style.

4. Button styles in iOS and Android

There are two different styles of buttons in the Android design specifications - flat and raised. These buttons are used in different scenarios. In Android, the text on buttons is generally all uppercase. You can sometimes find uppercase text in buttons of iOS native apps, but more often it appears in titles.

There is another very distinctive button type - called a floating button on Android and an activity button on iOS. A floating button is used to display the main operations of an app. For example, you would use this floating button when writing an email in an email app or posting a status in a social app. A similar button in iOS is called an activity button, which is usually placed in the middle of the bottom navigation.

5. Differences between bottom operation views of iOS and Android

There are two different types of bottom operation views in Android: modal views and permanent views. There are two different types of modal views: modal lists with different operation contents and application lists displayed after the user clicks the "Share" icon. Similar components can also be found on iOS, but the design style and layout are quite different.

6. Differences between touch area and system grid

The touch ranges for iOS and Android are slightly different (iOS's smallest touch range is 44px @1x, Android's is 48dp/48px @1x). The Android specification also recommends designing all elements with 8dp as the canonical baseline.

7. Font Differences

The default font for iOS is San Francisco, while the default font for Android is Roboto. Noto is a font that can be used in all interfaces on Android, including those languages ​​that do not support Roboto. Because of the differences, it is necessary to pay close attention to the typography and layout specifications of different platforms.

8. Differences in Interaction Details

The first impression given to users is usually based on the design.

Establishing the user's first impression is very important for a product. In the process of APP development and design, we can create an attractive experience for users by doing a good job of micro-interaction and animation.

Let’s clarify the rules and recommendations for interaction and animation for both platforms and look at some standard examples given by the official authorities.

Focus and Priority - The purpose of interaction design is to focus the user's attention on what is really important to him in the application. Both platforms do not encourage the abuse of animation, because too much animation can easily distract the user's attention and make the user feel anxious.

Consistency and hierarchy - Please remember that the most important thing about interaction design is to help users find what they want in the application by determining the hierarchical relationship between elements. Intimate, smooth, and unobtrusive page jumps can ensure that users can operate easily. For this point, both platforms have made some reasonable suggestions for animation specifications.

Although Android's Material Design and iOS's Human Interface guidelines are very similar in their use of animation, there are still some clear differences. Users will get used to the animation jumps of a specific platform and think that only those they are used to are the most natural.

That’s why we need to pay special attention to the interaction between platforms. These small details can greatly improve the user experience and provide users with a natural experience on different platforms.

9. iOS

iOS users are used to the micro-animations in iOS, such as smooth transitions, screen rotation, and simulation of physical laws. When the app has meaningless or physical-breaking animations, users will be confused. For example, users want to refresh the interface by pulling down and want to go back by swiping right. The iOS design guidelines strongly recommend that unless you are creating an immersive experience such as a game, you should try to follow the official animation guidelines as much as possible.

10. Android

According to the Material Design specification, an element is classified as outgoing, incoming or resident during the transition process, and different elements will have different transition methods.

Animation can guide the user's attention. When the interface changes, the animation establishes the continuity before and after the transition. Navigation switches are very important elements in the interface. They help users find their way through clear structure. For example, when a UI element expands to fill the entire screen, the new interface after expansion is the child of the element, and returning to the parent.

On the parent interface, the embedded child elements will lift up and expand in the appropriate position when clicked. Put the focus of the transition on the child interface and clarify the relationship between the child and the parent.

Screens that share the same parent (such as content when switching between tabs) move consistently to reinforce their relationship.

The label tab is fixed in one position and the content interface moves horizontally.

At the top level of the app, transition targets are usually grouped into primary tasks (which may be unrelated to each other). These interfaces transition appropriately by changing opacity and scale values.

Summarize

Of course there are exceptions: some iOS apps follow Android design guidelines (like Gmail) and some Android apps follow iOS design guidelines (like Instagram).

But it’s obvious that designing apps using the components of both platforms is much faster. Therefore, it’s better to spend some time understanding the different design specifications of the two platforms, rather than mixing the component models of iOS and Android and then spending a lot of effort on development.