深色模式可以降低视觉亮度，缓解对眼睛的视觉压力；从2个角度介绍什么是深色模式；从4个方面介绍设计深色模式的注意事项，并非简单的进行反相处理
夜间模式和深色模式
“深色模式”最近突然成为一个时髦的词汇，不少APP设计和网页设计纷纷推出“深色模式”。
为什么要深色模式
由于电子设备的屏幕是主动发光，它们的光线会比我们生活中所接触的物品更具刺激性。设计深色模式能降低屏幕整体的视觉亮度，缓解眼睛的视觉压力，使用户真正与其交互和操作的内容更容易被凸显出来。
同时随着OLED屏幕的普及，深色模式还有一个更有意义的优点：省点。由于OLED屏幕中每个像素都是自主发光，因此显示深色元素时，像素所消耗的电流更低，在纯黑色下像素点可以完全关闭，达到省电的效果。
什么是深色模式
1. “深色模式”不是夜间模式
很多APP总认为深色模式就是夜间模式，用户在夜间喜欢更暗更低对比度的界面。其实，用户确实需要在夜间使用不刺眼的界面，但这并不表示就需要放弃对比度。
深色模式下，当页面背景由白色转为灰色时，我们已经极大限度降低电子屏幕所发出的光亮，配合设备的环境光传感器自动亮度调整，界面整体的亮度已经满足用户在暗光环境下使用。系统级的深色模式下，各个APP之间保持相对统一的对比度会对用户的实际体验更加好，否则会因为对比度太低而影响阅读效果，这时一旦调高屏幕亮度，若跳到其他没有夜间模式的APP，会变得非常刺眼。
2. “深色模式”并非简单的反色处理
iOS系统中的“智能反转”功能，能把除媒体外的界面元素按其对比全部自动反转，但这种效果会打破UI原有的视觉层级和空间感。如果使用与浅色模式下相同的阴影，在深色模式往往达不到足够的层次感。
因此，在深色模式下我们需要采用一套新的视觉设计规范。
界面层级
· 界面层级。不要试提示元素
在深色模式下，为了让提示元素足够突出，可少量使用浅色底作为模块的背景，但仅限这类面积小且需特别强调的模块中。
· 文字。尽量不要在深色模式下使用纯白色文字作文正文，深色模式与纯白色的对比非常强烈，容易造成视觉疲劳。为了保证合适的对比度，文字颜色不要过浅，可适当在文字层级上使用透明度，这会让文字与在不同的氛围背景色上更和谐，或使用HSB模式调整B值，确定文字的固定色值。
· 图形。深色界面直接使用线性图标，会减少图形的形状感和体积感，这是因为白色背景可以更好地表现出形状，人的大脑会将白色脑补成图形的一部分。但在深色模式下，人脑会更倾向于这些空白的部分是镂空的。所以深色模式下尽量使用面性图标，不过具体情况可结合产品实际的设计风格和深色模式下的具体视觉效果再做判断。
作为当今的大势，如果你的APP并不支持深色模式，很可能会显得特别刺眼，甚至部分用户可能会不得不去寻找支持这一模式的替代品。至于如何确定深色模式的设计规范?首先当然要根据产品的设计风格而定，其次你需要满足满足 WCAG 2.0(Web内容可访问性指南)中规定的 AA 级标准，即最低 4.5:1 的对比度，提高界面的可读性。
本文地址：https://www.pizijiang.com/tougao/110504.html
举报投诉邮箱：253000106@qq.com
微信扫一扫 
支付宝扫一扫 
