APP设计夜间模式需要注意的4个要点

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

主体的背景色一般采用低亮度、低饱和度的色彩;文字颜色与背景对比度在3:1-4.5:1;图片进行低亮度处理;从3个方面对图标进行处理

APP设计夜间模式需要注意的4个要点

图1381-1:知乎的夜间模式

夜间模式一般有两种处理方式:

第一种很简单,只需在界面上覆盖40%-70%透明度的黑色遮罩层,达到降低亮度的效果。这种方式虽然节约开发和设计成本,但效果并不会太理想。

第二种是使用深色界面设计,这种方式能与周围黑暗的环境更加融合,适合夜间长时间使用的APP设计,但开发和设计成本相对较低。

下面,网页制作公司将具体介绍深色界面下夜间模式的设计要点。

主体背景色选择

为了保证观看的舒适度,夜间模式一般采用低亮度、低饱和的色彩,最简单的方法就是第一种夜间模式处理方式,直接在界面加上遮罩,强制降低页面亮度。

但是颜色本身就是有亮度,在浅色界面上加遮罩的效果肯定不及本身就是低亮度的颜色,所以我们需要调解色彩的亮度,具体计算公式如下:

Y(亮度)=(0.299*R) (0.587*G) (0.114*B)

Y值一般在10-60的范围内,设计夜间模式的效果会相对较好,因此在选择主体背景色时,尽量选择Y值在这个范围内的深色。

文字颜色

一般来说,深色界面下的夜间模式要保证文字与背景色的对比度在3:1-4.5:1范围内,这样既能保证文字对比不会过于强烈,也可看清楚文字内容。

尽量不要使用纯白的文字颜色,对比过于强烈,夜晚长时间浏览会对眼睛造成一定的压力。

图片处理

为了保证夜间模式下整体对比度的舒适度,对图片等元素可进行降低亮度处理。一般图片颜色与背景颜色的对比度满足在3:7~7:1的范围内,或在图片上加上黑色透明层,透明度范围在40%-50%。

图标处理

图标的处理一般是通过降低高饱和或高明度的图标颜色,从而降低与背景色的对比,具体操作如下:

① 单色图标

处理单色图标颜色时,不需要每个图标都修改明度、饱和度后,切图给开发,这样做成本太高。只需要出两套颜色方案,一套日间颜色、一套夜间颜色,通过修改代码进而修改单色图标颜色。

② 渐变色图标

图案简单的渐变色图标可参考图片处理方式;较复杂或颜色过于饱和的渐变色图标,可选择重新绘制。

③ 复杂样式图标

复杂样式图标一般用色较多、图案复杂,但使用量很少,因此选择重新绘制。

夜间模式作为辅助需求,所以未必所有产品都需要,但如果用户大多有夜晚使用该产品的习惯,最好还是增加夜间模式,提高用户体验度。设计夜间模式时,多通过背景色、文字颜色、图片、图标等处理方式,降低页面亮度和对比度,缓解夜间使用手机时的用眼疲劳。

 

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

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

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