news

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

A month ago, after we received the push notification of Huawei's Hongmeng NEXT system, we immediately did a hands-on experience.

The editors of iFanr also took turns to experience it. Although everyone's daily main machine has a variety of brands, their evaluations of the pure-blooded Hongmeng are roughly the same:

Quite silky.

And you can see the topic of "#HongmengNEXT Smooth and Smooth" on almost every social platform. I feel the same way, but I still have a few questions:

• Silky smoothness is a result, but what kind of process leads to it?
• There is not much difference between Hongmeng NEXT and the previous generation system as a whole, so what are the differences in details?

After a month of in-depth experience, I discovered some of the considerations of Huawei's new system in the corners. Perhaps these subtle optimizations that are difficult to detect are the root of the smoothness.

So today we will take apart Hongmeng NEXT according to the "reach frequency" of each design, from small to large, from point to surface, from static to dynamic.

Icons are so important

The screen is the window to the Internet.

I think this statement is not accurate enough. What can really be called a "window/channel" on a mobile phone should be an application.

WeChat, Weibo, Xiaohongshu, Douyin... I open one or more of them almost every hour. Compared with other parts of the system, the frequency of clicking on the App icon is the most.

The design of App icons has gone through several stages of development: skeuomorphism-flatness-free adjustment of skeuomorphism and flatness.

To put it simply, it jumps back and forth between simulation and simplicity, but they all have two design cores: accurate information transmission + unified style.

Huawei has gradually finalized its own icon style through three generations of systems: EMUI, HarmonyOS, and HarmonyOS NEXT.

The new icon style is called "light simulacrum" and has four very obvious characteristics:

① The icon has a simple outline and is easy to understand. You can tell what it does at a glance.

② Use semi-transparent and blurred elements to stack and present a sense of hierarchy, which is lighter than pure skeuomorphism and more three-dimensional than pure flat style;

③ Strengthen the highlight processing of the edges of the graphics to enhance the overall texture and highlight the core elements of the graphics, so that the eyes can find the key points more quickly;

④ The color of the icon back panel is slightly gradient, and the objects depicted by top-down lighting appear more natural to the human eye, avoiding the impact and abruptness of strong color gradients.

The above four application designs make the icon symbols on the desktop look more unified. The most intuitive feeling is that this is something designed by a team, not the result of group discussion.

Of course, “light simulation” is just a general trend. There will always be people who like a style that is closer to the real object and more three-dimensional, so you can also manually adjust it to another one - the edge shadow is heavier, the details are more specific, the layers are more three-dimensional, and the colors are brighter.

▲ The left one is a light anthropomorphic style, and the right one is anthropomorphic style.

It is not difficult to find that even the skeuomorphic icons still follow the above design principles. And the unified tone is also used in system icons.

System icons can be found in the control center, settings interface, and system application navigation bar, but they are easily overlooked because they are usually accompanied by text.

This is also the first design difficulty of the system icon: how to keep it consistent with the text layout? Huawei's solution is to characterize the image so that it can be seamlessly connected with the system font.

It can intelligently adapt according to changes in text thickness, ensuring that the icon can flexibly adapt to different text thicknesses and maintain visual consistency.

We also discovered another detail during the experience. The system icons of Hongmeng NEXT have richer dynamic effects: Star Flash, Flashlight, Huawei Share, Eye Protection Mode, Power Saving Mode... all have exclusive effects.

The new system sets 7 dynamic effects for icons, through a combination of appearance, disappearance, bounce, scaling, replacement, pulse and variable color.

You may be wondering, what does icon design have to do with system fluidity?

On a smaller scale, icon animation is also part of the system. The coherence and consistency of the movements will affect the user’s perception of the system’s smoothness. On a larger scale, icons appear very frequently in the system and users come into contact with them a great number of times.

Only a unified and harmonious design can allow you to see the shadow of a system when switching pages, avoiding "chaos".

Therefore, consistent static element design is the basis for the system to move smoothly.

Like water

With the application and system icons laid out, let's look at the specific usage scenarios.

The application and system UI adaptation of full-screen mobile phones is always criticized for being too "violent". It just enlarges and widens the applications with standard screen ratios, fails to make good use of the advantages of the large screen, and uses twice the area to display more information, just like the lazy strategy used on tablets in the early years.

A user interface that feels good should be like water, which always fills the container perfectly, no matter what it looks like.

This "water-like" adaptation solution is called "responsive layout" by Huawei.

When the window container size changes, the interface elements can automatically change to adapt to the change in container size.

Huawei achieves smooth transition and interface adaptation by simultaneously stretching elements such as page background, text, icons, and components.

Different components can be scaled in different proportions on different pages.

When the page changes, the UI layout will also change accordingly. Memo is a good example.

In landscape mode, the interface is divided into two parts, with the directory bar on the left and the secondary menu on the right. This not only avoids excessive stretching and excessive white space in the display of a single directory, but also makes full use of the space of the landscape screen.

When it comes to the adaptation of more specific widgets, Hongmeng NEXT adapts to different sizes by changing its own shape and information density.

This is very similar to the design idea of ​​desktop widgets: change the folder size and use service cards of different sizes to fit the empty space on the desktop.

There are many solutions for responsive layout, but the underlying logic is exactly the same:

• Adapt like still water
• Transition like flowing water

These adaptation solutions hidden in the corners also happen to facilitate the fit between software and hardware.

Hongmeng NEXT's split screen is very good. In traditional solutions, as long as two screens can be separated, the task is considered completed.

But based on this, the new system also trims the corners of the small window to make it have the same curvature as the screen's R angle.

To be honest, this is how windows and screens should be designed, but since the Android system needs to be adapted to too many brands and models, perfect adaptation has become a big problem.

This is also an additional advantage brought by the pure-blooded Hongmeng system: the native system is specially designed to serve this brand of models, and there is no need to consider other things.

Playing 3D art on a 2D screen

A month ago, if you asked me "What are the upgrades of Hongmeng NEXT's UI?"

I might just tell you that a "frosted glass" special effect layer has been added in many places, but the addition of a single element is unlikely to improve the smoothness of the system to a higher level.

To achieve and be perceived by users as "smooth" is actually a systematic project, and you must consider everything. After experiencing it for a month, I classified the smooth operation of pure Hongmeng into two parts:

• Layering
• Playing with force

Let’s first look at the sense of layering. The frosted glass (blurred) special effect is a part of it. It usually appears in scenes such as switching apps, negative one screen, pulling down to search, closing the background, split screen and moving the dividing line.

Compared with the previous system, there are indeed many more blur effects, but the added motion effects and the scaling of desktop icons can work together to simulate the process of human eye focusing and defocusing. The so-called sense of reality during interaction is the result of the combined effect of the two.

By scaling to simulate the desktop's lifting and lowering effects, the hierarchical relationship in the system is also intuitively reflected.

Opening an app, creating a new task, unlocking the screen, etc. all belong to the upper and lower levels. Hongmeng NEXT sets several animations for this type of switching:

In addition, there are switching across levels and between the same levels, and there are corresponding animations.

Subdivide the hierarchical relationship and add different special effects. First, it can enhance the three-dimensional sense of the system through layers, making the transition less abrupt. Second, it can integrate non-linear animation into each transition, and the operation will become smoother, at least it looks that way.

The demonstration video on the official website illustrates the role of non-linear animation in smoothness.

Huawei's optimization of hierarchical relationships is not only limited to large page transitions, but also focuses on small icons.

We can see the following one-shot animations everywhere in the new system:

Whether it is highlighting the search box, scaling the App icon, or turning function keys on and off, it is difficult to see forced transitions on this system. It always makes the process more natural through a series of methods such as shape, color, displacement, and scaling.

According to official statistics, transition is the most common type of animation in the system, accounting for more than 60%. This is also one of the fundamental reasons why many people feel that Hongmeng NEXT is smoother after using it - you can see it everywhere.

The ubiquitous "Void Spring"

I remember a colleague shared an example with me:

Today's children's first reaction when seeing a screen is not to look for the remote control, but to click or swipe it with their fingers.

In the era of full-screen displays, the way the new generation interacts with digital products has been completely upgraded - sliding and tapping have become the input methods for most consumer electronics - pressing on the Z-axis is dying out.

Many people miss the buttons on feature phones because they feel better and have a very obvious physical touch confirmation.

This is also the reason why touch screens are criticized: insufficient feedback. Major manufacturers have also used various methods such as motor vibration (tactile) and sound effects (auditory) to restore the physical movement that can make people feel at ease on a flat screen.

The animation on the system icons is to enhance the visual confirmation.

The "gravity motion effect system" of Hongmeng NEXT simulates the "force" of objects in motion through various motion effects, so as to make interactive operations come alive.

Huawei visualizes force as non-existent springs, which are filled in every corner of Hongmeng NEXT.

For example, when sliding a page, there will be "springs" at the top, bottom, left and right boundaries. When you reach the boundary, there will be a very natural rebound effect, telling you that you have reached the end.

Leaving a certain amount of elastic space can also prevent accidental touches and prevent the system from being too sensitive, causing us to use a little strength and be cautious in millimeter-level operations.

Moreover, the virtual springs that are everywhere can also contribute to a certain degree of smoothness in large-scale operations: a single move can affect the entire body, creating a rebound effect that is close to reality.

Restoring the dynamic effects of the physical world can reduce the user's learning cost, and they can quickly get started with new devices and new systems by following the "normal" operating habits in life.

For friends who are already familiar with gesture operations or the Hongmeng system, the most significant thing is the interaction that is more responsive to the hands.

There is such a sentence on Huawei Developer's official website:

The animation should always be centered around operations that meet user expectations and object movements that match the real world.

Product engineers try their best to compress everything in the three-dimensional world into a two-dimensional screen, while product managers rack their brains to simulate the real world on a two-dimensional display screen.

▲ Image from: rauno.com

In the final analysis, the in-depth study of interaction design is actually to understand ourselves more deeply: Which scenes need to use sliding? How to arrange the special effects during transitions? How to cover 99% of the operations with one finger?

If you are like me, who has switched from a keypad phone to a full-screen phone step by step, it is not difficult to find that the current interactive system on mobile phones is actually more suitable for us - you almost don’t need to think or learn, you can use it right away.

When you don’t notice the existence of system interaction, it is the greatest compliment to a system, because all the above considerations in details have made the product a natural extension of our body.