The new light mode design for NIO OS
Aspen 3.1.0｜Meet the New Light User Interface
Following the release of Aspen 3.1.0 in January, the new light mode is now available. We at the Digital Interface Design Team would like to take this opportunity to share our thoughts and ideas in designing this new interface.
Introduction
Compared to version 2.0, the light mode of Aspen 3.1 has been innovated and updated in many ways. In version 2.0, the light mode was designed to present a warm “white”, and it focused on conveying brand personality through the text/background contrast ratio and the colors with the changes from the skylight. In this version, the point is to deal properly with different shades of “gray” and to restrain the use of many colors.
The progressive gray transitions can better differentiate different levels of content, and ensure clear, hierarchical visualization of desktop maps, tabs, and controls; the unnecessary use of colors is minimized (desktop tabs are now in white), a design philosophy we’ve been following since version 3.0. Colors are mostly used for the presentation of functionality rather than personality.
After collecting and analyzing users’ feedback, we decided to put “ease of use” at the core of defining the light mode. To this end, we catered to every scenario by adjusting most contrasts of hue, tone, and brightness and carefully analyzing the conflicts.
Ultimate Ease of Use
Ease of use is the first step to a comfortable user experience. With this in mind, we started from the underlying logic of the dark mode of Aspen 3.0.0, and we dug deep into such elements as brightness, contrast, proportion, and reality to explore ideas for designing the light mode.
1. Mild brightness
Aspen 3.1 is designed in more subdued colors. The background color comes with a mild brightness to ensure it does not get too harsh due to sharply elevated brightness. The teal color has also been adjusted to avoid overly vibrant tones.
2. Inclusive contrast
In the light mode of the new version, the foreground/background contrast ratio ranges from 7:1 to 15:1. This ensures that information is effectively visualized and that the text does not look disorderly or awkward on the map, giving users comfort in reading.
3. Ratio between black, white, and gray
In version 2.0, the white color took up over 80% of the interface, so there was a sensation that it was white everywhere, which could be unpleasant to look at. This is a key user experience issue that users complained about.
In the new version, the gray color takes up an increased share and the white color is only used to highlight key controls (such as desktop tabs). This makes the interface looks less obtrusive while achieving the desired highlighting effect. Theoretically, the ideal ratio between black, white, and gray is 1:3:6 for the color design system. The one adopted in the new version is close to this ratio, which allows differentiating between what’s important and what’s not and brings out greater harmony.
4. Close to reality
The light mode of Aspen 3.1.0 brings roads and vehicles back to reality. Through more sophisticated model simulation, more delicate presentation of a glowing 3D world, and more genuine projection, we strive to meet users' expectations by making the interface look as real as possible.
Future Improvements for Different Scenarios
The light mode of Aspen 3.1.0 is a result of inheritance and innovation based on version 2.0. For instance, the auto mode is a continuation of the design philosophy of version 2.0, i.e., switching to light mode at sunrise and to dark mode at sunset. The center display allows switching to any mode at any time. For the sake of safe driving, the digital instrument panel only allows switching to auto mode or dark mode during nighttime.
To enhance the ease of use for different scenarios, we conducted a lot of validation tests. For example, we explored how to ensure the screen does not offend the eye and the information on it is clearly visible when the vehicle drives in dark tunnels and underground car parks. We performed tests on different weather conditions to identify an appropriate chroma range for rainy and sunny days. We also examined the right thresholds to use in the early morning, at noon, and at nightfall.
In addition, we have started to improve the brightness curves of the light and dark modes. We added targeted solutions to address the user experience problems when the vehicle enters and leaves tunnels, underpasses, underground car parks, and drives during rainy days. After the sunrise, the rain & light sensor (RLS) judges the ambient and returns brightness and duration values. When the brightness value is lower than X1 and the duration value is higher than Y1, the system switches to dark mode; when the brightness value is higher than X2 and the duration value is higher than Y2, the system switches to light mode. To ensure that users get an optimal experience, we are still working to improve this feature, which will be available in the next version.
The feature of auto-switching between light and dark modes based on ambient brightness will be made available in the next version.
Giving users the best experience has always been our goal. As a major update, Aspen 3.0.0 brings with it many new features and enhancements. Therefore, we decided to launch the dark mode first, not only to ensure stable running of the system but also to utilize effective feedback from users to design a light mode that better adapts to user needs. We will continue to work on our systematic efficiency to ensure the dark and light modes can be launched at the same time for major updates in the future.
