作者:Teresa Man
BIGD翻译整理,转载请注明出处。
众所周知,深色主题是UI设计的最新趋势。macOS去年推出了暗模式。Android和iOS现在也赶上来了。如果做得好,深色主题有很多好处。比如在黑暗环境下,深色可以减少眼睛疲劳,让界面更容易阅读。而且,根据屏幕的不同,它们的耗电量也可以大大减少。
不过,深色设计虽好,我们却很难创造一个美感与实用兼备的黑暗主题。因为如果我们只是简单的把深色主题视为色彩的颠倒和重复,那么反而会增加眼睛的疲劳,使其在弱光下更难阅读,甚至可能打破我们的信息层次结构。
在这篇文章中,我们将分享如何设计易读、平衡和让人感到舒适的深色主题。
1.近浅远暗
大多数深色主题的UI设计都遵循这一原则:越远的地方越暗。因为它模拟了光从上方投射的环境。而当我们设计深色主题时,很容易被浅色主题的惯性所左右,即越近的元素越暗,而越远的元素越亮。这种打破物理惯性的画面会让我们视觉感受非常不自然。
因此,当我们设计深色主题时,应该先提取出浅色主题的主色彩,然后反转此色彩以得到深色主题的主色彩。并且对较高层次的元素调亮这种颜色,对较远层次的元素色调暗这种颜色。
在邮件应用Superhuman中,我们的深色主题是由五种灰色阴影构成的,较近的层次使用了较浅的灰色,较远的层次使用较深的灰色。
2.重新审视知觉对比
通过引用浅色主题设计深色主题时,重新审视感知对比度很重要。
例如,在我们的浅色主题中,联系人信息是黑色的,不透明度为60%。但是在我们的黑色主题中,我们将联系方式设置为白色,不透明度为65%。虽然两者的对比度都超过AA标准,但额外的5%可以防止视觉疲劳,特别是在光线不足的情况下。
对于这些补偿并没有严格的规定。相反,我们会根据文本大小、字体大小和行宽分别调整每一项,以确保深色主题和浅色主题一样清晰、易于阅读。
3.减少大块鲜艳的色彩
在浅色主题中,我们经常使用大块明亮的色彩,但是在黑暗的主题中,大块的色彩会分散我们对于重要内容的关注度。
比如,在Superhuman的“提醒我”界面。在浅色主题中,粉红色的覆盖层不会分散对话框的亮度。但是在黑暗主题中,相同的覆盖层就会分散用户的大部分注意力,因此我们在后续版本中删除了叠加层,以便用户可以快速、轻松地关注到重要内容。
4.避免使用纯黑或纯白
通常,我们不会在深色主题中使用纯黑或纯白。这样做有四个原因:
物理世界
由于真正的黑色并不存在于我们的日常环境中。(世界上最黑的物体是麻省理工学院开发的一种尚未命名的材料,离真正的黑色还差0.005% !)。因此,我们的视觉已经适应了将相对的黑暗视为真正的黑色。这也是为什么#000000会让人感觉非常不和谐的原因,尤其是在与较浅的元素对比时,它和我们日常见到的任何东西都不匹配。
黑色拖尾现象
当较浅的内容被拖动在纯黑色背景中时,会产生一种叫做拖尾的视觉失真现象,这种效应通常出现在越来越普遍的OLED屏幕上,这种屏幕会在黑色背景下关闭像素点。(这也是为什么深色主题比浅色主题更省电的原因)。然而,这些像素的开启和关闭要比改变颜色更慢,所以就产生了这种拖尾效果。
我们可以通过使用深灰色来避免黑色拖尾现象,那样的话像素点即不会关闭,也依然要比浅色主题省电很多。
层次感
除此之外,如果我们在背景元素中使用纯黑色,那么将很难用阴影技巧来表达层次感。
例如,大家都知道,如果我们想在界面之上显示一条通知,通知应该浮于背景上方,那么可以使用阴影来传达层次感。但在纯黑背景下是无法呈现出阴影效果的,毕竟没有什么颜色比纯黑色更暗了。
如果我们的背景不是纯黑色,那么就可以使用不同不透明度的阴影,还可以使用模糊效果来表达层次感。例如,邮件应用Superhuman中的通知:
晕光
纯黑色背景和纯白色文本可产生最高的对比度为:21:1。在定量的WCAG可访问性术语中,这是最佳的输出。
然而,在设计深色主题时,一定要注意避免过高的对比度。对比度太高会导致眼睛疲劳和光晕。
当将非常明亮的文本设置在非常暗的背景下时,会产生光晕现象。尤其是对于散光患者来说,这种影响甚至更强。根据感官知觉和互动研究小组的博士后研究员Jason Harrison的说法:
散光患者(约占总人口的50%)发现,阅读黑底白字要比阅读白底黑字更难。这在一定程度上与光线有关:在明亮的白色背景下,虹膜会闭合得更多一些,从而降低了晶状体的变形程度。如果为黑色背景,那么虹膜会打开以接收更多的光线,晶状体的变形会在眼睛上产生更加模糊的焦点。
因此在文本内容较多的界面中,我们必须特别注意光晕效果,在邮件应用Superhuman中,我们将白色文本设置为90%不透明度,以便它们和深色背景融合在一起。这可以平衡对比度和亮度,令该应用在各种光照条件下都易于阅读。
5.加深色彩
由于为了避免眼睛疲劳和光晕现象,我们把文本的颜色变暗了,所以在对比之下我们的色彩和按钮就可能显得太亮了。因此在最后的阶段我们也必须调整这些颜色,以便用户能在深色主题更舒适和体验。
首先,我们应该降低亮度,使这些色彩不会影响到附近的文本。其次,我们应该增加饱和度,令他们仍然能被用户注意到。
例如,如果我们直接使用来自浅色主题的紫色,那么它在附近的文本中就显得太亮了。因此在我们最后深色主题中,我们加深了这种颜色,这样用户就可以专注于文本内容了。
6.总结一下
虽然深色主题有很多好处,现在也正在被广泛关注着。但其实它很难很好地执行,简单的重复使用颜色和反转色调只会增加眼睛疲劳,使其在弱光下更难阅读,甚至可能打破视觉和信息层次。
因此我们找到了一种系统的方式来构建易用、平衡、让人舒适的黑暗主题。只需遵循以下步骤:
近明远暗
重新审视知觉对比
减少大块明亮的颜色
避免纯黑或纯白
加深色彩
今天的内容就到这里了,希望能对大家所有帮助~
原文链接:https://blog.superhuman.com/how-to-design-delightful-dark-themes-7b3da644ff1f
用设计的角度看世界,用学习的方式来成长
BigDcc
暂无评论
违反法律法规
侵犯个人权益
有害网站环境