Product managers must know: interaction design differences on the three mobile platforms

Source: Internet
Author: User

Ios,android,windowsphone is now the mobile internet above the mainstream of the three platforms, I have also participated in the design of these three platforms respectively. In the process of design, because of the different characteristics of these three platforms, they often have to switch roles, constantly thinking of transposition. Maybe the novice and the layman feel that iOS and Android are no different, and some even use Android to copy the iOS design directly. Others may have been magical about the WindowsPhone platform, but just couldn't find a way to do it. Today I have summed up the differences between the three platforms in the interaction design, in the process of interactive design, must pay attention to the problem:

One, the difference in layout form

iOS classic "tab bar"

In iOS apps, if you want to switch between different modules, or if you want to switch between different columns within the page, you'll often use the form of tab bar control. This classic design has been used since the early days of iOS,

This is how most iOS apps are designed. Of course, iOS itself is very accommodating and has recently been popular in drawer-style navigation. But tab bar has always been the most popular and best-known way to be perceived by users:

Android offers 2 ways to control the view

After the Android4.0 specification came out, Android proposed 2 view control methods, one is directly under the title of the navigation bar to add a touch button, the click Will pop up the menu to toggle the column

(The position of the 2 callout in the figure)

(such as the Calendar app click can switch different views)

The other is to add a view control bar directly below the navigation bar, much like the tab bar of iOS, but only on top, and advocates for gesture swipe switching:

(Figure 2 Callout position)

WindowsPhone's Innovation

WindowsPhone is a big gap with the top two platforms because WindowsPhone's unique Metroui advocates a return to the traditional reading experience, browsing the contents of the phone like a newspaper or a magazine, more focused on content than retouching. So the whole of windowsphone gives people a feeling like they're reading a magazine.

WindowsPhone View Control is expanded by a way called "Panorama View"

In fact, the content of 4 views is on a page, and it is loaded at the same time as a page. The user's phone only shows the first screen of the content, by sliding to pull out the contents of the back ~

This view is innovative and easy to read, and has to say that the experience of browsing is much better. However, it is important to note that:

1) because in fact these 3 columns are the same page view, so do not put too much content, or load will be slow impact efficiency;

2) The layout and vision in the process of interactive design is very high. (You have to think ahead how the layout looks good)

In addition, WindowsPhone also provides a way to call pivot, Pivot and iOS tab bar is not very large, but completely by sliding to switch columns:

(Pivot layout)

Two, the difference of navigation logic

Everyone knows that iOS doesn't have an entity return key, and all returns are done through the back button on the navigation bar.

In the navigation logic of iOS, we can clearly see that the whole program is a page-by-page switch, like a slideshow. And the Back button is the switch to the previous page. So, the return control of iOS is the page.

But Android and WindowsPhone is not the case, Android and WindowsPhone have physical back button, click the Physical return button, control not only a page, but also includes the previous step of the operation, such as said:

Go to page A and click the text box to eject the keyboard. Then click the Back button--close the keyboard

So the return logic of Android and WindowsPhone is determined by the time flow, not just the page, the return button controls the action.

It is necessary to mention that the return logic of WindowsPhone is not confined to the application, but also affects the application. That means you're currently on the desktop, and then clicking Back again will go to your last open app.

In addition, in Android4.0, an upward concept is proposed, which is a small arrow in front of the navigation bar title, click on this arrow, is back to the previous level of the page:

Iii. differences in the linkages between applications

As is known to all, iOS is a closed system, while Android is an open system. We can figure out that every app in iOS is a small room, and each app does its own thing in its own room and doesn't do anything with each other. And Android is a big office area, each application has its own station, but can visit each other or borrow things, and windowsphone follow the same way as iOS. When the iOS6 can support the application to jump directly to each other, but that is only when you jump out, you will not come back, that is, the room you are the person of that room, and the previous room is not related.

This difference means that iOS and WindowsPhone apps have very low permissions, and as an app you can't modify some of the properties of the system (unless you jailbreak), and you can't modify the content of other apps. An Android app can not only control some of the system's operations, but also control other applications to perform certain actions.

This difference will make the application design on Android more possible, as designers you can design a lot of good features according to this feature, such as system beautification or system optimization, anti-virus, block phone and other functions, and iOS and WindowsPhone cannot.

But it also poses a serious security problem for Android, so the various optimizations and anti-virus software on Android are popular.

Four, multi-tasking differences

Multi-tasking differences are described in one sentence: iOS and windowsphone are fake multitasking, and Android is really multitasking.

If you're designing apps that have downloads, then iOS and windowsphone switch to background downloads are paused, and Android won't pause, you can also design some features that sneak in the background!

Five. Differences in resolution

Pro, do you know how many kinds of resolutions Android now have?

Adaptation has always been a headache for Android, and as a front end it is often important to adjust the effects for different resolutions to ensure that the interface does not deform and blur. The resolution problem not only affects the visual, but also has a great influence on the interaction design. Because these phones tend to have different screen ratios, you need to consider how your interface layout should be under different aspect ratios.

So when designing Android, you can't ask for the interface layout to die, you should try to make sure that every control is floating, and you can evaluate the effects of various wacky layouts.

iOS and WindowsPhone will be much better. iOS resolution is divided into 320x480,640x960,640x1136,windowsphone resolution divided into 480x800,720x1280,768x1280, although it seems quite a lot, but the interface of the proportion of basically no change. So the impact on the layout of the interaction is not very large, visual designers can also be reduced through the script to easily solve the problem.

Six, the difference in design style

Design style is the 3 client's own unique personality, design style not only affect the level of visual design, interaction design is also very important. Especially when considering the dynamic effect, we need to pay attention to the materialization interaction.

iOS design style biased to the quasi-materialized style, this quasi-materialization is not only the visual to make a lot of small button small control of the object, in order to match the vision, you often in the interaction can also add some lively and interesting content.

For example, like the latest path, the sun visor will have an effect when entering the store, and the small card will swing according to the gravitational induction. If the interaction on the platform to reflect the design style, will undoubtedly be very pleasing to users, increase the product details on the bright spot.

Android platform is simple, in the overall layout and interaction form and iOS almost the case, as concise as possible, presenting a science fiction style is possible. The Android platform minimizes the use of pseudo-materialized animations, because the Android system renders poorly for animated effects and, if too complex, can make the interface very card-less.

I strongly recommend an application called Fuubo, which is a very innovative product that fits the Android Holo style and is handled interactively.

windowsphone platform is very different, Metroui concept requires designers to think more about how to display content, using smooth transition animation. But also the layout and graphic design of the designers put forward some tests. So it is recommended that the interactive design of people read WindowsPhone interface design guidelines, and usually accumulate some windowsphone interface of the visual interface feel, otherwise the visual designer will probably blame you oh!~

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.