真假?微信 Dark Mode 設計不合規范?

1 評論 3751 瀏覽 6 收藏 18 分鐘

編輯導語:如今,微信已經成為了大家日常必備的社交軟件,無論是方便程度還是用戶體驗,給大家的體驗感都不錯。在吵得沸沸揚揚之后,iOS版的微信“暗黑模式”終于來了。本文作者帶著我們體驗微信的細節,看微信 Dark Mode 的設計到底規不規范。

前段時間在研究 Dark Mode,業余時間把微信各頁面截屏測了一下文本色彩對比度。

關于這一項指標的合格與否,目前國際通用的參考標準就是前言里這套 WCAG 2.0,這是一套由威斯康辛大學麥迪生分校、W3C(萬維網聯盟)、谷歌等機構研究人員于2008年12月11日編撰發布的web內容無障礙設計指南。

它定義了多項關于聽覺、視覺、交互行為等層面的技術標準,能夠使殘障人士可以順利的訪問網頁并成功獲取內容。這些標準被量化為AAA、AA、A三種成功等級,如設計都不符合則被認為是Fail。

我們通過各種在線對比度測試工具得出的 AAA、AA、AA18、DNP 這些結果就是整個體系的一部分,感興趣的同學可以了解 W3C 授權的譯本和原文。

真假?微信Dark Mode設計不合規范?

上面圖例中4個標簽分別對應AAA(對比度不低于7:1)、AA (對比度不低于4.5:1)、AA18(對比度不低于3:1)、紅點(未通過)4種狀態描述。其中AA18需滿足大文本字號的條件,至少為18pt或14pt加粗。

回到標題,我們來放大看看微信的細節。圖挺多,下面只放部分關鍵頁面的色彩對比度測試結果,可供大家參考微信不同層級信息的設計邏輯,以及來看看到底有哪些地方未通過WCAG 2.0規范。

真假?微信Dark Mode設計不合規范?

真假?微信Dark Mode設計不合規范?

真假?微信Dark Mode設計不合規范?

真假?微信Dark Mode設計不合規范?

真假?微信Dark Mode設計不合規范?

真假?微信Dark Mode設計不合規范?

真假?微信Dark Mode設計不合規范?

真假?微信Dark Mode設計不合規范?

真假?微信Dark Mode設計不合規范?

真假?微信Dark Mode設計不合規范?

真假?微信Dark Mode設計不合規范?

真假?微信Dark Mode設計不合規范?

真假?微信Dark Mode設計不合規范?

真假?微信Dark Mode設計不合規范?

真假?微信Dark Mode設計不合規范?

真假?微信Dark Mode設計不合規范?

真假?微信Dark Mode設計不合規范?

真假?微信Dark Mode設計不合規范?

真假?微信Dark Mode設計不合規范?

大眼看過去,好多小紅點!

細看對照結果發現,除了次級輔助說明、input-box提示文本、置灰狀態文本以外,其中仍有多處對比度小于3:1的文本,未通過WCAG 2.0標準。我相信微信團隊一定有過審慎的考量,具體原因咱也不敢問,咱也只能從設計角度去逐層探討。

話說回來,WCAG 2.0本質上是一份包容性設計指南,并不是規范紅線,遵循這些原則,web內容更容易為廣大殘疾人士所接受,也可讓普通用戶更容易訪問。

反過來想,微信以內容傳播為主的產品屬性決定了它的文本層級是豐富的,如果所有文本都符合AA18以上的成功標準(即對比度≥3:1),勢必會導致層級(尤其是輔助說明文案)扁平化,而拉不開視覺優先級,變相增加了頁面中的信息密度。

猜測還有一種可能性是WCAG 2.0修訂于2008年,彼時的屏幕分辨率遠低于現在的326ppi、458ppi,因此今天的設備在相同物理尺寸下顯示更多像素,增強了清晰度和識別性,所以犧牲了對比度。

因此真的有必要完全遵循這套標準嗎?似乎不是,那我們需要遵循什么呢?

說到底,我們探討對比度這項參數,除了體現設計關懷以外,更多是可以用來研究信息層級。既然聊到層級,那就不能放過上面微信深/淺兩種模式的對照組了。

真假?微信Dark Mode設計不合規范?

大腦趨向于認為同一個頁面中相同位置的信息,無論在什么色彩模式/主題皮膚下的層級都應該是一致的,意味著這些文本信息在深/淺兩種模式下的對比度應該一致或相似,或至少處于同一個成功標準(WCAG 2.0)。

但即便微信這樣的國民產品,尚存在深/淺兩種模式下對比度不在一個成功標準的情況,我認為依然存在優化的空間,具體位置參照上圖中加★的標注(更多加★標注可以上滑看組圖)。

一、由對比度引發的思考

一定會有人跳出來說“我覺得微信夜間模式很好用啊,對比度比蘋果自帶的柔和多了,一點都不刺眼!”沒錯,對比度降低是可以在弱光環境下起到一定護眼作用,減少眼睫狀肌的過度收縮,減緩視覺疲勞。

這也大概率是微信為什么沒有遵循iOS建議的深色模式配色標準,嚴格地說,微信Dark Mode做的是夜間模式,而蘋果Dark Mode做的是主題風格。

玄學,就玄在這個地方。

真假?微信Dark Mode設計不合規范?

蘋果很聰明,iOS 13的Dark Mode在去年發布的時候,官方并不曾說這是夜間模式,官網給出的文案也模棱兩可,很容易讓人理解為這就是蘋果的夜間模式。

但其實早在2016年iOS 9.3就已經加入了夜覽功能,那時候沒有深色模式,這個所謂“夜覽”開啟以后屏幕會點亮一層暖色背光,由于是物理實現,所以截屏無法看到。我用加溫濾鏡大概模擬了一下,效果是這樣。

真假?微信Dark Mode設計不合規范?

對比度降了嗎?

——不好說。

護眼嗎?

——護。

暖光可以有效過濾400~450nm的短波藍光,減少這些高能量光對視網膜黃斑區的損害,我們平時配眼鏡用的抗藍光鏡片,也是這個原理。只是我們在白天很少接觸到這個波段的藍光,所以多半情況下,“護眼”模式就被曲解成了“夜間”模式,其實并不絕對。

所以要怎么理解蘋果的做法?公認iOS深色模式的最大賣點是節能,因為像素點在顯示純黑的時候不發光。猜測蘋果也不會官方發布另一套弱對比的“夜間護眼模式”,那樣等于推翻了之前的產品策略,自己打臉。

至于你們要的“夜間護眼模式”,你們就用“深色模式+夜覽”自己發揮一下吧,反正iOS系統應用也都是工具類APP,20秒用完即走,對吧?所以深色模式、護眼模式、夜間模式,你們仨互相認識嗎到底?

這是整件事最玄的地方。

二、情境

之所以玄,是因為邏輯在同一個次元里無法自洽。

iOS的深色模式是黑底白字的主題皮膚,是兼顧了日夜場景的強對比潮流風格;iOS的護眼模式是增加背光暖屏;iOS的夜間模式是把前兩者相加。

微信的深色模式是灰底灰字的設計風格,一定程度上護眼,一定程度上適合夜間。為什么要加“一定程度”?因為關于這事你要是去問眼科醫生,他一定會告訴你夜里盡量少看手機,如果一定要看,建議在床頭開一盞暖黃小燈。

拆解到這里,我們會發現深色模式、護眼模式、夜間模式,其實就像三種語言,各有自己適用的情境,彼此之間時而包含時而交叉,像不同次元的人在同一個時空偶遇,平行宇宙一樣。如果試著簡要概括一下各個情境下的屬性和差異,結論大概是這樣:

  • 深色模式:是一種以省電為核心優勢的主題風格,視覺體驗獨特,使用較強的色彩對比度以保證在強光環境下也能輕松識別內容。在該模式下需要滿足護眼的設計標準,或保留護眼參數的配置入口。
  • 夜間模式:為夜間及弱光環境而設計的深色基調界面,使用推薦尼特值范圍的背景色與前景色(可參考騰訊ISUX之前總結過的一套設計方法),使用較弱的色彩對比度降低對眼睛的刺激,達到護眼目的。
  • 護眼模式:需要同時兼顧日夜的強弱光環境影響,采用符合要求的顯示屏和較弱的屏幕亮度、色彩對比度以滿足降頻閃、抗藍光等護眼需求,在深/淺兩種模式下都需要考慮護眼的需求。

真假?微信Dark Mode設計不合規范?

三、色彩語言

厘清三者之間的脈絡,就能快速抓取我們需要的情境設計準則,這有助于我們在不同模式下更準確地定義信息結構如何組織、視覺層級如何表現。而在決定層級關系的諸多因素中,色彩是一項關鍵因子。

蘋果在其開發者網站中提供了iOS 13的UI Design Resources源文件,在調取深/淺兩種模式下的色值之后,我們可以細究蘋果的色彩配置特點。

真假?微信Dark Mode設計不合規范?

這一版本的微信,尤其在有彩色體系上并沒有采用蘋果的建議配色,也沒有使用分級調節透明度、添加背景色遮罩等操作,而是推出了一套獨屬的色彩語言。

微信還是心思很細膩地將icon體系的有彩色做分級處理,通訊錄tab內的4大功能入口icon是面型,層級和視覺分量要遠遠高于發現tab和我tab內的線性icon,所以在深/淺兩種模式下保持統一的色值,保留他們的色彩識別性,避免用戶產生視覺記憶斷層,影響功能引導。

而其他tab的線性icon是對文本標題的輔助表達,只作語義化說明,層級非常弱,因此在深/淺兩種模式下配置了兩套適合環境氛圍的色值。我們看下部分有彩色組件的樣本取色結果(色值來源于截屏,非官方),品一下其中的設計邏輯。

真假?微信Dark Mode設計不合規范?

真假?微信Dark Mode設計不合規范?

真假?微信Dark Mode設計不合規范?

真假?微信Dark Mode設計不合規范?

真假?微信Dark Mode設計不合規范?

全局看兩套配色的差異還是挺大的,比iOS 13的明顯多了。“朋友圈”icon的8種顏色甚至連色相都可以不一樣。

仔細對照還能發現一些端倪,比如“搜一搜”和“支付”icon在深/淺兩種模式下的色值完全一樣,而其他的icon色值在兩種環境中都不同;以及“收藏”和“卡包”icon的藍色色值在淺色模式下不統一。

很難說微信是刻意為之還是規范沒有維護好,如果有微信的朋友看到這里,希望可以多多糾錯,大家也可以接著這個話題繼續往下思考。

四、最后

本期聊了這么多,從WCAG 2.0概述開始引出微信深色模式下色彩對比度的設計分析;順著這個話題挖掘深色模式、夜間模式、護眼模式三者的定位差異和情境設計準則;最后回到微信的設計,聚焦色彩體系在深色模式下的層級表達特點。

看似涵蓋了很多維度信息,其實對比度也好,情境也好,色彩也好,實際都是圍繞一個問題在兜轉:產品的結構邏輯、組織原則和信息層級關系。在深色模式這個話題啟動之前,有朋友勸過我慎寫,如果要挨個產品逐層拆解,掰開揉碎了講,真的夠寫上半個月。

做過Dark Mode或者將來要做的朋友,希望本期內容可以為你們提供一些不一樣的思路,在深色、夜間、護眼三種情境中找出適合自己產品訴求的設計方向,或許是提高整體效率的第一步。

 

譯本:www.w3.org/Translations/WCAG20-zh/

原文 – www.w3.org/TR/WCAG20/

本文由 @賞酒二兩 原創發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自 Unsplash,基于CC0協議

給作者打賞,鼓勵TA抓緊創作!
更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 文章很棒

    回復