Shulou(Shulou.com)06/02 Report--

In this issue, the editor will bring you what are the differences between the design of Android and iOS. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

Today, I would like to introduce the differences between iOS and Android in terms of design, so that you can better understand the similarities and differences and apply them to your own design.

As the two camps of smartphones, the difference between iOS and Android systems has always been a favorite topic, which usually revolves around the topics such as "whether the performance of the machine is good, whether the software card is stuck or not", whether the pixel of the camera is high, whether the camera is beautiful, "whether the appearance is bigger or not" and so on.

But in the eyes of a designer, the differences between the two systems are far more simple and crude than they seem. But today, when the mobile trend is spreading like spring grass, most companies choose to apply iOS's interface directly to Android systems. It is understandable that this is done for cost savings and faster iteration, but obliterating the use of system features at the expense of the user experience of many Android users. Although Zhihu has similarly answered the differences in the interaction between the two systems, today the author would like to focus on the similarities and differences between the two design languages.

Start with Flat Design and Material Design.

A Mobile design milestone that almost every mobile designer is familiar with is iOS7's Flat Design. The original lifelike quasi-materialized design was flattened, removing redundant, heavy and complicated decorative effects, and became a "flattened design". Its core idea is to highlight the "information" itself. the design elements emphasize abstraction, minimalism and symbolization. Since then, flat style has become popular in mobile design.

Typical Material Design

Since Android5.0 Lollipop was officially launched to users on November 3, 2014, the new design of Material Design has stunned the audience, not only the visual effects, but also the new concept of "digital paper and ink" space has also given the interface a new concept of UI.

IOS7 design with obvious flattening style

So what is the difference between Flat Design and Material Design, two design concepts that tend to be minimalist? The following will analyze the differences in design ideas, dynamic effects and other details on this topic.

Open and closed, the design ideas are very different.

If only one pair of words can be used to summarize the difference between Android and iOS systems, I think it should be open and closed, and it is these two completely different system features that lead to different design ideas. The openness of Android brings not only a variety of designs (there is almost no design effect that can not be realized by using custom controls), but also a sense of "disorganization" and a large number of users who are unable to start when using them because of disunity. While iOS's HIG ("Human Interface Guideline" human-computer interaction specification) is more "forcing" designers to use more system native controls, the designer's modification of the controls is very limited, but the advantage of doing so is that the basic operation of each App is within the specification, with a certain degree of unity, it is very convenient for users to use, and the cost of learning is reduced accordingly. It is difficult to judge which is better or worse. It can be said that "the lower limit of iOS is higher than that of Android, but the upper limit of Android is higher than that of iOS." with the pace of the big screen era, we can see that both sides are trying to get close to each other. I believe that a balance of "harmony but difference" can be achieved in the near future.

Show the dynamic effect; look at the world from a different perspective.

Now the use of dynamic effects has become standard for many app, reasonable dynamic effects is not only for visual effects on the "cool", but also to help users better understand the level, transition relationship and pay attention to key information. However, careful designers will find that the dynamic effects of Android and iOS are very different. The physical model of both design languages can be summed up in one sentence: Material Design uses mechanical physics and electromagnetic physics, while the dynamic effect of iOS is based more on lens motion and depth of field changes. The essence of its design language is an idea that allows users to transplant objective experience to the interface.

The metaphor of Material Design is paper, and the user's fingers attract electronic paper and ink like a magnet, and when clicked, there will be "ripples" as an interactive response. Other objects are arranged according to a "depth" hierarchy, the closer to the finger, the brighter the shadow, and the darker the distant elements, until they are submerged in darkness.

The display of dynamic effect in Material Design

If you take a closer look at the dynamic effects of the iOS system, you can find that the desktop of iOS is like a starry sky, and each App is one of the small stars (dots). Every time the user clicks on it, the lens will get closer, while the background is hidden into a Gaussian blurred depth of field, which should be one of the most profound dynamic effects experiences for every iOS user. Gaussian blur has also become a unique tool for expressing hierarchical relationships in iOS (in which there is not only blur, but also the displacement of the lens when shaking). The same type of dynamic effect is also reflected in the opening of app from a point to a face, including "Calendar" App and "album" App (both system applications) middle-age-day-month switching operation, which is the expression of lens ideas.

The level of the album, from far to near, from small to large.

Dynamic effect of iOS when opening app, from point to face

No matter which kind of dynamic effect is essentially to help users better understand the relationship between interface switching and timeline, designers can also design dynamic effects suitable for their own products on the basis of the dynamic effects of these two systems.

The death of resolution

For designers who need to involve multiple mobile platforms at the same time, resolution is a pain point that can never be avoided. Before the advent of iPhone6/iPhone6Plus, iOS was more popular among designers and was designed more as a template, in large part because the resolution of iOS was relatively fixed and the design effect was easier to restore. And Android has always been "hated" by designers because of the diversity of screen sizes. Therefore, in the process of design, we not only need to adjust the design effect of the current page, but also consider whether such a design is in line with the screen display effect under different resolution sizes. The first draft adaptation iOS7 (Portal: *, second and third) by Xiaoxue on the official account should give you a lot of inspiration on adaptation. For Android, there is nothing but adjustment. Try to express the space occupied by the design elements as a percentage, and adjust the specific spacing in some extreme cases according to the effect of the development. in order to meet the principle of "acceptable display of most mainstream screens and other screens".

The following figure shows you the conversion relationship between the resolution of iOS and Android. If you meet a certain multiple relationship when cutting the image, you can export the cut image that can be adapted to both at the same time with one click.

1dp (Android) = 1pt (iOS)

In terms of 48dp@160dpi

Mdpi 48px (160dpi, 1x) basic size, has been very rarely used

Hdpi 72px (240dpi, 1.5x) low resolution

Xhdpi 96px (320dpi, 2x) and iOS @ 2x

Xxdpi 144px (480dpi, 3x) and iOS @ 3x

Xxxdpi 192px (640dpi, 4x) larger, higher and stronger resolution

In fact, there are many differences between the design of iOS and Android, such as font, Tab bar design, physical key operation, editing mode, the way App reflects personality, and so on. It is hoped that in the process of designing mobile products, designers can think more about the similarities and differences between the two, and pay more attention to the use of the unique features of the Android system, which not only saves development costs, but also is better accepted by Android users.

These are the differences between the designs of Android and iOS shared by the editor. If you happen to have similar doubts, please refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.