1. 用户反馈
2. 亮度单位公式
尼特值(nit),亮度强度,即每平方米烛光的强度:1 nit = 1 坎德拉 / 平方米
白天,人的眼睛适应亮度的值高于 3.4 尼特
夜晚,人的眼睛适应亮度的值,主体颜色接近 0.034 尼特,最高元素低于 3.4 尼特
色彩亮度公式 ,0.229 X R + 0.587 X G + 0.114 X B = Y ,Y 为亮度
Y 的范围 0 - 225 ,Y 值越接近 0 亮度越低
对比度规范 ,文字与背景色对比度 3 : 1 ~ 4.5 : 1 范围,元素(头像,图片)与背景色对比度 3 : 1 ~ 7 : 1
以此来保证文字的清晰度,减少其他元素过亮的情况
由于界面元素的多样性,例如头像,歌曲,新闻等,该类元素如果不能满足亮度与对比度(3 : 1 ~ 7 : 1)的要求,需要再起上方添加黑色透明遮罩(不透明度 40% ~ 50%),从而降低对比度和亮度
3. 软件硬件
Sim Daltonsim for Mac 测试色彩通用性软件
Colour Contrast Analyser 对比度测试软件
屏幕亮度测试仪 测试尼特值
4. 五项夜间模式设计原则
原则 1 :保证色彩通用性 - 关注特殊人群
考虑色盲人群的特性,尽量保证他们所看到的颜色和我们接近一致,减少该类人群识色的差异性,增强设计统一性
无色彩更能减少正常人和色盲等特殊人群的识色差别
原则 2 :选择低亮度,低饱和度和非极端的色彩(避免纯黑)
减少极端色,无彩色居多
从行业趋势看,Google Material Design 和 iOS 相继推出了夜间模式和深色主题设计及护眼模式
界面主体倾向无色彩 ,黑色居多。柔和,低饱和度色彩可以增加用户长时间观看界面的舒适度
设计初始应选择亮度较低的色彩,控制界面亮度,方法就是直接降低色彩本身亮度,但是要注意避免使用极端颜色(纯黑)
原则 3 :保证界面在屏幕上呈现出低尼特值(低亮度)
主体背景颜色在屏幕上呈现的亮度应该接近 0.034 尼特,界面中最高亮度元素尽量低于 3.4 尼特
原则 4 :保证文字,元素,背景的对比度在能看清的范围内
运用对比度规范,保证文字的清晰度,减少其他元素过亮的情况
原则 5 :必要时为过亮元素添加黑色透明度遮罩
解决界面元素的多样性问题,在其上方添加黑色透明遮罩(不透明度40%~50%)
5. 设计方法步骤
确定通用性色彩 - 选择色彩亮度 - 确定文字对比度 - 为元素添加遮罩降低元素亮度对比度 - 设备检测界面尼特值