激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

用戶界面設(shè)計(jì)缺乏對"感知亮度"的了解，導(dǎo)致用戶體驗(yàn)不佳

發(fā)布時間：2023-12-15 09:18:51 瀏覽量：144次

看下圖，你是不是覺得有些顏色比其他顏色更亮？比如，你覺得黃色和藍(lán)色，哪個更亮？


黃色對吧？！恭喜你，你意識到了感知亮度。

在HSB色彩模型中，每一種顏色都能被色度（0° — 360°），飽和度（0° —100°）和亮度（0° —100°）定義。

這個模型的優(yōu)勢在于：

1， 它符合人類對顏色屬性的看法，更貼近大家的認(rèn)知。

2， 它模擬了顏色在光線下的呈現(xiàn)方式。（區(qū)別于HSL模型）


不過，還是有一個問題。

HSB模型中的亮度只能衡量顏色在物理上的亮度，而不能代表人們感受到的感知亮度。

其實(shí)，上圖我們展示的6個顏色在HSB色彩模型中擁有相同的亮度。亮度值都是100%。但是我們的眼睛感受到的情況卻大相徑庭：有的顏色看起來明顯“強(qiáng)烈”很多。由此我們可以快速得出結(jié)論：每種顏色都有自己的感知亮度。

上圖和我們在本文一開始展現(xiàn)的圖片其實(shí)是同一張。唯一的變化是，我們把它放在亮度混合模式下，這樣能幫助我們理解感知亮度這個概念。


每個顏色上的數(shù)字代表它們各自的亮度等級，范圍是0-100。我們可以看到，這些顏色的感知亮度差異很大。


不過，這和我們有什么關(guān)系？

首先你可以在朋友面前裝*。


對于設(shè)計(jì)師來說，感知亮度意義巨大。了解感知亮度能提高我們的顏色選擇能力，因?yàn)樗c顏色對比度直接相關(guān)。選擇顏色必須考慮顏色的對比度，這對于保證用戶體驗(yàn)和可用性至關(guān)重要。


舉個實(shí)際點(diǎn)的例子：我們把第一張圖中的顏色“統(tǒng)一化”。我們把顏色板中顏色的感知亮度統(tǒng)一。這里我們把顏色都置于亮度混合模式下，把感知亮度值都改為50。

我們用的是最開始圖片中的相同的顏色（或者說是相同的色度）?，F(xiàn)在我們將感知亮度全部統(tǒng)一為50%，這樣在肉眼看到的感知亮度就都是相同的。

現(xiàn)在我們來看一下結(jié)果。



驚不驚喜，意不意外？現(xiàn)在這些顏色和我們最開始第一張圖中的顏色看起來相差太大了！區(qū)別最大的是最開始的兩個亮度極端：黃色和藍(lán)色。


主觀上來說，這可能不是我們想要的結(jié)果，但客觀上來說，現(xiàn)在這些色塊更一致了。在感受上，這些顏色給人感覺“強(qiáng)烈度”是一致的。而這種一致性，決定了UI的平衡性與和諧性。


關(guān)于顏色，我們能討論的還有很多很多。感知亮度是非常重要的概念，但在UI設(shè)計(jì)中經(jīng)常被忽略。它使我們能完美地微調(diào)顏色，構(gòu)建更好的對比度，這對于受眾的接受度非常關(guān)鍵。


本文轉(zhuǎn)載自：Gon?alo Dias （Medium）

熱門課程推薦

熱門資訊

請綁定手機(jī)號

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報名0元試學(xué)活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定