科技改變生活 · 科技引領未來
科技改變生活 · 科技引領未來
編輯導語：如今，微信已經成為了大家日常必備的社交軟件，無論是方便程度還是用戶體驗，給大家的體驗感都不錯。在吵得沸沸揚揚之后，iOS版的微信“暗黑模式”終于來了。本文作者帶著我們體驗微信的細節，看微信 Dark Mode 的設計到底規不規范。
前段時間在研究 Dark Mode，業余時間把微信各頁面截屏測了一下文本色彩對比度。
關于這一項指標的合格與否，目前國際通用的參考標準就是前言里這套 WCAG 2.0，這是一套由威斯康辛大學麥迪生分校、W3C(萬維網聯盟)、谷歌等機構研究人員于2008年12月11日編撰發布的web內容無障礙設計指南。
它定義了多項關于聽覺、視覺、交互行為等層面的技術標準，能夠使殘障人士可以順利的訪問網頁并成功獲取內容。這些標準被量化為AAA、AA、A三種成功等級，如設計都不符合則被認為是Fail。
我們通過各種在線對比度測試工具得出的 AAA、AA、AA18、DNP 這些結果就是整個體系的一部分，感興趣的同學可以了解 W3C 授權的譯本和原文。
上面圖例中4個標簽分別對應AAA(對比度不低于7:1)、AA (對比度不低于4.5:1)、AA18(對比度不低于3:1)、紅點(未通過)4種狀態描述。其中AA18需滿足大文本字號的條件，至少為18pt或14pt加粗。
回到標題，我們來放大看看微信的細節。圖挺多，下面只放部分關鍵頁面的色彩對比度測試結果，可供大家參考微信不同層級信息的設計邏輯，以及來看看到底有哪些地方未通過WCAG 2.0規范。
大眼看過去，好多小紅點！
細看對照結果發現，除了次級輔助說明、input-box提示文本、置灰狀態文本以外，其中仍有多處對比度小于3：1的文本，未通過WCAG 2.0標準。我相信微信團隊一定有過審慎的考量，具體原因咱也不敢問，咱也只能從設計角度去逐層探討。
話說回來，WCAG 2.0本質上是一份包容性設計指南，并不是規范紅線，遵循這些原則，web內容更容易為廣大殘疾人士所接受，也可讓普通用戶更容易訪問。
反過來想，微信以內容傳播為主的產品屬性決定了它的文本層級是豐富的，如果所有文本都符合AA18以上的成功標準(即對比度≥3:1)，勢必會導致層級(尤其是輔助說明文案)扁平化，而拉不開視覺優先級，變相增加了頁面中的信息密度。
猜測還有一種可能性是WCAG 2.0修訂于2008年，彼時的屏幕分辨率遠低于現在的326ppi、458ppi，因此今天的設備在相同物理尺寸下顯示更多像素，增強了清晰度和識別性，所以犧牲了對比度。
因此真的有必要完全遵循這套標準嗎？似乎不是，那我們需要遵循什么呢？
說到底，我們探討對比度這項參數，除了體現設計關懷以外，更多是可以用來研究信息層級。既然聊到層級，那就不能放過上面微信深/淺兩種模式的對照組了。
大腦趨向于認為同一個頁面中相同位置的信息，無論在什么色彩模式/主題皮膚下的層級都應該是一致的，意味著這些文本信息在深/淺兩種模式下的對比度應該一致或相似，或至少處于同一個成功標準（WCAG 2.0）。
但即便微信這樣的國民產品，尚存在深/淺兩種模式下對比度不在一個成功標準的情況，我認為依然存在優化的空間，具體位置參照上圖中加★的標注（更多加★標注可以上滑看組圖）。
一定會有人跳出來說“我覺得微信夜間模式很好用啊，對比度比蘋果自帶的柔和多了，一點都不刺眼！”沒錯，對比度降低是可以在弱光環境下起到一定護眼作用，減少眼睫狀肌的過度收縮，減緩視覺疲勞。
這也大概率是微信為什么沒有遵循iOS建議的深色模式配色標準，嚴格地說，微信Dark Mode做的是夜間模式，而蘋果Dark Mode做的是主題風格。
玄學，就玄在這個地方。
蘋果很聰明，iOS 13的Dark Mode在去年發布的時候，官方并不曾說這是夜間模式，官網給出的文案也模棱兩可，很容易讓人理解為這就是蘋果的夜間模式。
但其實早在2016年iOS 9.3就已經加入了夜覽功能，那時候沒有深色模式，這個所謂“夜覽”開啟以后屏幕會點亮一層暖色背光，由于是物理實現，所以截屏無法看到。我用加溫濾鏡大概模擬了一下，效果是這樣。
對比度降了嗎？
——不好說。
護眼嗎？
——護。
暖光可以有效過濾400~450nm的短波藍光，減少這些高能量光對視網膜黃斑區的損害，我們平時配眼鏡用的抗藍光鏡片，也是這個原理。只是我們在白天很少接觸到這個波段的藍光，所以多半情況下，“護眼”模式就被曲解成了“夜間”模式，其實并不絕對。
所以要怎么理解蘋果的做法？公認iOS深色模式的最大賣點是節能，因為像素點在顯示純黑的時候不發光。猜測蘋果也不會官方發布另一套弱對比的“夜間護眼模式”，那樣等于推翻了之前的產品策略，自己打臉。
至于你們要的“夜間護眼模式”，你們就用“深色模式+夜覽”自己發揮一下吧，反正iOS系統應用也都是工具類APP，20秒用完即走，對吧？所以深色模式、護眼模式、夜間模式，你們仨互相認識嗎到底？
這是整件事最玄的地方。
之所以玄，是因為邏輯在同一個次元里無法自洽。
iOS的深色模式是黑底白字的主題皮膚，是兼顧了日夜場景的強對比潮流風格；iOS的護眼模式是增加背光暖屏；iOS的夜間模式是把前兩者相加。
微信的深色模式是灰底灰字的設計風格，一定程度上護眼，一定程度上適合夜間。為什么要加“一定程度”？因為關于這事你要是去問眼科醫生，他一定會告訴你夜里盡量少看手機，如果一定要看，建議在床頭開一盞暖黃小燈。
拆解到這里，我們會發現深色模式、護眼模式、夜間模式，其實就像三種語言，各有自己適用的情境，彼此之間時而包含時而交叉，像不同次元的人在同一個時空偶遇，平行宇宙一樣。如果試著簡要概括一下各個情境下的屬性和差異，結論大概是這樣：
厘清三者之間的脈絡，就能快速抓取我們需要的情境設計準則，這有助于我們在不同模式下更準確地定義信息結構如何組織、視覺層級如何表現。而在決定層級關系的諸多因素中，色彩是一項關鍵因子。
蘋果在其開發者網站中提供了iOS 13的UI Design Resources源文件，在調取深/淺兩種模式下的色值之后，我們可以細究蘋果的色彩配置特點。
這一版本的微信，尤其在有彩色體系上并沒有采用蘋果的建議配色，也沒有使用分級調節透明度、添加背景色遮罩等操作，而是推出了一套獨屬的色彩語言。
微信還是心思很細膩地將icon體系的有彩色做分級處理，通訊錄tab內的4大功能入口icon是面型，層級和視覺分量要遠遠高于發現tab和我tab內的線性icon，所以在深/淺兩種模式下保持統一的色值，保留他們的色彩識別性，避免用戶產生視覺記憶斷層，影響功能引導。
而其他tab的線性icon是對文本標題的輔助表達，只作語義化說明，層級非常弱，因此在深/淺兩種模式下配置了兩套適合環境氛圍的色值。我們看下部分有彩色組件的樣本取色結果（色值來源于截屏，非官方），品一下其中的設計邏輯。
全局看兩套配色的差異還是挺大的，比iOS 13的明顯多了?！芭笥讶Α眎con的8種顏色甚至連色相都可以不一樣。
仔細對照還能發現一些端倪，比如“搜一搜”和“支付”icon在深/淺兩種模式下的色值完全一樣，而其他的icon色值在兩種環境中都不同；以及“收藏”和“卡包”icon的藍色色值在淺色模式下不統一。
很難說微信是刻意為之還是規范沒有維護好，如果有微信的朋友看到這里，希望可以多多糾錯，大家也可以接著這個話題繼續往下思考。
本期聊了這么多，從WCAG 2.0概述開始引出微信深色模式下色彩對比度的設計分析；順著這個話題挖掘深色模式、夜間模式、護眼模式三者的定位差異和情境設計準則；最后回到微信的設計，聚焦色彩體系在深色模式下的層級表達特點。
看似涵蓋了很多維度信息，其實對比度也好，情境也好，色彩也好，實際都是圍繞一個問題在兜轉：產品的結構邏輯、組織原則和信息層級關系。在深色模式這個話題啟動之前，有朋友勸過我慎寫，如果要挨個產品逐層拆解，掰開揉碎了講，真的夠寫上半個月。
做過Dark Mode或者將來要做的朋友，希望本期內容可以為你們提供一些不一樣的思路，在深色、夜間、護眼三種情境中找出適合自己產品訴求的設計方向，或許是提高整體效率的第一步。
譯本：www.w3.org/Translations/WCAG20-zh/
原文 – www.w3.org/TR/WCAG20/
本文由 @賞酒二兩 原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基于CC0協議