• Material Design 深色主題設計組件規范

    /2019-05-22 17:28:15/

  • \

    今年谷歌開發者大會新增Dark theme并更新了Material-Design Color章節,Dark theme 內容非常翔實,詳細指導設計師一步一步適配Dark theme,大量案列說明包括一整套設計組件規范,以下,分享給大家~

    深色主題是一種低光環境UI,主要顯示黑色界面。

    Material-Design深色主題

    用法:

    深色主題在大部分界面顯示黑色。它常常作為產品默認主題的備用選項。

    深色主題降低了設備屏幕發出光的亮度,但是色彩仍然能滿足最低對比度。它們有助于改善視覺人體工程學,減少眼睛疲勞,根據當前照明條件調節亮度,同時節省電池電量,并在黑暗的環境中延遲屏幕使用時間 。具有OLED屏幕的設備可以隨時關閉黑色像素點,已達到節能的特點。

    原則

    Material-Design深色主題

    深灰色

    在黑暗的環境中,使用深灰色 – 而不是純黑色 – 來表達的界面的高度和空間。

    Material-Design深色主題

    強調色

    大部分UI界面都使用深灰色,但是會使用少量的主色或高飽和的顏色突出強調重點。

    Material-Design深色主題

    節約能源

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

    Material-Design深色主題

    提高易讀性

    如果要考核非常規的深色主題用戶(如視力較低的用戶),需要滿足顏色對比度標準。

    屬性

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

    • 對比度:深色界面在100%白色正文文本的對比度至少為15.8:1
    • 深度:在較高的高度水平下,組件通過顯示較淺的界面顏色來表達深度
    • 去飽和:原色去飽和,因此它們在所有高度級別都通過了至少4.5:1(與正文一起使用時)的Web內容可訪問性指南(WCAG)AA標準
    • 顏色有限:界面大范圍的使用深色顏色,使用少量的強調色(淺色、去飽和色和明亮的飽和色)

    深色主題界面結構

    深色主題主要使用深灰色,其它顏色較少。它們發出的光線很少,同時需要保持高標準的可用性及可讀性。

    Material-Design深色主題

    1. 界面底層顏色(0dp界面高度)

    2. 卡片顏色(1dp界面高度)

    3. App主色

    4. App輔助顏色

    5. 底層文字顏色

    6. 卡片文字顏色

    7. 主色文字顏色

    8. 輔助文字顏色

    行為

    可以使用以下兩種方式打開(或關閉)深色主題:

    • 著重的突出深色主題,使用圖標切換來打開或關閉深色主題
    • 通過在菜單或應用程序的設置中放置一個切換項,可以降低對用戶的干擾

    Material-Design深色主題

    在頂部應用欄中的切換深色主題

    Material-Design深色主題

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

    Material-Design深色主題

    應用程序的設置中切換深色主題

    屬性

    黑深色主題使用深灰色而不是黑色作為界面及組件主要顏色。深灰色適用性很高,可以表達更廣泛的顏色、高度和深度,因為在灰色(而不是黑色)上更容易看到陰影。

    深灰色表面也可以減輕眼睛的疲勞,因為在深灰色表面上的淺色文本比在黑色表面上的淺色文本對比度更小。

    Material-Design深色主題

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

    高度:

    在深色主題中的組件高度和陰影與默認主題中的組件一致。然而,在深色主題中,不同高度的表面亮度不同。

    高度越高,界面越亮:

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

    Material-Design深色主題

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

    Material-Design深色主題

    通過應用半透明白色覆蓋層,表面變得更亮。

    1. 界面位于底部

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

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

    Material-Design深色主題

    默認主題使用陰影來表示高度,而深色主題也通過調整組件表面顏色來表示高度。

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

    Material-Design深色主題

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

    \

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

    Material-Design深色主題

    A. 1dp高度,5%覆蓋的卡片

    B. 6dp的浮動交互按鈕,使用不帶半透明覆蓋層的輔助色

    C.高度為8dp的底部應用程序欄,覆蓋率為12%

    半透明層的覆蓋不應該應用于使用了主色調或輔助色的組件界面來表示高度。在深色主題中,陰影的顏色色值需要夠深,能夠準確地表示投射陰影。

    Material-Design深色主題

    禁止。

    避免對已經使用主色或輔助色的組件界面進行半透明層覆蓋。

    Material-Design深色主題

    禁止。

    不要使用環境色來代替陰影顏色來表示高度,因為它們不能準確地表示投射陰影的高度。

    可訪問性和對比度

    深色主題界面必須足夠深,以顯示白色文本。他們應該使用文本和背景之間的對比度至少為15.8:1。這確保正文文本在應用于最高(和最低)高度的界面時,正文文本至少能通過4.5:1的WCAG AA標準。

    Material-Design深色主題

    如果要創建品牌深色界面,請在官方建議的深色主題界面顏色(121212)上以較低的透明度覆蓋品牌顏色。顏色1F1B24是深色主題顏色121212和8%原色組合的結果。

    如果背景顏色不夠深,則無法滿足白色文本和界面之間達到至少15.8:1的對比度,會導致界面在最高(和最低)高度時文本將無法通過4.5:1標準。

    Material-Design深色主題

    Material-Design深色主題

    警告。

    確保界面顏色足夠深,以使正文在最高的表面(24dp)上達到至少4.5:1(AA)的對比度。

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

    Material-Design深色主題

    警告。

    在OLED屏幕上,打開和關閉像素會導致屏幕滾動時出現延遲,從而使像素模糊。

    用戶界面應用

    主題顏色

    所有深色主題顏色都應顯示具有足夠對比度的元素,當應用于所有高度較高的界面時,WCAG的AA標準至少為4.5:1。

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

    一個深色的主題應該避免使用高飽和的顏色,因為它們不符合WCAG針對深色界面的正文文本至少4.5:1的可訪問性標準。高飽和的顏色在黑暗的背景下也會產生光學振動,這會導致眼睛疲勞。

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

    Material-Design深色主題

    調色板中低飽和的顏色可提高易讀性并減少視覺振動。

    Material-Design深色主題

    禁止。

    避免使用在深色背景下容易產生視覺振動的高飽和色彩。

    主色

    產品界面和組件中最常顯示的主色調。我們推薦使用Material Design深色主題200基礎色調作為主色(在任何高度界面上,都通過WCAG的AA標準至少4.5:1用于普通文本)。

    Material-Design深色主題

    深色主題中的主色調色板示例

    1. 主色指示符

    2. 色調值

    主色延伸色

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

    Material-Design深色主題

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

    輔助色

    輔助顏色可用于突出UI中選定部分。在深色的主題中,輔助色可以去飽和度以滿足4.5:1的對比度水平。
    Material-Design深色主題

    深色主題中的輔助調色板示例

    1. 輔助色指示符

    2. 色調值

    Material-Design深色主題

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

    強調色

    在深色的主題中,深色的界面占據了UI的大部分。強調色通常是淺色(不飽和柔和色)或明亮(飽和,鮮艷的色彩),以幫助重要元素脫穎而出。應謹慎使用它們來強調關鍵元素,例如文本或按鈕。

    尋找強調色

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

    Material-Design深色主題

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

    1. 默認主題主顏色指示器

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

    Material-Design深色主題

    允許。

    較淺的色調(200-50范圍內的顏色)在深色主題表面(在所有高度)具有更好的可讀性。

    Material-Design深色主題

    禁止。

    避免在深色主題上使用飽和色,因為它們容易在深色界面上產生視覺振動。

    Material-Design深色主題

    默認主題使用頂部應用欄界面的顏色。

    Material-Design深色主題

    在深色主題中,頂部應用欄的界面使用深色而不是主色或輔助色。

    品牌顏色

    為了保持品牌識別性,品牌顏色可以在深色主題中以高飽和度使用,但產品應限制品牌元素最多一到兩個,例如LOGO或按鈕。通過謹慎使用品牌顏色,以保證元素在界面中層次結構清晰突出。

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

    Material-Design深色主題

    高飽和的品牌顏色應用于浮動動作按鈕(2),而不飽和的深色主題主色應用于文本(1)。

    1. 深色主題主色

    2. 品牌顏色

    深色主題基礎調色板

    Material Design主題基礎調色板包括用于深色主題的色調調色板。

    深色主題顏色只能在深色主題UI中使用,包括:

    • 顏色(主要,輔助和主色延伸顏色)
    • 表面(背景和組件)
    • 狀態(例如錯誤狀態)
    • 內容(排版和圖像)

    Material-Design深色主題

    深色主題基礎主題顏色

    Material-Design深色主題

    1. Material Design基礎默認主題

    2. Material Design基礎深色主題

    錯誤顏色

    錯誤顏色用于指示錯誤狀態。深色主題基礎錯誤顏色為#CF6679。

    Material-Design深色主題

    這種深色主題顏色是通過采用淺色主題錯誤顏色(#B00020)并使用40%白色覆蓋物照亮它來創建的,以通過AA級對比度標準。

    排版和圖標顏色

    “on”顏色

    “on”顏色主要應用于文本,圖標和數字等,有時將其放置在使用主要,次要,淺層,背景或錯誤顏色的關鍵面的頂部。(這個on顏色其實就是界面中的主要文字,輔助文字以及圖標的顏色)

    默認情況下,深色主題“on”的顏色是白色和黑色。

    Material-Design深色主題

    顯示文本和圖標的深色主題基礎白色和黑色。

    深色背景上的淺色文本

    當淺色文本出現在深色背景上(此處顯示為黑色時為白色)時,應使用以下不透明度

    • 高強度文本的不透明度為87%
    • 中等重點文字和提示文字的混濁度為60%
    • 禁用文字的不透明度為38%

    Material-Design深色主題

    高強度,中等強調和禁用文本

    定制應用

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

    大面積組件

    有些占據大部分屏幕的組件,如應用程序欄或背景,需要使用深色主題作為組件的界面顏色。

    Material-Design深色主題

    允許。

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

    Material-Design深色主題

    禁止。

    不要將明亮的顏色用于大面積的組件及界面,因為它們會發出過多的亮度。

    Material-Design深色主題

    警告。

    如果自己選的深色而不是系統推薦的深色(十六進制值#121212),請確保它通過15.8:1對比度。

    Material-Design深色主題

    禁止。

    避免將深色主題主色用于背景,因為它覆蓋了大部分屏幕的淺色。

    結合明暗主題

    當在深色主題中需要淺色界面時,可以在選擇的組件界面上使用淺色,以保持層次結構。

    例如,一個黑色主題的snackbar可以顯示一個淺色的表面來幫助它脫穎而出。為此,它可以應用白色主題和主色。

    Material-Design深色主題

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

    狀態

    狀態是通過使用覆蓋一層淺層顏色的形式來直觀地傳達組件或交互元素的狀態。在深色主題中,表示狀態的淺層顏色應使用與其默認(或淺色)主題相同的色值,并且可以調整這些值以通過AA級對比度標準。

    淺層顏色有兩種覆蓋顏色類型的可以體現容器狀態:使用“淺白色”顏色和“主”色覆蓋的淺層。

    淺白色顏色

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

    Material-Design深色主題

    使用淺白色淺層顏色表示容器的默認,懸停,聚焦,按下和拖動狀態。

    \

    Material-Design深色主題

    淺層使用內容的主色體現容器的默認,懸停,聚焦,按下和拖動狀態。

    \

    主色容器

    對于使用“主”色的容器,其狀態淺層覆蓋為白色。

    Material-Design深色主題

    使用半透明主色的容器的啟用,懸停,聚焦,按下和拖動狀態。

    \

    Material-Design深色主題

    淺層使用主要顏色來表示容器的默認,懸停,聚焦,按下和拖動狀態。

    \

    禁用狀態

    所有禁用的組件在容器輪廓的填充中使用12%的白色,在標簽或圖標等內容中使用38%的白色。

    Material-Design深色主題

    1. 概述容器:12%白色

    2. 標簽/圖標:38%白色

    3. 填充容器:12%白色

    資源

    設計組件庫它包括組成深色主題布局的元素,包括狀態欄、應用程序欄、底部工具欄、卡片、下拉菜單、搜索字段、分隔符、側邊導航、對話框、浮動操作按鈕和其他組件的符號。

<
上一篇: 3年贏得1.8億用戶,Keep是怎么如何做到的? 下一篇: 從輸入到輸出,帶你快速了解搜索全流程

聯系我們

一個新的需求,從這里開始?;隊钚幢碭窕蚍⑺禿獻饔始粒? [email protected] [email protected] 加微信: 13765801787

13765801787
在線留言
3d单选包胆 新疆时时开奖将结果 ag开牌不同地区结果一样吗 时时彩七码投注法 稳赚的足球竞彩分类 江苏时时开奖号96期 pk10技巧走势图技巧 在线人工杀码北京pk10 重庆老时时开奖结果记录 二十一点玩法规则图解 棋牌游戏下载 炸金花百人场技巧 球深比分网即时比分007 时时彩计划 球探足球比分直播数据 重庆时时彩v2.3.0版本