chinesefreesexvideos高潮,欧美极品少妇性运交,久久久国产一区二区三区,99久久婷婷国产综合精品,成人国产一区二区三区

原作者：谷歌設(shè)計(jì)團(tuán)隊(duì)

譯者：南山可

作者dribbble主頁：

https://dribbble.com/Asazzywei

前段時(shí)間Google I/O 大會(huì)如約召開，除了更加智能的AI，漸趨一致的多平臺交互手勢，不得不提的就是和設(shè)計(jì)師息息相關(guān)的Dark theme深色主題模式。很多人會(huì)奇怪，早在去年MacOS Mojave版本就正式上線了深色主題模式，為什么現(xiàn)在要拎出谷歌的深色主題模式單獨(dú)說。

原因就是，谷歌此次更新深色主題版本的同時(shí)也更新了深色主題的設(shè)計(jì)規(guī)范，行業(yè)級設(shè)計(jì)規(guī)范。這一模塊收錄在行業(yè)標(biāo)桿Material Design設(shè)計(jì)規(guī)范的Color一欄。IOS和安卓兩大陣營的設(shè)計(jì)規(guī)范同屬于平臺級，直接影響平臺上所有產(chǎn)品設(shè)計(jì)，因此也間接影響著廣大設(shè)計(jì)師同胞們，在產(chǎn)品體驗(yàn)的標(biāo)準(zhǔn)日益提高的當(dāng)下，深色模式應(yīng)用在產(chǎn)品設(shè)計(jì)中的趨勢已經(jīng)相當(dāng)明顯，較典型的如網(wǎng)易云音樂的夜間模式。而這份規(guī)范，是目前最詳盡可參考的深色模式設(shè)計(jì)規(guī)范，畢竟此規(guī)范適用安卓全平臺，適配、對比度可用性等等考慮都很周到。

官方對此主題的闡述是：Material Design引入了制作深色主題的指南，以補(bǔ)充產(chǎn)品現(xiàn)有的Material主題。雖然常規(guī)主題非常適合長時(shí)間閱讀并提供更清晰的對比度，但黑暗主題的亮度降低，可在黑暗環(huán)境中提供安全性并可最大限度地減少眼睛疲勞。

目錄

一、應(yīng)用原則
二、層級剖析
三、切換方式
四、屬性
五、UI應(yīng)用程序
六、自定義應(yīng)用
七、狀態(tài)
八、資源下載(文末獲取)

 一、應(yīng)用原則 

解釋：黑暗主題的大部分區(qū)域顯示為黑色。它被設(shè)計(jì)出來作為默認(rèn)(或輕量)主題的補(bǔ)充模式。

暗主題降低了設(shè)備屏幕發(fā)出的亮度，同時(shí)仍然滿足最低色彩對比度。它們有助于改善視覺人體工程學(xué)，減少眼睛疲勞，根據(jù)當(dāng)前照明條件調(diào)節(jié)亮度，能提高用戶在黑暗環(huán)境下的使用體驗(yàn)，同時(shí)節(jié)省電池電量。具有OLED屏幕的設(shè)備可以在一天中的任何時(shí)間關(guān)閉黑色像素。(將顯示為黑色的區(qū)域像素點(diǎn)關(guān)閉，從而達(dá)到省電的目的，因?yàn)槲撮_啟的像素點(diǎn)默認(rèn)是黑色)

1. 灰色而不是黑色
使用深灰色而不是黑色來表示具有更寬深度范圍的環(huán)境中的高度與空間。(解釋：由于深色主題中無法像常規(guī)MD設(shè)計(jì)中使用陰影，因此使用不同亮度的灰色來表示Z軸的空間關(guān)系，不以純黑色作為大范圍使用的底色可以提供更寬的色域來體現(xiàn)Z軸深度關(guān)系)

2. 顏色與強(qiáng)調(diào)
在深色主題中只用有限的顏色用來做強(qiáng)調(diào)，從而使大部分區(qū)域都使用深色。

3. 節(jié)約能源
在能夠提高資源利用效率的設(shè)備上(例如帶有OLED屏幕的設(shè)備)，通過減少發(fā)光像素的使用來延長電池壽命。

4. 增強(qiáng)可訪問性
通過滿足可訪問性顏色對比標(biāo)準(zhǔn)，適應(yīng)常規(guī)的黑暗主題用戶(例如視力不佳的用戶)。

和以上四個(gè)原則相關(guān)聯(lián)的幾個(gè)指標(biāo)，比較容易理解，不做解釋

• 對比度：深色表面和100％白色正文文本的對比度至少為15.8:1；

• 深度：在較高的高度水平下，組件通過顯示較淺的表面顏色來表達(dá)深度；

• 去飽和：原色去飽和，因此它們在所有高度級別都通過了至少4.5:1 (與正文一起使用時(shí))的Web內(nèi)容可訪問性指南(WCAG)AA標(biāo)準(zhǔn)；

• 限制顏色：大表面使用深色表面顏色，僅使用有限的彩色并限定在有限的范圍(控制明度，降低飽和度，避免過于飽和的顏色)；

 二、層級剖析 

解釋：黑暗主題主要使用深色做背景，其他顏色較少，它們發(fā)出的亮度很低，但同時(shí)仍然保持著足夠高的可用性(強(qiáng)調(diào)對比度)

以下是各層級拆解：
1.背景(最低層級)：作為背景色及分割色
2.表面(第二層級1dp厚度)：承載內(nèi)容的卡片bg色，也是主要區(qū)域用色
3.表面內(nèi)的色塊：位于表面內(nèi)容卡片之上，文字或圖形
4.表面更高層級的色塊：參考上圖懸浮按鈕的底色，層級在卡片之上
5.在背景上的內(nèi)容
6.在表面內(nèi)的文字內(nèi)容
7.表面內(nèi)的色塊之上的內(nèi)容
8.在懸浮按鈕之上的內(nèi)容/操作

可能看起來有點(diǎn)混亂，但以上各層級是遵循MD的Z軸理論的，在深度上有區(qū)別，同時(shí)保證了內(nèi)容的高對比度。概括下來即在轉(zhuǎn)變?yōu)樯钌Ｊ降耐瑫r(shí)繼承了常規(guī)場景下的MD的Z軸原則(白色背景下通過陰影和顏色體現(xiàn)縱深)，同時(shí)還能保證了信息的獲取效率，體驗(yàn)良好。

 三、切換方式 

解釋：如何切換深色模式？這里提供了兩種場景下的切換途徑：

1. 較明顯的切換方式，使用該應(yīng)用導(dǎo)航欄的icon來進(jìn)行切換；

2.不太明顯的切換方式，通過菜單或設(shè)置中心來切換；

 四、屬性 

解釋：黑色主題使用深灰色而不是黑色作為組件的主要表面顏色。深灰色表面可以表現(xiàn)出更廣泛的顏色，高度和深度，因?yàn)槲覀兏菀卓吹交疑?/span>(而不是黑色)上的陰影。

深灰色表面還可以減少眼睛疲勞，因?yàn)樯罨疑砻嫔系臏\色文字比黑色表面上的淺色文字具有更低的對比度。官方推薦的深色主題的表面顏色：#121212。

官方推薦的深色主題的表面顏色：#121212

1. 海拔高度
在黑暗主題中，組件應(yīng)當(dāng)保留與較亮主題中的組件相同的默認(rèn)高度級別和陰影，這需要通過表面的不同亮度來體現(xiàn)這種縱深高度的區(qū)別。

海拔越高表面越輕：表面高度越高(越接近隱含光源)，表面越輕。通過應(yīng)用半透明白色覆蓋層來表達(dá)這種輕盈，隨著表面變高，顏色變淺。

通過在組件表面上放置半透明覆蓋物來構(gòu)造暗主題表面。通過應(yīng)用半透明白色覆蓋層，表面變得更亮。

1:表面     2:高層級疊加

表面上的疊加層還可以使用戶更輕松地區(qū)分組件之間的高度并能看到陰影。疊加層還增加了曲面與陰影之間的對比度，使每個(gè)曲面的邊緣更加明顯。默認(rèn)主題使用陰影來表示高度，而深色主題則通過調(diào)整表面顏色來表示高度。

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

高度疊加透明度范圍從最低級別的0％到最高級別的16％

疊加層闡明了組件之間的高度差異。

A. 1dp高度，5％覆蓋的卡片
B. 6dp的浮動(dòng)動(dòng)作按鈕，使用不帶覆蓋層的輔助顏色
C.高度為8dp的底部應(yīng)用程序欄，覆蓋率為12％

注意事項(xiàng)：
1.高程覆蓋使用白色疊加的處理手法不能應(yīng)用于使用主要顏色或次要顏色的組件表面；

2.在黑暗的主題中，陰影保持黑色以準(zhǔn)確地表示投射陰影；

2. 可訪問性與對比度
黑暗主題表面必須足夠暗以顯示白色文本。文本和背景之間至少應(yīng)該達(dá)到15.8:1的對比度級別。這確保了當(dāng)應(yīng)用于最高(和最輕)高度的表面時(shí)，正文文本通過WCAG的AA標(biāo)準(zhǔn)至少能達(dá)到4.5:1。如果背景顏色不夠深，無法在白色文本和表面之間達(dá)到至少15.8:1的對比度，則最高(和最輕)高度表面的文本將無法通過4.5:1標(biāo)準(zhǔn)。

針對想要使用帶有品牌色的深色的情況：

要?jiǎng)?chuàng)建帶有品牌的深色表面，請?jiān)谕扑]的深色主題表面顏色(＃121212)上以低不透明度覆蓋主要品牌顏色。上圖的案例中顏色＃1F1B24是組合暗主題表面顏色＃121212和8％原色的結(jié)果。

需要提高電池使用效率的UI可以使用真正的黑色。在這些情況下，某些設(shè)備(例如帶有OLED屏幕的可穿戴設(shè)備)可以關(guān)閉任何顯示黑色的像素以節(jié)省電池電量。但需要注意的是，在OLED屏幕上，打開和關(guān)閉像素會(huì)導(dǎo)致屏幕滾動(dòng)時(shí)出現(xiàn)延遲，從而使像素模糊如下圖：

 五、在UI應(yīng)用程序中的運(yùn)用 

1. 主題顏色
所有深色主題顏色都應(yīng)顯示具有足夠?qū)Ρ榷鹊脑?，?dāng)應(yīng)用于所有高度的層級表面時(shí)，WCAG的AA標(biāo)準(zhǔn)至少為4.5:1。使用飽和度低的顏色，以提高可訪問性。

一個(gè)黑暗的主題應(yīng)該避免使用過度飽和的顏色，因?yàn)樗麄儧]有通過WCAG的至少4.5:1的可訪問性標(biāo)準(zhǔn)。飽和顏色還會(huì)在深色背景下產(chǎn)生光學(xué)振動(dòng)，這會(huì)引起眼睛疲勞。

相反，不飽和的顏色可以用作更清晰的替代品。

避免使用下圖中這樣飽和度過高的顏色，會(huì)在深色背景下造成視覺震動(dòng)。

附上谷歌色板的鏈接

(https://www.materialpalette.com/colors)

2. 主色的選擇
主要顏色是應(yīng)用程序屏幕和組件中最常顯示的顏色?；贛aterial Design黑暗主題的規(guī)范，請使用原色的200色調(diào)(在所有高度層級表面上，通過WCAG的AA標(biāo)準(zhǔn)至少4.5:1用于普通文本)。

特殊情況：具有淺表面的組件可以顯示暗主題的主要顏色的變體。如下圖中白色浮層上的文字鏈按鈕使用的700的深色。

3. 輔助色的選擇
輔助顏色可用于突出UI的重要部分。在深色主題中，輔助色應(yīng)該降低飽和度以滿足4.5:1的對比度水平。如下圖，紫色為主色，綠色為輔助色。

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

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

1是常規(guī)用色  2是降低飽和度的用色

通過下面案例可以發(fā)現(xiàn)低飽和度用色在深色主題上顯示效果更為出色。

5. 品牌顏色
為了保持品牌標(biāo)識，品牌顏色可以在深色主題中以完全飽和度使用，但應(yīng)用應(yīng)限于一個(gè)或兩個(gè)品牌元素，例如徽標(biāo)或品牌按鈕。通過謹(jǐn)慎使用品牌顏色，使元素在層次結(jié)構(gòu)中保持突出。

不飽和的顏色仍應(yīng)在黑暗主題UI的其余部分中使用，如下圖：

6. 更新了基于深色主題的調(diào)色板
包括：顏色(主要，次要和強(qiáng)調(diào)色)、表面(背景和組件)、狀態(tài)(例如錯(cuò)誤狀態(tài))、內(nèi)容(排版和圖像)

MD默認(rèn)調(diào)色板與深色主題調(diào)色板對比：

7. 錯(cuò)誤顏色
錯(cuò)誤顏色用于指示錯(cuò)誤狀態(tài)。材質(zhì)基準(zhǔn)深色主題錯(cuò)誤顏色為＃CF6679。這種深色主題顏色是通過采用淺色主題錯(cuò)誤顏色(＃B00020)并使用40％白色覆蓋物照亮它來創(chuàng)建的，該顏色通過了AA級對比度標(biāo)準(zhǔn)。

8. 排版和圖標(biāo)顏色
On顏色(理解為頂層內(nèi)容顏色)，默認(rèn)情況下，深色主題“On”顏色為純白色和純黑色。

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

• 高強(qiáng)度文本的不透明度為87％；

• 中等重點(diǎn)文字和提示文字的透明度為60％；

• 禁用文字的不透明度為38％；

 六、自定義應(yīng)用 

MD設(shè)計(jì)語言下的一些其他產(chǎn)品也可以從深色主題的規(guī)范中受益。下面講解了其他產(chǎn)品在使用深色主題規(guī)范時(shí)需要注意的事項(xiàng)，及將常規(guī)主題規(guī)范和深色主題規(guī)范結(jié)合使用的案例：

1. 占有較大屏幕面積的控件
使用大面積屏幕的組件(例如應(yīng)用欄或背景)可以使用深色主題的用色規(guī)范作為其組件的表面顏色。

2. 結(jié)合常規(guī)主題和深色主題的用法
當(dāng)在深色主題中需要較亮表面時(shí)，可以在選定的組件表面上使用淺色以保持層次結(jié)構(gòu)。 

例如，一個(gè)深色主題的美食類app可以顯示一個(gè)亮色(純白)的表面，以突出重要信息。為此，它可以應(yīng)用燈光主題的Surface和On Surface顏色。 

這里的On顏色即白色，屬于常規(guī)主題中的用色，但在特殊場景下其實(shí)是可以使用的，例如下圖中的浮層(Snackbar)，通過白色背景來突出其層級，用主色來強(qiáng)調(diào)主要操作文案。

 七、狀態(tài) 

狀態(tài)是MD原則中一個(gè)重要原則，狀態(tài)可以理解為反饋，即在不用場景、不同操作、不同狀態(tài)下該設(shè)計(jì)元素應(yīng)當(dāng)呈現(xiàn)什么樣。

狀態(tài)將UI元素處于的階段傳達(dá)給用戶，每個(gè)元素的不同狀態(tài)應(yīng)當(dāng)在視覺上相似，并不會(huì)徹底改變組件，但必須具有明確的可供性，要求能夠區(qū)別于其他狀態(tài)和周圍的布局。例如button的四大狀態(tài)：可用(常規(guī))、懸浮、按下、不可用。

在深色主題模式中，需要通過顏色的疊加來傳達(dá)交互元素的不同狀態(tài)。在黑暗主題中，狀態(tài)應(yīng)使用與其默認(rèn)(或淺色)主題相同的疊加值，并且可以調(diào)整它們以通過AA級對比度標(biāo)準(zhǔn)。 

有兩種類型的容器可以繼承狀態(tài)疊加：它們分別是使用“Surface”顏色和“Primary”顏色的容器。(不記得這倆顏色的往上翻翻)

1. 使用surface顏色的容器
使用“Surface”的顏色(#121212)的表面容器應(yīng)該應(yīng)用與其圖標(biāo)或文本標(biāo)簽的顏色匹配的疊加層(如果不存在圖標(biāo))。如下圖，背景色使用surface顏色(#121212)，背景上的內(nèi)容則使用白色或者低飽和度的主色，與之對應(yīng)，疊加層則是4%到12%的不同透明度的白色或者主色。

2. 使用主色的容器
對于使用“主要”顏色的表面容器，其狀態(tài)覆蓋為白色疊加層。

3. 禁用狀態(tài)
對于容器輪廓和填充，使用12％白色顯示所有禁用的組件，對于標(biāo)簽或圖標(biāo)等內(nèi)容使用38％白色顯示。

1、12%透明度輪廓      2、38%透明度標(biāo)簽

 3、12%透明度填充

 八、資源下載 

除去官方提供的本次深色主題組件庫的sketch文件，我還尋找了其他兩套大家需要的設(shè)計(jì)資源，下面我將相關(guān)文件匯總在一個(gè)鏈接，需要的人自行下載，不用客氣。 內(nèi)容包括下面三個(gè)方面：

1. 全套Android Nougat 
包含一系列界面組件和來自Android 7.0 Nougat的61個(gè)精彩界面

2. 深色主題組件庫
專為在深色主題模擬中使用而設(shè)計(jì)的材質(zhì)組件庫。該sketch文件與Sketch for Android組件一起使用。它包括構(gòu)成深色主題布局的元素，包括：狀態(tài)欄、應(yīng)用欄、底部工具欄、卡片、下拉菜單、搜索字段、分隔符、側(cè)面導(dǎo)航、對話框、浮動(dòng)操作按鈕和其他組件的符號。

3. 動(dòng)效組件庫
包含了一系列可以直接調(diào)用的AE組件，如搜索欄交互動(dòng)效被合成在一個(gè)預(yù)合成文件中，用戶可以直接拖動(dòng)來構(gòu)成自己的界面動(dòng)效。 

同時(shí)，每個(gè)AE組件里的數(shù)值用戶都可以根據(jù)需要自定義。

請?jiān)诤笈_回復(fù)：“谷歌資源”獲取資源下載鏈接，有效期7天，手慢無哦~

感謝閱讀，歡迎分享~

 文中觀點(diǎn)歸作者所有 

 更多精彩文章 請識別二維碼關(guān)注我們！

因?yàn)楹每?，不吝推薦??