微信黑暗模式終於來啦！UI設計細節完全分析及體驗

靜電說：它來啦！前一段時間傳的沸沸揚揚的蘋果與微信黑暗模式的糾葛，終於以微信適配iOS端告終。3月22日靜電一覺醒來，微信已經正式開啟了「暗黑」模式。不過，很多人也許發現不了，因為手機白天還是淺色模式，只有到晚上才會改為黑暗模式。

如何開啟微信黑暗模式？

首先，你必須更新到iOS端的微信7.0.12版本。然後，在白天，只有你手工開啟了「設置」>「顯示與亮度」菜單下的深色模式，它才有效果。至於安卓用戶，截止3月22日文章發佈的時間，官網依然沒有更新。安卓的小夥伴就再等等吧。開啟後效果如下：

這次的改動可以說是很全面的，幾乎所有的界面都進行了調整，包括聊天窗口，朋友圈文章，微信遊戲，幫助頁面，看一看等等，但是微信小程序則依賴開發者的適配，目前來看，還都是白色的。

不少小夥伴對於黑暗模式的設計還不是特別熟悉，接下來咱們通過微信設計細節的分析，來看看小夥伴們都能從微信的改變上學到什麼？

Tab菜單對比及顏色字號分析

請注意，以上內容為截圖取色，可能存在不準的情況。但是可以看到，微信在Tab背景上並不是使用的純白或者純黑色。在Tint顏色上，亮色模式和暗色模式的顏色也不一樣，這符合iOS 13 黑暗模式設計的規則定義。一般來說Tint顏色，黑暗模式下更亮一點。（左側色卡為淺色模式，右側為深色模式，下同）

另外，以上取色均沒有考慮透明度，在實際應用中需要考慮透明度的使用。而對於Tab背景來說，亮色模式和黑暗模式均沿用透明毛玻璃效果。

聊天列表頁面

左側色卡為淺色模式，右側為深色模式，均沒有考慮透明度影響。

圖標顏色分析對比

在聊天列表，通訊錄列表頁面，系統圖標在兩種模式下的顏色均保持一致，未做改變。

但在發現頁面中，列表左側的icon顏色則有略微變化。總體來說，黑暗模式下比亮色模式下的圖標顏色更「亮」。是不是這裡比較拗口？也就是下圖中，右側比左側的圖標，亮度提升啦！

支付界面中的圖標，處理方式同上邊一樣，右圖比左圖的圖標亮度要高一些。但是下圖中綠色的大色塊，顏色卻一致。

公眾號文章頁面對比

而文章背景顏色，亮色模式為#FEFFFF，黑暗模式為#232323，可見也不是完全的純白和純黑色。另外，想在黑暗模式上貼各種表情的作者可要注意了，你的GIF表情可能會變成上圖那樣？就像在黑色背景下開了個白色天窗！一大波白色不透明GIF圖即將失效！

朋友圈界面對比

朋友圈界面的背景色和點睛色均發生了變化，在黑暗模式下，發廣告還是美麗的照片，用戶的關注程度都會提升，當然，不好看的圖片，也會把缺點放更大。所以讓你的照片更吸引人吧。

聊天頁面

聊天頁面中相應的Tint色也有變化。另外，請注意，背景色依然不是純白色和純黑色。而微信的設計師傾向於使用#FEFFFF而不是#FFFFFF，雖然這倆顏色相差幾乎為零，肉眼不可分辨。是不是這位設計師有某種潔癖？或者是純粹弄錯了？

關於聊天時使用的透明動圖，其實仔細看還是有不少毛邊的，之前我們也做過相關的分析文章。因為這種情況單純使用256色的GIF效果已經非常差了。具體實現方式可以看這裡：不要大白邊！聊聊GIF動畫毛邊的處理方法。以免出現像下面的情況：

彈層及搜索框

彈層顏色在兩種模式下顏色沒有發生變化，搜索框顏色在針對黑暗模式設計時，可以考慮在白色基礎上進行透明度處理。

最後的總結（黑暗模式設計思路）

· 一般情況下Tint顏色，在黑暗模式要比淺色模式要亮，請注意，不管是圖標還是點睛的顏色。

· 蘋果的設計指南中建議背景色為純黑色，但是真正實踐過程中，沒必要完全遵循，可以用一定灰度的顏色替代。

· 使用具有透明度的圖標和文字，在亮色模式轉黑暗模式的時候會更加輕鬆

· 不管你使用怎樣的顏色，請確保黑暗模式下的設計元素具有足夠的可讀性，同時兼顧美觀。

· 黑暗模式下的層級設計與亮色模式不同，陰影在黑暗模式下沒有太多作用。

· 當發佈一個大版本的APP更新時，可以進行分渠道投放，讓一部分先用上新版本，並測試其反饋結果，進而再進行全渠道的投放，可以最大限度降低被用戶吐槽的風險。

萬年不變的佛系應用-微信終於順應了潮流。那麼，你喜歡這次微信的改變嗎？