微信深色模式怎麼樣?做法很蘋果

一個有數億用戶的產品,每一個小調整分量都不輕,都要慎之又慎。同時,你做的每一個決策,都意味著要站在其中一部分用戶的對立面,因為你滿足不了所有用戶的需求。所以,這就是設計師的壓力與挑戰。

接下來,我們先來總結一遍微信的深色模式。首先是分析一遍它使用的背景色。

微信深色模式怎麼樣?做法很蘋果

背景色純灰色,有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 之前的夜間版本一樣將整體環境完全壓暗。

你看,真是一個讓人矛盾的過程……


分享到:


相關文章: