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

今年谷歌開發(fā)者大會(huì)新增Dark theme并更新了Material-Design Color章節(jié)，Dark theme 內(nèi)容非常翔實(shí)，詳細(xì)指導(dǎo)設(shè)計(jì)師一步一步適配Dark theme，大量案列說明包括一整套設(shè)計(jì)組件規(guī)范，以下，分享給大家~

深色主題是一種低光環(huán)境UI，主要顯示黑色界面。

用法：

深色主題在大部分界面顯示黑色。它常常作為產(chǎn)品默認(rèn)主題的備用選項(xiàng)。

深色主題降低了設(shè)備屏幕發(fā)出光的亮度，但是色彩仍然能滿足最低對(duì)比度。它們有助于改善視覺人體工程學(xué)，減少眼睛疲勞，根據(jù)當(dāng)前照明條件調(diào)節(jié)亮度，同時(shí)節(jié)省電池電量，并在黑暗的環(huán)境中延遲屏幕使用時(shí)間 。具有OLED屏幕的設(shè)備可以隨時(shí)關(guān)閉黑色像素點(diǎn)，已達(dá)到節(jié)能的特點(diǎn)。

原則

深灰色

在黑暗的環(huán)境中，使用深灰色 – 而不是純黑色 – 來表達(dá)的界面的高度和空間。

強(qiáng)調(diào)色

大部分UI界面都使用深灰色，但是會(huì)使用少量的主色或高飽和的顏色突出強(qiáng)調(diào)重點(diǎn)。

節(jié)約能源

在需要高效率的產(chǎn)品（例如帶有OLED屏幕的設(shè)備）中，通過減少光像素的使用來延長電池壽命。

提高易讀性

如果要考核非常規(guī)的深色主題用戶(如視力較低的用戶)，需要滿足顏色對(duì)比度標(biāo)準(zhǔn)。

屬性

Material Design深色主題由以下屬性定義：

• 對(duì)比度：深色界面在100％白色正文文本的對(duì)比度至少為15.8：1
• 深度：在較高的高度水平下，組件通過顯示較淺的界面顏色來表達(dá)深度
• 去飽和：原色去飽和，因此它們?cè)谒懈叨燃?jí)別都通過了至少4.5：1（與正文一起使用時(shí)）的Web內(nèi)容可訪問性指南（WCAG）AA標(biāo)準(zhǔn)
• 顏色有限：界面大范圍的使用深色顏色，使用少量的強(qiáng)調(diào)色（淺色、去飽和色和明亮的飽和色)

深色主題界面結(jié)構(gòu)

深色主題主要使用深灰色，其它顏色較少。它們發(fā)出的光線很少，同時(shí)需要保持高標(biāo)準(zhǔn)的可用性及可讀性。

1. 界面底層顏色（0dp界面高度）

2. 卡片顏色（1dp界面高度）

3. App主色

4. App輔助顏色

5. 底層文字顏色

6. 卡片文字顏色

7. 主色文字顏色

8. 輔助文字顏色

行為

可以使用以下兩種方式打開（或關(guān)閉）深色主題：

• 著重的突出深色主題，使用圖標(biāo)切換來打開或關(guān)閉深色主題
• 通過在菜單或應(yīng)用程序的設(shè)置中放置一個(gè)切換項(xiàng)，可以降低對(duì)用戶的干擾

在頂部應(yīng)用欄中的切換深色主題

在下拉菜單中切換深色的主題

應(yīng)用程序的設(shè)置中切換深色主題

屬性

黑深色主題使用深灰色而不是黑色作為界面及組件主要顏色。深灰色適用性很高，可以表達(dá)更廣泛的顏色、高度和深度，因?yàn)樵诨疑?而不是黑色)上更容易看到陰影。

深灰色表面也可以減輕眼睛的疲勞，因?yàn)樵谏罨疑砻嫔系臏\色文本比在黑色表面上的淺色文本對(duì)比度更小。

推薦的深色主題表面顏色為＃121212

高度：

在深色主題中的組件高度和陰影與默認(rèn)主題中的組件一致。然而，在深色主題中，不同高度的表面亮度不同。

高度越高，界面越亮：

表面高度越高（越接近隱含光源），表面越亮。通過應(yīng)用半透明白色覆蓋表面來表達(dá)這種輕盈剔透的感覺。

隨著組件升高，顏色變亮。

通過應(yīng)用半透明白色覆蓋層，表面變得更亮。

1. 界面位于底部

2. 提升高度后半透明覆蓋

界面上的半透明白色層疊加還可以更輕松地區(qū)分組件之間的高度與陰影。疊加增加了表面和陰影之間的對(duì)比，使每個(gè)界面的邊緣更加明顯。

默認(rèn)主題使用陰影來表示高度，而深色主題也通過調(diào)整組件表面顏色來表示高度。

這些界面覆蓋值旨在最大限度地提高易讀性，同時(shí)確保不同的高度水平彼此可辨別。

半透明覆蓋層透明度范圍從最低級(jí)別的0％到最高級(jí)別的16％表示不同的高度等級(jí)。

半透明覆蓋層闡明了組件之間的高度差異。

A. 1dp高度，5％覆蓋的卡片

B. 6dp的浮動(dòng)交互按鈕，使用不帶半透明覆蓋層的輔助色

C.高度為8dp的底部應(yīng)用程序欄，覆蓋率為12％

半透明層的覆蓋不應(yīng)該應(yīng)用于使用了主色調(diào)或輔助色的組件界面來表示高度。在深色主題中，陰影的顏色色值需要夠深，能夠準(zhǔn)確地表示投射陰影。

禁止。

避免對(duì)已經(jīng)使用主色或輔助色的組件界面進(jìn)行半透明層覆蓋。

禁止。

不要使用環(huán)境色來代替陰影顏色來表示高度，因?yàn)樗鼈儾荒軠?zhǔn)確地表示投射陰影的高度。

可訪問性和對(duì)比度

深色主題界面必須足夠深，以顯示白色文本。他們應(yīng)該使用文本和背景之間的對(duì)比度至少為15.8:1。這確保正文文本在應(yīng)用于最高(和最低)高度的界面時(shí)，正文文本至少能通過4.5:1的WCAG AA標(biāo)準(zhǔn)。

如果要?jiǎng)?chuàng)建品牌深色界面，請(qǐng)?jiān)诠俜浇ㄗh的深色主題界面顏色（121212）上以較低的透明度覆蓋品牌顏色。顏色1F1B24是深色主題顏色121212和8%原色組合的結(jié)果。

如果背景顏色不夠深，則無法滿足白色文本和界面之間達(dá)到至少15.8：1的對(duì)比度，會(huì)導(dǎo)致界面在最高（和最低）高度時(shí)文本將無法通過4.5：1標(biāo)準(zhǔn)。

警告。

確保界面顏色足夠深，以使正文在最高的表面（24dp）上達(dá)到至少4.5：1（AA）的對(duì)比度。

需要高效使用電池的用戶，界面可以使用純黑色。在這些情況下，一些設(shè)備（如帶OLED屏幕的可穿戴設(shè)備）可以設(shè)置讓屏幕不顯示黑色的像素，以節(jié)省電池電量。

警告。

在OLED屏幕上，打開和關(guān)閉像素會(huì)導(dǎo)致屏幕滾動(dòng)時(shí)出現(xiàn)延遲，從而使像素模糊。

用戶界面應(yīng)用

主題顏色

所有深色主題顏色都應(yīng)顯示具有足夠?qū)Ρ榷鹊脑兀?dāng)應(yīng)用于所有高度較高的界面時(shí)，WCAG的AA標(biāo)準(zhǔn)至少為4.5：1。

低飽和的顏色，提高易讀性

一個(gè)深色的主題應(yīng)該避免使用高飽和的顏色，因?yàn)樗鼈儾环蟇CAG針對(duì)深色界面的正文文本至少4.5:1的可訪問性標(biāo)準(zhǔn)。高飽和的顏色在黑暗的背景下也會(huì)產(chǎn)生光學(xué)振動(dòng)，這會(huì)導(dǎo)致眼睛疲勞。

相反，低飽和的顏色可以更清晰顯示文本。

調(diào)色板中低飽和的顏色可提高易讀性并減少視覺振動(dòng)。

禁止。

避免使用在深色背景下容易產(chǎn)生視覺振動(dòng)的高飽和色彩。

主色

產(chǎn)品界面和組件中最常顯示的主色調(diào)。我們推薦使用Material Design深色主題200基礎(chǔ)色調(diào)作為主色（在任何高度界面上，都通過WCAG的AA標(biāo)準(zhǔn)至少4.5：1用于普通文本）。

深色主題中的主色調(diào)色板示例

1. 主色指示符

2. 色調(diào)值

主色延伸色

具有淺色界面的組件可以顯示深色主題主色調(diào)的延伸色。

這個(gè)深色主題UI使用（紫色200）作為主色和主色的延伸色（紫色700）。

輔助色

輔助顏色可用于突出UI中選定部分。在深色的主題中，輔助色可以去飽和度以滿足4.5：1的對(duì)比度水平。

深色主題中的輔助調(diào)色板示例

1. 輔助色指示符

2. 色調(diào)值

此UI使用主要顏色和輔助顏色。

強(qiáng)調(diào)色

在深色的主題中，深色的界面占據(jù)了UI的大部分。強(qiáng)調(diào)色通常是淺色（不飽和柔和色）或明亮（飽和，鮮艷的色彩），以幫助重要元素脫穎而出。應(yīng)謹(jǐn)慎使用它們來強(qiáng)調(diào)關(guān)鍵元素，例如文本或按鈕。

尋找強(qiáng)調(diào)色

我們開發(fā)了調(diào)色板生成器，可用于創(chuàng)建(或查看)顏色主題。它還生成色調(diào)調(diào)色板，創(chuàng)建主色和輔助色的從淺色到深色的一系列變化。你可以為你的深色主題定制這些色彩變化。

為了在深色主題中提供更多的靈活性和可用性，建議在深色主題中使用淺色（200-50）范圍，而不是默認(rèn)的顏色主題（900-500之間的飽和色調(diào)）。

1. 默認(rèn)主題主顏色指示器

2. 深色主題主顏色指示器

允許。

較淺的色調(diào)（200-50范圍內(nèi)的顏色）在深色主題表面（在所有高度）具有更好的可讀性。

禁止。

避免在深色主題上使用飽和色，因?yàn)樗鼈內(nèi)菀自谏钌缑嫔袭a(chǎn)生視覺振動(dòng)。

默認(rèn)主題使用頂部應(yīng)用欄界面的顏色。

在深色主題中，頂部應(yīng)用欄的界面使用深色而不是主色或輔助色。

品牌顏色

為了保持品牌識(shí)別性，品牌顏色可以在深色主題中以高飽和度使用，但產(chǎn)品應(yīng)限制品牌元素最多一到兩個(gè)，例如LOGO或按鈕。通過謹(jǐn)慎使用品牌顏色，以保證元素在界面中層次結(jié)構(gòu)清晰突出。

在深色主題UI的其余部分中應(yīng)使用不飽和的顏色。

高飽和的品牌顏色應(yīng)用于浮動(dòng)動(dòng)作按鈕（2），而不飽和的深色主題主色應(yīng)用于文本（1）。

1. 深色主題主色

2. 品牌顏色

深色主題基礎(chǔ)調(diào)色板

Material Design主題基礎(chǔ)調(diào)色板包括用于深色主題的色調(diào)調(diào)色板。

深色主題顏色只能在深色主題UI中使用，包括：

• 顏色（主要，輔助和主色延伸顏色）
• 表面（背景和組件）
• 狀態(tài)（例如錯(cuò)誤狀態(tài)）
• 內(nèi)容（排版和圖像）

深色主題基礎(chǔ)主題顏色

1. Material Design基礎(chǔ)默認(rèn)主題

2. Material Design基礎(chǔ)深色主題

錯(cuò)誤顏色

錯(cuò)誤顏色用于指示錯(cuò)誤狀態(tài)。深色主題基礎(chǔ)錯(cuò)誤顏色為＃CF6679。

這種深色主題顏色是通過采用淺色主題錯(cuò)誤顏色（＃B00020）并使用40％白色覆蓋物照亮它來創(chuàng)建的，以通過AA級(jí)對(duì)比度標(biāo)準(zhǔn)。

排版和圖標(biāo)顏色

“on”顏色

“on”顏色主要應(yīng)用于文本，圖標(biāo)和數(shù)字等，有時(shí)將其放置在使用主要，次要，淺層，背景或錯(cuò)誤顏色的關(guān)鍵面的頂部。（這個(gè)on顏色其實(shí)就是界面中的主要文字，輔助文字以及圖標(biāo)的顏色）

默認(rèn)情況下，深色主題“on”的顏色是白色和黑色。

顯示文本和圖標(biāo)的深色主題基礎(chǔ)白色和黑色。

深色背景上的淺色文本

當(dāng)淺色文本出現(xiàn)在深色背景上（此處顯示為黑色時(shí)為白色）時(shí)，應(yīng)使用以下不透明度

• 高強(qiáng)度文本的不透明度為87％
• 中等重點(diǎn)文字和提示文字的混濁度為60％
• 禁用文字的不透明度為38％

高強(qiáng)度，中等強(qiáng)調(diào)和禁用文本

定制應(yīng)用

Material Design中的一些案列是使用精選的深色主題元素從中受益。

大面積組件

有些占據(jù)大部分屏幕的組件，如應(yīng)用程序欄或背景，需要使用深色主題作為組件的界面顏色。

允許。

面積較小組件使用鮮艷的顏色。

禁止。

不要將明亮的顏色用于大面積的組件及界面，因?yàn)樗鼈儠?huì)發(fā)出過多的亮度。

警告。

如果自己選的深色而不是系統(tǒng)推薦的深色(十六進(jìn)制值#121212)，請(qǐng)確保它通過15.8:1對(duì)比度。

禁止。

避免將深色主題主色用于背景，因?yàn)樗采w了大部分屏幕的淺色。

結(jié)合明暗主題

當(dāng)在深色主題中需要淺色界面時(shí)，可以在選擇的組件界面上使用淺色，以保持層次結(jié)構(gòu)。

例如，一個(gè)黑色主題的snackbar可以顯示一個(gè)淺色的表面來幫助它脫穎而出。為此，它可以應(yīng)用白色主題和主色。

小吃店采用黑色主題的淺色表面，以幫助它脫穎而出。1.界面淺層組件2. 淺層文字3.主色延伸色

狀態(tài)

狀態(tài)是通過使用覆蓋一層淺層顏色的形式來直觀地傳達(dá)組件或交互元素的狀態(tài)。在深色主題中，表示狀態(tài)的淺層顏色應(yīng)使用與其默認(rèn)（或淺色）主題相同的色值，并且可以調(diào)整這些值以通過AA級(jí)對(duì)比度標(biāo)準(zhǔn)。

淺層顏色有兩種覆蓋顏色類型的可以體現(xiàn)容器狀態(tài)：使用“淺白色”顏色和“主”色覆蓋的淺層。

淺白色顏色

使用“淺白色”淺層顏色覆蓋的容器應(yīng)該應(yīng)用與圖標(biāo)或文本標(biāo)簽(如果沒有圖標(biāo))。

使用淺白色淺層顏色表示容器的默認(rèn)，懸停，聚焦，按下和拖動(dòng)狀態(tài)。

淺層使用內(nèi)容的主色體現(xiàn)容器的默認(rèn)，懸停，聚焦，按下和拖動(dòng)狀態(tài)。

主色容器

對(duì)于使用“主”色的容器，其狀態(tài)淺層覆蓋為白色。

使用半透明主色的容器的啟用，懸停，聚焦，按下和拖動(dòng)狀態(tài)。

淺層使用主要顏色來表示容器的默認(rèn)，懸停，聚焦，按下和拖動(dòng)狀態(tài)。

禁用狀態(tài)

所有禁用的組件在容器輪廓的填充中使用12%的白色，在標(biāo)簽或圖標(biāo)等內(nèi)容中使用38%的白色。

1. 概述容器：12％白色

2. 標(biāo)簽/圖標(biāo)：38％白色

3. 填充容器：12％白色

資源

設(shè)計(jì)組件庫它包括組成深色主題布局的元素，包括狀態(tài)欄、應(yīng)用程序欄、底部工具欄、卡片、下拉菜單、搜索字段、分隔符、側(cè)邊導(dǎo)航、對(duì)話框、浮動(dòng)操作按鈕和其他組件的符號(hào)。

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

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