网页设计时采用深色模式的原因、方法和注意事项

2020-11-05 16:23:47  22 浏览  0 评论   赞

深色模式可以降低视觉亮度,缓解对眼睛的视觉压力;从2个角度介绍什么是深色模式;从4个方面介绍设计深色模式的注意事项,并非简单的进行反相处理

网页设计时采用深色模式的原因、方法和注意事项

图1382-1:夜间模式和深色模式

“深色模式”最近突然成为一个时髦的词汇,不少APP设计和网页设计纷纷推出“深色模式”。

为什么要深色模式

由于电子设备的屏幕是主动发光,它们的光线会比我们生活中所接触的物品更具刺激性。设计深色模式能降低屏幕整体的视觉亮度,缓解眼睛的视觉压力,使用户真正与其交互和操作的内容更容易被凸显出来。

同时随着OLED屏幕的普及,深色模式还有一个更有意义的优点:省点。由于OLED屏幕中每个像素都是自主发光,因此显示深色元素时,像素所消耗的电流更低,在纯黑色下像素点可以完全关闭,达到省电的效果。

什么是深色模式

1. “深色模式”不是夜间模式

很多APP总认为深色模式就是夜间模式,用户在夜间喜欢更暗更低对比度的界面。其实,用户确实需要在夜间使用不刺眼的界面,但这并不表示就需要放弃对比度。

深色模式下,当页面背景由白色转为灰色时,我们已经极大限度降低电子屏幕所发出的光亮,配合设备的环境光传感器自动亮度调整,界面整体的亮度已经满足用户在暗光环境下使用。系统级的深色模式下,各个APP之间保持相对统一的对比度会对用户的实际体验更加好,否则会因为对比度太低而影响阅读效果,这时一旦调高屏幕亮度,若跳到其他没有夜间模式的APP,会变得非常刺眼。

2. “深色模式”并非简单的反色处理

iOS系统中的“智能反转”功能,能把除媒体外的界面元素按其对比全部自动反转,但这种效果会打破UI原有的视觉层级和空间感。如果使用与浅色模式下相同的阴影,在深色模式往往达不到足够的层次感。

因此,在深色模式下我们需要采用一套新的视觉设计规范。

什么是深色模式_网页设计时采用深色模式的原因、方法和注意事项

图1382-2:界面层级

· 界面层级。不要试图在深色模式下的高层级元素使用浅色阴影,这样会看起来更像是光晕,而破坏界面的空间结构。在真实世界中,物体并不会投影比自身颜色更浅的阴影。

部分APP可能会为使用OLED设备的用户提供纯黑底色背景,以达到更加的省电效果。但这种方式会导致界面层级不易表现,很容易限制设计的发挥,只有在产品视觉层级非常简单且明确的情况下可以酌情采用。并且注意对OLED屏幕而言,在滚动屏幕时,像素点频繁切换开闭状态,会导致一定的延迟,造成文字产生拖尾现象。

· 色彩。在浅色模式下我们使用的一般都是高饱和的颜色,但在深色背景承载下,高饱和颜色在深色背景下容易产生视觉抖动,导致眼睛疲劳,因此在深色模式下我们应当选择更低饱和的颜色以达到更好的可读性。

配色方案的注意事项

① 品牌色

为了保证品牌VI的一致性,品牌色可保持原饱和度不变,但对应用范围应当极其克制,仅限于在个别元素。

② 氛围背景色

如果一直采用中性系的深灰色作为背景,用户很容易会感到乏味,这时我们可以尝试把品牌色融入到背景中营造氛围感,把品牌色用极低的透明度与系统默认的深色背景色进行叠加。

③ 菜单栏避免使用彩色

一般来说,深色模式的界面整体以深色为主,在浅色模式下使用大面积色彩的元素。在深色模式下,导航栏、工具栏等应避免使用彩色,否则会显得刺眼,对比过于强烈,破坏深色模式下的沉浸感。

④ 提示元素

配色方案的注意事项_网页设计时采用深色模式的原因、方法和注意事项

图1382-3:提示元素

在深色模式下,为了让提示元素足够突出,可少量使用浅色底作为模块的背景,但仅限这类面积小且需特别强调的模块中。

· 文字。尽量不要在深色模式下使用纯白色文字作文正文,深色模式与纯白色的对比非常强烈,容易造成视觉疲劳。为了保证合适的对比度,文字颜色不要过浅,可适当在文字层级上使用透明度,这会让文字与在不同的氛围背景色上更和谐,或使用HSB模式调整B值,确定文字的固定色值。

· 图形。深色界面直接使用线性图标,会减少图形的形状感和体积感,这是因为白色背景可以更好地表现出形状,人的大脑会将白色脑补成图形的一部分。但在深色模式下,人脑会更倾向于这些空白的部分是镂空的。所以深色模式下尽量使用面性图标,不过具体情况可结合产品实际的设计风格和深色模式下的具体视觉效果再做判断。

作为当今的大势,如果你的APP并不支持深色模式,很可能会显得特别刺眼,甚至部分用户可能会不得不去寻找支持这一模式的替代品。至于如何确定深色模式的设计规范?首先当然要根据产品的设计风格而定,其次你需要满足满足 WCAG 2.0(Web内容可访问性指南)中规定的 AA 级标准,即最低 4.5:1 的对比度,提高界面的可读性。

 

转载请注明:网创网 www.netcyw.cn/b1382.html

赞 ()
发表评论
  • 昵称
  • 网址
(0) 个小伙伴发表了自己的观点
    暂无评论

Copyright © 2018-2019 小王子工作室 版权所有 滇ICP备14007766号-3 邮箱:yangzy187@126.com