最近秀米做了一系列關於SVG布局的優化更新,正好藉機會與大家聊一聊SVG在公眾號圖文裡的運用,以及公眾號圖文格式這些話題。本文會儘量做到通俗易懂,會用一些類比來幫助理解。
一般來說,公眾號小編會將SVG理解為「互動效果」,所以用SVG布局製作的內容,有點擊動作,有動畫效果。如果說靜態的圖文是在手機上看Word文檔,那麼SVG則可以讓這篇Word文檔帶上一些PPT效果。
在SVG之前,公眾號圖文如果要製作動畫效果,基本都要靠動圖GIF,像這樣:
公眾號圖文的交互性,也可以用滑動布局來做,比如這樣:
比較起來,動圖GIF無法讓用戶參與互動,滑動效果又難較融合動畫效果,那SVG效果剛好能做到這兩方面:
這裡有一個有趣的問題,前面我們提到了PPT效果,大家可能會想到,這不就是H5嗎?的確,H5裡面的互動效果、動畫效果都非常豐富,那公眾號圖文能做到這個效果嗎?
很遺憾,H5用到的CSS方案和SVG是不同的,這個方案在公眾號圖文裡無法兼容,從技術與安全方面,公眾號後臺目前只支持SVG這種方式。
不過,SVG它在圖形設計上還有更廣泛的用途,公眾號圖文也有部分的支持,這個話題可以留到下期再說,或許有下期。
公眾號排版是一個很大的課題,微信公眾號平臺在圖文格式上,從一開始就保持了業界少有的開放性和自由度(即使到了今天也罕有其他內容平臺能與之匹敵)。
所以,基本上可以認為公眾號圖文的底層邏輯是一張白紙,小編要怎麼設計都行,從而使得公眾號排版涉及文案、設計、配色、布局、創意、配圖和互動等諸多方面。
小編可以用乾淨整潔的三段式設計,來表達核心文字內容,也可以用無縫圖片拼接,做出整屏大圖效果;企業、機關、校園、文藝、科技等等等,各行各業、不同風格,公眾號圖文排版都能很好的產出小編想要的效果。
今天微信公眾號的豐富生態,和公眾號圖文的開放性是密切相關的。
SVG也是微信圖文開放性的一種表現,自從開發者發現微信圖文支持svg後,陸陸續續出現了例如彈幕、快閃、歌詞滾動、答題、點擊顯示、展開等等效果,行業內也有一批專門針對SVG代碼提供深度定製的開發者,在不斷探索各種新的SVG交互技術。
秀米則是儘量把複雜的代碼,轉換成易懂的模板和屬性設置,方便用戶使用,同時也讓用戶能在模板的基礎上,發揮創意,進行二次創作。
一個基礎的SVG布局,秀米的模板設計師可以在上面自行組合出大家看到的各個SVG模板。
所以,從這個角度也可以說明秀米在圖文排版的開放性,是非常之高的。
微信圖文是非常開放兼容的,秀米排版也是高度靈活的,需不需要用SVG其實要看你今天做的推文,需不需要「互動」和「動畫這兩個SVG的核心特性,無需為了SVG而SVG。用了SVG,可以給圖文增添趣味和亮點;不用SVG,依然可以好好研究圖文的配色、版式,做出很棒的效果。
秀米想告訴大家的是,沒有哪項單獨的技術可以成為漲粉的銀彈(Silver Bullet),即便公眾號排版已是如此大的課題,它本身也只是公眾號運營的一小部分,要成為擁有國家正規職稱的「公眾號博主」,果然是一件任重道遠的事情啊!
好了,今天就聊了聊SVG效果的核心特性,公眾號圖文格式的自由度,歡迎大家在留言區討論。