讀完這篇 Google Dark Mode 的設(shè)計(jì)規(guī)范，你會(huì)知道為什么說(shuō)很多 APP 的 Dark Mode 都是存在很大問(wèn)題的，包括 beta 版微信和網(wǎng)易云音樂(lè)。如果讀完之后你還對(duì)上句話存在懷疑，那就在晚上關(guān)燈后躺在被窩使用上述兩款 APP 的 Dark Mode 試試看。

深色模式在大多數(shù)的UI設(shè)計(jì)上表現(xiàn)為深顏色的界面，通常作為對(duì)默認(rèn)（淺色）顏色模式的補(bǔ)充。

一、深色模式的特性

Material Design 的深色模式包含以下屬性：

對(duì)比度：深色界面和100%的白色文字之間的對(duì)比度應(yīng)至少為15.8:1。海拔：海拔更高的組件通過(guò)顯示更亮的表層顏色來(lái)表達(dá)其高度。去飽和度：深色模式中的選顏色需要去飽和度，這樣選顏色與主體文字不論在哪個(gè)海拔共同使用時(shí)，兩者的對(duì)比度都至少為4.5:1，才能符合WCAG的AA標(biāo)準(zhǔn)。有限的顏色：大面積使用深色表層顏色，外加有限的強(qiáng)調(diào)色。二、主要組成部分

深色模式UI會(huì)大面積使用深色表層及少量的顏色，可以在保證高標(biāo)準(zhǔn)可用性的同時(shí)散發(fā)出較弱的光。

背景色 Background（0dp遮罩）表層色 Surface（1dp遮罩）選色 Primary次級(jí)色 Secondary背景層文字表層文字選層文字次級(jí)層文字深色模式的開(kāi)關(guān)

深色模式可以隨系統(tǒng)主題自動(dòng)切換（Android10），也可在APP內(nèi)設(shè)置開(kāi)關(guān)。

突出顯示：在主界面中設(shè)置圖標(biāo)icon切換開(kāi)關(guān)弱化顯示：在菜單或者設(shè)置中設(shè)置切換開(kāi)關(guān)

上圖所示是設(shè)置在頂部bar上的切換開(kāi)關(guān)

上圖是設(shè)置在溢出菜單中的淺色模式、深色模式選項(xiàng)

上圖是設(shè)置在應(yīng)用設(shè)置中的深色模式開(kāi)關(guān)

三、設(shè)計(jì)應(yīng)用細(xì)則

深色模式應(yīng)使用深灰色作為主要顏色，而非純黑色。深灰色可以包容更廣泛的顏色、高度和深度，因?yàn)樗菀卓吹交疑幱啊?/p>

深灰色界面還可以減輕眼部疲勞，因?yàn)闇\色的文字在深灰色的界面上比在純黑色的界面對(duì)比度更低。

Google 推薦的深色模式界面顏色是 #121212。

Google 推薦的深色模式界面顏色是 #121212

1. 海拔的表示

深色模式中的各個(gè)組件與淺色模式一樣，也需要呈現(xiàn)出不同的海拔、陰影等。但是，深色模式中不同的海拔是通過(guò)不同的表面亮度來(lái)表現(xiàn)的。

海拔越高顏色越亮。

組件表面的海拔越高（假設(shè)上方有個(gè)隱形光源，將組件上升到更接近光源的位置），則該組件就越亮。我們可以通過(guò)給組件表面顏色增加半透明白色遮罩來(lái)表達(dá)亮度。

給顏色增加遮罩還可以使我們更加輕松地分區(qū)組件與其陰影，提高組件與陰影之間的對(duì)比度，使組件的邊緣更加明顯。

半透明白色遮罩并不適用于使用了選顏色和次級(jí)顏色的組件；在深色模式中，陰影依然要使用黑色，因?yàn)樵趯?shí)際生活中陰影不可能出現(xiàn)其他顏色。2. 易用性和對(duì)比度

深色模式中的背景顏色必須足夠深以展示白色文字。背景顏色與文字之間的對(duì)比度至少為 15.8:1。

如果要?jiǎng)?chuàng)建符合品牌設(shè)定的深色界面，可以用較低的不透明度將品牌色覆蓋在＃121212上。

＃121212是 Google 建議使用的深色模式界面顏色。

3. 顏色的使用原則

應(yīng)避免在深色模式中給文字使用不能通過(guò)WCAG色彩易用性測(cè)試的飽和色（背景與文字的對(duì)比度應(yīng)高于4.5:1）。深色背景上面的飽和色會(huì)導(dǎo)致眼睛疲勞。

4. 如何選擇選色

選色是在APP界面和各類組件中最常出現(xiàn)的顏色。Material Design baseline的深色模式中使用色調(diào)200作為選色。

5. 選色的延伸

深色模式中組件有時(shí)也會(huì)用到淺色，可以在這類組件上使用由選色延伸出的顏色。

6. 次級(jí)色

次級(jí)色可以用于強(qiáng)調(diào)UI中的某些部分。深色模式中的次級(jí)色同樣需要去飽和度以符合高于4.5:1的對(duì)比度標(biāo)準(zhǔn)。

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

在深色模式中，深色占據(jù)了UI中大部分的界面。通常情況下強(qiáng)調(diào)色會(huì)采用亮色（例如更飽和或更鮮明的顏色），從而達(dá)到突出元素的目的。強(qiáng)調(diào)色應(yīng)該謹(jǐn)慎使用，僅用于強(qiáng)調(diào)一些關(guān)鍵元素，例如文字、按鈕。

8. 如何確定強(qiáng)調(diào)色？

Material色板生成器可以用來(lái)創(chuàng)建配色方案，也可以用來(lái)生成色調(diào)板，然后從中選擇可用于深色模式的顏色。

為了能更好的適應(yīng)深色模式，建議使用色調(diào)在200-50的顏色，避免使用色調(diào)在900-500之間的飽和色。這可能跟你在淺色模式選擇顏色的原則有所差別。

9. 品牌色

為了保留品牌辨識(shí)度，高飽和度的品牌色也可以在深色模式中使用。但APP中的品牌元素應(yīng)限制在1-2種，比如logo或者用于一個(gè)帶有品牌色的按鈕。

謹(jǐn)慎的使用品牌色可以使品牌元素保持高優(yōu)先級(jí)，突出其重要位置。

10. 錯(cuò)誤色

錯(cuò)誤色用于指示錯(cuò)誤狀態(tài)。

Material Design baseline中使用的錯(cuò)誤色是#CF6679。這個(gè)顏色是通過(guò)將淺色模式中的錯(cuò)誤色#B00020覆蓋上不透明度為40%的白色遮罩得來(lái)的。

11. 排版和圖標(biāo)

“上層”色

“上層”色主要用在那些位于關(guān)鍵界面上的文字、圖標(biāo)等相對(duì)細(xì)微的元素，這些關(guān)鍵界面使用了選色、次級(jí)色、表層色、背景色、錯(cuò)誤色等。

在深色模式中，“上層”色通常使用白色或者黑色，如下圖所示。

深色背景上的淺色文字

當(dāng)淺色文字需要顯示在深色背景上面時(shí)，建議采用以下幾個(gè)不飽和度：

高優(yōu)先級(jí)文字：不透明度為87%中優(yōu)先級(jí)或提示文字：不透明度為60%表示不可用狀態(tài)的文字：不透明度為38%四、自定義應(yīng)用

使用一些特定的深色模式組件對(duì) Material Design 一些用例來(lái)講也很受用。使用一些特定的深色模式組件對(duì) Material Design 一些用例來(lái)講也很受用。

1. 面積較大的控件

屏幕中那些占用較大面積的組件，比如 app bar 或背景，可以使用深色。

如果是亮色，可用于較小的組件，不要用在面積較大的組件上。避免使用深色模式中的選色作為背景色，因?yàn)楸尘懊娣e通常很大，會(huì)使界面整體看起來(lái)太亮。2. 淺色與深色的結(jié)合

如果深色模式中要用到淺色的組件，則淺色可以用于突出這個(gè)組件的優(yōu)先級(jí)。

例如，將深色模式中的 snackbar（消息通知組件）設(shè)定為淺色，可使 snackbar 在界面中更加突出。

附錄WCAG：全稱Web Content Accessibility Guidelines（Web內(nèi)容無(wú)障礙指南）。色彩對(duì)比度計(jì)算網(wǎng)站：https://contrast-ratio.com/

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

題圖來(lái)自Unspalsh, 基于CC0協(xié)議。

非常感謝您讀完創(chuàng)新互聯(lián)的這篇文章："CF圖標(biāo)網(wǎng)站制作教程app(cf擊殺圖標(biāo)制作教程)"，僅為提供更多信息供用戶參考使用或?yàn)閷W(xué)習(xí)交流的方便。我們公司提供：網(wǎng)站建設(shè)、網(wǎng)站制作、官網(wǎng)建設(shè)、SEO優(yōu)化、小程序制作等服務(wù)，歡迎聯(lián)系我們提供您的需求。

本文名稱：CF圖標(biāo)網(wǎng)站制作教程app(cf擊殺圖標(biāo)制作教程)
文章地址：http://jinyejixie.com/news11/321561.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、服務(wù)器托管、網(wǎng)站收錄、ChatGPT、全網(wǎng)營(yíng)銷推廣、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)