微信黑暗模式終于來啦!UI設(shè)計(jì)細(xì)節(jié)完全分析及體驗(yàn)

2020-3-31    ui設(shè)計(jì)分享達(dá)人

靜電說:它來啦!前一段時(shí)間傳的沸沸揚(yáng)揚(yáng)的蘋果與微信黑暗模式的糾葛,終于以微信適配iOS端告終。3月22日靜電一覺醒來,微信已經(jīng)正式開啟了“暗黑”模式。不過,很多人也許發(fā)現(xiàn)不了,因?yàn)槭謾C(jī)白天還是淺色模式,只有到晚上才會改為黑暗模式。




如何開啟微信黑暗模式?


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



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


不少小伙伴對于黑暗模式的設(shè)計(jì)還不是特別熟悉,接下來咱們通過微信設(shè)計(jì)細(xì)節(jié)的分析,來看看小伙伴們都能從微信的改變上學(xué)到什么?



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


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


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



聊天列表頁面


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


圖標(biāo)顏色分析對比


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


但在發(fā)現(xiàn)頁面中,列表左側(cè)的icon顏色則有略微變化??傮w來說,黑暗模式下比亮色模式下的圖標(biāo)顏色更“亮”。是不是這里比較拗口?也就是下圖中,右側(cè)比左側(cè)的圖標(biāo),亮度提升啦!


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





公眾號文章頁面對比


 



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



朋友圈界面對比


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





聊天頁面


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





關(guān)于聊天時(shí)使用的透明動(dòng)圖,其實(shí)仔細(xì)看還是有不少毛邊的,之前我們也做過相關(guān)的分析文章。因?yàn)檫@種情況單純使用256色的GIF效果已經(jīng)非常差了。具體實(shí)現(xiàn)方式可以看另一篇文章:不要大白邊!聊聊GIF動(dòng)畫毛邊的處理方法(評論發(fā)送)。以免出現(xiàn)像下面的情況:




彈層及搜索框


彈層顏色在兩種模式下顏色沒有發(fā)生變化,搜索框顏色在針對黑暗模式設(shè)計(jì)時(shí),可以考慮在白色基礎(chǔ)上進(jìn)行透明度處理。


 



最后的總結(jié)(黑暗模式設(shè)計(jì)思路)


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

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

· 使用具有透明度的圖標(biāo)和文字,在亮色模式轉(zhuǎn)黑暗模式的時(shí)候會更加輕松

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

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

· 當(dāng)發(fā)布一個(gè)大版本的APP更新時(shí),可以進(jìn)行分渠道投放,讓一部分先用上新版本,并測試其反饋結(jié)果,進(jìn)而再進(jìn)行全渠道的投放,可以最大限度降低被用戶吐槽的風(fēng)險(xiǎn)。

轉(zhuǎn)自:站酷-靜design


日歷

鏈接

個(gè)人資料

存檔