数字产品设计与心理学13 - 颜色和深色模式

数字产品设计与心理学

颜色是最重要的视觉通道和视觉语言之一。设计师可以用颜色来强化或突出一个想法,引起情绪反应,或者吸引用户注意一些信息。

2.4.2colorred

iOS 用醒目的红色标记某些重要或危险的操作

颜色感知

颜色是描述光的颜色类别的视觉感知特征,它由眼睛、大脑和生活经验共同作用产生。没有光,就没有颜色。不过,可见光是一种电磁波,本身并不带颜色,颜色只是人的一种感知。那么人是怎么「看见」颜色的呢?这首先要归功于眼睛视网膜里的视椎细胞,它们对不同频率的光很敏感。当人眼识别可见光,并在大脑中加工光源中编码的信息,便产生了颜色感知。大部分时间里,视觉完全依靠视椎细胞提供信息。

图片来源:https://en.wikipedia.org/wiki/Color

关于颜色视觉,有两个主流的理论:三原色视觉理论(trichromatic theory)与补色过程理论(opponent-process theory)(Ware,2019)。

三原色视觉理论认为,人眼的三种视椎细胞(L-长波视椎细胞、M-中波视椎细胞和 S-短波视椎细胞)分别优先捕获相应波长区域光信号的刺激,最终合成产生颜色感知。从下图可以看到,不同视椎细胞对不同波段颜色的吸光率不同,总体而言对波长较长的颜色更为敏感,这也是暖色调更吸引人注意的原因。

2.4.2视椎细胞对不同波长的敏感度

补色过程理论则认为,视觉系统有两种感受器,受到某种颜色的光刺激时,它会同时释放出两种信号:刺激/兴奋信号和抑制信号。人的视觉系统用这种对比的方式获得颜色感知:红色对应绿色,蓝色对应黄色,黑色对应白色。在生活中你可能有过这样的经验:如果眼睛盯着一种颜色看一段时间,然后把目光转开,就会在别的地方看到这种颜色的补色。

2.4.2补色过程理论模型

人会在环境中根据一些视觉特征来快速搜索目标,颜色就是最常用的特征之一。不过 ,基于颜色的视觉搜索效率,也取决于环境中一共有多少种颜色。如果整个环境都是单一色调,一小块鲜艳的颜色就跃然而出;如果环境是五光十色的,那么针对某个颜色的视觉搜索就困难多了。

颜色理论和颜色心理学是一个庞大的话题,这一节只能作为一个小小的引子。如果大家感兴趣,推荐阅读这两本专业的论著:

  • Colin Ware. (2019). Information Visualization: Perception for Design. Morgan Kaufmann.
  • Elliot, A. J., Fairchild, M. D., & Franklin, A. (2015). Handbook of Color Psychology. Cambridge University Press.

色彩感觉

远-近。在日常生活中,我们时不时会有这样的体验:不同的色彩,让人感觉距离它们的远近有所不同。看起来比实际空间距离更近的颜色,我们称为前进色,反之为后退色。这是由于单色光的折射角不同,人眼产生了某种调节所致(朝仓直已,2018)。一般而言,波长较长的暖色,比波长短的颜色更有前进的感觉。两种颜色放在一起时,亮度和饱和度偏高的色彩会更突出。

2.4.2前进后退色

轻-重。人通过肌肉的紧张程度来感知物体的重量,但是心理过程也会影响色彩感知,产生与物体实际轻重不一样的感觉。一般我们会觉得明度高的颜色比较轻,明度低的颜色比较重。

扩张-收缩。在面积相等的情况下,看起来比实际面积更大的颜色,称为扩张色,反之为收缩色。前进色大都是扩张色,后退色一般都是收缩色。同样面积的暖色比冷色看起来面积更大;饱和度高的颜色,比饱和度低的颜色看起来面积更大;处于背景的颜色明度越高,前景的颜色看起来面积就越小;在黑暗背景上,高明度的颜色看起来比实际面积更大。

2.4.2扩张色收缩色

清晰-模糊。决定视觉辨识度的关键因素之一,是视觉主体和背景的明度差异 。背景色是明度最高的白色时,黑色的视觉辨识度最高;背景色是明度最低的黑色时,白色的视觉辨识度最高。

冷-暖。设计中常用不同色温的暖色、冷色和中性色能唤起人们的情绪反应。暖色是指黄色和红色等;冷色包括蓝色、绿色或紫色的色调;中性色包括棕色、灰色、黑色和白色。某些颜色会让人产生某些感受,例如,鲜艳的色彩给人以活力、直接或紧迫的感感,明亮的色调让人感觉有更多的能量和积极的情绪,可以用它们来唤起用户对产品、服务或重要信息的关注。而柔和的、不那么鲜艳的颜色则让人更放松平和。但是,颜色的情感体验也会受到性别、经历、文化关联和其他个人因素的影响。

深色模式

随着人们使用数字产品的时间越来越长,深色模式界面近几年来很受欢迎,Apple、Google 等手机平台纷纷提供了这一功能。

2.4.2ios13dark

iOS 的深色模式

为什么深色模式趋于流行呢?最直接的原因是电子设备的显示技术不断进步,苹果、谷歌、三星、华为等大厂商都开始使用无需背光的 OLED 屏。深色界面在 OLED 设备中能耗更少,可以提升设备的续航能力。值得注意的是,环境中的光照量不仅影响能耗,也影响我们的感知。

人的瞳孔对光照量很敏感。光线由瞳孔到达视网膜,瞳孔会根据环境中的光照量而改变大小:当光线充足时,瞳孔会收缩并变窄,而当光线较暗时,瞳孔会扩张,让更多的光线进入。瞳孔较小时,不容易产生球面像差(即图像看起来不对焦),同时也增加了景深,因此易于辨认文字,眼睛就不容易疲劳。不过,瞳孔太小也意味着进入眼睛的光线很少,会影响阅读,尤其是在光线黯淡的地方。老年人的视力下降也跟瞳孔大小有关:随着年龄的增长,瞳孔会逐渐减小。

虽然有研究表明,深色模式可能有利于一些视力不佳的使用者(Papadopoulos & Goudiras,2005),但发布在《人因》杂志的另一项研究,则不建议普及深色模式。这一研究考察了文字大小与对比度对人们完成校对任务的影响。结果显示,对于视力正常的用户来说,浅色模式在大多数情况下阅读效果更好,即使字体很小,用户也比较容易看清楚文字(Piepenbrock et al.,2013)。为什么浅色模式对阅读更加有利呢?解释是在正反差极性的影响下(with positive contrast polarity),整体光照更多时,瞳孔收缩得更小。因此,球面像差更少,景深更大,就容易聚焦于细节而不累眼睛。

当然,深色模式的流行,是考虑综合设备、情境、活动、习惯、内容、使用体验等多种因素的结果。很多时候,为了烘托氛围,设计师会选择深色背景。

2.4.2appleTVjpg

Apple TV 的介绍页,在深色模式下视觉效果更富戏剧性,让人一下子进入夜间影院的情境当中。

与娱乐相关的数字产品界面(智能电视、游戏机和电影应用)都喜欢采用深色主题。因为大多数娱乐活动都发生在晚上,人们在光线较暗的房间内观看,所以深色主题与环境更匹配。此外,丰富多彩的图像内容例如电影海报和宣传片等,在深色界面上会非常突出。总的来说,深色模式的优势包括:

  • 实现鲜明的、强烈的、戏剧性的视觉效果
  • 给人以时尚、优雅、豪华、尊贵的感觉
  • 营造出一种阴险和神秘的感觉
  • 有助于集中和引导用户的注意力,尽量减少分心
  • 支持可视化的层次结构和信息架构

但是,深色模式在内容较多时就不是一个好的选择,比如包含各种图文/视频/数据表/下拉菜单的页面。一般来说,所有颜色在白色背景下都显示良好。而在深色背景下,颜色的可用范围会缩小,如果内容很多又要保持足够的对比度,就会影响可读性(Scharff & Ahumada,2005)。深色背景能让大图片和简约的页面显得优雅而戏剧化,但它会让小图标和内容密集的页面看起来杂乱无章和不专业。可以对比以下两个页面,哪个看起来更舒适:

2.4.2Veltrix-light

2.4.2Veltrix-dark

图片来源:https://themesbrand.com/veltrix/layouts/vertical/index.html

深色模式并不一定优于浅色模式。但总的来说,仍然应该提供选项允许用户切换,对于需要长时间阅读的应用(如图书阅读器、杂志等)更是如此。

Ref

  • Color. (2020). In Wikipedia. https://en.wikipedia.org/w/index.php?title=Color&oldid=957435307
  • Ware, C. (2019). Information Visualization: Perception for Design. Morgan Kaufmann.
  • Elliot, A. J., Fairchild, M. D., & Franklin, A. (2015). Handbook of Color Psychology. Cambridge University Press.
  • 朝仓直巳. (2018). 艺术·设计的色彩构成(修订版) (赵郧安, Trans.). 江苏凤凰科学技术出版社.
  • Papadopoulos, K. S., & Goudiras, D. B. (2005). Accessibility assistance for visually-impaired people in digital texts. British Journal of Visual Impairment, 23(2), 75–83.
  • Piepenbrock, C., Mayr, S., Mund, I., & Buchner, A. (2013). Positive display polarity is advantageous for both younger and older adults. Ergonomics, 56(7), 1116–1124.
  • Scharff, L. V., & Ahumada, A. J. (2005). Why is light text harder to read than dark text? Journal of Vision, 5(8), 812–812.
kidult00 wechat
扫码关注 00 的公众号
如果文章帮您节省时间或者解答疑问,不妨打个赏 :)