On the interactive design of iOS and Android: a comparison of the iphone and Android controls

Preface

When a developer covers both the iOS platform and the Android platform on a product, it encounters a problem with how the interface and interaction of the same feature are displayed on different platforms.

Understanding the control correspondence and similarities and differences between two platforms is helpful for both product and interaction design for two platforms.

This section corresponds to the two-platform controls, supplemented by a description, and a more detailed description of the control and applicable situations refer directly to the documentation in resources.

Description: System controls in Android will vary according to different ROM and operating system versions, and the Android controls in this article are the main references to Android design.

Ii. Purpose

This article hopes to express the meaning, concentrates in the following three aspects:

The √ios and Android controls are converging on the target, but the form makes a big difference, so Android is in the Android style and does not recommend using the iOS style directly.

√ Understanding the corresponding relationship between iOS and Android controls helps in product design by leveraging existing ideas and meeting the style of the corresponding platform

√android because of the custom ROM, different system versions, and the diversity of the physical properties of the devices, Android has a variety of styles and excellent design http://www.aliyun.com/zixun/aggregation/ 1997.html ">android application is not an easy thing.

three, function bar 3.1 status bar

The iphone's status bar system offers 3 styles, light, dark, dark, and highly fixed.

The Android status bar varies according to the custom ROM of each handset manufacturer, and can be varied in MIUI depending on the theme.

3.2 Navigation bar (navigation bar)

The iphone's navigation bar is highly fixed, placed at the top of the interface, the navigation bar in the middle of the general placement of titles, but can also be used to place other content, the left side of the general placement of navigation or other buttons, the right General placement button.

The Android navigation bar assumes the function of navigation, the Action Bar (Acton bar), the Situational Action Bar (contextual action Bars), depending on the situation.

When the navigation function is assumed, the elements that appear include the caption, the left arrow (representing the upper level), and the combination of these elements, the system return key (the hard return key or the soft return key), together make up the navigation.

When it assumes the function of the action bar is that the elements that appear have operation icon (sometimes plain text, including more icons), Spinners drop-down menu, tabs, etc., if the Action bar icon too much, will be at the bottom of the interface to provide another action bar.

The appearance of the scene action Bar includes text selection, Content selection, and so on, usually by the appearance of the current content long. This control is Android 4.0, to some extent instead of a long pressed pop-up menu.

3.3 Toolbar (Tool bar) vs Action Bar

The iphone's toolbar is highly fixed, placed at the bottom of the interface, and typically places an icon or button on the interface.

Android when not enough space to put more buttons, will appear at the bottom, but on the phone with the menu button, the menu will pop up the action Bar button.

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

3.4 Tab Bar

The iphone's tab bar is placed at the bottom and the style is fixed.

Android's tab bar includes two types of variable and fixed locations, and in the Android 2.x system, there are graphic and side-by tags, and in Google's own application, there are a variety of tag styles.

In the Android 4.0 label, basically can drag the Switch tab left or right, you can click to switch directly.

Iv. List 4.1 list

The list of iOS includes ordinary tables, indexed tables, grouped tables.

Android lists are also common tables, grouped tables, with horizontal lines and no full differences, and a less-than-full and iOS-like grouping table.

4.2 Table Control

In these iOS table controls:

Üandroid Select multiple selection through the Right checkbox and radio box to achieve;

Üandroid no expansion indicator;

Other "details indicating buttons, add, delete" and other operations, can be similar to the bottom of the spinners tag click after the pop-up action list to complete.

Android does not provide such a form control itself, but even Google's official application extends many non-standard controls, such as the button on the right side of Google doc in the table space, Google Music to the right spinners and so on.

4.1 Switch

The switch in the iphone has only one style.

Android offers switches like iOS, check, and radio.

v. Dialog box, Action List 5.1 dialog

This is mainly the style is different, the role is more similar.

Also before Android 4.0, OK is generally on the left, Android 4.0, OK to the right.

5.2 dialog box with text input box

5.3 Action list

List of actions on iOS, there are no directly corresponding elements in Android, but there are similar elements

six, other system controls 6.1 selector

The iphone and Android offer different styles of selectors.

The Android selector differs in different ROM and system versions.

6.2 Page Indicator

The iphone page indicator is in the same application as the main interface.

The Android page indicator is mainly used for desktop page switching, different ROM and different system version styles.

6.3 Slider

iOS slider a style that is different in different versions of the Android ROM and different systems.

6.4 Progress bar

The Android progress bar still has different styles for different ROM and different system versions

6.5 Radio and check

The radio and check of iOS can be handled by a "checkmark" in the list, and there is a style similar to the one on the right.

Android is basically radio box and checkbox style, of course, style as always, and ROM and the system version number is related.

Seven, unique controls 7.1 Android-specific controls

Only some of the Android-specific controls are listed here.

On the left is spinners, there is no direct native counterpart in iOS, but there are applications that try to use similar, such as Sina Weibo clients.

On the right is toast, which will show a few seconds to disappear, often used to do some not important to directly through the dialog box to the extent of the hint, this control in iOS also does not have a native counterpart, but there will be applications to try to use, such as many applications of network error prompts.

，

7.2 iOS-specific controls

Segmented controllers, which are missing controls on Android.

Segmented controllers do not have a good alternative to Android, and Google native apps use tabs or nine Gonglai to a certain extent to achieve segmented control.

Finish）

Copyright notice: When reprinted, please indicate the original source and author information of the article by hyperlink form
This article link: http://www.penddy.com/%e6%b5%85%e8%b0%88ios%e5%92%8candroid%e7%9a%84%e4%ba%a7%e5%93%81%e4%ba%a4%e4%ba%92% E8%ae%be%e8%ae%a1%e4%b8%89iphone%e5%92%8candroid%e7%9a%84%e6%8e%a7%e4%bb%b6%e5%af%b9%e6%af%94.html