2025年終推文交互設(shè)計(jì)：人民網(wǎng)滑動(dòng)效果實(shí)現(xiàn)教程（含三層滑動(dòng)代碼）
詳解人民網(wǎng)火出圈的年終回顧推文制作邏輯，拆解三層滑動(dòng)交互實(shí)現(xiàn)方法，附135編輯器操作步驟及案例對(duì)比，幫助新媒體運(yùn)營(yíng)高效制作創(chuàng)意年終總結(jié)。
轉(zhuǎn)眼十一月已過(guò)大半，再過(guò)幾天就是年底——一到年底，最讓大家頭疼的無(wú)疑是年終推文：簡(jiǎn)單羅列吧，領(lǐng)導(dǎo)看不上；想創(chuàng)新吧，思路又卡殼。別著急！三兒我后面會(huì)持續(xù)給大家拆解年終品牌推文的制作邏輯，不僅你能輕松get同款，創(chuàng)意更是拉滿～
幫你搞定頭疼的年終推文，年底加薪更有底氣！今天先給大家?guī)?lái)人民網(wǎng)制作的年終回顧推文，一起看看他們是怎么把滑動(dòng)玩出花的。
來(lái)自人民網(wǎng)
這篇內(nèi)容的交互設(shè)計(jì)藏著巧思——通過(guò)滑動(dòng)交互的邏輯，讓小人從年頭“跑”到年尾。動(dòng)靜之間，用戶仿佛身臨其境，像跟著這個(gè)穿梭的小人一起走進(jìn)這一年的大事件里，讓枯燥乏味的年終回顧變得有趣起來(lái)。
其核心用到的還是咱們熟悉的「三層滑動(dòng)」結(jié)構(gòu)：底層背景與頂層圖滑動(dòng)，中間層的小人元素保持固定。利用這樣的效果設(shè)計(jì)，讓用戶滑動(dòng)時(shí)能直觀感受到“回顧過(guò)往”的視覺效果。
類似的滑動(dòng)效果還有很多，比如《紅船依舊，共赴山川》，也能通過(guò)三層滑動(dòng)實(shí)現(xiàn)。有細(xì)心的朋友問：“這篇里的紅船滑動(dòng)時(shí)沒有「穿梭」感，和人民網(wǎng)小人穿梭的效果差別好明顯？”其實(shí)這篇文章用的是雙層滑動(dòng)結(jié)構(gòu)——小船固定不動(dòng)，僅背景圖滑動(dòng)。那為什么說(shuō)它能用三層滑動(dòng)實(shí)現(xiàn)？
很簡(jiǎn)單：在頂層圖中上傳一張和背景圖尺寸一致的透明圖，這樣就利用三層上滑效果，制作出雙層滑動(dòng)了。
復(fù)刻人民網(wǎng)這篇效果，我們需要用到135SVG編輯器中的三層滑動(dòng)（中間層不動(dòng)頂層底層豎向）效果來(lái)實(shí)現(xiàn)。組件ID：31
●進(jìn)入SVG編輯器界面
點(diǎn)擊編輯器頁(yè)面左側(cè)「SVG編輯」，進(jìn)入SVG編輯器頁(yè)面，在搜索框中輸入效果ID，即可使用。
●制作效果
我們?cè)谥谱餍Ч埃欢ㄒ浀每纯此夭囊?，比如此效果要求每層圖片素材寬度一致。
接著我們根據(jù)素材依次上傳圖片內(nèi)容。
有些地方我們需要判斷它是頂層圖還是背景圖，能遮住小人的就是頂層圖，那么我們就需要在背景圖中上傳一張和頂層圖尺寸一致的透明底圖
同理，若是小人沒有被遮擋，該圖層作為背景圖，需在頂層圖中上傳一張和背景圖同尺寸的透明底圖。
●同步到公眾號(hào)后臺(tái)
選擇右上角的「同步」功能，將標(biāo)題、封面圖設(shè)置好并選擇需要同步的公眾號(hào)，就能讓這篇SVG內(nèi)容同步到公眾號(hào)后臺(tái)。
以上就是本期135SVG教學(xué)分享
大家要是喜歡
記得給三兒點(diǎn)亮小心心哦
這對(duì)三兒真的很重要
大家還有什么想看想學(xué)的
記得在評(píng)論區(qū)留言
祝大家擁有美好的一天
*本文模版Id：165983
