中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

關(guān)于如何做好深色模式的對比度設(shè)計，我們可以通過解讀各大平臺的指南得出一些基本原則， 并根據(jù)產(chǎn)品差異選擇合適的對比度。

在深色模式的設(shè)計中，對比度是十分重要的，合適的對比度可以保證產(chǎn)品具備可用性和易用性。深色模式需要兼顧光線強(qiáng)弱兩種條件下用戶對于內(nèi)容仍然能夠充分進(jìn)行識別，還要避免在弱光線環(huán)境中受到眩光的影響?？梢哉f，對比度控制的好不好，影響著用戶的使用體驗。

01?從平臺指南了解對比度設(shè)計

1. iOS

在iOS人機(jī)界面色彩準(zhǔn)則中，給出了深色灰階。

由圖中可以看出，iOS的規(guī)范指南將最大對比度拉到了出人意料的最大值，直接在純黑色背景層上使用了純白文字！

這似乎和我們之前的常規(guī)認(rèn)識有點(diǎn)不同：就像我們在設(shè)計淺色模式時，在白色背景下不會使用純黑文字；在黑色背景下也不會使用純白色字體。

這或許是因為蘋果在推出深色模式之初，所希望打造的就是一個不論在白天和夜晚都可以使用的色彩模式，而不是僅為弱光環(huán)境打造的“夜間模式”。它需要同時兼容不同光線情況下人眼對于光線的捕捉，從這一點(diǎn)上來講，深色模式的設(shè)計會比夜間模式更難，不是單純的降低對比度就是對的。

同時Apple提供了9種預(yù)定義的系統(tǒng)顏色，這些顏色是經(jīng)過精心選擇以保證在不同模式之間能保持一致的感覺。

而對于除系統(tǒng)顏色以外的自定義顏色，官方給出的對比度建議是7:1。

2. Material Design System

Google在色彩對比度上的設(shè)計比Apple保守一點(diǎn)，在背景色的選擇上更偏愛深灰色。

在深灰色背景上使用淺色字體的對比度會比在黑色背景上低，更有助于減少用眼疲勞。在設(shè)計上， 谷歌常用陰影來表現(xiàn)層級關(guān)系，在更換為深色模式時，系統(tǒng)會保留默認(rèn)的陰影，使用深灰色背景也更容易看到這些灰色陰影。

官方定義對于深色表面和白色文本的對比度至少為15.8:1。

3. WCAG

WCAG全稱為Web內(nèi)容無障礙指南，其中包含分為可感知性、可操作性、可理解性、可兼容性和一致性五大類的相關(guān)建議，這些建議可使網(wǎng)站內(nèi)容更容易訪問。iOS人機(jī)界面準(zhǔn)則以及Material Design System都是基于WCGA之上。其中關(guān)于色彩對比度的部分，分別是條例1.4.3、1.4.6、1.4.11。這邊僅簡述，有興趣的可以自行搜索一下全文。

• 對于最小對比度（AA級）：文本及文本圖像至少需要4.5:1的對比度；大號文本及大號文本圖像則至少要3:1的對比度。
• 加強(qiáng)對比度（AAA級）：文本及文本圖像至少需要7:1的對比度；大號文本及大號文本圖像則至少要4.5:1的對比度。
• 非文本對比度（AA級）：用戶界面組件及圖形圖像等在視覺呈現(xiàn)時，與相鄰顏色的對比度至少為3:1。

02?根據(jù)產(chǎn)品差異選擇合適的對比度

以上平臺設(shè)計指南給出的終究只是一個建議參考，在深色模式的設(shè)計中，除了要考慮適配平臺規(guī)則之外，更應(yīng)該思考的是適用于產(chǎn)品的定位和使用場景。

1. 釘釘

釘釘?shù)恼w深色模式設(shè)計很明顯更偏向于適配iOS設(shè)計。

從上圖可知，在主要文字信息的對比度上已經(jīng)大于了15.8:1，其他顏色的對比度也大于4.5:1。其中整個頁面的最大對比度達(dá)到了滿值。

釘釘從產(chǎn)品上說屬于工具型的產(chǎn)品，使用場景更多是在企業(yè)辦公，為了讓信息內(nèi)容突出，加大對比度的刺激可以保證用戶在使用時更為清晰，更為高效。

2. 微信

微信在深色模式設(shè)計中并未使用iOS官方模式。而是降低了整個頁面的對比度，整體以較為灰暗的樣式呈現(xiàn)。

可以看到文字信息的對比度僅大于7:1。更多的是考慮微信的聊天場景中，用戶可能長時間沉浸式使用。這里微信將深色模式與夜間模式進(jìn)行了兼容，避免大的對比造成強(qiáng)烈的視覺刺激，可以在深夜環(huán)境下獲得更好的感知度。

以上兩者在深色模式的設(shè)計上差異雖然較大，但其宗旨都在于為用戶服務(wù)，都是在充分考慮使用場景及定位之后，希望提供更為良好的用戶體驗。所以深色模式中的對比度設(shè)計不應(yīng)該死搬硬套平臺規(guī)范指南，更多的還需要分析自身產(chǎn)品的特性，適合的才是最好的。

03?對比度的計算

在對對比度設(shè)計有了一定了解之后，怎么才能知道自己選擇的顏色對比度是多少呢？其實對比度是通過色彩的相對亮度來計算的。在WCAG中已經(jīng)告訴了我們相對亮度的計算公式：

For the sRGB colorspace, the relative luminance of a color is defined as

L = 0.2126 * R + 0.7152 * G + 0.0722 * B

where R, G and B are defined as:

* if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4

* if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4

* if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4

and RsRGB, GsRGB, and BsRGB are defined as:

* RsRGB = R8bit/255

* GsRGB = G8bit/255

* BsRGB = B8bit/255

上面的R8bit、G8bit、B8bit其實就是我們色彩面板中顯示的通道數(shù)值。這里要注意，這里使用的色彩文件需要是sRGB色彩。

有了相對亮度，就可以計算對比度了：

(L1+0.05)/(L2+0.05)

其中L1為淺色的相對亮度，L2為深色的相對亮度。

如果沒看懂公式也沒關(guān)系，這里推薦一個網(wǎng)站，直接輸入兩個色的色值，就能直接計算出對比度。

對比度查詢工具：

https://contrast-ratio.com/?ref=uxprocc#

可以使用多種色彩值表達(dá)方式，可以直接輸入常規(guī)色的英文，也可以使用#333333，或者h(yuǎn)sla(200,0%,0%,.7)都可以。這樣就很方便的可以查詢自己的配色是否符合最小對比度了。

以上希望能對于設(shè)計深色模式有所幫助！

參考

Material Design Dark theme：

https://material.io/design/color/dark-theme.html#usage

iOS Human Interface Guidelines：

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/

Web內(nèi)容無障礙指南（WCAG）2.1 中文版：

https://www.w3.org/Translations/WCAG21-zh/

作者：『夜。微信公眾號：夜的UE筆記

本文由 @『夜。 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議