Apple has launched a new Liquid Glass design philosophy, bringing a new design trend for the next decade. This article provides an in-depth analysis of its design concepts and characteristics to help designers grasp cutting-edge trends.
Since Apple released their most significant visual style update in recent years, Apple’s influence has led to a wave of design trends, with designers around the world designing their works in liquid form. There are already many design works and development projects on the design platform and developer platform, and everyone is imitating and learning and realizing them.
Liquid glass has become the most important design trend in the next 10 years, so in the past week, I have conducted more in-depth research on it, and I have basically used the official website of Apple, Medium, Behance, Dribbble, and other materials to study and study.
Now, I feel more and more that this design is really good, and Apple is still the big brother who leads the design trend. Therefore, I would like to share my study notes with you, I dare not say how deep, after all, it has not been widely used, but starting to learn is the first step to understanding it.
The design philosophy of Liquild Glass
In fact, Liquid Glass is a continuation of Apple’s design philosophy, not simply for visual effects, it introduces a flexible and dynamic design expression for the application and system experience in the Apple ecosystem.
Liquid Glass is Apple’s next-generation design philosophy after flattening, skeuomorphism, and spatial glass. It is not just a visual style, but a complete interactive experience framework based on physical light and fluid dynamics. At its core, it simulates the refraction, reflection, and caustic effects of light penetrating glass media of different densities and shapes, and gives interface elements a “liquid” fluidity and responsiveness, creating an immersive experience that is both clear and intuitive.
This design language aims to blur the boundaries between the physical and digital worlds, making users feel like they are not “operating” the interface, but interacting with a textured and responsive “material”.
To achieve these three challenges, product managers will only continue to appreciate
Good product managers are very scarce, and product managers who understand users, business, and data are still in demand when they go out of the Internet. On the contrary, if you only do simple communication, inefficient execution, and shallow thinking, I am afraid that you will not be able to go through the torrent of the next 3-5 years.
View details >
The continuity in design started with the Aqua user interface of Mac OS X,
Live blur effect to iOS 7
to the fluency of the iPhone X
and then to the flexibility of the smart island
to the immersive interface of visionOS.
In the design understood by Apple, continuity is not only a simple design symbol and texture continuation, but also includes dynamics, effects, feelings, etc., which can be the continuation and integration of design.
Based on this experience, Apple has created a new material called Liquid Glass, which can dynamically bend and shape light. At the same time, it behaves and moves very organically, feeling more like a light liquid that responds both to the fluidity of touch and to the dynamics of the application.
The core dynamic characteristics of Liquid Glass
Apple’s ID and screen are now getting more and more rounded, and Liquid Glass fits perfectly into this evolution of product design. The clearly defined shape feels easy to click, and the design also references the natural geometry of our fingers, so it feels very friendly when touching and interacting.
Liquid Glass visually utilizes a technique called “lensing”. Lens effects are ubiquitous in our natural world. Through the observation of real phenomena, there is an intuitive understanding of how this material can distort light to convey its movement and form.
Liquid Glass uses these natural visual cues to design this new material to give the content a better layer while allowing the underlying content to penetrate the display.
Whereas previous materials reflected light, this new set of materials dynamically bends, shapes, and concentrates light in real time. Give the controls a clear outline on the interface while visually maintaining a consistent experience of the natural world. By harnessing light in this way, the controls become light and transparent while still remaining visually recognizable.
Although there are still some readability problems in some complex contexts, there are ways to optimize them, and as long as there is a solution, then it is not a big problem.
Instead of fading in and out as before, Liquid Glass appears and disappears by gradually adjusting the bending of light and the lens effect, ensuring smooth transitions and maintaining the optical integrity of the material. Simulates the most realistic way to make the user feel natural.
The feel and behavior of a material is just as important as its appearance, and Liquid Glass’s visuals and dynamics need to be consistently designed. We all have an intuitive feeling for the movement of liquids. Their smooth, responsive, and effortless movement and behavior are characteristics that UIs can refer to, allowing them to move and react in a way that aligns with our intrinsic understanding of the physical world. To do this, Liquid Glass gives operational feedback by bending immediately and giving it a change in light and shadow.
This makes the interface feel responsive and full of life. It also has an intrinsic gel-like flexibility, and as it moves in sync with your interactions, it feels like the controls are also gel-like variable and Q-bouncy.
This fluidity helps the interface feel aligned with the dynamic and changing nature of our thinking and movement. As you switch between different states of the app, Liquid Glass dynamically transforms between each control. This embodies the concept that all controls exist on a single floating plane. As the controls are constantly changing terrain, it makes the transitions between different parts of the app feel smooth and seamless.
When the menu is displayed, the bubble “pops” to reveal the contents of it. This lightweight in-place transition effect keeps everything where you just clicked and conveys a very clear and direct relationship between the button and what it contains.
With these properties, Liquid Glass’s ability to bend and shape light in new ways, combined with dynamic bending and morphological transformation, makes the application experience feel fundamentally more organic, immersive, and fluid.
Summary: Its new features mainly include 4:
(1) Clarity: Despite the rich visual effects, the clarity of information conveyance always comes first. Liquid Glass ensures that text and key controls are legible in any context with dynamic contrast, intelligent depth of field, and content-aware blurring.
(2) Dimensionality: The interface is no longer a flat cascade, but a space with true depth (Z-axis). Elements are layered by light, parallax, and material thickness, creating believable spatial relationships.
(3) Fluidity: All transitions, animations, and responses follow fluid dynamics. Elements create a “sticky feeling” when dragged, boundaries show soft dynamics due to “surface tension”, and the easing curve of the animation simulates the physics of liquid flow.
(4) Responsiveness: The interface responds in real time to user input, ambient light, and even the device’s posture. Not only touch feedback, but also “halos” and background refraction changes when the cursor or finger hovers, as well as dynamic drift of highlights when tilting the device.
How Liquid Glass automatically adapts to different environments
In order to better adapt to different content backgrounds, Liquid Glass is composed of multiple layers, unlike previous materials with a fixed light or dark appearance, each layer of it will constantly adapt according to the content behind it, Apple officially said intelligent adaptation.
As the text scrolls below, the shadows become more prominent, so the hierarchy is clearer. The degree of hue and dynamic range varies to be compatible with both dark and light colors, and this is done to ensure that the buttons remain legible while allowing as much content as possible to penetrate the display.
When a control bends and transforms into a larger size, such as when a menu pops up from a toolbar button, its material properties change to simulate a thicker, more substantial material.
It casts deeper, softer shadows, has a more pronounced lens and refraction, and softer light scattering. These subtle changes enhance sensory depth and contribute to the readability of content within glass elements.
On larger elements like the sidebar, the appearance of Liquid Glass is affected by the environment around the app. Light from nearby colored content is reflected on the UI surface, reinforcing the material’s sense of context and its suspension in the interface.
And this effect is not limited to the surface, light also reflects, scatters and seeps into the shadows, just like in the physical world. It can be thought of as a single navigation element, scaling smoothly as the application canvas changes.
Scrolling edge effects and Liquid Glass work well to create a good hierarchy between the UI and the content, ensuring readability, especially when scrolling through content dynamically. Just like Liquid Glass, the rolling edge effect is inherently adaptive.
When content begins to scroll under glass elements, the effect gently blends content into the background, visually lifting the glass above moving content and keeping levitating elements like headings clear at all times.
When darker content scrolls down, triggering the glass itself to switch to its dark style, the effect intelligently switches to a subtle darkening effect instead, also to ensure contrast and readability.
When you need a stronger visual separation between the floating elements in the sub-view and the scrolling content below, it is more appropriate to use a hard cut. For example, when there is a fixed sub-view below the toolbar, such as a column header, it does not fade out, but instead applies the effect evenly at the height of the toolbar and the fixed sub-view.
Some key principles for using Liquid Glass
To get the most out of Liquid Glass, it’s important to fully understand the principles of use.
Where Liquid Glass really strengthens is its overall design. Light and shadow effects, depth effects, adaptive changes, these are not isolated features. They are layers in a complex system that work together to create a “1+1>2” material.
(1) Highlight layer
Liquid Glass simulates a real-world environment, and when a light source hits a material, the highlights produced react to the geometry as you would expect.
In lock screen interactions, the light source moves through space, causing the light to move around the material, defining its outline. It feels like Liquid Glass is able to sense its position in the real world, using shadows to better reflect the outlines and layers of elements.
(2) Shadow layer
Control elements are able to sense what is behind them. When it is above the text, it increases the opacity of its shadow. Conversely, when it is on a solid light background, it reduces the opacity of its shadow. This ensures that the element is always easy to see. When you interact with Liquid Glass, the material glows from the inside as a form of feedback.
The halo starts under your fingertips, spreads throughout the element, and extends to any nearby Liquid Glass elements, interacting with the flexible nature of the material in a way that feels natural and fluid. Sometimes, multiple layers adapt together to maintain clarity and focus in the UI hierarchy.
For example, when a window loses focus on a Mac or iPad, Liquid Glass changes its appearance and visually steps back to direct attention.
Apple has built this complexity into the design, and we can use it directly when designing. Encapsulating the complex mechanism is convenient for users to call on the one hand, and on the other hand, it is also to maintain the consistency of the entire system design, so as to avoid the inconsistency caused by exposing too many parameters to users to modify at will.
Avoid “glass stacking glass”. Stacking Liquid Glass elements on top of each other can quickly make the interface cluttered and confusing. When placing an element on top of Liquid Glass, avoid applying the material to both layers. Instead, use fill, transparency, and vibrancy for the top elements to make them feel like a thin overlay that is part of the material.
Liquild glass is available in 2 styles: Regular and Clear. They cannot be mixed because they each have different characteristics and specific use cases. The regular type is the most versatile and the most used.
Transparent is more transparent and is used for rich media content, such as video playback controls, to better display the background. But it doesn’t have adaptive behavior and requires a dark dimming layer to ensure the readability of the symbols on it.
To sum up, the regular type can be used anywhere, while the transparent type should only be used if the following three conditions are met:
- The elements that apply it are on top of rich media content
- The content layer is not negatively affected by the introduction of a darkening layer
- The content located above it is bold and bright
Liquid Glass readability
Small elements like the navigation bar and tab bar constantly adjust their appearance based on what’s behind them. They also flip between light and dark colors depending on the background to ensure that the material looks its best while also being easily recognizable. But larger elements like menus or sidebars also adjust to context, but they don’t flip between light and dark colors. They have too much surface area and such a transition can be distracting.
To maintain readability, the symbols and icons on Liquid Glass do the same. They flip between light and dark colors and vice versa, mimicking the behavior of glass to maximize contrast. You can also use custom colors, but be selective.
When items or elements have a unique functional purpose, you can add color to them to draw attention. Selecting a color generates a series of shades that correspond to the brightness of the content below the colored element. It is inspired by how tinted glass works in reality, changing its hue, brightness, and saturation depending on what’s behind it, without deviating too much from the intended color.
Shading should only be used to emphasize the main elements and actions in the UI. Avoid coloring all elements. When every element is colored, nothing stands out and can be confusing.
On the other hand, the content layer is also key to avoiding any unnecessary visual noise. For example, when your app is first launched, you should avoid intersection between the content and Liquid Glass.
In addition to these readability considerations, Liquid Glass offers several accessibility features to accommodate various demographics and needs. These functions act as modifiers for the material, changing certain layers of Liquid Glass without sacrificing its material properties. For example, “Reduce Transparency” makes Liquid Glass more blurry, obscuring more of what’s behind it. Enhance Contrast makes elements mostly black or white and highlights them with contrasting borders. Reduce Motion Effects reduces the intensity of some effects and disables any elasticity properties of the material.
In some special cases, some downgrading and special processing for materials are also considered, the purpose of which is to better serve more people, rather than rigid application consistency, because these expandabilities are to take care of some niche scenarios, so they do not particularly affect the consistency design in most cases.
