All Products
Search
Document Center

Differentiated design

Last Updated: Feb 05, 2021

On the iOS and Android platforms, there exists significant difference in human-computer interaction. We should follow each platform’s characteristics and make differentiated designs.

Search

There are two types of search bar, i.e. prominent and hidden search bar.

  • The prominent search bar is used on Alipay homepage, industry platform homepage, etc. that have strong search needs or strong marketing needs;
  • The hidden search bar is used on pages where search needs are not particularly strong, so the space saved can be used to display more content.

In the iOS platform, the design of prominent and hidden search bar is as follows:

search_iOS

In the Android platform, the design of prominent and hidden search bar is as follows:

search_Android

Operation list

  • The operation list on iOS system is slid out from the bottom of the page, and there is a Cancel button at the bottom of the list to close the list;

    list_iOS

  • The operation list on Android system is popped up from the middle of the page. Since Android devices have physical back button, there is no need to design a cancel or close button in the list. Tap on a blank area outside the list or tap the physical back button to close the list.

    list_Android

Pop-up box

The pop-up box styles on iOS and Android platforms are different, but the interaction method and usage principle are the same:

Principle:

  1. Ask whether to perform the current operation in the title;
  2. Alert users of risky consequences that may be caused by current operation in the main instruction if necessary;
  3. The button to confirm operation should be presented with the operation again.

Don’ts:

  1. Don’t use ambiguous descriptions like: “Are you sure?”;
  2. Do not explain or interpret the consequences of the operation;
  3. Don’t use action buttons that are unclear. For example, there are only “Cancel” or “OK” text on the button, where the “Cancel” button sometimes may cause ambiguity.

The iOS-based pop-up box is as follows:

iOS

The Android-based pop-up box is as follows:

Android