作者：Ceci Ma，來源：微果醬

微信深色模式終于來了，除了真香，還會給公眾號帶來什么影響呢？

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

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

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

01
公眾號封面圖

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

查看對比圖
▼

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

2、次條封面圖會顯示白邊。

查看對比圖
▼

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

02
正文內(nèi)配圖

1、公眾號頭圖

查看對比圖
▼

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

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

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

查看對比圖
▼

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

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

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

查看對比圖
▼

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

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

03
正文小標(biāo)題

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

查看對比圖
▼

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

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

查看對比圖
▼

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

04
字體顏色

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

查看對比圖
▼

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

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

查看對比圖
▼

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

3、整體配色問題

查看對比圖
▼

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

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

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

查看對比圖
▼

對的，你沒看錯，純黑色的分割線上演一秒“消失”。

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

查看對比圖
▼

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

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

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

查看對比圖
▼

06
正文背景

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

查看對比圖
▼

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

查看對比圖
▼

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

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

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


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