APP设计技巧:夜间模式应该如何设计

Post 29 of 903

很多朋友仔都喜欢在被窝里玩手机,但为了避免眼睛受到伤害,他们一般都会选择夜间模式。夜间模式虽然不是APP设计的刚需,但良好的夜间模式设计,会让APP设计增加用户的好感,提供用户体验度。

APP设计技巧:夜间模式应该如何设计

技巧一:夜间模式切换方式

※ 列表开关切换

 

APP设计技巧:夜间模式应该如何设计

列表夜间模式开关切换主要放置在“个人中心”列表页或“设置”列表页,通常默认打开的是日间模式,如需要使用夜间模式,只需要点击打开即可。

※ 图标切换

图标切换常见的有四种不同的放置位置,分别是:

① 宫格布局功能图标

 

APP设计技巧:夜间模式应该如何设计

这种切换方式主要放置在“个人中心”宫格功能入口中,默认显示夜间模式图标(表示正在使用的是日间模式),点击后夜间模式图标切换到日间模式图标(表示正在使用的是夜间模式)。

② 顶部导览栏图标

 

APP设计技巧:夜间模式应该如何设计

这种切换方式一般放置在“个人中心”顶部导航栏,切换方式比前两种更直观,适合对夜间模式需求更好的APP设计。

③ 内容详情页图标

 

APP设计技巧:夜间模式应该如何设计

这种切换方式多用于阅读类产品,在详情内容页面可直接在“设置”切换到夜间模式,方便用户长时间阅读时直接切换。

④ 侧边栏底部图标

 

APP设计技巧:夜间模式应该如何设计

这种切换方式一般用在以侧边栏导航为主的APP设计,位于底部靠左区域,方便切换。

※ 自动切换与提示

 

APP设计技巧:夜间模式应该如何设计

自动切换与提示夜间模式,是一种较智能的切换方式,产品会自动设置某段时间内进入夜间模式,或打开APP时弹窗询问用户是否开启夜间模式。这种切换方式非常符合用户体验,但需要按照产品场景决定。

技巧二:夜间模式设计要点

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

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

第二种是使用深色界面设计,这种方式能与周围黑暗的环境更加融合,适合夜间长时间使用的APP设计,但开发和设计成本相对较低。下面,网页制作公司将具体介绍深色界面下夜间模式的设计要点。

1. 主体背景色选择

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

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

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

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

2. 文字颜色

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

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

3. 图片处理

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

4. 图标处理

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

① 单色图标

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

② 渐变色图标

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

③ 复杂样式图标

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

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

This article was written by admin

MENU
網頁設計公司