Aug 27. 2019

Morandi Colour in EMUI10: Colouring Outside the Lines

On August 10th, 2019, the EMUI10 UX design concept was announced in Dongguan, Guangdong. Vice President Mao Yumin of the Software Dept. for the Huawei Consumer Business Group spoke at the event, noting that EMUI is driven by a commitment to ultimate craftsmanship from its designers, and characterized by the pursuit of a high-quality, user-friendly visual experience.

Furthering this legacy of fine-tuned perfectionism, the latest version EMUI10 adds a Dark mode, as well as fresh improvements on icons, text, and animations. Insights on user habits, psychology, natural phenomena, and real world principles are utilized to create an interface that serves as the extension of the user's personality and self-image.

Heightened Aesthetics in EMUI10: Dark Mode and AI Composition

Effortless Elegance, Down to its Roots
On the brand-new EMUI10, the change in UI design is immediately evident, even before the phone is unlocked. Magazine unlock, a feature unique to EMUI that displays a new lock screen wallpaper every time the phone wakes up, leverages artificial intelligence to arrange text following advanced aesthetic principles. The system determines which areas within an image are most attention grabbing, and implements flawlessly balanced image composition, to furnish the text layout with a wholly unique effect. An intelligent algorithm then adjusts the text colour, achieving the meticulous, professional-level visual effects seen on a glossy magazine cover.

Such premium design concepts are applied across all of the interfaces in EMUI10. Huawei's designers conducted in-depth research into the content layout in magazines and periodicals, to develop a design philosophy based on four main elements: large fonts (for highlights and headline areas), white space, grid system, and embellishment. As a result, all of the commonly used features, ranging from the control panel and contacts, to the calendar and email, provide for indulgent, leisurely browsing, reminiscent of flipping the pages of your favorite magazine.

Heightened Aesthetics in EMUI10: Dark Mode and AI Composition

Each new generation of EMUI has brought surprises for app icon design, and EMUI10 is no exception, adopting a unified standard that brings icons into harmony with their surroundings, the golden ratio. The shape and outline of icons have been polished down to the pixel level, at an optimal ratio of 0.618, with the height of icons used as a frame of reference, around which the rest of the visual elements fall into place. Against this backdrop, icons stand out without dominating, in an impeccable layout that is crafted for maximum comfort and ease. Furthermore, EMUI10 supports rendering third-party icons with a Huawei adaptive mask, ensuring a consistent display style.

Heightened Aesthetics in EMUI10: Dark Mode and AI Composition

For the camera interface, EMUI10 follows three basic principles to deliver the best balance between functionality and aesthetics: Simple, Clear, and Dynamic. When a user slides to adjust a parameter, the value change displays in large font, superseding the other visual features on screen. By giving priority to the user's action, the system reduces distractions to a minimum, thereby enhancing visual perception and mental acuity. EMUI10 also simulates the sound of the shutter button on a mechanical camera, for high-quality effects that are reminiscent of environmental feedback in the real world, in which sight, sound, and touch interact to provide an instant impression.

Heightened Aesthetics in EMUI10: Dark Mode and AI Composition

Starting with EMUI 5.0, Huawei has consistently utilized a minimalist blue and white colour scheme. This has been upgraded to a more sophisticated Morandi Colour palate on EMUI10, breathing life into a familiar interface. For those who are artistically included, the name will ring a bell, as it is a homage to the Italian painter Giorgio Morandi, who was famous for his subtle taste of colour. EMUI10 retains the basic blue and white combination from previous versions, and optimizes auxiliary colours by endowing small interface elements with high saturation, and large blocks with low saturation. In total, six vibrant new Morandi colours have been integrated into the Contact details page, Notepad, and feature illustrations.

Heightened Aesthetics in EMUI10: Dark Mode and AI Composition

EMUI10 also incorporates a new design for Always on Display (AOD), having drawn inspiration from the sky above us. The colour of the digital clock changes continuously and almost imperceptibly to match the hue seen in the morning, daytime, evening, or night sky, delivering a touch of nature in a wholly new setting.

A Dynamic Trio: Sight, Sense, and Sensibility
EMUI10 was designed with a keen understanding of user psychology and physiology, seamless transferring commonly understood real world phenomena into UI design. Reading efficiency and comfort were rigorously tested under four common lighting conditions, in order to determine the proper colour contrast range for text and icons.

Heightened Aesthetics in EMUI10: Dark Mode and AI Composition

The result is the newly fashioned Dark mode, which applies a bold contrast between the text foreground and dark background, for optimal readability. When the same colour is set against a light and a dark background, visual perception of brightness and saturation can differ dramatically. Therefore, EMUI10 optimizes text and icon colour to ensure ideal consistency, comfort, and readability, both in standard display mode and Dark mode.

Dark mode can also be experienced in third-party apps, via advanced GUI element identification and colour calibration technologies. Remarkably, even when the third-party app in question has not yet been adapted for Dark mode, a simple one-step setting provides for easy use.

Heightened Aesthetics in EMUI10: Dark Mode and AI Composition

Animations in EMUI10 are informed by user psychology, allowing for heightened appreciation of fluid change. As Mao Yumin explained in her speech, only seamless effects that move in accordance with individual expectations, can instill the proper blend of comfort, wonder, and joy. The user's senses of touch and sight, as well as frame of mind, are holistically taken into consideration to provide for highly-responsive use that is compatible with real world conditions. Following these principles, tap feedback is proportional to the spring force, and the duration of screen transitions is methodically set, so as to ensure that the user is not frustrated by a long wait or disoriented by a sudden jump. The return-to-home effect simulates the parabola of an object in flight, with the exact shape and curve customized according to the direction, speed, and release position of the swipe-to-return action.

The HUAWEI P30 series and a few other models will start internal BETA testing for EMUI10 on September 8th, with later testing for the HUAWEI Mate 20 series also in the works. The next-generation Mate series, set for release later in 2019, will come equipped with EMUI10.

Media: