秀米說:SVG和圖文排版

2021-12-09 秀米XIUMI

最近秀米做了一系列關於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效果的核心特性,公眾號圖文格式的自由度,歡迎大家在留言區討論。

相關焦點

  • 微信圖文排版趣味玩法!
    天氣冷得,連文章標題都變形了下面,我就來教大家微信圖文排版怎樣玩更有趣!(內容涉及微信圖文標題和內容兩方面,使用工具——小螞蟻微信圖文編輯器)標題玩法大全有趣的標題才更加吸引人,下面這幾種標題玩法,你可要拿著小本本記下來哦~花漾文字emoji、字符表情箭頭圖形內容玩法大全圖文內容和標題配合好,才能使整篇文章更富有趣味性、互動性。
  • 公眾號SVG排版圖文「精準定位視頻插入位置」模板代碼
    -- 控制視頻垂直距離 --><p style="font-size:0;line-height: 0;"><svg style="display: inline-block;width: 100%;pointer-events:none;-webkit-tap-highlight-color:transparent;-webkit-user-select
  • SVG微信交互圖文|點擊切換如何優化圖文排版設計的?
    交互在微信圖文推送中已經司空見慣,據前面文章也為大家介紹了不少,有簡單的點擊切換、高度展開等效果,也有相對複雜的沉浸式圖文和擬物裝置,如果單純為了圖文趣味一昧追求技術難度不一定成就優秀的作品,而發揮交互效能真正服務內容傳遞信息,進一步優化用戶的閱讀體驗才最重要。
  • 秀米排版速成手冊
    1.打開秀米編輯器在線編輯平臺後我們需要登錄並找到【我的秀米】單擊進去。2.點進我的秀米後將進入編輯界面,該處有我的H5秀、我的團隊、我的主頁等。以我的圖文為例,在此處我們需要選擇【我的圖文】選擇添加新的圖文。3.開始編輯,點擊右方工具欄的小圖標,這裡有你需要的卡片、標題等小零件,恰當地將其組合,創作吧!
  • 怎樣將圖文排版呈現得更好看?幾款不錯的圖文編輯軟體,上手夠快
    那麼如果文章的圖文排版看起來賞心悅目的話,不僅可以提高自己的滿意度,還能受到別人更多的認可。接下來這幾款圖文編輯工具,就能很好地將我們的文章呈現得更美觀。發文章有很多種形式,如果是需要發送長微博的話,那麼135編輯器就可以滿足需求。
  • 揭秘SVG密碼解鎖動畫排版原理
    儘管解鎖類動畫在結構上來講,標籤的嵌套較多,結構略顯複雜,但它的原理很簡單,就是通過位移動畫來實現按鍵的隱藏和觸發。正確按鍵都被放在各自獨立的分組中,當用戶未觸發正確按鍵前,這些分組都隱藏在屏幕之外,只有當正確按鍵被觸發後,才會通過位移動畫移動到可以被點擊的可視區域,為了演示在下面動畫中我用不同顏色標識了各按鍵分組。
  • SVG交互圖文|蘋果公眾號的排版為何如此舒適?
    昨天,宣稱擁有卓越的高保真音質、自適應均衡、主動降噪和空間音頻功能AirPods Max 頭戴式耳機驚豔上市,我們在各類渠道都能看到蘋果官方關於新品宣傳的內容,與大家共同等待新品測評數據的同時,咱們也可以來聊聊一些乾貨——基於SVG代碼實現的AirPods Ma推文。
  • 「小瓶子」2天給公眾號漲粉10萬,爆款互動圖文怎麼做?
    而最早做互動小瓶子的公眾號「網易王三三」,2天內漲粉超過10w。這再一次說明,互動圖文仍然是能引起爆發式傳播的流量利器。今天我們就來講講王三三是如何成為「在線小遊戲王者」的,互動圖文爆款背後的創意思路到底是什麼?
  • Word直接在頁面排版圖文和用表格排版圖文
    一、Word圖文排版方法一:直接在頁面排版1、選擇「插入」選項卡,單擊「圖片」圖標,打開「插入圖片」窗口,定位到圖片保存的文件夾,雙擊要插入的圖片,則所選圖片插入到文檔中,圖片太大,先把它調小,把滑鼠移到圖片右下角的小圓圈上並向左上角移動把圖片縮小,把一段文字複製過去,由於圖片的當前文字環繞方式為「嵌入型」因此,文字並未全部排到圖片的右邊,而是大部分排到圖片的下面
  • 如何使用 CSS 和 SVG 剪切和遮罩技術
    通過結合使用 CSS 和遮罩技術,你將會擁有更多的可能性去使用網絡圖像。需要明確的是,遮罩和剪切是通過 CSS 來處理圖像的兩種不同的方法,讓我們從剪切開始吧!剪切基礎如果你曾經使用過 Photoshop , 你大概已經很熟悉剪切遮罩了。
  • word圖文排版教程
    word圖文排版教程 學習辦公 大小: 6.39M
  • SVG編輯器上線了!
    除了素材效果以外,svg編輯器還為大家準備好了 4 種圖文展開的效果,分別是點擊直接展開-自定義觸發、點擊換圖展開-自定義觸發、自動換圖展開-自定義觸發、點擊縮回再展開-自定義觸發,如果自己在效果組合上還不太拿手
  • 公眾號文章排版,哪些微信編輯器最好用
    1、96微信編輯器不得不說,96微信編輯器的功能還是十分強大的,不僅具有很多好看的樣式和模板,還能進行一鍵排版,根據熱點也會有很多新鮮的模板出爐,非常簡便實用。而且它還具有在線作圖的功能,不管是公眾號新媒體作圖,還是淘寶電商、營銷海報等等,都能自己設計製作,適用面很廣。
  • 微信排版編輯器推薦!
    安 利 結 束下面我們進入「文章編輯器」哪家強的環節分別說說135、i排版和秀米三款編輯器各自的特點另外,如果是錢包充足的小夥伴可以去充個會員體驗一下「一鍵排版」功能據說還很是很好用的到時候別忘了告訴運營君你的體驗啊網址:http://xiumi.us/#/秀米這款編輯器運營君已經很久沒用了因為以前它的畫風都是……左上角「我的秀米」,可以進入圖文管理頁面,設置標籤,恢復刪除圖文,還可進入H5秀製作編輯
  • 這幾個圖文排版小技巧,能讓文章的閱讀量瞬間提高一倍
    圖文排版作為公眾號運營者必須掌握的一種技能,能夠提升文章的內容可讀性和閱讀舒適感,是實實在在的「內容助攻」。
  • 135編輯器公眾號圖文排版比賽(國家認證排版獎勵)
    本網9月24日訊 135編輯器第四屆微信公眾號圖文排版大賽即將開展,該大賽邀請所有朋友來參與,主題不限,本次圖文排版大賽旨在幫助大家提升公眾號排版質感,發掘優秀排版作品和人才,最高可領1350元現金獎勵哦!
  • 微信公眾號圖文排版指南-圖片排版
    (答案僅供參考,如有雷同,純屬巧合)如果給我一張圖片,我會有4種排版方式:單圖樣式、插入小圖、圖文結合以及SVG互動樣式。接下來看一下答案詳解。三、圖文結合文章排版中,少不了文字與圖片相結合的排版方式,不知道下面這三種圖片排版方式你有沒有嘗試過呢?
  • 官方手冊,PPT多種圖文排版秘籍!
    在做PPT的時候,大多數製作者都會用到圖片,不過很多新手對於PPT的圖文排版還是無從下手。那麼對於圖片的使用,無外乎是1張圖、2張圖、3張圖、4張圖甚至多張圖。下面K哥就分享一下,這幾種圖文排版設計的套路。
  • 【SVG系列教程】繪製SVG矩形
    <svg xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" height="100" width="100"        style="stroke:#006600; fill: #00cc00"/></svg>
  • 圖文怎樣排版更吸引眼球?
    無論在何種視覺媒體中,文字和圖片都是其兩大構成要素。那麼,圖文如何設計才能更吸引眼球呢? 今天跟大家分享一組來自 Invasi Studio 設計感十足的圖文排版設計作品,不管是排版方式,還是色彩搭配,都充滿了時尚潮流的氣息,很吸睛。希望給大家帶來靈感。