What are the design differences between Android and iOS? Here are 7 differences summarized by experts!

Since most mobile devices used by designers and product managers are iPhones, it is easy to ignore the differences between Android and iOS when designing, and design according to iOS specifications, making only one set of designs for both ends.

There are two problems with only one set:

• Android users’ usage habits are not well adapted to iOS design, which leads to obstacles in use and a higher failure rate of task processes.
• If the designer or product manager fails to anticipate some abnormal scenario states, resulting in no component calls in Android development, the native Android components may be directly called to save trouble, resulting in the entire product having both product-style components and Android system components in terms of visual style, with poor uniformity.

Therefore, during the design process, designers can separately create the different Android parts to maintain the differences between the two ends.

Visual style and concept

iOS makes the functions presented clearer by using white space, simplifying the UI, and using borderless buttons. It reduces the use of borders, gradients, and shadows to make the interface as lightweight as possible, thereby highlighting the content. It drives the design with functions, highlights key content, and conveys interactivity.

White space can make important content and functions more eye-catching and easier to understand, making an application look more focused and efficient, as shown in Figure 1 below.

Let color simplify the UI and use a theme color. For example, yellow is used in the memo to highlight important information and cleverly use the style to imply interactivity, as shown in Figure 2 below.

Use borderless buttons and use copy, color, and operation guide titles to indicate the interactivity of the borderless buttons, as shown in Figure 3 below.

Material constructs a physical metaphor by building a systematic motion effect and rational use of space, combining the two concepts into one.

In the processing of basic elements, we draw on traditional printing design: typography, grid, space, proportion, color matching, images, etc., using these basic graphic design specifications.

Based on these designs, visual hierarchy, visual meaning and visual focus are constructed.

Payment Rules

When an app contains virtual goods, the way users purchase them is also different.

For iOS users, the payment channel must go through the Apple payment platform, and 30% is charged as a service fee. However, the Android version does not need to go through the platform, and can use third-party payment platforms such as Alipay and WeChat Pay.

As shown in the figure below, for the Android version of NetEase Cloud Music, you can choose payment methods such as Alipay, WeChat, and JD.com.

For iOS, the only way is to use Apple’s official platform (App Store). For the company, a 30% commission means a drop in revenue, but this platform payment also has an advantage: continuous subscriptions and automatic renewal deductions.

Push rules

The message push of the iOS system must rely on Apple's APNS (Apple Push Notification Service) server to complete, and the interaction between information and apps is completed through Apple's server.

Android's message push is more open source. If you do not choose to use GCM, the app's message push needs to establish a long connection between itself or a third-party server and the device, and push messages through the long connection.

This means that on the iOS side, even if the app is killed in the background, you can still receive push messages. On the Android side, you need to keep the background online to receive push messages.

File selection rules

There is no concept of folders between apps in the iOS system, which makes it impossible to find the folder of the corresponding app.

If the iOS app wants to send a file, you cannot select the file in the corresponding folder. However, with the existence of iCloud, you can select the file through iCloud.

As shown in the figure below, if you want to send a file to a WeChat friend, just click on the file, enter iCloud and select the file to send.

The Android version can call up the folder and select the corresponding file to send. As shown in the figure below, when QQ sends a file to a friend, you can directly enter the folder of the mobile phone to find the corresponding file.

Gesture Difference

The gestures of Android and iOS are quite different. For hidden operations, Android uses more long presses, while iOS uses more left and right swipes.

As shown in the figure below, when Android performs more operations on a list, a long press gesture is used, and a menu appears after a long press.

On iOS, swiping left or right reveals hidden operations.

Differences in component styles

The overall visual difference between iOS and Android is obvious.

The overall presentation of the Android component is hierarchical through projection, as shown in the following figure.

iOS uses a simple visual hierarchy, as shown in the component style below. A simple dividing line distinguishes the hierarchical relationship.

Component Usage

1. Search Bar

Android often uses the search icon, and users click the icon to enter the search bar interface.

iOS displays it directly in the form of an input box, and users click to activate the input box. From a visual perspective, the iOS search bar is more visually enhanced and easier to guide users to search.

2. Warning dialog box

The Android dialog text is left-aligned and the button text is right-aligned.

The text in iOS dialog boxes is centered, and the buttons are also centered.

3. Cards

Android usually puts prompts inside the card, while iOS puts them outside the card.

4. toast

Android's toast is usually at the bottom of the interface, with the text aligned to the left (not centered). In addition to toast, Android also has a snackbar.

iOS usually places the feedback in the center of the interface. In order to strengthen the feedback status, there will usually be an icon with corresponding text.

5. Navigation Bar

The back icon on Android usually uses a left arrow (with a bar in the middle). At the same time, the title of the navigation bar is located after the left arrow, and the title is the title of the current interface.

The back arrow of the iOS version (without a bar in the middle) shows the title of the previous interface. The title in the middle of the navigation bar shows the title of the current interface.

6. Send Button

The button for sending messages in the Android version of WeChat is placed on the toolbar, while the button for sending messages in the iOS version of WeChat is embedded in the keyboard.

The figure below shows the sending process of the Android version.

The following figure shows the sending process of the iOS version:

7. More Operations

For more operations, long press on Android usually displays a menu, while long press on iOS usually displays a bottom operation list

Summarize

The above is a summary of the differences between the designs of iOS and Android.

If two sets of designs are needed, how should they be designed?

You can make a set for iOS first, and then for the Android side, globally replace the components involved in different places.

For example, for long press operation, Android uses menu, while iOS uses bottom action list. You can replace dialog box, bottom action list, toast and other components globally.