高校公眾號(hào)SVG創(chuàng)意排版案例解析 | 高?;?dòng)設(shè)計(jì)實(shí)戰(zhàn)教程

深度解析北京大學(xué)、四川大學(xué)等高校公眾號(hào)創(chuàng)意排版案例,揭秘SVG點(diǎn)擊選擇、多層滑動(dòng)、漸進(jìn)換內(nèi)容等交互設(shè)計(jì)技巧。內(nèi)含高校推文排版模板、公眾號(hào)視覺設(shè)計(jì)教程及實(shí)戰(zhàn)應(yīng)用分析,適用于教育行業(yè)新媒體運(yùn)營(yíng)者學(xué)習(xí)參考。

高校創(chuàng)意排版


SVG案例分享

/ HELLO SCHOOL /

都說(shuō)教育行業(yè)排版天花板看高校

這句話還真的有一定道理

三兒瀏覽了一圈高校公眾號(hào)內(nèi)容之后

發(fā)現(xiàn)各大高校的創(chuàng)意排版層出不窮

各種蹭熱點(diǎn)、精美設(shè)計(jì)、炫酷效果......

看得我是眼花繚亂

所以三兒也好好整理了一番

為大家?guī)?lái)了多款高校創(chuàng)意排版





1.北京大學(xué)



ac358435590353e5ed2ecb417a395237.gif


(來(lái)自北京大學(xué)公眾號(hào))


點(diǎn)擊跳轉(zhuǎn)文章閱讀



01
創(chuàng)意分析

這是一篇來(lái)自北大校園宣傳類推文,兼具極強(qiáng)的互動(dòng)性和非凡的創(chuàng)意。文章以“打造你的專屬北大特飲”為主題,摒棄了傳統(tǒng)的圖文介紹模式,轉(zhuǎn)而采用趣味測(cè)試題的形式展現(xiàn)校園風(fēng)采。在測(cè)試題中,北大特色的美食與校園美景被巧妙融入到各個(gè)選項(xiàng)之中,調(diào)動(dòng)讀者積極參與互動(dòng)。尤為吸引人的是,讀者能在文末依據(jù)自己上面的選擇,生成獨(dú)一無(wú)二的個(gè)性化結(jié)果。這種別具一格的互動(dòng)設(shè)計(jì),極大地激發(fā)了讀者的分享欲,促使他們自發(fā)傳播,從而有效提升了文章的曝光度。


02
SVG分析

本文所用到的SVG效果為多項(xiàng)點(diǎn)擊選擇+生成結(jié)果展示,ID:624。


教程在這里:點(diǎn)擊查看







2.四川大學(xué)





CEA91A42-3873-4427-AAD4-EED039A45730.gif


(來(lái)自四川大學(xué)公眾號(hào))


點(diǎn)擊跳轉(zhuǎn)文章閱讀


01
創(chuàng)意分析

這是一篇來(lái)自川大的推文,該文采用了新穎的方式向讀者介紹川大學(xué)子的風(fēng)采。利用拼貼畫風(fēng)格的長(zhǎng)圖設(shè)計(jì)和三層上滑的交互效果,讓讀者在閱讀推文的過(guò)程中,可以跟隨熊貓“大川”的滑動(dòng)沉浸式解鎖川大學(xué)子的多樣性。


這種讓人眼前一亮的創(chuàng)意策劃,讓讀者在享受視覺盛宴的同時(shí),不經(jīng)意間加深了讀者對(duì)川大的印象。


02
SVG分析

本文所用到的SVG效果為中間層不動(dòng)頂層底層豎向三層滑動(dòng),ID:31。


教程在這里:點(diǎn)擊查看







3.華中科技大學(xué)



A2BA502C-B92D-41A5-AA47-37C841BF0D62_compressed.gif


(來(lái)自iKnow華科大學(xué)公眾號(hào))


點(diǎn)擊跳轉(zhuǎn)文章閱讀


01
創(chuàng)意分析

這是一篇源自華中科技大學(xué)的創(chuàng)意推文,聚焦于探討并緩解高校學(xué)生的壓力問(wèn)題。推文巧妙地融合了條漫設(shè)計(jì)與SVG交互效果來(lái)展示內(nèi)容,開篇即詳盡列舉了高校學(xué)子所面臨的各種具體壓力,并以黑白線條的描繪,以此代表高校學(xué)子焦慮的狀態(tài)。而當(dāng)讀者點(diǎn)擊文末的回溯按鈕時(shí),推文自下而上漸漸被色彩填充,內(nèi)容也隨之轉(zhuǎn)變?yōu)閷?duì)學(xué)子們的深切鼓勵(lì)與溫馨慰藉。文案細(xì)膩溫暖,觸動(dòng)讀者的心弦,引發(fā)強(qiáng)烈的共鳴,并為他們注入前行的力量。


通過(guò)這種前后反差,能強(qiáng)烈激發(fā)讀者的代入感,此效果適合用來(lái)展現(xiàn)對(duì)比鮮明的內(nèi)容。比如從酷熱到?jīng)鏊南麡O情緒到積極狀態(tài)轉(zhuǎn)變等主題。



02
SVG分析

本文所用到的SVG效果為點(diǎn)擊全文漸進(jìn)換內(nèi)容(自定義觸發(fā)),ID:360。


教程在這里:點(diǎn)擊查看






4.福建師范大學(xué)





24DE1347-1670-44A5-91E1-5F301BA62E75_compressed.gif


(來(lái)自福師大小葵公眾號(hào))


點(diǎn)擊跳轉(zhuǎn)文章閱讀


01
創(chuàng)意分析

這篇推文源自福建師范大學(xué),其主題聚焦于探尋2005年出生的高校學(xué)子們的珍貴回憶。文章巧妙地運(yùn)用了多次點(diǎn)擊換圖的交互效果,生動(dòng)展現(xiàn)了這些學(xué)子從撰寫日記、追捧動(dòng)畫、熱衷于QQ聊天,到使用手機(jī)這一系列生活變遷的過(guò)程。這一波滿滿的回憶殺,能引發(fā)強(qiáng)烈的共鳴,極大地拉近了與讀者之間的距離。



02
SVG分析

本文所用到的SVG效果為多次點(diǎn)擊換圖(GIF圖),ID:9。


教程在這里:點(diǎn)擊查看





如果你還想看

更多高校創(chuàng)意SVG案例

可以掃碼添加我們的顧問(wèn)

回復(fù)關(guān)鍵詞“高校

即可獲得哦


企業(yè)微信截圖_17163722237079_副本.png


END


*以上所涉及的素材僅供學(xué)習(xí)交流使用,侵聯(lián)刪



文章申明:本文章轉(zhuǎn)載自互聯(lián)網(wǎng)公開渠道,如有侵權(quán)請(qǐng)聯(lián)系我們刪除
文章評(píng)價(jià)
登錄后可以評(píng)論
立即登錄
比格設(shè)計(jì)
熱門工具
135編輯器
領(lǐng)先的在線圖文編輯平臺(tái)原創(chuàng)樣式素材,一鍵套用
筆格設(shè)計(jì)
受歡迎的在線作圖網(wǎng)站,新媒體配圖、手機(jī)海報(bào)應(yīng)有盡有
筆格PPT
輸入主題,AI一鍵生成PPT;上傳本地文件秒變PPT
管小助
企業(yè)營(yíng)銷、私域流量運(yùn)營(yíng)——站式營(yíng)銷管理平臺(tái)
推薦文章
用戶運(yùn)營(yíng)平臺(tái)產(chǎn)品設(shè)計(jì)指南
淺談?dòng)脩暨\(yùn)營(yíng)中的用戶分層
內(nèi)容運(yùn)營(yíng):戴上寫作的六頂思考帽
5000字方法論:4個(gè)細(xì)節(jié),決定私域能不能賺錢
一個(gè)案例說(shuō)明白用戶分析怎么用
22條視頻,漲粉12.6萬(wàn),一個(gè)女孩子在抖音靠洗車也能月入過(guò)萬(wàn)!
高價(jià)值社群的5大核心關(guān)鍵
抖音賬號(hào)內(nèi)容自檢清單!
決定離職后,3天拿到offer的總結(jié)與反思!
【135早資訊】:教育部將徹查教材插圖問(wèn)題;抖音6月1日起將對(duì)本地生活商家收取服務(wù)費(fèi)
熱門素材樣式
運(yùn)營(yíng)導(dǎo)航
運(yùn)營(yíng)工具
分享到