设计深色模式
系统设计
发布日期2023年11月8日
深色模式下无论用户是想减少眼睛疲劳还是延长电池消耗为用户提供更灵活的选择。人们通常认为深色模式是黑屏或白屏之间的选择,但此功能涉及广泛的灰度和颜色渐变。
深色模式?
深色模式是一种系统范围的外观设置,它使用深色调色板(背景非全黑)提供专为弱光环境量身定制的舒适观看体验。深色模式更多的目的是希望使用者更加专注自己的操作任务,所以对于信息内容的表达会更注重视觉性;
夜间模式是深色模式中比较特别的一种
夜间模式则更多是出于在夜间或暗光环境使用下的健康角度考虑,避免在黑暗环境中长时间注视高亮光源带来的视觉刺激,所以在保证可读性的前提下,会采用更弱的对比来减少屏幕光对眼睛的刺激。由于OLED屏幕在纯黑色状态下不发光;所以对电量的损耗和眼睛的伤害更低。
深色模式 UI 对用户体验的好处
随着越来越多的人在夜间或弱光环境中使用设备,深色模式为用户体验和视觉舒适度提供了至关重要的优势。
辅助功能:患有偏头痛等疾病的人发现深色用户界面有助于减轻症状。高对比度还可以帮助视障用户。
节省电池电量:OLED 屏幕在纯黑色状态下不发光。在兼容的手机、平板电脑和笔记本电脑上消耗较少的电池。
改善睡眠模式:屏幕发出的明亮蓝光会抑制褪黑激素并扰乱自然睡眠周期。深色模式的暖色调可以减少这些影响,从而更好地休息。
更好的可读性:深色模式 UI 提供更高对比度的文本,弹出更多。深色背景上的浅色文本在长时间阅读时更容易集中注意力。
减少眼睛疲劳:在黑暗环境中盯着明亮的屏幕会导致眼睛疲劳。深色模式会产生较低的对比度,使在夜间或黑暗中观看显示器变得更加容易。
注意点
当然,实现出色的深色模式 UI 需要比简单地反转浅色界面的颜色更多的深思熟虑。我们找到了一种系统的方法来构建可读,平衡且令人愉悦的黑暗主题。只需按照以下步骤操作::
配色方案 - 不要使用黑色和灰色,而是使用稍微暗淡的蓝色、深绿色和浓郁的紫色来增加视觉吸引力。避免刺眼的亮度。
版式 - 增大字体大小和粗细,以提高深色背景下的易读性。
对比度 - 确保背景和文本元素之间有足够的对比度。使用对比度检查器进行测试。
布局 - 当缺乏浅色背景进行分隔时,请重新考虑边框、阴影和重叠来描绘各个部分。
图标 - 优化图标和图像以在深色背景下正常工作。使用透明度和反转工具。
测试 - 彻底测试深色模式并考虑色盲。用户将在模式之间切换。
通过微调这些细节,我们可以打造卓越的深色模式体验。随着深色界面成为标准,用户体验设计师应该考虑不断变化的环境需求。
从使用场景上来说,深色模式既可以在黑暗环境,也可以在亮光环境下使用,可以理解为是对浅色主题的一种场景化补充,而夜间模式只建议在黑暗环境下使用,在亮光环境使用时很可能并不保证信息可读性。
给予用户多一种美学的选择,会给予用户使用界面的新鲜感和惊喜感,同时增加用户使用应用的愉悦度和粘性。