Principles
Apple sought a new design language to unify the look and feel of interface elements across its devices, with their various window sizes and displays. [2] [3]
It describes Liquid Glass as a dynamic "material" that combines the "optical properties of glass with a sense of fluidity". [4] According to Apple's updated human interface guidelines, apps made with Liquid Glass should showcase hierarchy between content and controls. [5] The design features elements that automatically adapt to their environment by reflecting and refracting light. The digital elements are transparent, contrasting with the outer highlights of their shapes. [6] [7]
Apple's senior vice president of software engineering, Craig Federighi, said designers used the company's industrial design studios to fabricate glass of various opacities and lensing properties, so they could closely match the interface properties to those of real glass. [7]
Implementation
Liquid Glass overhauls existing iOS interface components such as text, sliders, toggles, alerts, panels, sidebars, and the overall frosted glass design, by introducing a new "material", which in Apple parlance is a visual effect that provides a sense of depth and hierarchy between elements. [8] [9] The new material introduced by Liquid Glass refracts and reflects any element placed behind it, using realistic lighting and shaders to look like a real piece of glass. The material adapts to a light or dark appearance to make text and icon on top of the material legible, and reacts to the device's movement on iOS and iPadOS. [10] The material is integrated into various apps, and the system as a whole, such as the Dock, notifications, and Control Center and can also be used by third-party apps. [9] [11] Federighi said Apple silicon provides the extra computational power required to run Liquid Glass. [12] [13]
App icons have been redesigned to use a layered system akin to the one used on visionOS and tvOS, applying translucency and a glass-like shimmer effect, which also reacts to device movement, while applying greater use of gradients. App icons can now adopt a new clear look that makes the background use the Liquid Glass material in a light or dark tint, making it appear transparent. [14] Toolbars and other elements on-screen are now no-longer pinned to the device's bezels, instead being separated into bubbles that appear and disappear based on the context. For example, the Music app's tab bar shrinks when scrolling. The new design also allows the material to change its shape and size, such as the text selection tooltip expanding to show all options in a vertical list. [15] In a video detailing the design change, Apple stated that the language was influenced by the Aqua design language of macOS, real-time Gaussian blurring in iOS 7, the motion in iPhone X, the Dynamic Island on the iPhone 14 Pro and later, and the glass-like UI of visionOS. [6] [7]
Reception
Liquid Glass has had a mixed reception. Some users praised the aesthetics of the operating systems designed with the language [16] and were impressed by the effects to recreate glass's refracting and lensing properties. [17] [18] However, other users noted that certain elements were too transparent, making text difficult to read in low-contrast environments, such as direct sunlight. [16] [19] Designers interviewed by Wired felt that the visual effects distracted from app content. [17] One designer said developers with smaller teams might struggle to meet the high visual standards set by the new interface. [17]
The design marked a shift in Apple's design languages, moving away from some of the flat design cues popularized by Jony Ive in iOS 7 (2013) toward more expressive, skeuomorphic elements. [17] [20] Many critics and social media users noted similarities to Aqua and Windows Aero, including glass-like textures popularized by Windows Vista. [18] [21] [22]
Complaints about legibility during the first developer beta release led Apple to adjust the transparency of Liquid Glass. [23] [24]
This page is based on this
Wikipedia article Text is available under the
CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.
