It is a difficult thing to accurately predict the trend of the industry, so this trend is simply a personal statement, the analysis of superficial skin, and you can see the story of the official right after dinner.
Let’s look at the literal meaning of “trend”: the direction of the development of things, to represent a general movement to the continuous development of distant goals that are not yet clear or just vague. What I want to talk to you today is the trend of UI design and development.
In understanding the development of things moving forward, I from three aspects as the breakthrough point, that is, from the past analysis of the development of art design to find the law, the analysis of the development of UI now find insufficient, thus prejudge the future trend.
First, the development of modern art design
1. development of modern art
The development of modern art is mainly led by several major design trends, in turn, the relationship is: classical period, Baroque Cocoa period, neoclassical period.
His artistic style is rigorous and realistic, pursuing the balance and integrity of composition, emphasizing rationality and despising emotion, purity, elegance, harmony and stability.
Baroque Rococo period
Baroque: Variable, dynamic, irregular, grand, luxurious; Rococo: delicate, small, charming, flashy, artificial. No more pure, and began to oppose the doctrines of classicism.
The period of Neoclassicism
The art form is an objection to Baroco Rococo art. It re admires classical and pursues connotations, emphasizes the integrity of reason and composition, and seeks to express elegance in a concise form.
2. modern design and development
There are several main points in the development of modern design: Arts and crafts movement, modernism and post modernism.
In the second half of the nineteenth Century, the design and improvement movement originated in the UK came into the modern world. After the industrial revolution, the mass production of industrial production led to a sharp decline in the level of design. The designers could not see it and started the arts and crafts movement. Why did it begin with the industrial art movement? Because it is the beginning of modern design, connecting the preceding and the following, and has far-reaching influence on later generations.
Arts and Crafts Movement
Artistic features emphasize handicraft production, oppose mechanized production, oppose artificial and other classical and traditional revival styles, advocate medieval style, advocate design honesty, simplicity, simplicity and good style, and advocate naturalistic style and Oriental style.
Break the tradition, break the position of the design for the powerful service, design the democratization, advocate the simple geometric modeling of non decoration in form, simplify the design extremely, advocate less is more, form following function, and advocate rational design.
Advocate diversified design, irregular, artistic expression of a variety of ways of thinking, less bored, anti-rationalism, emphasis on form, emphasizing historical context.
Through the analysis of the above design trends, we find that the development of art is actually a process of inheritance, negation and re-development. In the beginning, after the imitation of realism and imitation of realism to the extreme, it will naturally be abandoned and opposed, and gradually begin to seek breakthrough and form a new trend, but when this new trend becomes the mainstream (before being regarded as non mainstream), naturally some people will stand out against this trend and then inherit and redevelop.
2. today’s UI design and development
In twenty-first Century, with the development of the social development technology, the information software industry began to rise. Here we have to thank Joe for giving us a job. It is the design of apple that makes the world begin to attach importance to the user experience and attach importance to the design of UI.
1. quasi physical design
Early UI design is a quasi physical design, its style features: Simulation of the material, texture, detail, light of real objects, interaction also simulates the interactive mode of reality, low learning cost, and conveys rich human feelings. Disadvantages: quasi materialization itself is a constraint, which limits the design of the function itself.
2. flat design
We see whether the pseudo-materialized design is very similar to classicism and the industrial revolution at the beginning of that meeting, like to simulate the real, pay attention to design honesty. But slowly people’s aesthetic fatigue, then there must be a design trend, draw its essence and then oppose this design, that is, the flat design, we are now in the environment in this design trend.
Flattening has many advantages: remove the decorative effect of interface redundancy, “information” itself is highlighted as the core, design elements emphasize abstract, minimalist, symbolic, more concise design, clear regulations; shortcomings: the need for a certain learning cost, the feelings of communication is not rich, and even too cold.
For example: one of the first flattening designs is Microsoft’s mango MetroUI; it is not too good to look too flat. The flat design is like modernism, and it is very simple and cold. So we have to ask two questions:
Should flattening just be flat?
What should it be after flattening?
3.3 major design languages
Before answering these two questions, we first analyze the most recent design languages of the most representative three systems, the design concept is very important, and most of the design trends are driven by these ideas.
Chinese Name: material design language, a new design language introduced by Google, introduced electronic paper metaphor. We used to use paper to obtain information. Now, with equipment, it is actually electronic paper. Google has reintroduced paper. In addition to flat, it has added a lot of new features, such as https://v.qq.com/x/pa. Ge/m0131l1zvvo.html
Shadow and hierarchy: use the depth of shadow to express levels, and there are multiple levels.
The Z axis concept: the scene is stereoscopic instead of being confined to the plane, increasing the depth of information.
Touch ripple and smooth animation: meaningful animation instructions.
Card design, adaptive layout: The application of card design concept to the layout of strict specifications, and layout can be flexibly adaptive to any device.
Because iOS 12 does not have too big design update, we mainly look at iOS 11, use a large number of corner card design, large area of the background map, the impact force is stronger, the click desire is stronger, the page joins the big title bar font, which is very different from the small font of the previous small font, and the shadow is more advanced. The big shadow.
Rounded cards, headlines, big shadows: breathable large picture backgrounds, clear text reading levels.
Linear element evolution to facet: linear icons change to face shape, shadow instead of tracing, not only icons, now more and more debris information, more and more need to be summed up; fragmentary lines gradually to a more overall surface.
Fluent Design System
Microsoft’s Chinese name of the design language launched last year: fluent design system, set up by the director of the UI aesthetics, it is more advanced, the system contains the above five core elements: light, depth, dynamic effect, material and zooming.
Ray Light: through the operation of light, the interface is more textured and more futuristic.
Depth Depth: using depth idea can construct many visual effects, such as parallax, back and forth transformation, space movement and so on.
Dynamic Motion: it goes without saying that dynamic effect makes pages more fluent and more appreciating.
Material: A high-level combination of materials, such as ground glass and acrylic, in the interface makes the whole page very high-level.
The main purpose of scaling Scale:Fluent Design System is a design that can be used for various cases of 0D (only voice), 1D (Surface Dial), 2D (UI), 3D (VR/AR); therefore, scalability is more important than other UI design languages, especially on the device, which has no potential for application.
According to the design concept of Fluent Design System UI interface, the effect is really great!
3. today’s trend: should flatten be merely flat?
Now to answer the first question of the previous article, through the analysis of the three major systems, we find that the major Internet Co are no longer constrained to be flat, and are trying new forms of design to oppose flattening. These forms of opposition are the most popular design trends now. Now let’s see what forms are there:
If a page is no longer flat, I think the quickest and most direct way is to increase the depth and highlight the important information. The common means to increase the depth are:
More and more designers are adding big shadows to cards and buttons to highlight the hierarchy.
Three dimensional stereoscopic
Breaking the flat, increasing the three-dimensional, three-dimensional elements in the interface more and more used.
2. motion vision
The visual difference of dynamic effect is becoming more and more important by designers.
Practical animation, interpretation function, watching animation, buffer users waiting for anxiety.
Parallax animation combines gravity induction, allowing users to immerse themselves.
Through the use of different materials, break the flat, Apple ground glass, Microsoft acrylic material, I believe that the future will have more materials added.
The page design of the sense of visual hierarchy is not only highly designed and pleasing to the users, but also establishes a clear and intuitive level of vision to facilitate the user’s simple and rapid identification and reading of the required page content, thus improving the user experience and reducing the rate of jump.
The larger the size of the element, the more prominent, the more easy to attract the attention of the user; but the size of the size should also be degree, control in the scope of the user can accept, Airbnb and the apple big word use is more appropriate.
Use color contrast to highlight page level.
Proper spacing to leave white
The ingenious use of blank can effectively highlight page information. It is also a good strategy to attract users’ attention by maintaining the appropriate spacing between the elements of the page to make the interconnections between each other rather than “crowded and messy”.
4. the future trend: what should be after flat?
Before answering this question, I think it is necessary for everyone to think about the way of life and social situation in the future. Let’s watch a short film first.
Through the short film, we found that the rapid development of science and technology in the future people’s design aesthetic improvement, everywhere is the screen, the information is more complex, the dynamic effect is popularized, the humanistic care is becoming more and more important, all kinds of technology are popularized, more design forms appear, and holographic projection will be used.
So we name the flat design trend after all: flat and multimedia.
So what style does it have? In my opinion, there are the following points:
Flattening will still dominate, but more abstract and simple
Popularization of dynamic effect
3D projection application of virtual holography
Above for my UI design trends some insights sharing, analysis is not comprehensive enough is not deep enough, welcome to leave a message together to explore.