Apple added “dark mode” to iOS13 in June 2019. When users turn on “dark mode,” the app screen turns dark, and Google’s Android 10 later released “dark mode.” In order to adapt to the system, many apps have launched a dark mode.
In addition to reducing energy consumption and further prolonging battery life, the dark color mode can effectively solve the problem of OLED screen burning and eye wasting. Xiao Mo has experienced the dark mode of several commonly used apps and shared my experience with everyone. From these cases, perhaps we can find the reason for the popularity of dark patterns.
Dark mode is a new look that reduces visual fatigue and helps users focus. The biggest difference from traditional night mode is that dark mode not only ensures a low-light experience, but is still readable in bright light.
Although dark mode is also called dark mode, it does not mean changing the background color to pure black. If a 100% black background is used, it will cause eye strain when reading for a long time. In the dark mode of wechat, the chat background and the background color of the home page are not pure black, but dark gray.
In addition, the high contrast of pure black and white will also cause visual fatigue, so wechat uses light gray as the font color in the dark mode, which can not only maintain a clear display, but also reduce the contrast and reduce the reading burden of users. If the chat background is set, the chat background image will be dimmed automatically for easy reading.
Although the overall color is deepened, wechat still maintains a clear hierarchy in the design. For example, the gray of the top chat window is a little lighter than that of other Windows, and the title and summary of chat messages also use light gray with different lightness to distinguish levels. In addition, wechat’s colorful linear icon on a black background has become more technological, and the appearance level has been greatly improved.
In addition to helping users to relieve night vision fatigue, wechat’s dark mode also has almost no obstacle to use during the day. In general, the experience is better.
Q Q
If wechat’s dark mode is more about appearance, QQ, another social tool owned by Tencent, is more about late-night reading experience.
First of all, when wechat switches to dark mode, it needs to restart the software to take effect. QQ uses a smooth and gradual transition when switching to night mode, allowing users to quickly adapt to the scene change. Secondly, in order to reduce the stimulation of night light on human eyes, QQ reduces the contrast between information and background, and adds masks to users’ pictures such as headshots to make them look softer in low-light environments.
There is also a design Easter egg when the user turns on the night mode: some ICONS change depending on the mode. For example, the message icon will switch from a smiling face to a resting state. This kind of interesting design will also shorten the distance between users and products.
Bean petal
In normal mode, the background color of Douban APP is pure white, which sometimes feels dazzling during the day, not to mention the suffering of users who must brush douban before going to bed. Douban APP has finally launched a night mode after being scolded repeatedly by users.
Douban’s night mode, like wechat’s, retains its colorful ICONS. At the same time, douban always ensures good contrast and clear visual hierarchy in its design, ensuring accurate communication of information structure.
In terms of color matching, in order to avoid “dead black” making the whole interface too rigid, Douban also mixed with blue and purple in the black, so that the background color looks more transparent. The main buttons, such as the bottom navigation button, use douban’s main color green, which can be clearly displayed in the night mode without being too dazzling, and also ensure normal browsing in the strong light mode.
zhihu
Zhihu, another social APP, has the same problem as Douban. When designing the night mode, Zhihu adopts the combination of the main color blue and dark gray, with dark blue and gray as the background, showing the effect of strong contrast and getting rid of the dark depression.
Different from Douban, The text color of Zhihu is gray with lower contrast, which is distinguished by word repetition. While this will make the overall page look more harmonious, the content will not stand out enough to be able to read the title in the shortest time, which will undoubtedly bring a bad experience for users in a content-oriented community.
Zhihu should have a very clear goal when designing the night mode, that is, only consider the use of users at night, so the overall tone is very dark, and it cannot be browseable in a strong light environment.
Bilibili animation
When B website launched the dark mode, it received a lot of criticism. The contrast between font and background color was not strong, and the cover of the video seemed to be covered with a layer of fog, which resulted in poor browsing experience for users.
In the latest update, website B finally optimized the dark mode, moderately enhanced the brightness of the video cover and icon, and adjusted the colorful icon to a single line icon, which not only unified the image style, but also improved the interface reading experience.
When designing dark mode, it is important to ensure that the color scheme and contrast between pages are as uniform as possible. In dark mode, when you click on the creation center of STATION B or the section in the recommendation service, the loading screen is still white, and the sudden bright light will undoubtedly cause irritation to the eyes, and the experience for users will be very poor.
Baidu cloud
High saturation colors can produce dazzling visual effects on dark backgrounds, causing visual fatigue. Baidu net disk dark mode, the background is close to all black, icon is not too big adjustment, to the user’s reading experience is not good.
Similarly, due to the dark background color, the text and background contrast of Baidu web disk are too large, which also makes it difficult to read. For dyslexic patients, the text will feel rotated and blurred when reading.
When designing a dark color mode, in addition to using a dark gray background color as much as possible, make sure that most areas are dark and use a limited number of colors as much as possible. Hold good contrast and saturation, ability designs a comfortable brunet pattern.
All in all, using dark colors properly can reduce screen brightness, not only reducing battery consumption, but also reducing eye irritation to yourself and others. In addition, the dark mode optimizes the background color, text, and system icon color to improve reading comfort. For those who prefer dark or black colors, dark mode is a new experience that is different from normal mode.
In addition to apps, many productivity tools have adopted dark interfaces, such as PS (www.adobe.com/) and Copyist (www.mockplus.cn/). For example, when users are designing, a dark interface can not only reduce eye fatigue, but also highlight your design content and create an immersive design experience.
Dark mode has gradually become a popular trend in APP design. As a designer, we must also master the design skills of dark mode in APP. From the above APP design cases, I have summarized the following suggestions for your reference:
1. Avoid using pure black;
2. Avoid using highly saturated colors;
3. Text color should be bright, but pure white should not be used;
4. Make emotional design;
5. Pay attention to structure and hierarchy;
6. Allow users to freely switch between dark mode and normal mode.