手机app如何设计夜间模式?

不知道大家有没有晚上窝在被窝里玩手机的习惯,我非常喜欢晚上在被窝里看文章、刷视频,但为了避免闪瞎我的双眼,我一般会打开夜间模式。夜间模式虽不是大部分产品的刚需,但设计优秀的夜间模式能增加用户的好感,提升用户体验度。接下来我就结合自己的理解为大家介绍一下夜间模式应该如何设计。

目录

一、夜间模式的作用

二、夜间模式的切换方式

三、夜间模式的设计要点

四、总结

 

1.夜间模式的作用

在介绍如何设计夜间模式之前我们先来了解一下夜间模式的具体作用,以此才能判定目前设计的产品是否需要增加夜间模式。

夜间模式最大的作用就是在夜晚长期使用手机时保护眼睛、减少用眼疲劳。

也就是说如果该项目的产品,用户大多有夜晚使用的需求,那么就要为其增加夜间模式。常见的有资讯类、阅读类、音乐播放类产品。

 

2.夜间模式的切换方式

为了区分日间与夜间模式,一般会添加夜间模式与日间模式的切换,常见的切换方式有列表开关、图标切换以及自动切换与提示。

01.列表开关

列表开关切换主要放置在个人中心列表页或是设置列表页中,日间夜间的切换方式使用开关组件,默认夜间模式关闭,点击即可打开。

最右的开关进行了重新设计,默认打开的是日间模式开关图案,点击后切换到夜间模式开关图案。比起一般的开关更加有趣,也贴合最右的设计风格。

 

02.图标切换

图标切换常见的有四种不同的放置位置,分别是宫格布局功能图标、顶部导航栏图标、内容详情页图标、侧边栏底部图标。

02-1.宫格布局功能图标切换

这种切换方式主要放置在个人中心宫格功能入口中,默认显示夜间模式图标,点击后切换到夜间模式并显示日间模式图标。

 

02-2.顶部导航栏图标切换

顶部导航栏图标切换一般放置在个人中心顶部导航栏,切换方式比起前两种会更加直观一些,对夜间模式需求更高的产品还会把切换图标放置在首页顶部导航栏中。

 

02-3.内容详情页图标切换

这种切换方式多用于阅读类产品中,在详情内容页面(比如电子书、漫画、新闻详情)可以直接设置切换到夜间模式,便于用户长时间阅读某一内容时直接切换。

 

02-4.侧边栏底部图标

侧边栏底部图标一般用在以侧边栏导航为主的APP,位于底部靠左区域,在拇指热区内,方便切换。

 

03.自动切换与提示

自动切换与提示夜间模式是更智能的一种方式,产品会设置一个默认时间段(多为夜间十点到次日早晨六七点),在固定时间段内,会自动进入夜间模式或是打开APP时弹窗询问用户是否开启夜间模式。

这种方式用户体验感很好,但要根据产品使用场景决定,比如小睡眠APP使用场景多为夜晚,因此选择自动切换非常合适。

 

小睡眠APP默认晚上十点到次日早晨六点自动切换夜间模式,在设置中还可以设置定时开启夜间模式的时间,如下图:

 

3.夜间模式的设计要点

夜间模式一般有两种处理方式,第一种很简单,只需在界面上覆盖一层40%~70%透明度的黑色遮罩层以此达到降低亮度的作用即可。这种方式虽效果不太理想,但更加节约开发及设计成本。比如以图片阅读为主的漫画类APP就比较适合这种方式。

第二种方式也就是本文着重要介绍的,使用深色界面进行设计,这种方式在夜晚长期使用手机中效果更好,与周围黑暗的环境更加融合,但开发和设计成本要高一些,可视项目情况选择使用。下文将重点介绍深色界面下的夜间模式有哪些设计要点。

 

01.主体背景色选择

夜间模式为了保证观看的舒适度,一般会采用低亮度、低饱和的色彩。上文介绍的第一种夜间模式处理方式就是直接在浅色界面上加上遮罩,强制降低页面亮度,你可以理解为白天的天空蒙上了一层乌云。

但是颜色本身就是有亮度的,在浅色界面上加遮罩的效果肯定不及本身就是低亮度的颜色,这就好比白天蒙上乌云的天空怎么都没有夜晚的天空暗,而深色界面即可理解为夜晚的天空。

这里为大家引入一个色彩亮度的计算公式:

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

Y表示亮度,RGB值则是常用的RGB色彩模式中红绿蓝的取值。Y值的范围是0~255,Y值越接近0颜色就越暗,但要尽量避免使用Y值为0的纯黑色。

图中我列举了一些夜间模式制作的比较舒适的APP的主体背景色Y值,通过大量汇总,我总结出Y值大概的范围是在10~60,因此在选择主体背景色时,尽量选择Y值在这个范围内的深色。

 

02.文字颜色

根据腾讯ISUX的研究,深色界面下的夜间模式要保证文字与背景色的对比度在3:1-4.5:1范围内,这样既能保证文字对比不会过于强烈,也可看清楚文字内容。尤其不要使用纯白的文字色彩,对比过于强烈,夜晚长时期的观看可能会出现白色眩光感。

颜色对比度查看网站:

https://contrast-ratio.com/#

为了方便查找使用,你也可以直接使用不同透明度的白色,注意与背景色的对比度即可。

 

03.图片处理

为了保证夜间模式下整体对比度的舒适度,还要对图片等元素进行降低亮度的处理。根据腾讯ISUX的研究,保证图片中颜色与背景色对比度满足在3:1-7:1范围内,可以在图片上加上一层黑色透明层,透明度选择40%~50%比较合适。

04.图标处理

图标的处理主要是通过降低高饱和高明度的图标颜色,从而降低与背景色的对比,我主要介绍三种常见图标样式的处理方式,分别是单色图标、渐变色图标以及复杂样式图标。

04-1.单色图标

处理单色图标颜色时,我们不用去修改每一个图标的明度、饱和度后切图给开发,这种做法成本太高,设计师与开发的工作量也比较大。

我们可以建立两套颜色方案,一套日间颜色、一套夜间颜色,然后通过修改代码进而修改单色图标颜色,这里需要和开发协商,建议大家可以了解一下Iconfont-阿里巴巴矢量图标库的相关使用。

04-2.渐变色图标

相比用量较多的单色图标,渐变色图标用量一般较少,图案简单的渐变色图标可以参照图片的处理方式,在上方叠加一层黑色透明遮罩。而图案较复杂或是颜色过于饱和的渐变色图标可以选择重新绘制。

04-3复杂样式图标

复杂样式图标一般用色较多、图案复杂,但使用量很少,因此选择重新绘制。最近更新的QQ,底部Tab图标生动有趣,选中样式较为复杂,而在切换为夜间模式后底部Tab图标也换了造型,让人眼前一亮。

 

4.总结

夜间模式作为一种辅助需求并不是所有产品都要必备的,但如果该产品用户大多有夜晚使用的习惯,那么就要为其增加夜间模式,以此提高用户体验度。

在设计夜间模式时根据产品需求考虑夜间模式的切换方式,通多对背景色、文字颜色、图片、图标等的处理降低页面的亮度与对比度,从而缓解夜间使用手机时的用眼疲劳。

 

 

 

作者:人类君

公众号:海盐社

每天更新,
全站高品质素材免费下载!