【暗黑】

2020-08-06  本文已影响0人  是小嗯嗯啊

最近两年,各种系统、软件都开始支持酷酷的「黑暗模式」。2019 年的两场重量级发布会 Google I/O 和 Apple WWDC,两家公司也不约而同的发布了手机系统的 Dark Mode(Theme),在随后的几个月内升级 Android Q 和 iOS 13 体验暗黑色彩模式的 UI 界面。


为什么暗黑模式如此的受到大家重视

· 暗光环境下使用场景

人们对智能手机的依赖性越来越强,设备使用时间也越来越高频。覆盖了白天、黑夜,所以在弱光环境下使用的需求也随之越来越需要被考虑。最早人们的需求只是护眼,在视频网站、社交平台等停留时间较多的地方,通过设计和技术手段降低屏幕对眼睛的损害。所以 Dark Mode 可以降低屏幕的亮度,减少对眼睛的视觉压力。所以也可以称之为「夜间模式」。

· 省电

现在智能机屏幕越做越大,屏幕越做越亮,屏幕成了耗电大头,手机续航能力的问题也日益严峻。可以降低设备耗电速度的 Dark Mode,由于 OLED 自发光的特性,在纯黑色时像素点可以完全关闭达到省电效果优势突显出来。

· 突出内容

色彩具有层级关系,深色会在视觉感官上自动后退,浅色部分则会向前延展,这样的对比强烈的层次关系可以让用户更注重被凸显出来的内容和交互操作。


对设计的影响

· 暗黑UI不是简单的反色处理

苹果为官方组件中的彩色做了黑暗模式的适配。仔细分析会发现在保障原色系基础上,适量增加对比度&降低透明度,使得色彩与背景的对比度在深浅模式中能够保持一致。

增加对比度&降低透明度


同样,设计师常用的投影的部分也是在Dark mode中较普通模式有较大区别的。在白色背景下能够轻而易举突出页面/卡片纵向层级关系的「阴影」,在 Dark Mode 的纯黑色背景下已经不适用了。所以 iOS 建议利用「浮层」(Elevated) 来表达页面的纵向关系。Elevated 层只在黑暗模式中起作用,所以对应的色彩规范也全是以深色模式为准。说人话就是在 Dark mode 中去掉阴影,把卡片颜色做淡。

DarkMode下通过灰度来表达纵向关系


· 注重用户的观感体验

以文字颜色配比为例,传统浅底深字的界面,因为对比度较强,阅读时间长后眼睛容易产生疲劳感。通过黑暗模式的深底浅字,减少了屏幕中发出的光,也满足了最低色彩对比度要求。但暗色背景上的浅色文字也要把握尺度,避免亮度过高会产生的视觉疲劳。


一些坑

浅色为主的图片、视频等图像内容信息

例如电商 APP 不可避免有大量商品图片元素,并且在目前主流图片规范引导的是干净的浅色底为主,就会形成下图中「Dark」所示,产品图区域比较突兀。

总之,「暗黑」已经来了,设计师们好好接招

上一篇 下一篇

猜你喜欢

热点阅读