Declaring war on products: Android UI Design from the perspective of developers

After half a month of preparation, I have been thinking about product design and interaction design, and witnessed the quarrels between the company's products, UE and development. I have organized my thoughts and insights into the following text. On behalf of all programmers, I would like to declare war on Design Lion and Product X. I hope that all programmers can adhere to Google's Material Design, conscientiously and responsibly implement Android's design ideas, bring MD design to products, not make apps with Chinese characteristics, bring Android's development culture back on track, and establish a correct development and design concept.

I hope all my programmer friends will leave messages and sign at the end of this blog to standardize Android design and establish an Android development culture. We need your strength - Android needs YOU.

[[156936]]

Basic Elements

The mobile App interface, whether it is iOS or Android, is generally composed of four elements: status bar, navigation bar, submenu, and content area.

• Status bar: the area that displays the phone status, such as signal, operator, and battery level.

• Navigation bar: displays the name of the current interface, including corresponding functions or jump buttons between pages

• Main menu bar: Similar to the main menu of the page, it provides a quick jump to the classified content of the entire application

• Content area: displays the corresponding content provided by the application

The difference is that since Android removed the physical keys after 4.0 and used virtual keys at the bottom of the screen, Android moved the main menu in iOS from the bottom to the top to avoid accidental operation of the virtual keys.

In fact, many differences in the UI of Android and iOS are caused by the closed source nature of iOS. Due to its commercialization, many designs have been patented. Android must be different in many places. The most talked about is the elastic scrolling of iOS. In fact, to achieve this effect, Android's ScrollView only needs to modify the value of one parameter. However, due to the patent applied for by iOS for this effect, Android cannot use it.

Layout Differences

Navigation bar position and style

iOS

iOS usually uses the classic Tab page to layout pages, which is also the earliest and most classic layout method.

Android

Android officially provides two ways to switch pages: Actionbar and slidable Tab. Actionbar provides users with navigation titles and touch buttons, as follows:

[[156937]]

or:

Display the Tab page by sliding.

Displaying data

When an option has multiple data options, Android usually uses a spinner to display the optional data items, while iOS prefers to use segments:

Back key

iOS

From the layout of iOS, we can find that since iOS devices do not have a back button, the page has to be displayed on one page or a back button has to be provided on the page.

Android

Android's return operation is richer than that of iOS. It can not only return to the previous page, but also return to the last operation, such as opening and closing the keyboard.

In addition, starting from Android 4.0, Google also proposed a concept of "upward":

It is a small arrow in front of the navigation bar title. Clicking this arrow will return to the previous level of the page instead of simply returning to the previous page.

search

Search in iOS is usually displayed as a control. In Android, search is mostly displayed as a search widget, which displays a search box after clicking:

Button

Buttons in iOS generally have obvious borders, while in Android MD, buttons usually do not require borders and use a ripple effect to show the borders.

Platform Differences

Interaction Architecture

The standard interaction architecture of iOS is that the first layer of navigation is at the bottom, with the upper left corner for return, the upper right corner for operation, right in and left out, and vertical scrolling by default. It must be said that this architecture has been maturely applied and is very thorough, and the final evolution of this architecture is also excellent.

There are many confusions in the Android standard interaction architecture, but those that are not easy to use will naturally disappear. Just look at how many physical buttons the G1 still has. Search is gone, menu is used less and less, and there is less top navigation. Various transplantation phenomena have also made the interaction more and more iOS-like. But Android's feature lies in the back button. iOS's excellence lies inside the app, but its disadvantage is outside the app, and the switching between apps is very weak. On Android, because of the existence of the physical back button, the interface between applications is very flexible. Managing activities in a stack manner rather than by application makes it easier for developers to grasp the overall situation.

widget

Both systems have a home screen, but the iOS home screen can only display a list of apps, while the Android home screen can not only display a list of apps, but also customize various widgets, which is a good entry point. Not only on the home screen, but even on the lock screen, Android can also customize widgets. This feature is the most shining UI element of Android compared to iOS.

Notification

Notification is also a very important part of Android UI elements. Proper use will provide users with a very convenient application entry. However, if notifications are abused, it will also make users very disgusted.

ScreenLock Interactive Interface

Unlike iOS, Android's lock screen can display more elements, and also supports customization of lock screen controls, notifications, and display levels.

The display effect here is basically the same as the display style of notifications.

#p#

Design suggestions

Many people view user experience as a simple design or usability issue, which is too narrow. User experience consists of multiple aspects, including basic product functions, new technologies, content, interactive experience, UI vision, and performance. Sometimes the success of a product cannot be determined by just one or two aspects, and even sacrificing some key links is worth it if it can ensure that other better needs are met.

For developers, especially cross-platform developers, following the design specifications of different platforms will bring greater pressure to the design - for most applications, it is necessary to design an additional set of visual styles (for many designers/developers, it is also necessary to redesign a set of interaction logic - although this is unnecessary), which will inevitably increase the workload. However, following the platform design specifications allows developers to better play the strength of a platform (calling built-in standard controls to save performance, no need to call external libraries to imitate iOS visual/interaction effects, standard layouts are easier to implement, etc.).

Design different elements of the same function based on platform characteristics

When creating a cross-platform design, the most important thing to consider is that the elements that display the same function on the two platforms are different. Therefore, the design should respect the standards of the native UI and allow users to maintain the same operating habits.

The most important thing to follow is not to deliberately imitate the display characteristics of other platforms.

It is best not to share a set of UI

The main reason why most developers use one set of UI to design both Android and iOS platforms is that the pace of mobile Internet versions is too fast. The high cost of designing and maintaining two sets of UIs will reduce efficiency, which is the most critical factor in making the two platforms completely consistent. The same product will be in parallel on two terminals, and design resources will be in serious shortage. The fact that the functions of the two platforms are synchronized but the designs are not synchronized makes the project progress quite slowly. From the perspective of team efficiency, this is indeed understandable, and it is actually to save time costs.

However, designers should treat their designs as their own sons. For example, Steve Jobs certainly hoped that his son would be like him. If he looked like Einstein, although he was extremely smart, he would seem out of tune with his father. The same goes for design. Maintaining the characteristics of the system itself is the minimum respect for the system itself.

If you say that Android's design style is not perfect, this is definitely not a reason to use the iOS style, because iOS-style Android applications will only make the interface look worse and out of place. No matter how imperfect Android Design is, it is better for Android than iOS style. If you say that Android Design is not perfect, or not beautiful enough, then how are so many applications with beautiful interfaces on Android Play made?

If the two platforms use the same interface to improve efficiency and save time, then why does Windows Phone have a different interface? You "save time" for a platform with 80% market share, and "spend time" for a platform with 2% market share. Does that make sense? The reason why Windows Phone is not iOS-style is because Microsoft simply doesn't allow you to make it iOS-style. If you could copy it, would you not copy it? Therefore, most apps refuse to support WP because of the 2% market share.

#p#

The UI can be the same, but the operation method must not be the same

Even if we take a step back and make the UI a set, many people can still accept this, but the most unbearable thing is the design that the entire operation is carried out in the iOS way and all the advantages of Android are removed. For example, many people think that there is also a return button in the upper left corner of Android, but it only looks like a return button, but it is actually an upward button. People who have used Windows Explorer know that although sometimes the return button and the upward button go back to the same folder, they are often different. So if you have a return button in the upper left corner, can you change the function to an upward button? Android 4.1 supports rich notifications. Why can WeChat only display XX messages sent when there are multiple messages, but not directly display the message content?

This is also one of the significances of official specification formulation, so that each development team can understand the original intention and direction of the system ecology, so that users can get the most consistent experience possible under the same system ecology; at the same time, it also reduces the work costs of independent developers.

The current situation is that iOS-style operations often appear on Android, which makes people feel very confused...

Don’t use the user’s learning cost as an excuse

Speaking of user learning costs, how many users use both platforms? I'm afraid it's far less than those who use only one platform. For an Android phone user, most of the software is Android Design. He gets used to it, and then installs WeChat, and suddenly finds it's in the style of Kidney 6. Does this require learning costs? How many users switch back and forth between different platforms? Are there more users who are used to Android Design applications and then install a WeChat in the style of Kidney, or are there more users who are used to Kidney machines and switch to Android? Obviously, there are more users. Does Tencent only take care of the learning costs of the latter and not the former? What's more, if you are used to Kidney machines, and then switch to Android, you won't use it without the return button? Are all users mentally retarded? You can use the return button on the top, but not on the bottom? With this IQ, you basically can't chat, so why use WeChat. Since Android users can learn to press the return button on the top when switching to Kidney machines, but can't learn to press the return button on the bottom when switching from Kidney machines to Android, what's the reason? Discrimination against the IQ of Kidney machine users?

A truly good design is that the two platforms look similar and the operations are basically the same, but the characteristics of different platforms can be reflected. The interface layout is basically the same. The iOS platform uses a rounded rectangle, and the Android platform uses a right-angled rectangle. You can switch tabs by touching or sliding. Messages from one person can be displayed, and messages from two people can also be displayed. It no longer just displays the number. Change the return button above to a button that looks like a return button but actually goes up, so that the operation is similar. Now, if you want to return to the main interface of WeChat, you need to click the return button multiple times, and it is accompanied by a very long transition animation. The operation is extremely cumbersome. Changing the return button to an upward button not only complies with the standard, but also greatly facilitates the operation.

Don't use Google's unruly behavior as an excuse

In China, the reason why various applications insist on not following the Material Design standards is that Google lets the ecological environment take its own course. It doesn't want to manage it, and it can't manage it. Even if they are not allowed to be listed on Google Play, although we can't do that now, there are still so many play stores, such as 91, Wandoujia, Baidu, and 360. Therefore, Google cannot control the design and quality of the App.

Moreover, for their own interests and to make their own ROMs different from other ROMs, mobile phone ROM manufacturers have proposed various so-called design themes, such as Samsung's touchwizard and HTC's Sense. But are there any so-called themes that can outperform the native system in terms of experience? Forget it, the anger value must be full, and the ultimate move cannot be used in vain.

Design Thoughts

I have to say that too many designers mistake technology for art and beauty for design, and ignore the truly important interaction. You can see that a large number of products are almost static, and many operations are extremely weird. For example, if you want to add an item to a list, it will appear there rigidly; if you want to delete it, it will disappear directly. Have you ever considered the user's feelings and the product's feelings in such product design?

The truly revolutionary significance of interaction lies in that it brings the magical attribute of time into static products. By defining actions, speed, appearance, etc., it makes the operation of the product appear realistic, allowing users to naturally understand the meaning of each action.

Animation, animation, animation

App motion design is highly recommended by the system, whether on iOS or Android. Especially in Material Design, how to use time characteristics to design reasonable motion effects is a very big subject.

Let’s take a look at a dynamic design diagram:

This is an example of a linear animation. Although linear animation provides interaction, it is a very stiff interaction.

Non-linear animation simulates the running effect of animation more realistically, making the user experience more realistic. This is the simplest example of using time characteristics to change interactive characteristics.

The following example is the same, we simulate a simple insertion and deletion effect:

[[156944]]

This example has no animation. It’s a blunt display and a crude interactive design.

[[156945]]

[[156946]]

The two examples above use motion effects to make the insertion and deletion animations more realistic and fit the natural state.

one more, let's take a look at the effect of a switch:

It is another very abrupt switch, just a transition of the pictures.

We use Material Design to equip this example:

The four state switching methods of Activity proposed by Android in Material Design are precisely intended to change this rigid design.

Animation product examples

Material Design Guide

All designers and programmers should read the Material Design Guide every day. We have only learned a small part of the Material Design Guide - motion design, which has helped the entire App to achieve a comeback. If you understand the entire Material Design Guide, you can imagine that its effect is no less than that of the Nine Yin Manual, Nine Yang Magic Skill, Yi Jin Jing, and Sunflower Secret Manual. The biggest advantage is that everyone can get a copy without having to fight for it.

We will not write out many design guidelines in detail, after all, we are code engineers, so we will lay the foundation with this:

http://developer.android.com/design/index.html

By the way, I’ll post a few gifs to show the power of MD design.

[[156947]]

#p#

Design Examples

MD Specification

Town Building

http://www.google.com/design/spec/material-design/introduction.html

Dribbble

No explanation needed, this is a place that designers and programmers can’t put down.

However, designers should be warned that not all features are easy to implement. Please do not let programmers implement any feature!!!

https://dribbble.com/

UIChina

It’s okay, some of the better designs in China.

http://www.ui.cn/

INSTAGRAM with Material Design

The video above is a concept video of Instagram Android L released by designer Emmanuel Pacamalan. This video more clearly describes all aspects of Material Design. Material Design has rich animations, and there are animations between each operation, which is simple and lively. The switching between the various interfaces in the App also well expresses the concept of "layers". In general, the App design specifications of Android L have made great progress compared to the Holo of the previous Android 4.× era.

WeChat with Material Design

The above is the design of WeChat with Material Design. You can clearly feel the design style of Android Material Design. Compared with the current WeChat client, the difference is self-evident.

Here is another simple diagram:

Design Reference Tutorial

Cross-platform UI/UX Design Examples — Android & iOS

http://www.phonekr.com/cross-platform-android-ios-1/

http://www.phonekr.com/cross-platform-android-ios-2/

Material Design Research Group

http://www.phonekr.com/

Material Design in Action — Taking Yuantiku as an example

http://www.phonekr.com/yuan-ti-ku-redesign/

Android Design in Action — Taking Zhihu as an example

http://www.geekpark.net/topics/186387

Android Design in Action — Taking WeChat as an example

http://www.geekpark.net/topics/186657

The reason for the contradiction

The following content may be too extreme, and some of the comments are from Zhihu. Please watch with caution.

Google engineer, science student thinking

Google's purely logical thinking design (sometimes for simplicity and simplicity, sometimes only looking at logic without considering experience and cognition) is an engineer's thinking. It is correct from a logical and reasonable point of view. For example, putting frequently used apps on the desktop and infrequently used apps in drawers seems to make sense, but novices cannot understand it (they only look for apps in one place, which is the desktop they see at first sight). Perhaps in a few decades, when smartphones are natural to every human being, just like sucking on a pacifier, Android Design's thinking will be correct. The specific design point of finding apps can be compared to "storage". In the initial stage of human storage, things were placed randomly in the house. Only when humans were familiar enough with the idea of ​​space and item storage, and the items were numerous and complex enough, did they have storage cabinets and drawers with different categories. Google's design skipped the previous stage and went directly to the latter stage (from the perspective of science/engineers/pure rationality/logic, the latter approach is of course more correct and advanced, but users just can't accept it for the time being).

The difference in foreign countries mentioned above is that people in developed countries are more willing to try, like to try new things, and learn/accept faster. If third world countries are given a market as large as the Chinese market, a fiercely competitive environment, and a lower level of national education and understanding (regardless of companies/enterprises), the design of Internet/mobile Internet products in these countries will definitely tend to be touch-based, intuitive, shallow logical level, and less logical dimension design style and standards (that is, iOS design standards to Android design standards).

Perhaps after a few years or decades, the “sliding” operation will naturally be included in the interaction with mobile phones (the only pre-conception of human interaction with mobile phones is touch/click, which is the gene and experience summarized from thousands of years of physical operation). By then, designs that use sliding operations extensively will be quickly accepted by people without pre-conception.

Before that, the iOS design standards, which are more conservative, intuitive, have shallower logical levels and fewer logical dimensions, are always much better than the Android design standards, which are logically correct, forward-thinking, pursue simplicity rather than ease of understanding, and pursue efficiency rather than acceptance (good standards are more accepted, used and liked by mainstream users).

Standardization comes too late

Google didn't surpass Apple in design language and specifications until Android L. Material Design completely surpassed Apple's HIG in visual structure (Layout and Structure), visual hierarchy (thanks to Google for realizing the importance of Shadow and making full use of it), color standard (Color Scheme, my mother no longer has to worry about my color matching), font arrangement (Typography and the new Roboto font), and transition animation (Transition and Animation).

Material Design on M makes design not only an art, but also a science. The fully standardized documents and design resources allow developers and designers to fully implement Material Design.

Imitation, copycat

There was a joke that said that before Steve Jobs died, he invested in dozens of Chinese ROM manufacturers, so that every time at a Chinese ROM conference, they would compare their own ROMs with iOS. Unconsciously, everyone found that all the manufacturers said that iOS was the best and their own ROMs would catch up with it. iOS should really thank these Chinese manufacturers for the publicity they gave you.

Although for most domestic users, they don’t know and it’s difficult for them to realize the design differences between Android and iOS. The mainstream domestic ROM (I’m talking about MIUI, the representative of rogue and copycat) also imitates many iOS features in UI. In such an environment, it’s difficult for users to realize the difference in design specifications between the two platforms.

But people will make progress. Most of the excellent foreign applications follow the platform specifications, and new domestic applications and developers are also gradually beginning to follow the specifications. After users have used better applications that meet the platform specifications, some of them will gradually realize the superiority of the specifications and realize that applications that follow the specifications have higher consistency. Different platforms are different platforms after all, and applications on a platform will gradually tend to follow consistent visual specifications - as long as the specifications are "persuasive enough", the sense of unity between applications on the platform will continue to increase.

Users do not need specifications, they just want to use good apps. From the user's perspective, whether an app is easy to use is a matter of habit, and users only see the results; the details behind the product need to be grasped by designers and developers to give users the best results.

Therefore, if you are a team with average qualifications or a team that wants to take the general route, it is better to abide by the regulations, which will be beneficial in the short and long term;

If you are a particularly good team, you can ignore the official specifications and customize a special set of interaction specifications, such as Flipboard and Facebook Paper. But these companies are now also following Material Design.

But most of the excellent apps I have seen so far are based on compliance with standards and express their own design concepts, such as: Expedia, Timely, and some new domestic apps, such as Zhihu and NetEase's major apps. You can go and have a look at their apps to see whether the Material Design design makes their apps more popular.

Company Benefits

From a company's perspective, whether an app complies with the specifications can roughly determine the work attitude of the product team. For those teams that comply with the specifications and make dual-platform products from the early stage of product release, I think that just this attention to detail shows that they are not too frivolous or stupid, even if they are a startup team and their products still have many shortcomings, because the first step lays the foundation for good and rapid iteration of products in the future. Moreover, you can tell from a team's design specifications whether a company is business-driven technology or technology-driven business.

Often, the excuse for a product is that users are already familiar with our UI, and if we change to a new design style, users may find it difficult to accept. However, when Apple first proposed the flat design, many people on the Internet criticized it, but later everyone still used it. How can we explain that the flat design that was once criticized has become the object of imitation? In fact, it is very simple. Excellent design will always be proven by time.

In terms of promotion, an app that complies with the regulations and has its own product highlights will be welcomed and respected by both the App Store and Google Play. Google Play abroad will never feature an app with an iOS design style, and the same is true for the App Store.

Therefore, I believe that a responsible and dedicated team should abide by the platform regulations. If possible, adding their own style and philosophy would be icing on the cake.

at last

This article is very long and took a long time to write. I hope that designers who read this blog can really reflect on how to design products from the perspective of programmers. Although this may not be very useful, please do it. I hope that programmers who read this blog can really think about how to apply technology to products. Material Design is not just for designers, programmers also need it. The highest level of a programmer is a programmer who can design, not only designing programs and architectures, but also designing UI and UE. Let us encourage each other.

Finally, I hope everyone can give this article a thumbs up. If there are any shortcomings or mistakes, please point them out. You can also argue with me. My only goal is to make everyone - programmers and designers - reflect on how to make a good Android App.