公眾號沉浸式閱讀排版怎么做?

這樣的效果利用SVG組件也能復刻,它主要利用了多次點擊換圖展開SVG+點擊換圖SVG相結合完成了這一篇的交互效果。雖然都是我們常見的SVG,但這篇文章的創意卻是值得我們好好學習的地方。


公眾號沉浸式閱讀效果展示(svg效果)





gif圖展示

《2030雀巢有個大大大計劃》

點擊綠色文字跳轉閱讀


01
創意分析

本篇文章圍繞再生農業計劃展開,分別講解了雀巢在再生農業方面的實施情況,從農林業、土地恢復、綠色邊緣等角度具體敘述。整體設計以扁平畫風格為主,通過橫屏排版的方式來展示文章的主要內容,讓原本看似枯燥的內容以這種動畫的形式展示,增強了文章的可讀性,讓用戶能保持耐心繼續閱讀。


02
SVG分析


在這篇文章的排版設計上看,文章整體設計精致,可能很多人會覺得只有靠定制才能實現,其實這篇文章利用SVG組件也能復刻,它主要利用了多次點擊換圖展開SVG+點擊換圖SVG相結合完成了這一篇的交互效果。雖然都是我們常見的SVG,但這篇文章的創意卻是值得我們好好學習的地方。


大家通常在文章中對于點擊換圖SVG的使用都是比較分散的,只是作為文章的一個版塊,與其他內容的銜接性不強,而這篇文章中,卻將簡單的點擊換圖SVG融入到橫版的長圖設計中,并與多次點擊換圖展開SVG結合,形成完整的推文效果,帶著用戶沉浸式的瀏覽閱讀。所以我們在以后的創意中也要養成整體思維。


03
使用講解


在135編輯器首頁,選擇左側菜單欄【SVG編輯器】進入。



進入網頁后,選擇【互動效果】—素材中找到多次點擊換圖展開SVG,ID:112,點擊換圖SVG,ID:4,詳細制作教程如下:


多次點擊換圖展開教程:點擊查看


點擊換圖SVG使用教程:點擊查看






文章申明:本文章轉載自互聯網公開渠道,如有侵權請聯系我們刪除
文章評價
登錄后可以評論
立即登錄
分享到
2020精品自拍视频曝光_久久最新地址免费_紧身裙教师中文字幕在线一区_免费国产一级特黄aa大