经验观点 2022年05月24日
0 收藏 255 点赞 3,089 浏览 2411 个字
摘要 :

最近在研究暗黑模式,看到一篇简单易懂的暗黑模式基础设计方法,分享给大家 深色主题是应用程序设计的最新趋势,MacOS 去年推出了暗黑模式,Andriod上个月推出了Dark Th……

最近在研究暗黑模式,看到一篇简单易懂的暗黑模式基础设计方法,分享给大家

深色主题是应用程序设计的最新趋势,MacOS 去年推出了暗黑模式,Andriod上个月推出了Dark Theme。IOS 在过去的两周里也迎头赶上了。 

曾经罕见的暗黑模式现在已成为人们普遍期待的主题。

如果做得好,暗黑模式有许多好处。它们可以减少眼睛的疲劳,在昏暗光线下更容易阅读。而且,根据屏幕的不同,可以大大降低电池消耗。

然而,创造一个令人愉悦的暗黑模式是很困难的。我不能简单地重复使用我们的颜色或反转我们的色调,如果这样做,我们将得到与之相反的结果:我们会增加眼睛的疲劳,让我们在昏暗的光线下阅读变得更加吃力,甚至可能破坏我们看到的信息层次。 

在这篇文章中,我们将分享如何设计可读、平衡、令人愉悦的暗黑模式。 

1.让远的元素更暗

在暗黑模式里,UI元素的背景颜色遵循一个指导原则:越接近用户的层(例如弹窗),表面颜色越浅。这个模型类似于一个光源从上方投射的环境。层离的越远,它所接受的光线就越少,也就越能融入到背景中。

在创建暗黑模式时,直接反转现有的浅色主题颜色可能很容易,但是更远的层级会变得明亮,近的层级反而会变得黑暗,这样会打破物理特性,感觉不自然。

相反,只取你的浅色主题的主要表面颜色。反转这个颜色来变成你的深色主题的主要表面颜色,在较近的层级上把这个颜色变浅,而在较远的层级上把这个颜色变深。

在 Superhuman 中,我们的暗黑模式由五种深浅不一的灰色组成。较近的曲面使用较浅的灰色;较远的曲面使用较暗的灰色。 

2.重新审视视觉对比度

当通过参考浅色主题来设计一个深色主题时,重新审视视觉对比度是很重要的。

例如,在我们的浅色主题中,联系人详细信息为黑色,不透明度为60%。但在我们的暗色主题中,我们将联系方式设置为不透明65%的白色。虽然这两种对比度都超过了AA标准,但额外的5%可以更有效地防止疲劳,特别是在光线较弱的情况下。 

对于这些细微区别没有硬性规定。相反,我们根据文本大小、字体粗细和行高 来 分别调整每个项目,以确保深色主题与浅色主题一样清晰和易于阅读。 

3.减少大块的明亮色块

在浅色主题中,我们经常使用大块的明亮颜色。这一般是很好的,这样最重要的元素可能会更加显眼。但在暗黑主题中,这样就不行了,大块的亮颜色会让我们容易忽视更重要的元素。 

例如我们的提醒页面,在浅色主题中,粉色的覆盖不会分散对更明亮的对话框的注意力。但在我们的暗黑主题中,同样的覆盖吸引了我们的注意力。当我们把覆盖层变成更深的颜色,这样就可以轻松地专注于重要的层级。 

4.避免纯黑和纯白

4.1靠近现实

真正的黑色并不存在于我们的日常环境中。(世界上最暗的物体是麻省理工学院开发的一种尚未命名的物质,距离真正的黑色仍有0.005%的差距)因此,我们的视觉已经适应了将相对黑暗感知为真正的黑色,这就是为什么#000000会让人感觉如此刺眼,特别是在与浅色元素对比时,因为它与我们通常看到的任何东西都不匹配。 

4.2黑色模糊

黑色模糊是当较浅的内容在纯黑色背景上拖动或滚动时发生的视觉失真。 

在OLED屏幕上,这种现象越来越普遍。在这些屏幕上,纯黑色像素被关闭。(这就是深色主题比浅色主题更省电的原因。)然而,这些像素的开启和关闭比改变颜色要慢。这种可变的反应产生了模糊涂抹的效果。

你可以使用深灰色来避免黑色模糊,因为这样像素将不会关闭。这甚至适用于像#010101 一样暗的灰色,并且仍然比浅色主题更省电。

4.3深度

如果你在背景元素中使用纯黑,你将不能更好地表现视觉深度。

举个栗子,想象一下在一个纯黑背景上要显示一个通知,通知应该漂浮在背景之上的,所以你用阴影来表达深度,但是这个阴影实在是难以察觉,因为没有什么比纯黑更黑的了。

而如果你的背景不是纯黑色的,你就可以使用不同透明度和模糊度的阴影来表现深度。

4.4光散现象

纯白的文字与纯黑的背景产生了最高的对比度:21:1。在WCAG内容无障碍指南里,这是最极端的情况。

然而,在设计暗黑模式时,最重要的就是要注意对比度不能过高。对比度太高会导致眼睛疲劳和晕眩。 

当在非常暗的背景下设置非常亮的文本时,文本可能会看起来渗入背景中。对于我们这些散光的人来说,这种影响甚至更强。根据感官知觉和互动研究小组的博士后研究员Jason Harrison的说法:

有散光的人(大约50%的人)发现在黑底白字比白底黑字更难阅读。这在一定程度上与光线水平有关:在明亮的显示器(白色背景)下,眼睛虹膜关闭得更多,从而降低了“变形”镜头的效果;在黑暗显示器(黑色背景)下,虹膜打开以接收更多的光线,而镜头的变形在眼睛处产生了更模糊的焦点。 

在Superhuman 里,我们必须特别小心,因为我们的APP里文字占比非常大。我们将白色文本设置为90%不透明度,这样黑色背景就可以融入其中。这平衡了对比度和亮度,因此该应用程序在各种光线条件下都很容易阅读。 

5.加深其他颜色

由于我们淡化了文字颜色以避免眼睛疲劳和光散现象,其他的可点击文字和按钮就可能显得太亮了。我们现在必须调整这些颜色,以便在暗黑模式中更好地显示。首先,我们降低亮度,这样这些颜色就不会盖过附近的文字,然后增加饱和度,使它们仍然有明显的区别。

例如,如果我们直接使用浅色主题中的紫色,相对于附近的文本,它会显得太亮。在我们实际的暗色主题中,我们加深了这个颜色,以便用户可以专注于文本。 

总结

暗黑模式有很多好处而且现在被广泛期待,但是很难应用的很好。重复使用颜色和反转色调的简单方法会增加眼睛的疲劳,在光线不足的情况下更难阅读,甚至可能打破视觉和信息的层次。

我们找到了一种系统的方法来建立一个可读性良好、视觉平衡和令人舒适的暗黑模式。只需遵循以下步骤: 

1.让远的元素更暗

2.重新审视视觉对比度

3.减少大块的明亮色块

4.避免纯黑和纯白

5.加深其他颜色

Powered by Froala Editor

微信扫一扫

支付宝扫一扫

版权: 转载请注明出处:https://www.jizhisheji.com/140178.html

相关推荐
精选
互动投影的应用所表现出的四大特点
互动投影是集合了商业价值与娱乐特质的人机交互形式,其因绚丽的展示效果而深受到大众喜爱,它的实现主要依靠捕捉设备对目标影像进行实时的动作捕捉,…
日期:2022-06-26 点赞:196 阅读:2,750
精品
提高UI界面高级感的排版实用技巧
UI 界面中,排版设计同样重要。如何将至关重要的信息,有效地传递给用户,这是界面本身的职责,而在绝大多数时候,这通常是靠文本来完成。 这就是…
日期:2022-06-26 点赞:178 阅读:3,982
最新
汽车二手车租车小程序定制开源源码开发制作模板的UI功能设计
汽车二手车租车小程序APP定制开源源码开发制作模板需要哪些功能?——龙兵科技 龙兵科技,自主研发,源码交付,专注软件研发10年,各行业源码齐…
日期:2022-06-26 点赞:160 阅读:3,855
最新
房产报备新房二手房租房等小程序源码制作UI功能如何设计功能?
 龙兵科技,自主研发,源码交付,专注软件研发10年,各行业源码齐全网络销售公司该如何推销出去一个产品?是不是要针对客户的需求去讲解…
日期:2022-06-26 点赞:282 阅读:1,600
必看
机器人情感化设计
前段时间接到了一个企鹅岛的机器人项目,项目目标是要传递“机器人友好”的概念。那我们要如何从设计的角度去传递这个概念呢?友好其实是人对事物的一…
日期:2022-06-26 点赞:90 阅读:4,771
推荐
企业展厅设计用多媒体的方式实现有何帮助
  企业展厅是企业对外宣传的一种重要形式,其通过数字沙盘、弧幕影院、多点触控、全息投影等多媒体互动技术,让用户更好地参与其中,给用户带来沉浸…
日期:2022-06-26 点赞:280 阅读:4,666
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:8:00-16:00

客服电话

400-888-8888

客服邮箱

ceotheme@ceo.com

扫描二维码

关注微信公众号

扫描二维码

手机访问本站