Android 開(kāi)發(fā)者和設(shè)計(jì)師必須了解的顏色知識(shí)

在近期發(fā)布的 Oreo 版本中,Android 開(kāi)始獲得顏色管理的支持癞己,這有助于在不同的設(shè)備上對(duì)顏色進(jìn)行校準(zhǔn)。隨著此次更新的到來(lái),Android 設(shè)備現(xiàn)在可以顯示 sRGB 色域之外的顏色氏淑。如果您不熟悉顏色配置文件或廣色域,那么我強(qiáng)烈建議向您推薦這段來(lái)自 Google I/O 的視頻硕噩,供您理解顏色:




騰訊視頻

簡(jiǎn)單來(lái)說(shuō)假残,顏色管理可以確保顏色在不同的顯示器上看起來(lái)一致。例如炉擅,顏色 #ff0000(我們的讀者應(yīng)該秒懂這是紅色)當(dāng)出現(xiàn)在采用不同技術(shù)的顯示屏上時(shí)辉懒,觀眾看到的顏色可能會(huì)有所不同——有些屏幕可以顯示比其他屏幕更飽和或更強(qiáng)烈的顏色。根據(jù) sRGB 的表達(dá)方式坑资,#ff0000 表示一種特定的紅色(在 sRGB 色空間中)耗帕,這樣彩色顯示管理就可以精確產(chǎn)生出符合觀眾期望的顏色。

在這篇文章中袱贮,我們想概述一下 Android 應(yīng)用設(shè)計(jì)師和開(kāi)發(fā)者需要如何理解這些改動(dòng)仿便。

顯示廣色域圖像

圖像可以嵌入顏色配置文件,聲明其顏色信息所屬的顏色空間攒巍。類似地嗽仪,許多相機(jī)能夠捕捉廣色域并嵌入適當(dāng)?shù)念伾渲梦募瑥亩@示超出標(biāo)準(zhǔn) sRGB 色域的顏色柒莉。要在應(yīng)用中展示具有廣色域特征的圖像闻坚,您需要在每個(gè) Activity 中進(jìn)行聲明。為此兢孝,請(qǐng)?jiān)?manifest 的 activity 公告中設(shè)置 colorMode 屬性:

您也可以通過(guò)代碼來(lái)設(shè)置窿凤,但您需要在創(chuàng)建 Window 之前就在 onCreate 上設(shè)置完畢仅偎。廣色域支持是可選的,因?yàn)樗枰嗟南到y(tǒng)資源(這可能會(huì)導(dǎo)致應(yīng)用性能表現(xiàn)下降)雳殊,事實(shí)上我們?cè)陂_(kāi)發(fā)者文檔里已經(jīng)強(qiáng)調(diào)過(guò)了:

“當(dāng)啟用廣色域模式時(shí)橘沥,活動(dòng)的窗口使用更多的內(nèi)存和 GPU 處理能力來(lái)進(jìn)行畫面組合。在啟用廣色域模式之前夯秃,您應(yīng)該仔細(xì)考慮活動(dòng)能夠真正從中受益座咆。例如,全屏顯示照片活動(dòng)很適合采用廣色域模式仓洼,但顯示縮略圖的界面則不夠適合介陶。”

請(qǐng)注意色建,如果您使用的是單一 Activity 架構(gòu)哺呜,那么將廣色域圖像顯示分解為新的 Activity 可能是有意義的。

下面是一個(gè)示例箕戳,顯示了兩個(gè)顯示相同廣色域測(cè)試圖像的界面(嵌入了 Display P3 顏色配置文件的 PNG 文件)弦牡,畫面上部分的 Activity 聲明了廣色域顏色模式,而下半部分的 Activity 則沒(méi)有聲明漂羊。

△ 如果您的屏幕支持的話驾锰,上部分應(yīng)該能看見(jiàn)一個(gè) Android 小機(jī)器人,而下部分看不見(jiàn)走越。

顏色準(zhǔn)確渲染

許多 Android 設(shè)備在很久之前就擁有了能夠顯示較廣色域的屏幕椭豫。在 Android 8.0 的顏色管理之前,所有內(nèi)容都被假定為 sRGB旨指,但寬色域顯示器會(huì)將顏色值重新解釋為其工作色域赏酥,并有效地對(duì)顏色值進(jìn)行 “換算”(一般會(huì)讓紅色更紅,綠色更綠)谆构,從而導(dǎo)致更飽和的成像效果裸扶。然而這種拉伸是不精確的,事實(shí)上不存在這種能預(yù)測(cè)您想要的顏色的 “換算” 算法搬素,因此這樣渲染出的顏色并不準(zhǔn)確呵晨。

許多應(yīng)用已經(jīng)對(duì)圖像等資源進(jìn)行處理,比如降低一些飽和度從而進(jìn)行顏色彌補(bǔ)熬尺。因此摸屠,在具有校準(zhǔn)顯示功能的設(shè)備上顯示時(shí),顏色可能會(huì)顯得較為柔和粱哼。也就是說(shuō)季二,在顏色顯示精確的設(shè)備(如 Pixel 2)上,非飽和的圖片資源的顯示效果將不如顯示不精確的設(shè)備那么飽滿。當(dāng)準(zhǔn)確的顏色渲染技術(shù)廣泛流行后胯舷,應(yīng)用開(kāi)發(fā)者終于可以不再需要對(duì)資源顏色自行處理了刻蚯,同時(shí)還能確保他們的內(nèi)容能夠按預(yù)期進(jìn)行顯示。然而桑嘶,在此之前芦倒,您可以采取一些措施,來(lái)確保您的內(nèi)容在顏色精確的顯示器上以及非顏色管理設(shè)備上看起來(lái)都很棒不翩。

Android 8.0 添加了一個(gè)新的 widecg 資源限定符(resource qualifier),您可以使用該限定符來(lái)更改配備廣色域屏幕并支持廣色域渲染的設(shè)備上的顏色(nowidecg 則剛好相反)麻裳。

請(qǐng)注意口蝠,廣色域支持不同于當(dāng)前活動(dòng)是否在 wideColorGamut 顏色模式下運(yùn)行。如果設(shè)備支持顏色準(zhǔn)確的渲染津坑,則該限定符將適用妙蔗,而不管該活動(dòng)是否在寬色域模式下運(yùn)行。

例如疆瑰,一個(gè)應(yīng)用可以在res/values/colors.xml聲明一個(gè)基色調(diào)色板:

并在res/values-widecg/colors.xml聲明另一套設(shè)置

△ 如上面代碼所示眉反,可以為色彩顯示準(zhǔn)確的設(shè)備(左側(cè))和較舊的設(shè)備提供不同顏色


當(dāng)然,您可以在可以柵格化成位圖的資源上使用上述做法(例如 res/drawable-widecg-mdpi/foo.png)穆役,但是這意味著幾乎倍增的應(yīng)用體積寸五,所以也許并不值得。如果一定要這么做耿币,可以考慮轉(zhuǎn)而使用可動(dòng)態(tài)著色的矢量圖形梳杏。

更廣泛的支持即將到來(lái)

雖然我們最近有宣布計(jì)劃添加一種新的 “飽和” 顏色模式,讓用戶選擇不使用顏色精確的渲染(就像 nowidecg 設(shè)備一樣)淹接,但我們?nèi)匀徽J(rèn)為十性,為那些擁有顏色管理功能的設(shè)備更新應(yīng)用非常重要。如果您更新了您的應(yīng)用塑悼,并更好地支持了顏色準(zhǔn)確渲染劲适,選擇退出此模式的用戶就會(huì)變少,畢竟大家都更喜歡精準(zhǔn)的顏色厢蒜。我們計(jì)劃在廣色域支持領(lǐng)域繼續(xù)進(jìn)行投入霞势; 在將來(lái)的版本中添加更多的 API 界面來(lái)處理廣色域(比如更新后的 Paint API 和 Canvas API 已經(jīng)可以接受更高比特精度的顏色)。

在頻繁和現(xiàn)代顯示設(shè)備打交道的如今斑鸦,設(shè)計(jì)師和開(kāi)發(fā)者現(xiàn)在需要了解色彩空間支示、顏色管理等知識(shí),以及如何在應(yīng)用中將其付諸實(shí)施鄙才。越來(lái)越多的設(shè)備開(kāi)始提供廣色域顯示和顏色精確的渲染颂鸿,領(lǐng)先一步在此時(shí)顯得尤為必要,更新您的應(yīng)用攒庵,為用戶提供最佳體驗(yàn)嘴纺。我們認(rèn)為败晴,這是向您的用戶提供卓越體驗(yàn)的最佳方式 —— 確保他們所看到的顏色就是您想要展示出來(lái)的顏色。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末栽渴,一起剝皮案震驚了整個(gè)濱河市尖坤,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌闲擦,老刑警劉巖慢味,帶你破解...
    沈念sama閱讀 210,914評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異墅冷,居然都是意外死亡纯路,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,935評(píng)論 2 383
  • 文/潘曉璐 我一進(jìn)店門寞忿,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)驰唬,“玉大人,你說(shuō)我怎么就攤上這事腔彰〗斜啵” “怎么了?”我有些...
    開(kāi)封第一講書人閱讀 156,531評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵霹抛,是天一觀的道長(zhǎng)搓逾。 經(jīng)常有香客問(wèn)我,道長(zhǎng)杯拐,這世上最難降的妖魔是什么恃逻? 我笑而不...
    開(kāi)封第一講書人閱讀 56,309評(píng)論 1 282
  • 正文 為了忘掉前任,我火速辦了婚禮藕施,結(jié)果婚禮上寇损,老公的妹妹穿的比我還像新娘。我一直安慰自己裳食,他們只是感情好矛市,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,381評(píng)論 5 384
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著诲祸,像睡著了一般浊吏。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上救氯,一...
    開(kāi)封第一講書人閱讀 49,730評(píng)論 1 289
  • 那天找田,我揣著相機(jī)與錄音,去河邊找鬼着憨。 笑死墩衙,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播漆改,決...
    沈念sama閱讀 38,882評(píng)論 3 404
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼心铃,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了挫剑?” 一聲冷哼從身側(cè)響起去扣,我...
    開(kāi)封第一講書人閱讀 37,643評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎樊破,沒(méi)想到半個(gè)月后愉棱,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,095評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡哲戚,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,448評(píng)論 2 325
  • 正文 我和宋清朗相戀三年奔滑,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片惫恼。...
    茶點(diǎn)故事閱讀 38,566評(píng)論 1 339
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖澳盐,靈堂內(nèi)的尸體忽然破棺而出祈纯,到底是詐尸還是另有隱情,我是刑警寧澤叼耙,帶...
    沈念sama閱讀 34,253評(píng)論 4 328
  • 正文 年R本政府宣布腕窥,位于F島的核電站,受9級(jí)特大地震影響筛婉,放射性物質(zhì)發(fā)生泄漏簇爆。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,829評(píng)論 3 312
  • 文/蒙蒙 一爽撒、第九天 我趴在偏房一處隱蔽的房頂上張望入蛆。 院中可真熱鬧,春花似錦硕勿、人聲如沸哨毁。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 30,715評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)扼褪。三九已至,卻和暖如春粱栖,著一層夾襖步出監(jiān)牢的瞬間话浇,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 31,945評(píng)論 1 264
  • 我被黑心中介騙來(lái)泰國(guó)打工闹究, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留幔崖,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,248評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像岖瑰,于是被迫代替她去往敵國(guó)和親叛买。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,440評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容