8 best practices for dark mode design.
The Translation Bureau is a compilation team that focuses on technology, business, workplace, life and other fields, focusing on foreign new technologies, new ideas, and new trends.
Editor’s note: With the approach of September, the official version of Apple iOS 13 is about to be launched, followed by the long-awaited “dark mode”. A few days ago, Apple pushed the beta 5 version of iOS 13. Among them, “dark mode” also added a transition animation, the effect looks more smooth and natural. This article is authorized to translate, the original title is 8 Tips for Dark Theme Design, the author is the famous software engineer Nick Babich. In the article, Nick shared 8 tips for designing “dark mode” and hopes to be useful to you.
Image Source: MacRumors
In recent years, more and more products have launched “dark mode”. Whether it’s Apple or Google, “dark mode” has become an indispensable part of its product interface.
Compared to the “light mode”, the “dark mode” screen has a lower brightness, allowing the user to experience the product more visibly in a dark environment, while also minimizing eye strain.
So, how should “dark mode” be designed? Below, I have summarized 8 product design suggestions, I hope to help you.
1. Avoid all black design
“Dark mode” does not necessarily require the background to be completely black or the font to be completely white. In fact, this high contrast can also make people look uncomfortable.
For security reasons, it is recommended to use dark gray on the page instead of all black (color #000000).
Compared to all black, the light-colored text on the dark gray background is slightly weaker, which can alleviate the user’s eye strain. In addition, because the shadow is easier to see on a gray background (rather than a full black background), dark gray can also better reflect more colors, shadows, and stereoscopic content.
According to the material design principle of Google and other materials, the main color of the page “dark mode” is best to use #121212 dark gray number.
2. Avoid using excessively saturated colors in “dark mode”
Saturation colors look very vivid on a light background. However, if saturated colors are used in “dark mode”, it is difficult to identify the relevant elements or content.
Therefore, in “dark mode”, the main color must not be saturated. It is recommended to use light tones (tones in the range of 50 to 200) to make the page content more readable in “dark mode”.
Light tones not only do not affect the user experience, they also maintain the right contrast without eye strain.
Avoid using saturated colors in “dark mode”, otherwise it will reduce the user’s readability (as shown on the left); light tones are recommended to ensure basic readability (eg right) Figure).
3. Comply with color contrast standards
In addition, make sure that the content of the page is also comfortable and sharp in “dark mode”. The background color must be deep enough to reverse the light text on the page.
According to Google’s material design principles, it is recommended that the contrast ratio between text and background be at least 15.8:1.
You can also test the contrast ratio with the color contrast tool.
4. The color of the text must be “light”
The so-called “bright” means that the user can immediately recognize the text content of the page. Normally, the page text must also have a “bright” color.
For “dark mode”, the “bright” color generally used is pure white (color number #FFFFFF). However, pure white willIt gives a very bright feeling, combined with a dark background to a certain extent, gives a feeling of dizziness.
So, according to Google’s material design principles, it is recommended to use a slightly darker white color for page text selection:
-
For highlighted text, you can set the transparency to 87%.
-
The least important text sets the transparency to 38%.
-
It’s generally important to set the transparency to 60%.
Small tips: Lighter text on a dark background will appear thicker than dark text on a light background. Therefore, you may prefer to use relatively thin text in “dark mode”.
Use a slightly darker white to prevent the stun of the contrast between the text and the background color.
5. Don’t neglect to consider the emotional factors in the design
When you plan to add “dark mode” to your existing products, you definitely want to convey the original product emotions through this model, right? But I suggest that it is best not to have this idea.
As for the reason behind this, I think that in different background color backgrounds, color is inherently independent, and it also represents a special meaning.
This means that the “dark mode” should not convey the same emotional appeal as the “light mode”. They should evoke different emotions from the user.
So, instead of solving this problem, let’s follow this fact and let your product reflect an unusual personality.
Shift’s data panel. Image source: Sergey Zolotnikov
6. Embodiment level
As with the design of “light mode”, when designing the “dark mode” interface, it must also reflect the layering, while highlighting the important elements of the page layout.
To reflect the layering of the interface, you can use the elevation tool.
Translator’s Note: Altitude refers to the relative depth or distance, which is the distance between the two surfaces on the Z axis. The unit of measurement is the same as the X and Y axes, usually the density-independent pixel (dp).
In “light mode”, shadows are generally used to express hierarchies. The page elements appear higher and their shadows are wider.
However, this method does not apply to “dark mode”. After all, it’s hard to imagine what it would be like to add a shadow to a dark background. Therefore, it is best to achieve this by increasing the brightness of each level.
In the “dark mode” of material design, the color of the page and the elements of the elevation are reflected by superimposing white with different transparency. The higher the elevation of the page, the corresponding content or element will be brighter (implying close to the light source).
The higher the altitude, the brighter the page.
Music Player’s interface. Image source: Martin Mroč
7. Let users switch between different background modes freely
If you can let the system automatically switch between “dark mode” and “light mode”, this design may sound very friendly. howeverThis design can lead to unexpectedly bad experiences.
If the system automatically switches between different background modes, it is equivalent to letting the user lose the “control” and is forced to accept the background mode chosen by the system.
Therefore, it is best not to automatically turn on the “dark mode” of the product. You can use the interface function settings to let users freely turn this feature on or off. Users can also choose this feature based on their needs and ideas when they experience the product.
The Dark Mode switch in the settings
8. Test in “Dark mode” and “Light mode”
Before you finally launch the product, be sure to test it in two different modes, check the display of each interface, and adjust accordingly if necessary.
You can consider testing at night, preferably under incandescent lighting.
Translator: Ishii Junichi