- 原文 原文 : How to design delightful dark themes
- Author: Teresa Man
- Translation from: The Gold Project
- This article is permalink: github.com/xitu/gold-m…
- Translator: Jessica
- Proofreader: HytonightYX
How to design a flattering dark theme
inSuperhumanWe are building the fastest email experience in the world. You can experience browsing through your inbox twice as fast as before and keep it to zero!
Dark themes are the latest trend in application design. MacOS launched dark Mode last year. Android also launched a dark theme last month. In the past two weeks, iOS has followed suit.
Dark themes, once rare, have become widely expected.
Dark themes can have many benefits if done well. It reduces eye strain and is easier to read in low light. Also, for OLED screens, dark themes can significantly reduce power consumption.
However, creating a flattering dark theme is not easy. We can’t simply reuse our colors or reverse our tones. If we do this, it tends to backfire: we’ll increase eye strain, making it harder to read in low light. We might even break the information hierarchy of our software.
In this article, we will share how to design dark themes that are easy to understand, harmonious and pleasing
1. The farther away the area, the darker it gets
Most dark-themed UI designs follow this principle: the farther away the area, the darker it gets. This simulates a scene where a light source is projected from above and conveys a familiar and reassuring physicality.
When designing a dark theme, it’s easy to assume that our light theme is reversed. This way, however, distant areas become brighter, while closer areas become darker. It will destroy the sense of reality and make people feel unnatural.
Instead, you should only take the main surface color of your light theme. Invert this color to produce the main color of the dark theme. Lighten the color for closer surfaces and darken it for more distant surfaces.
In Superhuman, our dark theme is made up of five shades of gray. Use a lighter gray for closer areas and a darker gray for farther areas.
2. Redefine the perceived contrast
When designing a dark theme from a previously light theme, it is important to redefine the perceived contrast. Note that it is the contrast that the element looks like, and not restricted by the so-called recommendations or standards.
For example, in our light theme, contact information is black with an opacity of 60%. But in our dark theme, we set the contact to white and the opacity to 65%. While these two have a contrast ratio that exceeds THE AA standard, the extra 5% prevents eye strain, especially in low-light situations.
There are no strict rules for compensation for these colors. We can adjust each item individually according to text size, font size, and line width to ensure that dark themes are as clear and easy to read as light themes.
3. Reduce large bright colors
In light themes, we often use large bright colors. This is generally true: our most important elements are likely to be brighter. But in dark themes, this doesn’t work: users focus on big chunks of color and ignore the most important elements.
For example, here is our Remind Me interface. In our light theme, the pink mask does not scatter the focus on the brighter dialog. But in our dark theme, the same mask distracts us. We removed the mask completely so that we could quickly and easily focus on what was important.
4. Avoid pure black or white
In Superhuman, we didn’t use any solid black or solid white in our dark theme. There are four reasons for this.
4.1 sense of reality
Pure black doesn’t exist in our everyday environment (the world’s blackest object, an as-yet-unnamed material developed at MIT, is 0.005% short of true pure black) so our vision has adapted to treat relative black as true black. That’s why #000000 feels so jarring to us, especially when compared to brighter elements. Because it doesn’t exist in the same color as anything we normally see.
4.2. Black drag
Black drag is a visual distortion that occurs when brighter content is dragged or scrolled over a pure black background.
This effect appears on OLED screens used by more and more people. On this screen, all black pixels are turned off (which is why dark themes use less power than light ones). However, these pixels turn on and off at a slower rate than color changes. The result of this different speed is a drag effect.
You can avoid black drag by using dark grey, because then the pixels will not be turned off. You can even use a dark gray like #010101 and still use less power than a lighter theme!
4.3. The administrative levels
If you use pure black in the background elements, you lose some of the skill of showing hierarchical depth.
For example, imagine that your background is pure black. On top of that, a notification is displayed. Notifications should float above the background, so you use shadows to express depth. It’s just that such shadows are hard to detect because nothing is darker than pure black.
If your background is not pure black, you can use shadows and blurs of different opacity to express depth. For example, consider the notification in Superhuman:
4.4. Vertigo
The highest possible contrast for plain white text on a plain black background is 21:1. In the context of Accessibility in the WCAG (Web Content Accessibility Guidelines), this is the ideal output.
However, when designing dark themes, be careful of too much contrast. Too much contrast can cause eye strain and dizziness.
When very bright text is placed against a very dark background, the text appears to permeate the background. The effect is even stronger for those of us with astigmatism. Jason Harrison, a postdoctoral fellow in the Sensory Perception and Interaction Research Group, said:
People with astigmatism (about 50% of the population) had more difficulty reading white text on a black background than black text on a white background. This is partly due to light: on a bright display background (a white background), the iris closes more tightly, reducing the influence of the cornea (understood as a deformable “lens”); On a black background, the iris opens to receive more light, and the distortion of the cornea causes the eye to have a more blurred focus.
In Superhuman, we have to be particularly careful with the vertigo issue due to the amount of text in our software. We set the white text to 90% opacity to blend in with the dark background. This balances contrast and brightness, making the software easy to read in a variety of light conditions.
5. Darken the color
Because we turned down the color of the text to avoid eye strain and dizziness, our color emphasis on the content and buttons might appear too bright. Now we have to adjust these colors to work better in dark themes. First, we reduce the brightness so that the colors don’t squash the nearby text. Second, we add saturation so that they still have a color signature.
For example, if we use purple directly in the light theme, it will be too bright for the nearby text. So, in our actual dark theme, we deepened the purple so that the user could focus on the text.
conclusion
Dark themes have many benefits that are now widely anticipated. However, getting a dark theme right is not easy. Simply reusing our colors or reversing our hues will increase eye strain, make it harder to read in low light, and possibly even break the information hierarchy of our software.
We found a systematic way to construct dark themes that are accessible, harmonious and flattering. Just follow these steps:
- The farther away the area, the darker it gets
- Redefine the perceived contrast
- Reduce large pieces of bright color
- Avoid pure black or white
- To deepen the color
I hope this will help you design flattering dark themes. If you have any ideas or questions, you can talk to me! @ ifbirdsfly, [email protected] 👩 🎨
— Teresa Man, Lead designer at Superhuman
At Superhuman, we are rebuilding the email experience for the Web and mobile devices. Think Vim or Sublime in email: surprisingly fast and visually gorgeous.
If you believe in solving interesting problems in an elegant way — join us!Learn moreorSend me an email.
Thank you very muchJared Erondu.Dave Klein.Jayson Hobby.Tim Boucher.Tamas SariAs well asJiho LimPay and review!
If you find any errors in the translation or other areas that need improvement, you are welcome to revise and PR the translation in the Gold Translation program, and you can also get corresponding bonus points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.
Diggings translation project is a community for translating quality Internet technical articles from diggings English sharing articles. The content covers the fields of Android, iOS, front end, back end, blockchain, products, design, artificial intelligence and so on. For more high-quality translations, please keep paying attention to The Translation Project, official weibo and zhihu column.