美文网首页
夜间模式

夜间模式

作者: 苏千千0046 | 来源:发表于2019-06-12 21:46 被阅读0次

亮度

夜晚,我们最终的屏幕亮度应该保证在0.034cd/m²左右是较为合适的。

(题外话:有种东西叫亮度测试仪,可以测量亮度。)

彩度

人眼在夜间可辨识出的颜色种类较少,所以不用和白天一样使用缤纷的色彩表现;

还有一点需要注意,晚上长时间注视着高饱和度的色彩,会觉得刺眼,舒适度不够。

结论:夜晚,应使用低彩度的色彩、且尽量减少颜色的种类。

除了低彩度,还有另一个问题也值得注意:不同色相下的暗色系需要保持相对的视觉亮度均衡。

下图中的暗色系,通过亮度公式,换算成灰色系之后,亮度上还是会稍有差异,在实际取色中要注意均衡这一点,保证视觉舒适度。(亮度公式:0.299*R + 0.587*G + 0.114*B=y)

护眼模式

结论:在硬件与时间不能更改的情况下,通过前面提到的降低亮度和调整屏幕色温也能降低 hev 蓝光对眼睛的伤害。

小结:夜晚,背景色应该选择低彩度、色相偏黄、亮度值在0.034-34之间。

根据以上结论,选出了夜间模式的背景色#1A1714。

对比色

文字与背景对比度—3:1~5:1

图片色与背景对比度—4:1~6.5:1

(对比度可通过软件 Colour Contrast Analyser 测出)


设计稿实现

文字

面对的问题:页面太多,无法针对每个页面做视觉稿。

解决方案:找出共性,归纳白天文字色,针对每个色值给出对应的夜间色值;根据前面的分析,夜间模式的对比度是不需要做明显区分的,所以我把以下5种文字色,缩减成2种带透明度的白色:45%、30%。辅助文字色的选取注意上面说的视觉平衡,可以用亮度公式来判断。

相关文章

  • 想用AppCompat的夜间模式切换功能又不想导整个库?

    目录 背景 Android中的夜间模式 AppCompat实现夜间模式 AppCompat夜间模式切换功能的分析 ...

  • 盘点win10系统里的六个神奇模式,总有一个你不知道!

    夜间模式 Win10系统加入了夜间模式,夜间模式自带护眼功能,让夜晚操作电脑的用户可以保护视力。 简单说夜间模式就...

  • Android实现夜间模式的方法(二)

    该文章接上篇 Android实现夜间模式的方法(一) 三.夜间模式的实现方案——单纯夜间模式 1.通过切换主题...

  • 微博iOS的护眼模式

    夜间模式的探讨 与其他App切换夜间模式不同: 微博采取了护眼模式: 两种方案各有利弊: 夜间模式优点:可以对每一...

  • 夜间模式

    又是一个夜晚 夜晚总会让人产生思考 这个夏天 这个暑假 找了一份暑假工兼职 算是体验生活 “享受”一下赚钱的不易 ...

  • 夜间模式

    思路: 一: 1.准备两套资源,分别对应日间模式和夜间模式。 2.在系统全局保存一个变量(BOOL isNight...

  • 夜间模式

    标签(空格分隔): Android 1、通过切换theme来实现夜间模式。2、通过资源id映射的方式来实现夜间模式...

  • 夜间模式

    夜间模式

  • 夜间模式

    夜深了,睡不着,拿着手机,息屏,开启,息屏,亮起……这样,1点,2点……这样,脑子里头绪万千

  • 夜间模式

    1. array.xml 中设置变量 2. style.xml 中创建白天和夜间模式的主题,分别设置变量的值 3....

网友评论

      本文标题:夜间模式

      本文链接:https://www.haomeiwen.com/subject/prorfctx.html