【收藏】「公眾號暗黑模式」適配指南
【收藏】「公眾號暗黑模式」適配指南
公眾號已進入暗黑模式時代，蘋果用戶已經(jīng)可以進入暗黑模式，而安卓手機的適配也即將完成。
但暗黑模式下，90% 的公眾號頁面都會出現(xiàn)適配問題，給運營帶來極大的困擾。
下面小楊就來講一下暗黑模式的適配方法。
無彩色 有彩色
對于有彩色和無彩色，微信算法的處理方法是不同的。
夜間模式下，文章背景的底色被設置為 RGB（36,36,36），即86%濃度的黑，這種色彩相較于純黑色更加柔和，夜間閱讀會更加舒適。
對于亮色，蘋果控制在屏幕最亮的白色為 RGB（230,230,230）,即89%濃度的白色，相較于純白色，這種顏色更加舒適，能減弱深夜強光對眼睛的刺激。
在「有彩色」的處理上，其基本原理為，在保證對比關系不變的前提下，盡量還原色彩原本的顏色，但是，這個算法并不能覆蓋到所有的顏色，仍有一定缺陷。
如圖，公眾號圖文中絕大多數(shù)圖片都存在白邊，白邊在淺色模式下與白色背景融為一體，但在暗黑模式下，白邊就會顯得十分突兀。
上傳無白邊的 PNG 格式圖片
較小的無白邊 PNG 圖片可以直接上傳，較大的無白邊 PNG 圖片上傳方法請劃至文末查看附錄。
問題1. 識別性問題
如圖，同種顏色的文字在不同的背景下識別效果有很大差別，純藍色字在白色背景下易于閱讀，但在深色背景下難以辨認。
在暗黑模式下檢查
我們的圖文也可能出現(xiàn)文字在暗黑模式下看不清的情況，發(fā)布之前一定要在暗黑模式下檢查一遍，不合適的配色要進行修改。
問題2. 色彩顯示差異
如圖，同樣的顏色在不同背景下顯示效果不同，圖中的兩個「藍」字使用的是同一種顏色RGB（0,0,255），但在不同背景下仿佛是兩種的顏色。
盡量使用低飽和度顏色
鮮艷色彩在不同背景下展示效果差別很大，且深色背景下鮮艷的色彩會非常突兀，因此請盡量使用低飽和度色彩。
許多頭部大號，如Apple、寶馬中國等都喜歡采用黑科技排版，但越是黑科技排版越容易出現(xiàn)適配問題。
問題1. SVG 與背景的色差
微信會對所有使用 CSS 定義的顏色重新映射，但不改變 SVG 中定義的顏色，因此導致 SVG 與背景出現(xiàn)色差。
一圖流與 SVG 混排
由于微信不改變圖片和 SVG 的色值，因此一圖流與 SVG 混排的黑科技排版不會出現(xiàn)色差。
問題2. SVG 難以辨識
微信不對 SVG 進行色彩反轉(zhuǎn)，因此暗黑模式下 SVG 中的深色部分會難以辨識。
將 fill 設置為 currentColor
Isle of Chaos 在《一首寫給逆行者的歌》中最早解決了這個問題，他將 fill 的值設置為 currentColor ，使 SVG 可以繼承暗黑模式下反轉(zhuǎn)的色值。
微信會將圖文中的陰影顏色反轉(zhuǎn)，即將黑色的影子反轉(zhuǎn)為白色，這顯然違反常識。
不建議對模塊添加陰影
Google在「深色設計規(guī)范」中明確指出——“不要使用亮色代替黑色陰影來表示高度，因為它們不能準確地表示投影的高度。
適配暗黑模式非常困難。運營人只能開發(fā)一套顏色，深色由算法自動合成，設計頁面時要處處配合算法。
但微信的暗黑模式算法其實是不合格的，它僅僅達到了「能看清，能閱讀」的程度，距離「美觀，好看」的標準還差的很遠。
因此，我建議引入蘋果暗黑設計規(guī)范中的「語義色彩」。
語義色彩允許給一種顏色在淺色模式和深色模式下分別定義兩個色值。
只有分別在深色和淺色下手動設置合適的顏色，才能保證頁面足夠美觀。
目前的微信規(guī)則下，較小的無白邊圖片可以直接上傳，而較大的無白邊圖片需要經(jīng)過以下步驟上傳。
(部分舊版本蘋果和安卓設備可能無法顯示)
1.摳圖
若圖片素材存在白邊，可以在 PS 里將白邊扣除。
首先在 PS 軟件中打開圖片，解鎖該圖片的圖層鎖定；然后找到「魔術橡皮擦」工具；點擊圖片中的白色部分，就可以將白色部分轉(zhuǎn)變?yōu)橥该?，隨后將圖片導出為 PNG 格式。
2.上傳 PNG 圖片
微信的壓縮算法會導致 PNG 圖片的透明部分會被強制填充一層白底，因此直接上傳 PNG 圖片是行不通的。
我們可以采用「圖床替換」的方法，解決這個問題。
打開QQ空間的相冊工具，點擊「上傳圖片」。
將 PNG 圖片上傳到「相冊」
隨后點擊「分享按鈕」，保存「本圖地址」
3.撰寫 HTML 代碼
<svg viewBox="0 0 1133 1714">
<image overflow="visible"
width="1133" height="1714"
href="此處插入圖片鏈接">
</image></svg>
找到剛剛保存的圖片地址，刪除圖片地址末端的「&t=5」，隨后用圖片地址替換「此處插入圖片鏈接」，然后將代碼中標注的寬度與高度設置為圖片的寬和高。
4.開發(fā)者模式導入公眾號
在Windows設備里面按Ctrl+Shift+C，在Mac設備中按Command+Shift+C進入開發(fā)者模式。
鼠標移動到空白行，空白行會出現(xiàn)一個藍色選區(qū)，同時找到代碼欄下對應的藍色選區(qū)，先點鼠標右鍵然后選擇「Edit as Html」，將代碼粘貼到此處，并點擊保存。
經(jīng)過以上四步你就可以在公眾號中上傳一張無白邊的圖片了。
1.暗黑模式下背景亮度較低，適當增加字號可以讓文字更容易看清。
2.鮮艷的色彩在暗黑模式下效果不好，建議使用低飽和度的配色。
3.使用 PNG 格式圖片可以避免圖片出現(xiàn)白邊。
4.簡潔的樣式在暗黑模式下效果更好。
5.發(fā)布前請一定使用暗黑模式進行預覽。
福利時刻-免費領取7天135編輯器VIP會員】
點擊http://0752ehome.cn/users/invite/ddb12a17ce400c35fe041d275a578351，注冊135編輯器，即可獲得7天VIP會員
立即登錄
