天天看點

ID設計建議,千萬别用燈效的亮度來訓示狀态

陽光下看不清螢幕?夜裡又被亮瞎眼?來,告訴你人眼感光的秘密,還有為啥别用燈效亮度來顯示狀态。本文将帶你了解人眼感光的非線性特性及其對智能裝置界面設計的影響。
ID設計建議,千萬别用燈效的亮度來訓示狀态

這篇文章會完整的解答如下幾個疑問:

  • 為什麼正午戶外,手機亮度最高也看不清?
  • 為什麼深夜不開燈,手機亮度最低也覺得很刺眼?
  • Gamma(伽馬)是什麼?
  • 為什麼不要用燈效的亮度來訓示狀态?

這幾個問題都看似沒有緊密的聯系,卻始終圍繞同一個知識點,就是人眼的感光原理。作為設計師我們常常聽到色相、色階、飽和度、明度…但是很少有人研究光強對人眼的影響,本文将告訴你一隻新的知識點,更适合對硬體互動設計有需求的同學閱讀

一、人眼的燭光現象

想象一個畫面,在一間完全密封的黑暗房間裡,點燃一根蠟燭,不出意外,這根蠟燭會非常顯眼,成為房間裡的焦點如果你現在你面前已經有一百根蠟燭,整個房間已經很明亮,此時再點燃一根蠟燭,可能并不會決定房間亮度提升了多少。

ID設計建議,千萬别用燈效的亮度來訓示狀态

同樣,如果我們在深夜玩手機,即使亮度調節到最低,自然覺得很刺眼;但是在白天正午戶外,手機亮度即使調節到最高,自然看不清螢幕内容(暫且不讨論螢幕反光的問題)

上面這2種現象,都是因為人眼的一個基礎感光原理:人眼的感光都是非線性的,這是生物在數萬年間進化出來非常優秀的特性。

ID設計建議,千萬别用燈效的亮度來訓示狀态

這種感覺可以描述為,人眼的感光會随着光線的強度,對光的感覺越來越弱。人的感官中有很多非線性,比如聽覺,嗅覺等。

人類學家猜測,這種特性可以讓我們的祖先,在黑夜中發現可疑的猛獸,然後也不至于在白天不能忍受烈日的強光。可以讓祖先在不同的環境下生存下去。

二、了解線性和非線性

讓我們來深入了解下線性和非線性。

我可以用單反相機來讓大家更好的了解感光。相機是如何模拟人眼對光線的感覺的:

ID設計建議,千萬别用燈效的亮度來訓示狀态

光線經過鏡頭進入感光元件cmos,相當于光線經過人眼的晶狀體進入我們的視網膜。

相機裡的感光元件接受光子轉換成帶電粒子,然後累計成電壓,最後對應成圖像的灰階值。越多的光子,代表越高的亮度,他們是線形的關系。

是以相機拍出來的原始資料是這樣的,下左圖,大家之是以沒有見過,是因為相機為了讓拍出來的照片更貼近人眼的感覺,加了一層處理,矯正成了右圖的樣子。同樣人眼接受到的光線本也應該是左圖這樣,隻不過漫長的進化讓人類擁有了把線性感覺轉換成非線性感覺。

ID設計建議,千萬别用燈效的亮度來訓示狀态
人眼感光 = 光強 ^(1/x)

線性到非線性隻需要做一次幂次方的計算,這裡的x是一個變量,對于人眼來說,這個值為固定的2.2。

那這麼一個矯正關系,也得成為gamma矯正,這個x就是我們可以調節的gamma值。

ID設計建議,千萬别用燈效的亮度來訓示狀态

是以我們平時在圖像、光學領域提到的伽馬其實就是把那個直線 矯正成 曲線。

Gamma矯正在我們日常生活中運用非常廣泛,比如剛才說的渲染調節,PS常用工具色階、曲線,然後顯示器調節 都是在調整gamma,都是在調整把線性轉換成非線性的這種關系。

我們最後在看一下2個案例,來進一步的深刻大家對感光的了解。

Photoshop中的灰階調節條的範圍是0-255,如果用絕對準确的顔色來表達這個區間,顯示是這樣的:

這個調節條在視覺上并不均勻,那是因為這個調節條要保證絕對平均分布,因為我們視覺非線性的原因,是以視覺看上去才不均勻。均勻的漸變應該是這樣的:

是以Photoshop實際上也是做了一次視覺優化,把計算機标準線性的表達優化成了人眼非線性的效果。

三、親身經曆

ID設計建議,千萬别用燈效的亮度來訓示狀态

我買過一個煮鍋,大概這樣,他有2個檔位,并且他用了這個燈的亮度來代表檔位,底檔的時候,燈暗一點,高檔的時候,燈亮一點。

這個設計給我帶來了很大的困擾,因為我有時候在晚上用的時候,即使開着抵擋,看着挺亮,白天用的時候,開着高檔,仍然看不清楚。

是以我個人總結出來的一個原則就是,在燈效設計的時候應該要避免,在沒有對比條件下直接用燈的亮度去傳遞資訊的。

對于這種檔位的功能,可以用圖形、數量、或者色相去傳遞資訊。

ID設計建議,千萬别用燈效的亮度來訓示狀态

對于這種檔位的功能,可以用圖形、數量、或者色相去傳遞資訊。

本文由@Kushim‘s 原創釋出于人人都是産品經理。未經許可,禁止轉載。

題圖來自Unsplash,基于 CC0 協定

該文觀點僅代表作者本人,人人都是産品經理平台僅提供資訊存儲空間服務。

繼續閱讀