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