UE设计 | 在夜间,也需要沉浸式的用户体验

UE设计 | 在夜间,也需要沉浸式的用户体验
  • 分享到微信朋友圈
  • Copied

一天只有24个小时,在日常事务没有减少的情况下,我们盯着屏幕的时间却越来越长。手机电脑上的页面大部分是有鲜明对比的白底黑字,相信每个人都有长时间看手机后眼睛变得酸涩的体验。

UE设计 | 在夜间,也需要沉浸式的用户体验

尤其是许多人喜欢熬夜和躺在床上玩手机,黑暗的环境中,只有脸部被一块屏幕光照亮。为了减轻视觉疲劳,给用户带来更好的使用体验,夜间模式诞生了。如今许多网页、网页,甚至操作系统都发布了夜间模式。

我们尚未得知是什么时候开始流行夜间模式的,但早在1991年,苹果System 7 OS操作系统就提供了黑底白字的深色显示模式,也就是叫做CloseView的夜间模式。2001年, Windows XP操作系统也提供了高对比的显示模式。

UE设计 | 在夜间,也需要沉浸式的用户体验

图片来自网络

2018年,WWDC会议上,苹果发布的MAC OS Mojave 系统就提供了Dark 模式。所谓夜间模式,或者说深色模式和黑暗模式,就是指高对比度的页面显示模式。所有的UI换成深色时,用户可以更加聚焦页面内容本身,可以带来沉浸式的体验。

UE设计 | 在夜间,也需要沉浸式的用户体验

那么对于UE设计师来说,夜间模式的主题并不是简简单单换个颜色就能解决的事情。夜间模式也有显而易见的优缺点,设计得合理还能彰显高端奢华的气质,设计得不好反而影响用户。

今天我们就为大家带来夜间模式下UE设计的几个要点~

色彩

在深色界面下的夜间模式中,文字颜色选择白色反而更容易刺激眼睛。腾讯ISUX的研究报告显示,夜间模式下保证文字与背景色的对比度在3:1-4.5:1范围内,才能既保证文字对比不会过于强烈,也能让文字清晰可辨认。

UE设计 | 在夜间,也需要沉浸式的用户体验

间距

很显然,深色页面上的文字比起浅色页面来说,可读性较差。因此UE设计师们注意适当增加文字的段落间距或者行高等,一目了然的文字段落更容易被用户理解。

字体

深色页面中,自然是无衬线字体比衬线字体的可读性更强。从各种书法拓本来看,衬线字体看起来会更加好看优雅。因此,UE设计师们若想使用衬线字体,需要将字号放大,并在页面中留白。

UE设计 | 在夜间,也需要沉浸式的用户体验

图片

通常情况下,夜间模式下的图片设计是在页面上覆盖一层半透明的黑色遮罩层来降低亮度。这种设计可以节省时间和开发成本。

UE设计 | 在夜间,也需要沉浸式的用户体验

微信读书截图

这样的设计方法虽然不是那么的精致,但对于一般应用来说足够了。如何控制好透明度呢?只要保证图片中颜色与背景色对比度满足在3:1-7:1范围内即可。

图标

如今大部分应用的图标设计都采用了插画型线性图标,在线性图标的基础上添加了许多细节。这种类型的图标在夜间模式中,设计师只需要调整高饱和高明度的图标颜色即可。

UE设计 | 在夜间,也需要沉浸式的用户体验

知乎截图

当图标是单纯的线性风格时,UE设计师就有必要重新设计一套夜间专用的图标了。因为纯线性图标在深色背景下会显得十分单薄,量感不强。

6万免费模板,千万版权素材,在线作图神器。