Editor’s note: why is the interaction between iOS and Android so different from the same App? This article will use a large number of original design cases, one by one for you to explain why they should do this, quickly learn!
Understand and properly integrate platform specifications and advantages to achieve the best user experience.
In order to create the best native APP, you need to keep in mind the difference between iOS and Android platform. These platforms differ not only in visual level, but also in structure and process. Keep these differences in mind to provide the best user experience for native applications.
Native applications for iOS and Android have special built-in functions. The Apple and Google specifications recommend using platform standard controls as much as possible: page layout, tabs, splitters, table views, set views, and split views. Users are familiar with the general operation of these controls on each platform, so if you use standard controls, users will have a very intuitive understanding of how to use them. This article will focus on the differences between interaction design patterns on iOS and Android, clarifying why applications on iOS and Android look different, and why they should. In addition, this article will provide examples of native application design 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 for navigation mode design. There is a global navigation bar at the bottom of the Android device, and using the Back button in the navigation bar is an easy way to go back to the previous interface or step, which is applicable to all Android applications.
Global navigation bar (Android)
In contrast to Apple, design methods are quite different. IOS doesn’t have a global navigation bar, so we can’t expect to support global returns like Android native controls. This feature affects the design of iOS applications, which require a navigation bar and a return button in the upper left corner.
Return button on iOS
Strictly speaking, iOS also has a global operation to return, which can be returned directly by right-clicking on the interface. Translator: I didn’t know this feature before. Now I have used it very smoothly.
Global return operation (iOS)
In this case, the difference between iOS and Android is that right-sliding the page on an iOS device returns to the previous level, and switching the tags on Android.
In order to maintain consistency with other mobile applications, we must keep in mind the differences between platforms.
Left sliding operation switch label (Android)
2. the application of internal navigation mode is different on iOS and Android.
There are some different navigation modes in the Material Design design specification. The familiar navigation mode in Android application is the combination of drawer and label.
Drawer navigation is actually a menu, which is clicked through the Hamburg icon and then slides out from the left or right side. The tab bar is usually located below the title bar, so that the content can be managed well. Through the tab bar, users can switch the view, data set and function of the application.
On the left is the drawer navigation; on the right is the label bar.
Another component in Material Design is called bottom navigation. This component is also very important for Android native application. The menu items at the bottom are easy to click and manipulate. But the Android spec doesn’t recommend using both bottom navigation and tags because it can cause confusion when navigating.
Bottom navigation (Material Design)
In Apple’s man-machine interaction specification, there is no standard navigation control similar to the drawer menu. Instead, Apple suggests putting global navigation in the label bar. The label bar is placed at the bottom of the application, enabling the core function of the application to be quickly switched.
Usually, there are no more than 5 labels on the bottom column. As you can see, this component is very much like the bottom navigation of Android, but this form of navigation is more common in iOS.
Two common navigation forms of iOS, segment control and bottom tab bar.
Although both operating systems have similar features (toggle labels and segment control, bottom navigation, and label bars), 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 not in iOS, and the visual differences between the two.
Apple believes that common navigation entries should be as external as possible, and that some features that users don’t normally use need to be put into the hamburger menu. Compared with Android specification, the main navigation is usually placed in Hamburg menu.
3. rebuilding standard controls requires additional development time, and users lack experience.
If you want every element of your application to look the same across platforms, you’ll need extra development to create the best mobile application design. The trouble is with default controls, such as radio buttons, check boxes, tab switching, etc., which require a custom view 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 respecting the design habits of users of different platforms. When designing mobile applications for iOS and Android, it is important to keep in mind the differences between platforms in order to design applications that meet user expectations.
An example of the difference between the two platforms is the date selector. Android users are not familiar with the date pickers in the form of slot machines commonly used in iOS. Using this type of date selector in Android also requires a rearrangement, which adds to the difficulty and time of development and makes the interface look out of place with the system style.
On the left is the iOS standard date selector, and the right side is the Android standard date selector.
On the left is the iOS standard selector, and the right side is the Android standard selector.
4. button styles in iOS and Android
In the Android design specification, there are 2 different styles of buttons — flat and convex. These buttons are used in different scenarios. In Android, the characters on buttons are generally capitalized. Uppercase text can sometimes be found in iOS native application buttons, but more often it appears in the title.
The standard Android button is on the left and the standard iOS button is on the right.
There is also a very special type of button called the floating button on Android and the active button on iOS. The floating button is used to show the main operation of the application. For example, this float button is used to write email in an email APP or to state in a social APP. A button similar to iOS is called an activity button, usually placed in the middle of the bottom navigation.
On the left is the standard iOS activity button; on the right is the standard Android floating button.
5. difference between iOS and Android bottom operation view
There are two different types of bottom operation views in Android: modal view and resident view. There are also two different types of modal views: modal lists with different operation contents and application lists displayed when the user clicks on the “Share” icon. Similar components can also be found on iOS, but there are great differences in design style and layout.
On the left is the standard Android bottom menu view; the right is the standard iOS standard menu view.
6. the difference between the touch area and the system grid.
The minimum touch range for iOS is 44px@1x and Android is 48dp/48px@1x. The Android specification also suggests that all elements be designed with 8dp as the standard baseline.
7. font difference
The default font of iOS’s system is San Francisco while the default font of Android system is Roboto. Noto is a font that can be used in all Android interfaces, including languages that don’t support Roboto fonts. Because of the differences, we need to pay close attention to the layout and layout specifications of different platforms.
On the left is the Android font; the right side is the iOS font.
8. interaction detail differences
The first impression of users is usually based on the design level.
Establishing a user’s first impression is very important to the product. In the process of APP development and design, we can create an attractive experience for users by doing micro-interaction and animation.
Let’s clarify the rules and recommendations for interaction and animation between the next two platforms, and look at some of the official standard examples.
Focus and Priority – Interaction design aims to focus the user’s attention on what really matters to him in the application. Both platforms do not encourage the abuse of animation, because too much animation tends to distract the user’s attention and make the user anxious.
Consistency and hierarchy — keep in mind that the most important thing in interaction design is to help users find what they want in an application by determining the hierarchical relationships between elements. Intimate, smooth, and no abrupt page Jump to ensure that users can operate easily. For this point, the two platforms have made some reasonable suggestions for the animation specification.
Despite the similarities between Android’s Material Design (MD) and iOS’s Human Interface (HCI) specifications for using animation, there are still some clear differences. Users get used to the way animations jump on a particular platform and think that only those they are used to are the most natural.
That’s why special attention should be paid to the form of interaction between platforms. These small details can enhance the user experience and bring natural experiences to users on different platforms.
IOS users are accustomed to micro-animation in iOS, such as smooth transition, horizontal and vertical screen steering and Simulation of physical laws and so on. Users will be confused when the application of animations without meaning or physical knowledge is applied. For example, users want to refresh the interface by drop-down, hoping to return by right skating. The iOS design specification strongly recommends that unless you are creating immersive experiences such as games, you design them as much as possible according to the official animation specification.
According to the Material Design specification, an element is divided into efferent, incoming, or resident elements during the transformation process, and different elements have different conversion methods.
Animation can guide users’ attention. When the interface changes, the animation establishes continuity before and after transition. The switch of navigation is a very important element in the interface. They help users identify their direction through clear structure. For example, when a UI element expands to fill the entire screen, the expanded new interface is to open the child of the element and return to the parent.
Examples of parent parent handover (Android design specification)
On the parent interface, the embedded child elements are lifted and clicked in place. The emphasis of the transition is on the sub interface to clarify the relationship between the sub parent level.
Moving consistently to share the same parent interface (such as the content of a tag switch) can reinforce their relationship.
The tab tab is fixed in one place, and the content interface moves in the horizontal direction.
At the top of the application, the switching targets are usually divided into primary tasks, which may not be related to each other. These interfaces are appropriately transformed by changing opacity and scaling values.
There are exceptions: some iOS applications follow Android design specifications (such as Gmail) and some Android applications follow iOS design specifications (such as Instagram).
On the left is the iOS version of Gmail and the Android version of Gmail on the right.
On the left is the iOS version of Instagram, and the Android on the right is Instagram.
But it’s obvious that using the components of the two platform systems to design applications is much faster. So it’s better to take some time to understand the different design specifications for the two platforms, rather than mixing iOS and Android component models, and then spend a lot of effort on development.