The era of "flat class design"

The author Zhang is the founder of PICOOC company, PICOOC the first smart device to be listed in the near future is called correlation intelligent scale, which can be seen in our previous reports. Zhang also founded Mobile application development training company Bo see Evans.

A few days ago, iOS 7 official version finally released, users of its flat design style is mixed. In fact, we were three months ago in Picooc's APP on the first "painfully" decided to adopt "class flat Design" (explained later). Based on the characteristics of PICOOC series products, there are many problems and challenges in the GUI of the whole App.

For example, the correlation health scale collects the abundant physical signs data flow how can in the understandable graphical form, let the user understand their health status; those who drift and drift through the correlation how to view and manage the health information of their family and friends offsite, because the huge flow of information flows to different types of user interface In today's multi-screen world, how to satisfy their need to switch and view their health information at will, such as cell phone/watch/ipad/TV. These are the problems we have to solve, and our team has gone through countless attempts and iterations. Here's how we think about flattening and materialization:

"Flat design" and "Physical design" is what is the wrong?

About Apple's bold attempt, the industry has been to "physical and chemical design" and "flat design" mixed, and some more biased, the so-called biased, that is, a one-sided expression of a style must be better than a certain style, and fortunately where. Let me first explain a few concepts and analyze why Apple does it and why we do it! And I think the two are not black-and-white opposition, because the design is not good or bad, the existence is reasonable. Drag-and-drop products and users, those who are wrong to judge who is not a confidence. Moreover, Apple did not negate and cancel the "physical design", and in the old age of Joe, the IOS interface also has flattened shadow, such as the Chart menu.

What is "quasi-materialization design"?

The concept of physical and chemical design is no longer elaborated here, the simple understanding is "simulate the real object", according to Apple, the appearance of the application looks similar to the real-life counterpart, the more simple to use, the corresponding also conducive to improving the user experience of the application.

And the earliest human language "hieroglyphics" is to be materialized, almost all of the text of mankind at the beginning of the hieroglyphics, using the way to depict the real world, learning cost is low, easy to remember. Joe's ideal for interface design is that anyone of any age, anyone who experiences it, can easily grasp its usage within a few minutes of getting the device. So Apple uses People's daily experience to make a materialized interface, which reduces the cost of learning and the difficulty of understanding.

Imagine that when you use visual objects and actions in your application to mimic objects and actions in the real world, users can quickly understand how to work with it (IOS Human Interface guidelines). Analog visual design and interactive experience, so that users do not have to abstract understanding can be intuitive cognition and use. When you go to the Apple store in three, you will find that many children, children, and old people do not need to be taught when they operate the IPhone or IPAD, and they can use them fluently for a few minutes.

The reason why Apple has become the interface style today is because Joe's great emphasis on low learning costs makes it possible to use metaphor and imitation in a large number of interfaces, and today's flat design is not fundamentally off the rails.

What is "flat design"?

Flat design (Flat) is completely two-dimensional, the concept of the most central place is to give up all decorative effects, such as shadows, perspective, texture, gradient and so on can make 3D effects of the elements are not. The boundaries of all elements are neat, with no feathering, gradients, or shadows.

Flat design is actually an ancient UI design, as early as the Windows 95 era, we see on the PC BIOS Setup interface is very typical flat design, he was not beautiful, but not difficult to learn, and flat interface is clear!

"Flat design" has a distinct visual effect, the entire interface color matching will be used to 6-8 colors (this for the development team's challenge is great), the page effect is more gorgeous, bright. There is a clear hierarchy and layout between the elements it uses, which gives the user an intuitive understanding of how each element works and how it interacts. Within an interface that requires a strong flow of information, it allows users to minimize the cost of learning to use. Just by relying on the user's intuition, you can probably understand the function of each object and button.

Microsoft in the Win8 Metro interface, the use of a complete flat design; in Apple products and IOS system, saw a part of the flat design shadow, in Google, we also see the quasi-flat design pattern.

What did Apple completely negate this time?

I throw out the concept of "flat-class design" because, logically speaking, Apple has not abandoned the "physical design", but also did not fully pursue the so-called "flat design", but the flat design of the materialization of this inclusive attempt. Apple abandoned the "embossed design" this time. So, the logical starting point of this kind of "flat design" of Apple is "optimize for touch".

Relief is actually the mouse era of the product, it needs to cooperate with a variety of cursor floating and lighting to give users a clear reminder and guidance. At the beginning of the touch-screen era, this kind of relief also survived, but its significance has been small. Because the touch screen era of the gain without the need for light and light to do the direction of guidance.

What is an embossed design?

The beginning of the age of the mouse, "rich wisdom" of "embossed design" as a new thing began to itch, remember from Mac OS 6 and Windows 3.1 began, the PC interface began to use the relief effect boldly. --Mouse cursor Click action on the screen to be confirmed, the designers use the "relief effect" so that the button can clearly show "selected, press, bounce" state, the entire mouse-led GUI style is the starting point, and continues to this day.

I remember at the end of 08, when I was planning a blog to see Evans, even I did not believe that the mobile internet only used 4, 5 years of time to almost more than 10 years of development of the content of the internet has done all over again, and mobile intelligent terminal Solomo features and began to the Internet can not do content and services again.

The rise of the mouse achieved the "relief design" of the brilliant. Now, the thousand-yuan smartphone has become the handset manufacturers shout kill price war "Red Sea", Apple this bold cancellation of relief effect, basically is touch control rise and the result of mouse decline, because the era of touch control has begun.

The advent of the flat-type design era

I said here, "flat-class design" refers to the flat design of the materialized. It does not completely discard the advantages of materialization, but from another dimension it makes bold attempts at "flat design": such as canceling the emboss effect. In the touch of the times, the need for relief is greatly weakened, it becomes a decorative redundant design. The "Flat type design" style essentially gives the user a good experience and leaves the challenge to the developer. For example, as mentioned above, the average color of the entire interface will be 6-8 colors, which is very challenging for the development team.

"Flat-Class design" has become an inevitable trend, and not simply because of aesthetic fatigue caused by changes in order to change, and there are several reasons:

"Flat-Class design" has very good compatibility, and pure physical and chemical design is cumbersome and time-consuming. Now is a multiple-screen era, different sizes and resolution of intelligent terminals, PC monitors, smart TVs, and so-called smart watches, etc., you will find that the flat-type design can be well adapted to different terminals. "Flat-Class design" with excellent organization and presentation of information capabilities. Now is an era of information complexity, flat design can be complex content and function effectively organized, in a simple but reasonable way to arrange, so that the final user interface becomes so easy to use. "Flat-Class design" more suitable for the small screen intelligent terminal, it has fewer buttons and options, so that the entire interface clean and tidy, clear, so that users reduce cognitive barriers, reduce the user's learning costs.

The ultimate goal of the perfect design is the user to get the product after no learning costs, easy to use, easy, love! Regardless of the white cat Black cat, the user likes is the good product, we may adopt any way, including the so-called flat design, the materialization design. No company can get all the business done, and no businessman can make all the money in the world. Similarly, no design style can be all. But I think, the flood of data, the intersection of the information flow, the PC Era Web page in the former multi-screen era will rely on "class flat design" presented to the user. "Flat-Class design" has just begun.

Source: http://www.36kr.com/p/206411.html