作者：Ceci Ma，來(lái)源：微果醬

微信深色模式終于來(lái)了，除了真香，還會(huì)給公眾號(hào)帶來(lái)什么影響呢？

相信昨天iOS的用戶已經(jīng)真香了一把，微信「深色模式」（戳這里可回顧）的上線又叒叕引起了一陣騷動(dòng)。安卓的用戶也不用著急，據(jù)最新消息，目前微信安卓版本的暗黑模式也已灰度測(cè)試完畢，即將全量上線。

so，在微信「深夜模式」完全普及前，作為運(yùn)營(yíng)者，我們有必要關(guān)注一波可能對(duì)公眾號(hào)產(chǎn)生的影響。我們主要從以下幾方面展開分析：

1、公眾號(hào)封面圖
2、正文配圖
3、正文內(nèi)小標(biāo)題
4、正文字體顏色
5、分割線及引導(dǎo)圖標(biāo)
6、正文背景圖

01
公眾號(hào)封面圖

1、封面頭圖黑色的不明顯。

查看對(duì)比圖
▼

可以看到，如果你的封面圖是黑色的話，深色模式下在信息流里幾乎和背景融為一體，意外有種3D的效果？所以如果想要在信息流里面突出一些，暗黑色系的封面圖要慎重一點(diǎn)了。

2、次條封面圖會(huì)顯示白邊。

查看對(duì)比圖
▼

不少公眾號(hào)會(huì)把次條弄成圓形或者別的形狀，在一般模式下看不出來(lái)有什么問題，一旦切換到深色模式，多余的白邊就跑出來(lái)了……比較好的解決辦法就是用回正方形的封面小圖，或設(shè)計(jì)別的有圓形效果的圖案。

02
正文內(nèi)配圖

1、公眾號(hào)頭圖

查看對(duì)比圖
▼

很多公眾號(hào)和微果醬一樣，頭圖都是一張白色底的圖片，上面設(shè)計(jì)了各種公眾號(hào)logo和介紹語(yǔ)，因?yàn)楸尘芭c公眾號(hào)界面顏色完全融合，所以為了省事兒，很多運(yùn)營(yíng)者或設(shè)計(jì)師都直接導(dǎo)出一張帶白色底的jpg或gif圖片。

但如今打開了“深色模式”，白底照片在黑色背景下原形畢露，亮度的差異使其尤為突兀，原本舒適的排版大打折扣。最好的方式就是把白底去掉，將頭圖導(dǎo)出為png的格式；而gif圖在設(shè)計(jì)伊始就要考慮到這個(gè)問題，不然后面再去摳圖就很麻煩了。（別問我為什么知道）

 除了白底”亮眼”，許多公眾號(hào)的頭圖也“摳不干凈”。

查看對(duì)比圖
▼

“深色模式”除了是公眾號(hào)編輯的惡夢(mèng)，還是設(shè)計(jì)獅作品的“照妖鏡”，一不小心就是大型翻車現(xiàn)場(chǎng)。很多細(xì)節(jié)上的摳圖問題暴露無(wú)遺，不想扣雞腿的設(shè)計(jì)獅們可能要細(xì)心細(xì)心再細(xì)心了。

摳到一半，估計(jì)是著急搶口罩去了。

2、文中圖片加白邊或陰影  

查看對(duì)比圖
▼

正常模式下，加了白邊的截圖會(huì)使文章看起來(lái)更整潔。但“深色模式”下的白框變成了黑框，不難看且還有些許鏤空邊框的視覺差，大家可以視情況使用。

不少運(yùn)營(yíng)者在排版的時(shí)候?yàn)榱嗣烙^，會(huì)對(duì)截圖素材添加“陰影”（果醬妹也不例外），但這樣的圖片在暗黑模式下會(huì)顯示成白邊，活生生變成一個(gè)帶光暈的“發(fā)光體”。當(dāng)用戶在暗黑模式下沉浸閱讀時(shí)，突然滑到一張亮度過(guò)高的圖片，體驗(yàn)感受可能會(huì)扣分。

03
正文小標(biāo)題

1、小標(biāo)樣式變白，最好去白底

查看對(duì)比圖
▼

和頭圖一樣的問題，重要的事情說(shuō)三遍：去白底，去白底，去白底。

2、小標(biāo)顏色盡量避免灰、黑色 

查看對(duì)比圖
▼

灰色、黑色類的小標(biāo)樣式在沒有淺色邊框包裹下會(huì)在”深色模式“下“隱身”，就著微弱的屏幕光，如果缺少顏色較淺的元素，用戶會(huì)看得很吃力。果醬妹還是建議盡量避免選取大面積灰色或黑色的小標(biāo)樣式。

04
字體顏色

1、正文字體避免選灰度過(guò)于淺或過(guò)深。

查看對(duì)比圖
▼

暗黑模式下淺灰色的字體容易與背景融為一體，字體沒有亮度很難看清；過(guò)黑的也會(huì)顯得刺眼，像微果醬平常用的字體色號(hào)#595757 看起來(lái)會(huì)舒服一些。 

2、帶有熒光的字體顏色會(huì)顯得比較刺眼  

查看對(duì)比圖
▼

平日里，顏色飽和度較高的文字會(huì)更容易吸引用戶注意，但是在“深色模式”里亮眼變成刺眼，而且給人以熒光感，選擇飽和度較低的文字是較為保險(xiǎn)的做法。

3、整體配色問題

查看對(duì)比圖
▼

對(duì)于偏愛多種顏色排版的編輯來(lái)說(shuō)，“深色模式”打亂了其基于白色背景的配色組合，色彩的搭配變得更難掌控。趁此機(jī)會(huì)減少多顏色同時(shí)使用，轉(zhuǎn)型簡(jiǎn)潔的畫風(fēng)未嘗不是一件好事。

05
分割線、引導(dǎo)在看/閱讀原文 

1、不要用純黑色的分割線 

查看對(duì)比圖
▼

對(duì)的，你沒看錯(cuò)，純黑色的分割線上演一秒“消失”。

2、要導(dǎo)出成png格式

查看對(duì)比圖
▼

老問題了，去白底，去白底，去白底。

3、引導(dǎo)在看、閱讀原文帶有白色底圖。

又是瞬間暴露設(shè)計(jì)獅偷懶的一個(gè)雷區(qū)。一些平時(shí)看起來(lái)很ok的閱讀原文引導(dǎo)圖，也是白底。

查看對(duì)比圖
▼

06
正文背景

1、小清新網(wǎng)格背景圖上文字全都“被添加”了灰黑色的底色，看著會(huì)比較難受。

查看對(duì)比圖
▼

2、甚至空格也會(huì)顯示，影響整體美觀。 

查看對(duì)比圖
▼

以上，就是我們總結(jié)的一些公眾號(hào)排版問題。

因?yàn)槊總€(gè)號(hào)的排版風(fēng)格都不一樣，我們觀察到的案例也僅僅是部分，深色模式出來(lái)后應(yīng)該如何適配，建議還是多試。不說(shuō)了，果醬妹準(zhǔn)備去找設(shè)計(jì)師拯救一下

如果有用，歡迎轉(zhuǎn)發(fā)分享~


經(jīng)授權(quán)轉(zhuǎn)載至紅星，轉(zhuǎn)載請(qǐng)聯(lián)系原作者
作者公眾號(hào)：微果醬（ID:wjam123456）