当前位置: 首页 >文章 > 如何让你的深色UI看起来更舒服?给你5个设计技巧!
收藏
分享

如何让你的深色UI看起来更舒服?给你5个设计技巧!

举报BIGD0BIGD0发布于 2020-12-181340阅读0点赞
5个设计技巧,让你的深色UI看起来更舒服...

作者: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


0条评论
别默默看啦~登录/注册一起参与讨论吧~

暂无评论

请选择举报理由

违反法律法规

侵犯个人权益

有害网站环境

更多训练营>>

为你推荐 · 训练营(全勤打卡报名费全额返累计全额返用户133,481人)

【4月】趣味MG动画制作训练营
距离开班仅剩11天31人已报名
【4月】零基础手绘插画训练营
距离开班仅剩11天59人已报名
电商海报设计训练营
距离开班仅剩39天23人已报名
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询客服热线

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
虎课
积分
免费学习89000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了48,550
并提交了249份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 89000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证