Product interaction design: Control comparison between iPhone and Android (1)

I. Preface

When developers cover both the iOS and Android platforms on their products, they will encounter the problem of how the same function is displayed on the interfaces and interactions of different platforms.

Understanding the control mappings and similarities between the two platforms helps you design products and interactions for both platforms.

This section corresponds to the controls on the two platforms, supplemented with a certain description. For more details about the control description and applicable scenarios, see the relevant documents in the references.

Note: The system controls in Android vary according to the ROM and operating system versions. In this article, the Android controls are mainly referenced in "Android Design.

Ii. Purpose

The meanings expected to be expressed in this article are concentrated in the following three aspects:

√ Controls for iOS and Android are similar in terms of goals, but their forms are quite different. Therefore, Android products conform to the Android style and do not recommend using the iOS style directly.

√ Understanding the ing between iOS and Android controls helps you make use of existing ideas and adapt to the style of the corresponding platform during product design

√ Android has a variety of Android styles and is designed for excellent Android applications due to various device manufacturers' custom ROM, different system versions, and diversified device physical attributes, it is not easy.

3. Function bar

3.1 Status Bar)

The status bar system of the iPhone provides three styles: light color, dark color, dark half transparent, and fixed height.

The Status Bar of Android varies according to the ROM defined by mobile phone manufacturers, and there are multiple styles. It can also be changed in MIUI based on different themes.

3.2 Navigation Bar)

The height of the iPhone navigation bar is fixed and placed on the top of the interface. The title is usually placed in the middle of the navigation bar, but it can also be used to place other content. navigation or other buttons are generally placed on the left, and buttons are generally placed on the right.

The navigation Bar of Android supports navigation, Acton Bar, and Contextual Action Bars based on different situations.

When performing the navigation function, the displayed elements include the title and the left arrow (representing the upper level). These elements combine the interface and system return key (Hard Return key or soft return key) to form the navigation.

When it undertakes the operation column function, the elements that appear include Operation icons (sometimes plain text in a plane, including more icons), Spinners drop-down menus, tabs, etc, if there are too many icons in the Operation bar, another operation bar is provided at the bottom of the interface.

The scenario action column appears in the text selection and Content Selection. Generally, the current content is displayed by a long press. This control is used in Android 4.0 to replace the long-pressed pop-up menu to a certain extent.

3.3 Tool Bar vs Action Bar)

The toolbar of the iPhone is fixed in height and placed at the bottom of the interface. icons or buttons are usually placed on the interface.

In Android, when there is not enough space in the top operation bar to place more buttons, the buttons will appear at the bottom, but on a mobile phone with a menu key, the buttons that cannot be placed in the menu will pop up.

In addition, the Operation bar at the bottom is introduced in Android 4.0.

3.4 tab bar

The iPhone tab bar is placed at the bottom and the style is fixed.

The tag bar of Android includes two types: Variable location and fixed location. x's system also has labels with text and text. In Google's own applications, there are multiple tag styles.

In Android 4.0, you can drag the switch label left and right, or click switch directly.