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

編輯導語：Dark Mode設計并不少見，許多產品也選擇適配Dark Mode，但是不少產品的適配工作仍有待繼續完善。那么，相較于Light Mode，Dark Mode發生了哪些變化？產品在適配這一模式的過程中，可以從哪些方面入手？本文作者就Dark Mode設計發表了他的看法，一起來看一下。

這篇文章最初來自于之前公司的一次設計分享，由于公司產品自 Dark Mode 上線以來，斷斷續續地發現了挺多影響體驗的小問題，因此團隊成員從各自熟悉的領域對 Dark Mode 的成因、心理/生理影響、具體落地的注意事項等方面進行了相關的分析，以指導后續關于 Dark Mode 體驗視覺優化的工作。

我負責關于具體頁面視覺表現層面的分析，在分享結束后，又對部分內容進行了增刪修改。文章內的部分觀點參考了網絡上的文章內容，但由于網絡文章存在多篇文章觀點相同的問題，由于時間關系無法專門查找分析原作者，因此并未附上參考來源。若原作者看到，可聯系我對文章進行相關的說明，必要時可對文章做相應的刪改。

以下為正文內容。

一、Dark Mode 的八個設計準則

8個設計準則

1. 避免純黑純白的設計

純黑純白兩種顏色的對比度太高，即使在亮光環境下，也會極大地刺激人眼，產生視覺疲勞。

2. 避免使用高飽和度色彩

由于對比度原因，飽和度過高的色彩在深色背景下較難被識別，而使用飽和度較低的色彩則可以避免這個問題。

3. 保證文本內容的可閱讀性

文本類內容，必須保證第一時間能被用戶識別，WCAG 標準中規定，文本需要達到 15.8：1 的對比度。這意味著在設置階梯透明度的文字時，不能使透明度過低導致達不到對比度標準。

4. 分別在 Dark Mode 和 Light Mode 環境下測試

產品上線前，需要分別在 Dark Mode 和 Light Mode 下進行測試，檢查是否有沒適配到或者其他不合理的情況出現，并在必要的情況下，對某些元素或內容進行單獨調整以提升整體的使用體驗。

5. 內容層級清晰明了

Light Mode 下利用陰影或者淺色卡片體現頁面層級，但在 Dark Mode 下陰影無法清晰地體現內容層級；因此采用不同亮度的白色疊加來實現清晰的層級效果，越亮則代表層級越高。

6. 讓用戶選擇切換模式

讓系統自動根據白天黑夜或者場景光線亮度來切換模式，看似提升了用戶體驗，減少了用戶操作步驟，但用戶可能會有非常強烈的失控感；產品需要做的是為用戶提供多一種選擇，而不是替用戶做出我們認為的好的選擇。

7. 考慮色彩情感因素

Dark Mode 和 Light Mode 代表了兩種不同的使用場景，兩種相反的背景色也對應著截然不同的色彩情感，因此與其努力讓兩種模式傳達一樣的調性，不如順應色彩本身的情感寓意，去打造更符合使用場景的視覺風格。

8. 符合 WCAG 標準

在 Dark Mode 下，也要像 Light Mode 一樣，清晰地傳達頁面信息，除文本類內容需要保持 15.8 : 1 以上的對比度外，其他元素或內容至少要與背景保持 4.5 : 1 的對比度，以保證視障人群也能正常地使用產品。

二、Dark Mode 相對于 Light Mode 發生了哪些變化

在當今 Dark Mode 漸漸成為 C 端產品標配的大環境下，許多產品都適配了 Dark Mode，但結果大多不盡人意，包括一些大廠出品的知名 APP，在 iOS 和 Android 兩端的同步工作都沒做好（沒錯，說的就是微信），Android 端的體驗與 iOS 端差別非常大。

來源：微信安卓版

下面我將從 Dark Mode 相對于 Light Mode 在頁面視覺上發生變化的幾個方面，分別討論在這幾個方面中，在具體的適配工作中需要注意的內容。

Dark Mode 相對于 Light Mode 主要是以下四方面發生了變化：

1. 層級：即背景，承載內容與元素的卡片、色塊等也歸為背景一類；
2. 文字：頁面內所有表達內容信息的中英文及數字；
3. 圖標：包含標簽欄、快速入口及功能圖標等；
4. 圖片：底圖、商品圖、Banner、空狀態插畫、引導頁等。

1. 層級

Dark Mode 和 Light Mode 都采用不同灰度的背景來代表頁面的不同層級。

在 Light Mode 下，一般采用淺灰色背景上疊加白色卡片的形式或給白色背景上的元素增加陰影的方式表現層級；Dark Mode 下則采用深色背景上疊加比背景色灰度更淺的卡片來表現層級。

1）蘋果/谷歌各自表現頁面層級的方式

蘋果的設計規范中，Dark Mode 的背景色分為兩種類型 ：Baes/Elevated（上圖左側最下方兩行顏色），Baes 中除了使用較為廣泛的純黑背景外，還有兩種略帶藍色相的 B 值分別 12 及 18 的深灰色。

Elevated 里面則是三種略帶藍色相的 B 值分別為 12、18、24 的深灰色，且這三種顏色所帶的藍色相飽和度也與 Base 有一些微小的差異?？偣擦N不同的背景色搭配四種不同透明度的白色（上圖中間一列最下方一行顏色），在我自己測試的過程中，運用這些色彩搭配設置的背景，在多個場景下都能夠比較好的表現層級以及從屬關系。

與蘋果不同的是，谷歌采用了不帶色相的深灰色，并在其上疊加規律變化的不同透明度的白色來體現層級關系，而且谷歌在體現層級時還使用了陰影，這也是谷歌不用純黑背景的原因，因為陰影在純黑色背景上會完全融入背景（加了和沒加一樣，還白白消耗性能）。

2）蘋果/谷歌各自的處理方式的優劣

蘋果采用純黑背景有兩個方面的理由，一是保證不管在白天黑夜，亮光及暗光環境下，頁面內容都能有較高的對比度來保證識別性，而且蘋果還有夜間模式作為 Dark Mode 的補充，做到了全場景覆蓋。

二是純黑背景能與黑色的手機邊框完美的融合，在 Dark Mode 下手機正面像是一個整體，用戶完全不會像 Light Mode 一樣注意到邊框的存在，能更專注地聚焦于內容。

而谷歌的處理方式相對蘋果而言，沒那么繁復，擁有較低的理解與使用成本，但也失去了蘋果擁有的較好的視覺觀感。并且陰影會和深色背景看起來融為一體（谷歌 Material Design 中使用了陰影，這是為了與 Light Mode 的設計理念與規范形成統一的整體，但沒有廣泛的被使用，從市場選擇也能看出，這并不是被主流所接受的做法），對于層級的劃分效果不如直接改變背景的顏色來的直接明顯。

3）建議

目前比較可行且廣泛適用的方法是在深色背景上，疊加不透明度的白色來實現層級的劃分，在屏幕 z 軸上，觀感上距離用戶越近的元素，白色不透明度越高，看起來也就越亮，代表這個元素或內容的層級越高（給用戶心理暗示，海拔越高，則距離光源越近，也就越亮）。

之所以不用純黑背景，是因為純黑色與白色的文字對比度太高，在暗光環境下直觀的視覺效果比較刺眼。用深灰背景可以最大程度覆蓋各種場景的使用體驗。

當然也可以參照蘋果，深色與夜間各做一套，但這種方式實現成本高了很多，在國內很多產品的 Dark Mode 只是加個黑色半透明蒙層的大環境下（比如某訊動漫的安卓版），這樣的做法成本高很多并且用戶不一定買賬，實在是有點得不償失。

2. 文字

UI 設計中的文字屬性主要為字族、字重、字色、字號以及其他屬性（字距、段距、行高、對齊方式），在適配 Dark Mode 時，文字內容的適配工作主要集中在字色上，其他幾種屬性的影響可以忽略不計。

例如字重， Dark Mode 中由于背景色的影響，文本內容會顯得比 Light Mode 稍微粗一點，但比例很小，一般的字體所包含的字重之間的粗細差異比由于深淺色背景影響所帶來的視覺上的字體粗細差異要大得多，除非像 SF 這種類型的包含二三十種字重的字體，能夠精準地體現這些微小的差異，從而完美的進行適配，其他包含較少字重的字體無法使用這種方法來體現差異性。

并且做中文設計與外文設計也有很大不同，中文字重基本沒有超過十種的，主流的設計字體的字重基本都在 5~9 種，粗細差異都很明顯，也無法依靠調整字重來體現這些微小的差異。

考慮到用戶側的屏幕質量參差不齊，再加上各種外接顯示器的強制放大縮小，很多時候即使花費了很大功夫進行細微調整，設計從業者都不一定看得出。

用戶由于對這些差異不敏感，以及設備造成的影響，完全感知不到調整了哪些地方，等于做無用功。

其他幾種文字屬性的調整也是同理。所以這里只討論文字顏色的適配方法。目前適配 Dark Mode 字色的方式有兩種：給固定顏色的文字設置階梯透明度以及設置不同灰度的不帶透明度的文字色。這兩種方式對應了不同的設計思路。

給文字設置階梯透明度，可以最大程度地在不同灰度的背景上清晰地顯示文本內容，文本內容顯示出來的顏色是由背景色加上文字本身的不透明色疊加而得到的，加上文本類內容本身與背景的對比度較高，因此不會出現文字與背景融為一體而導致無法識別的情況，保證了文本的可讀性。

所以一般的場景下（圖文疊加類除外）帶透明度的方式要優于不帶透明度的方式。

而給文字設置不同灰度的不帶透明度的文字色，是一個相對比較穩妥的做法。例如很多圖文視頻類產品中，都會在圖片上疊加一個半透明蒙層，蒙層上放置標題類的文本（參考微信公眾號的樣式），如果使用帶透明度的文字，由于完全無法預判創作者上傳的圖片是什么內容，導致文字與背景圖片的某些元素融在一起無法識別。

還有在某些 C 端的頁面中，經常會出現文字放置在彩色背景的情況，帶透明度的文字h和彩色背景結合的顏色會偏離原來的色彩。因此為了避免這種情況出現，使用不帶透明度的文字，是一個相對更優的選擇，例如微信在文字顏色的使用上，就采用了不帶透明度的方式。

在實際的項目中，可以結合上述兩種方法的優點，在除了圖文疊加的場景下使用帶透明度的文字，在圖文疊加的場景中，使用不帶透明度的文字，兩種方式結合使用，提升文本類內容的可讀性。

不過這種做法有個缺點：在很大比例的項目中，如果前期沒考慮到 Dark Mode 文字適配的情況下，前端不太可能會將文字與圖片是否疊加，作為寫兩種字體樣式的理由。如果要結合上述兩種方法的優點，完美地適配文本類內容，就需要前端去調整之前的代碼，一個個地改，前端同學可能會有比較大的抗性。

因此在實際項目中，需要因地制宜，采取最適合自家產品的策略。

ps：給文字加點色相可以直觀地提升閱讀體驗目前市面上許多產品都采用了這種方式，基本已經成為了 UI 設計中的常規操作，包括最新的 iOS 15 設計規范，都為文字帶上了少許藍色相，而不是不帶色相的純灰色。

之所以帶色相，是因為相對于純灰的文字，帶有藍色相的文字比純灰色視覺觀感要好，顯得更有活力，不會像純灰色一樣灰撲撲的，視覺觀感比較死板。下方的兩張圖可以直觀地感受出文字是否帶色相之間的差異。

從圖片中可以看出，上方帶有色相的文字比下方不帶色相的文字，在深淺色背景下的直接閱讀體驗都要好，在文字本身顏色的明度不變的情況下，根據文字在頁面中的權重劃分，帶上不同數值的藍色飽和度，是在適配 Dark Mode 的過程中，低成本的直觀提升體驗的好辦法。

3. 圖標

因此在實際的 Dark Mode 適配過程中，為本身字色為中性色的文字帶有一點藍色相，是一個低成本的直觀提升體驗的好辦法。

下面這張圖可以明顯的看出，頁面中間的八個圖標在 Light Mode 中表現較好，線性圖標較好地描繪了所表達的圖形輪廓，與頁面融合的較為和諧，但在 Dark Mode 中圖標比較顯眼，線條感比較足，有一種鏤空感，而不是像 Light Mode 一樣表現的像是一種形狀。

造成這種感覺的原因是人眼在在黑白背景下成像的邏輯不同。

人眼大部分時間下都處于亮光狀態下，對于形狀的辨識取決于物體的大概輪廓，然后再去查看細節。對于一些帶有明顯輪廓的物體，在亮光環境下，人腦會自動將輪廓線條之內的空間進行填充，我們在查看頁面內的線性圖標時，會默認圖標內部空白的區域是被填充的狀態。在暗光環境下，圖標輪廓內的空白區域要明顯暗于圖標輪廓本身，人腦會默認暗色的空白區域是鏤空的。

所以對于線性圖標而言，淺色背景下我們默認是填充的，而深色背景下默認是鏤空的，再加上目前市面上多數產品對于深色背景與文字的對比度把控的不夠好的原因，使得淺色背景上線性圖標的觀感遠遠好于深色背景。

下方這張圖可以明顯的看出人眼在黑白環境下成像的差異。左側 Light Mode 下的圖標，用線條勾勒出笑臉的形狀，我們默認黑色圓圈內的空白區域是臉，是有內容填充的，而黑色的眼睛和嘴巴才是鏤空的。

將圖標由 Light Mode 轉到 Dark Mode，僅做反色處理，下圖中間的笑臉會明顯給人感覺很怪異，嘴巴像是唐老鴨的感覺，是有填充的，眼睛也是有填充的，空白區域的臉部才像是鏤空的。

原理就是上面提到的，在暗光環境下，人眼會默認更亮的區域被填充，而較暗的區域是鏤空的。如果將深色背景中的圖標轉換為面性圖標，例如下圖中右側的圖標，觀感與第一個圖標是統一的，都是眼睛與嘴巴鏤空，而臉部被填充。這樣的展示方式最符合人的直覺，也是 Dark Mode 下圖標設計需要格外注意的一點。

最近新出的 iOS 15 也體現了這種思路，將之前 Dark Mode 中的線性圖標基本都替換為了面性圖標。其中未使用面性的幾個圖標，原因應該是表意足夠明確，并且略微復雜，不適合用面性表現，如果使用簡單的別的面性形狀表現，則改變了用戶以往對這個圖標所代表的功能的認知，所以沒有做替換。

在 Dark Mode 中的面性圖標，除中性色圖標外，還有各存在于不同場景中的不同類型與規格的彩色圖標。

淺色背景中的彩色面性圖標，一般情況下多用于快速入口、標簽欄以及 CTA 按鈕等，用色一般都比較鮮艷，飽和度較高，與淺色背景的對比度較高，以此來吸引用戶的注意力。

但在深色背景中，飽和度較高的彩色與深色背景的對比度較低，導致識別性較差，這也是 Dark Mode 的八個設計準則中提到的不建議用高飽和度色彩的原因。

彩色面性圖標在深色背景上想要有較好的視覺觀感，可行的辦法是降低色彩飽和度，明度適當降低，色相不做改變，能夠很大程度上的保證顯示效果。

例如下圖 QQ 的列表頁，在 Dark Mode 中降低了彩色面性圖標的飽和度及明度，保持了一定的對比度的同時，整體的觀感比較和諧，并且識別性也比較高。

4. 圖片

關于 Dark Mode 中圖片適配的做法，我們先來看一個反面案例。

下圖 Light Mode 中，淺色背景與淺色圖片能夠較好地融合，不會顯得特別突兀，并且中間有播放按鈕，用戶能清晰地明白當前場景下，元素所表達的含義，頁面看起來比較和諧。

切換為 Dark Mode 之后，白色圖片變成了整個頁面中最吸引視線的內容，其他的內容在頁面中的權重，相當于被弱化掉了，這并不是我們想要的結果，如果一張一張的去重新做圖片，對于一些以圖文為主的產品來說成本實在是太高了，如果不換圖片，所有包含圖片、視頻以及 banner 的頁面，視覺效果都會大打折扣，這也是 Dark Mode 適配的另一個難點。

目前在 Dark Mode 的適配中，處理圖片類內容的方法有三種。

一是圖片重做一遍，效果最好但也最費事費力，除非是有錢有閑的大公司，不然基本沒人考慮用這種方式。

二是使用工具對圖片進行批量化的智能處理，阿里做 Dark Mode 的適配時，由于是電商產品，商品圖非常多，所以開發了一款產品叫 ”頑兔“ （下圖），利用智能算法摳圖，把商品圖摳出來，然后略微加一點黑色遮罩，以實現 Dark Mode 的適配，不過這種方式適用范圍不廣，對于一些banner圖、復雜的商品圖以及視頻入口的圖片，這種方式基本是沒辦法解決的。

三是直接在原來的圖片上加一層黑色遮罩，降低圖片的亮度，相對于前兩種方式，這種方式對于設計與開發來說基本等于沒有工作量，但缺點也比較明顯，直接加遮罩會顯著降低圖片的視覺觀感，拉低圖片質量。

在實際項目中，需要根據產品本身的特性，選擇最適合當前產品的適配策略，并且需要在進入設計開發前，就做好對應的調研分析，采取投入產出比最大的方式來進行落地。

三、其他問題

適配 Dark Mode 的過程中，開發的做法是根據元素的屬性，統一進行變換。相同屬性的元素，可能會在不同的頁面中出現，開發只需要為原來的樣式，另外定義一個色值，就能實現深淺色模式的轉換。而不是我們憑直覺的以為開發也要一個頁面一個頁面的去改樣式。

所以在整體進行適配的過程中肯定會有一些細節的頁面或者元素，可能由于種種原因并沒有使用定義好的樣式，而是使用了獨立于定義好的樣式之外的樣式，這種頁面或元素，在適配的時候就會被忽略掉。因此我們需要在適配前就統計好頁面數量，并在開發完成后根據統計好的頁面一一查驗，保證不會出現遺漏。

不然就會出現下面這種情況。

四、可參考的競品

在實際項目中進行適配的時候，除了事先了解各類注意事項以外，這里提供幾個Dark Mode做的比較好的 C 端產品供大家參考：

優酷、愛奇藝、抖音、釘釘、Facebook、奈飛、ins。

最后，希望大家在做Dark Mode相關工作的時候都能有個好心情[微笑]。

本文由@青色 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議