2020-3-27 資深UI設(shè)計(jì)者
微信在3.23號(hào)上線了傳聞已久的 「暗黑版」,用來(lái)適配 iOS 的深色模式,相信不少同學(xué)已經(jīng)安裝并體驗(yàn)上了,如果還沒(méi)安裝的可以看看下面圖例。
微信每有一次大動(dòng)作都會(huì)引發(fā)全網(wǎng)性的討論,而針對(duì)設(shè)計(jì)上的調(diào)整,往往只會(huì)迎來(lái)一片罵聲。比如我們看看知乎中討論的內(nèi)容,感覺(jué)民憤都快壓抑不住了。
但我們先別急著參與網(wǎng)上的聲討,現(xiàn)在站在設(shè)計(jì)師的角度,來(lái)評(píng)價(jià)一下遲到的微信深色模式。
很多人會(huì)把深色模式和夜間模式搞混,這里必須強(qiáng)調(diào)這是兩種不同的模式,所以我們要對(duì)還沒(méi)搞清楚狀況的同學(xué)先做一個(gè)掃盲(最近掃盲好像搞的比較多…)。
先說(shuō)夜間模式,是一個(gè)專門(mén)針對(duì)夜晚環(huán)境適配的設(shè)計(jì)版本。騰訊的 ISUX 團(tuán)隊(duì)之前做過(guò)調(diào)研,有 71.1% 的用戶習(xí)慣在夜間不開(kāi)燈看手機(jī)。
如果在深夜漆黑的房間中看手機(jī)屏幕,對(duì)我們的健康有非常大的損害,不僅表現(xiàn)在對(duì)視力的傷害上面,視網(wǎng)膜和神經(jīng)元容易受損,同時(shí)主流的研究項(xiàng)目還表明會(huì)這會(huì)抑制我們褪黑素的分泌造成失眠。
所以,夜間模式,是一個(gè)用來(lái)降低屏幕對(duì)用戶傷害,提升夜間使用體驗(yàn)的特殊模式。
通常,夜間模式會(huì)采取 降低尼特值、減少對(duì)比度、降低色彩明度、增加深色遮罩的方法,比如之前 QQ 官方的夜間模式示意圖,大家感受一下,是不是有內(nèi)味兒了?
這里提一下尼特這個(gè)概念,尼特是用來(lái)說(shuō)明亮度的術(shù)語(yǔ),1nit=1坎德拉/平方米。是現(xiàn)在各大手機(jī)發(fā)布會(huì)中介紹屏幕的時(shí)候都要強(qiáng)調(diào)的參數(shù)之一,因?yàn)槟崽刂翟礁?,證明在戶外大白天的環(huán)境中屏幕內(nèi)容可以越清晰,而夜間模式做的就是用來(lái)降低顯示亮度尼特值的。
然后再解釋一下蘋(píng)果的深色模式,蘋(píng)果的 DarkMode,并不是一個(gè)專門(mén)面向深夜環(huán)境的模式。官方對(duì)此版本的解釋,詳見(jiàn)我們翻譯的 iOS 官方文檔中 112 頁(yè)。
這是一個(gè)面向全天候的視覺(jué)風(fēng)格,同時(shí)通過(guò)深色背景的對(duì)比,來(lái)加凸顯圖片、文字內(nèi)容。包括上面那種官方的配圖,大家應(yīng)該就能感覺(jué)到主體元素比白色模式下更凸出,更激烈。
所以了解了這兩個(gè)模式的區(qū)別,我們才能好好展開(kāi)對(duì)微信深色模式的討論。
接下來(lái),我們先來(lái)總結(jié)一遍微信的深色模式。首先是分析一遍它使用的背景色。
背景色純灰色,有3個(gè)等級(jí)的灰度。熟悉我的都了解,看色彩的奧秘,靠16進(jìn)制代碼和 RGB 那是分析不出個(gè)什么所以然的。如果我們把它們轉(zhuǎn)化成 HSB 一看,規(guī)律性就來(lái)了。
背景色從深到淺色的灰度值 B 值分為 10、14、18,是不是朗朗上口。應(yīng)用的層級(jí)雖然和官方規(guī)范一樣使用了三級(jí),但是設(shè)置和官方的不同。
然后再看看其中使用的其它配色,其中主色保持了不變,其它應(yīng)用到圖標(biāo)色彩,都進(jìn)行了明度的調(diào)整,比如下圖案例。
再看看文字的用色,也是純灰色,標(biāo)題使用 B:85,正文使用 B:65,注釋使用 B:35(主要用色)。
而官方使用的文字色彩中,卻并不是純灰色,除了第一級(jí)的白色以外,其它灰階的文字是由帶有藍(lán)色色相的色彩通過(guò)降低透明度來(lái)呈現(xiàn)的。
對(duì)中性色增加藍(lán)色色值是一個(gè)常規(guī)操作,可以讓這種灰色看起來(lái)有一點(diǎn)活力,不會(huì)像純灰色那么單調(diào),不過(guò)這次微信明顯在文字的應(yīng)用上更保守,一點(diǎn)色相也沒(méi)有給。
這次微信被大面積吐槽的,就是顏色的應(yīng)用上和官方的規(guī)范不一致,作為從業(yè)人員直接開(kāi)噴是相當(dāng)不專業(yè)的(最起碼要先走個(gè)形式),這就是我要分析的重點(diǎn)了。
要說(shuō)微信的 UED 團(tuán)隊(duì),專業(yè)性肯定是國(guó)內(nèi)最頂尖的,你們網(wǎng)上所有看過(guò)有關(guān)交互的方法論、可用性測(cè)試的分享, 他們肯定都有做過(guò),而且執(zhí)行得更專業(yè)。
直接用官方規(guī)范的黑底白字模式,微信團(tuán)隊(duì)不可能沒(méi)有出過(guò)這樣的方案。但很明顯,這個(gè)方案最后被斃了,上了我們看見(jiàn)的這個(gè)版本,雖然不知道以后會(huì)不會(huì)變。
再看看下面官方發(fā)的一條微博。
其中已經(jīng)提及了,是和蘋(píng)果 「共同探索」 出來(lái)的方案,這是非常耐人尋味的。也就是說(shuō),這個(gè)不用官方的模式是蘋(píng)果團(tuán)隊(duì)也通過(guò)的。
那么為什么要做的不一樣呢?沒(méi)有內(nèi)幕消息,就根據(jù)自己的經(jīng)驗(yàn)來(lái)判斷一下。
我自己認(rèn)為的一個(gè)非常重要的原因,就是對(duì)于 「夜間模式「 的兼容。前面不是講暗黑模式和夜間模式不一樣嘛?為什么微信的暗黑模式又去兼容夜間模式了。
這里面有幾個(gè)小彩蛋,首先就是官方對(duì)深色模式的態(tài)度,在我看來(lái)越來(lái)越曖昧了。比如在顯示與亮度設(shè)置頁(yè)面里,有一個(gè)自動(dòng)設(shè)置外觀 —— 日出前保持深色外觀的功能。這樣,就等于默認(rèn)將深色模式和夜間模式掛鉤。
還有,如果過(guò)去我們沒(méi)有整理 iOS13 的翻譯,就不會(huì)發(fā)現(xiàn),上面我們展示的那句專注于內(nèi)容的解釋,現(xiàn)在在官網(wǎng)已經(jīng)被刪掉了(你品,你細(xì)品)。
再說(shuō)關(guān)于用戶認(rèn)知的問(wèn)題上面,在 UI 群體中,能了解暗黑模式和夜間模式是不一樣的可能就只占 10 分之一,那么對(duì)于普通用戶來(lái)說(shuō),這個(gè)情況就更不樂(lè)觀,能有 1% 的用戶了解這個(gè)概念就不錯(cuò)了。所以,絕大多數(shù)用戶會(huì)直接認(rèn)為暗黑模式就是夜間模式。
如果暗黑模式直接當(dāng)成夜間模式用,在深夜的環(huán)境里,觀感會(huì)特別差,因?yàn)?—— 明暗對(duì)比度過(guò)高。
如果在黑底中直接用白字,那么可以說(shuō)屏幕的文字和背景的對(duì)比度就是 100(HSB中 B 的差值),在一個(gè)漆黑的環(huán)境中會(huì)非常應(yīng)驗(yàn) 「讓內(nèi)容脫穎而出」 的效果,刺激性會(huì)非常強(qiáng)烈,文字將變得非常尖銳,比如 QQ 暗黑模式,大家可以在被窩里打開(kāi)下面這張圖感受一下。
新的深色模式版本中,文字和背景的對(duì)比度基本控制在 50 左右,降低了一半。
并且,中英文字形在正負(fù)形上的差異(簡(jiǎn)單理解就是中文筆劃更復(fù)雜),這個(gè)感覺(jué)會(huì)更強(qiáng)烈。比如我們用一個(gè)公眾號(hào)頁(yè)面舉例,使用純黑底白字,采用相同字號(hào)的中英文,看看顯示的效果。
還有,純黑背景色和白色的對(duì)比度,會(huì)根據(jù)屏幕的類型和參數(shù)不同而有不一樣的感受,比如蘋(píng)果從 X 后旗艦機(jī)型使用 OLED 屏幕,純黑色區(qū)域?qū)⒉粫?huì)發(fā)光,進(jìn)一步擴(kuò)大對(duì)比度,使得文字變得更尖銳,更讓人難以接受。
如果不是使用 OLED 屏幕的同學(xué)光看一個(gè)案例可能很難受,所以我們用純黑的案例來(lái)對(duì)比一下現(xiàn)在的狀態(tài)。
是不是發(fā)現(xiàn)明顯在夜間的情況下黑白模式并不如另一個(gè)模式看起來(lái)舒適?而這種不舒適的差別并不會(huì)隨著屏幕亮度降低而變化。
所以色彩并沒(méi)有符合官方的原因,我的判斷就在大環(huán)境中無(wú)法割裂夜間和深色模式的區(qū)別,同時(shí)也要讓深色模式更適應(yīng)夜間環(huán)境,做出了調(diào)整。而又因?yàn)樗皇钦嬲囊归g模式,所以對(duì)比度也不能像 QQ 之前的夜間版本一樣將整體環(huán)境完全壓暗。
你看,真是一個(gè)讓人矛盾的過(guò)程……
最后再簡(jiǎn)單討論一個(gè)問(wèn)題,為什么深色模式來(lái)得這么晚。很多用戶一直嘲諷,不就是換一套皮膚的事嘛,為什么就是不上線。
外行可以看熱鬧,但是如果是從業(yè)人員就應(yīng)該知道,微信這種體量的應(yīng)用,上線深色模式絕對(duì)不是一個(gè)非常容易的事情。
適配黑暗模式首先需要使用蘋(píng)果新的 iOS 13 SDK(開(kāi)發(fā)者工具)進(jìn)行編譯,等于應(yīng)用中有大量的代碼需要調(diào)整,而這種升級(jí)調(diào)整的結(jié)果還會(huì)導(dǎo)致沉重的測(cè)試壓力。有經(jīng)歷過(guò) Darkmode 開(kāi)發(fā)的團(tuán)隊(duì)?wèi)?yīng)該都知道這絕對(duì)不是改改顏色就能上線的皮膚。
再看到知乎另一個(gè)回答中提到的:
另一方面點(diǎn)大家隨便聽(tīng)聽(tīng)。使用 iOS 13 SDK 之后,Apple 要求 VoIP 推送必須使用 CallKit,否則應(yīng)用程序會(huì)被終止。而由于眾所周知的原因,CallKit 在中國(guó)大陸是無(wú)法使用的,這樣的改動(dòng)會(huì)降低微信語(yǔ)音電話的體驗(yàn)。
原文地址:https://www.zhihu.com/question/378027349/answer/1069072154
再者,拋去大量用戶體驗(yàn)調(diào)研相關(guān)的工作,微信整個(gè)生態(tài)對(duì)于暗黑模式的不友好可以說(shuō)是無(wú)解的。比如說(shuō)公眾號(hào),有大量公眾號(hào)內(nèi)部的標(biāo)題、分割線、引用語(yǔ)句是用圖片做上去的,而圖片還用的是白底(透明底黑字的也有),于是現(xiàn)在就產(chǎn)生了災(zāi)難性的閱讀體驗(yàn)。
比如我的公眾號(hào):超人的電話亭,其中文章展示的截圖。
而且因?yàn)楣娞?hào)發(fā)出去是不能修改的,只能刪除,那么這部分存量文章將無(wú)法更改,體驗(yàn)也無(wú)法扭轉(zhuǎn)。而且公眾號(hào)還支持文字色彩等自定義,那么你在白色背景下添加的顏色,可不會(huì)直接適配深色模式,尤其是官方也不可能輕易直接給你們 「適配」 掉。
而在夜間模式,正常訪問(wèn)的文章網(wǎng)頁(yè),也和公眾號(hào)會(huì)很像,但是打開(kāi)以后是白色背景的話,統(tǒng)一的體驗(yàn)在哪里?
再者還有小程序,小程序雖然也可以通過(guò)微信官方提供小程序的深色模式適配文檔,對(duì)應(yīng)的 SDK,但是小程序不是 APP,其中有大量小程序開(kāi)發(fā)后是缺少維護(hù)的。
因?yàn)榫€下門(mén)店通過(guò)外包方做好一個(gè)小程序上線以后,沒(méi)特殊的原因不會(huì)直接去更新它,那么這部分小程序的升級(jí)適配無(wú)從談起,會(huì)出現(xiàn)打開(kāi)小程序一個(gè)白一個(gè)黑的窘境。
最后,再講一個(gè)微信里最高頻使用的功能 —— 發(fā)表情。深色模式直接造成大量自定義表情報(bào)廢,無(wú)法正常顯示的問(wèn)題,比如看看下面我自己發(fā)的表情。
前面提到的,都是不能解決的問(wèn)題,這就是做深色模式的挑戰(zhàn),因?yàn)橛脩?UGC 內(nèi)容是不可控的,官方不可能通過(guò)算法直接幫用戶強(qiáng)行 「適配」。
而這些,就是做深色版的難點(diǎn)。
以上總結(jié)內(nèi)容多數(shù)為主觀分析,純粹站在 UI 設(shè)計(jì)師角度進(jìn)行專業(yè)解讀,不帶入個(gè)人立場(chǎng)。而一定要我自己評(píng)價(jià)的話,那就是 :趕緊把這模式給我移除??!
再順便提一點(diǎn)小感想,一個(gè)有數(shù)億用戶的產(chǎn)品,每一個(gè)小調(diào)整分量都不輕,都要慎之又慎。同時(shí),你做的每一個(gè)決策,都意味著要站在其中一部分用戶的對(duì)立面,因?yàn)槟銤M足不了所有用戶的需求。所以,這就是設(shè)計(jì)師的壓力與挑戰(zhàn)。
文章來(lái)源:優(yōu)設(shè) 作者:超人的電話亭
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.wnxcall.com