微信暗黑模式: iOS正式更新7.0.12版本!

千呼萬喚始出來,就在今天,iOS 微信“暗黑模式”來了!iOS 微信最新正式版本 「v7.0.12」 於今早上線!除了上線大家所期待的暗黑模式外,還有諸多優化,發語音 UI 徹底改版,轉文字功能更加突出。

微信暗黑模式: iOS正式更新7.0.12版本!

暗黑模式又叫“黑暗模式”或者“深色模式”(Dark Mode),一般來說,蘋果官方專業的叫法是“深色模式”。被第三方應用適配後,才衍生出“暗黑模式”的稱呼。換句話說,就是你得先開了系統的“深色模式”,才能體驗到第三方應用與之適配的“暗黑模式”

微信暗黑模式: iOS正式更新7.0.12版本!

微信為每一個菜單都設置了黑色模式,當用戶使用微信聊天對話框時,如果使用的是其他色系的背景,微信會對圖片進行深色化處理,但是如果聊天背景過亮的話,相對來講會有些違和,建議更新的小夥伴們把背景切換為較深的背景,會顯得比較討好。

不過,很多人也許發現不了,因為手機白天還是淺色模式,只有到晚上才會改為黑暗模式。

微信暗黑模式: iOS正式更新7.0.12版本!

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

微信暗黑模式: iOS正式更新7.0.12版本!

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

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

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

微信暗黑模式: iOS正式更新7.0.12版本!

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

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

聊天列表頁面

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

微信暗黑模式: iOS正式更新7.0.12版本!

圖標顏色分析對比

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

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

微信暗黑模式: iOS正式更新7.0.12版本!

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

微信暗黑模式: iOS正式更新7.0.12版本!

微信暗黑模式: iOS正式更新7.0.12版本!

微信暗黑模式: iOS正式更新7.0.12版本!

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

聊天頁面

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

微信暗黑模式: iOS正式更新7.0.12版本!

彈層及搜索框

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

微信暗黑模式: iOS正式更新7.0.12版本!

最後的總結(黑暗模式設計思路)

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

微信暗黑模式: iOS正式更新7.0.12版本!

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

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

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

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

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


護眼,省電,好看。我相信絕大多數人是這三個理由。開啟深色模式後,在晚上暗處玩微信再也不會閃瞎眼睛了。同樣,由於Amoled屏幕的特性,有測試表示開啟和不開深色模式的續航時間可以相差30%,因為當屏幕顯示黑色時,像素不發光,從而降低了屏幕功耗。還有,一些APP中,有用戶發現開始深色模式後更耐看了,這也成為了他們開啟此模式的原因。

微信暗黑模式: iOS正式更新7.0.12版本!

深色模式推出後,夜間使用微信眼睛就舒服多了!安卓用戶,耐心等待吧,相信很快就會發布正式版更新。早在去年的WWDC中,蘋果就向大家展示了iOS 13中的暗黑模式,其中包括微信的暗黑模式效果。現在微信的暗黑模式終於要來了,你更新了嗎?


分享到:


相關文章: