那些很熟悉但又叫不出名字的設計法則之——由上而下光源偏見

最新 06-23

本文共1267字 | 閱讀約7分鐘

界面設計中，為什麼陰影都在下方呢？本期我們來聊聊。

由上而下光源偏見

Top-Down Lighting Bias

什麼是由上而下光源偏見

說到童年陰影，不得不說說《名偵探柯南》，二手的童年陰影，大部分都產生在這部動畫片中（剩下的是《走近科學》），隨意截幾張圖大家感受下：

圖1：動畫片《名偵探柯南》截圖

單看這些截圖，恐怖感到底產生在哪裡呢？仔細觀察，我們可以發現，好人的的光源都自上而下，而壞人的光源往往是自下而上，難道是不同的光源產生的恐怖感嗎？

圖2：自帶濾鏡的主人公

由上而下光源偏見也叫做「上方照明偏愛（top-lighting preference）」和「上方照明假設（lit-from-above assumption）」。

通用設計法則：一件物體的陰影或暗色區域，就是物體上方光源產生的陰影。

產生由上而下光源偏見的原因

《心智的構建》中有一個有趣的實驗：

我們看到下面這張圖片的第一反應是：5個凸的按鈕，1個凹的按鈕。

圖3

現在僅僅將圖片上下顛倒一下：

圖4

現在看到的還一樣嗎？在我們的眼中，僅僅將圖像顛倒一下，我們眼中的顯像立馬就不一樣了，變成了1個凸按鈕，5個凹按鈕。

視覺圖像要到達大腦，首先要在視網膜上成像，視網膜上的像是一張二維圖片，大腦提取出來的任何信息都以這張二維圖片為原始素材。

那麼，大腦究竟是怎麼從二維圖片中看出三維的？

很簡單，假設環境中有光源，並且光源來自上方，那麼凸的物體會使其下部出現陰影，凹陷的物體則會在上部出現陰影。於是，圖中按鈕的下半部出現陰影就意味著按鈕是凸的，按鈕的上半部出現陰影則代表按鈕是凹的。

大腦的這個推理成立必須有一個前提，即光線從上方照下來。在我們生存的環境中始終有這麼一個巨大的來自上方的光源——太陽，漫長的進化已經在我們的神經迴路中刻下了「由上而下光源」這樣一個強大的偏見，所以雖然第一張圖片本該有兩種解釋，我們還是不可避免地只看到其中一種，即假設光線來自上方的解釋。即使卯足了勁看也難以將凸的看成凹的，因為難以克服「由上而下光源偏見」。

來自上方的光源照射會讓物體顯現的非常自然，相反，來自下方的光源會讓物體看起來怪異不自然。所以設計師可以利用這個原理來製造一些恐怖怪異的氛圍。

舉個例子：360手機瀏覽器的萬聖節開屏頁，主光源來自南瓜燈的由下而上的內部光，副光源是自上往下的天光，但是南瓜燈的光較為強烈，算得上是畫面的主光源，所以整個畫面的氛圍就比較符合萬聖節的恐怖感覺。相反，途牛旅遊的聖誕節開屏頁主光源為上方的暖色檯燈光源，所以整個畫面就充滿的溫馨、細膩的節日氛圍。