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