被夸「好有創(chuàng)意」，字節(jié)跳動(dòng)這篇排版是怎么做的？
在《2023年Top100品牌SVG交互圖文案例盤點(diǎn)》中，最后1個(gè)字節(jié)跳動(dòng)的案例，看似簡(jiǎn)單但巧妙的排版，很受大家歡迎。
留言區(qū)點(diǎn)贊最高的一條就在夸「好有創(chuàng)意」：
我們直接來體驗(yàn)一下，向上滑動(dòng)圖片：
*素材來自字節(jié)跳動(dòng)《字節(jié)跳動(dòng)2023年度盤點(diǎn)已生成》
組件：三層滑動(dòng)-上滑(多張,自動(dòng)對(duì)齊)
編號(hào)：11754（組件）
這篇圖文排版的效果很容易實(shí)現(xiàn)，難點(diǎn)在于圖片素材的制作。
整個(gè)排版效果共分為3層，中間層圖片只有一張固定不動(dòng)，圖片中有個(gè)字節(jié)跳動(dòng)LOGO的鏤空設(shè)計(jì)，而前景層和背景層各有25張且一一對(duì)應(yīng)滑動(dòng)，其中前景層圖片也要部分透明，以便露出中間層和背景層。
前景和背景圖片一上一下與中間層鏤空設(shè)計(jì)的圖片疊加在一起，便呈現(xiàn)了有趣的交互效果。隨便拿出一組就明白了：
知道素材如何制作的，排版使用 iPaiban Pro 的「三層滑動(dòng)-上滑(多張,自動(dòng)對(duì)齊)」組件（編號(hào)：11754）分分鐘實(shí)現(xiàn)。下面一起看下教程吧。
詳細(xì)教程：
工具：iPaiban Pro 黑科技編輯器，網(wǎng)址：SVG.iPaiban.com
組件：三層滑動(dòng)-上滑(多張,自動(dòng)對(duì)齊)
編號(hào)：11754（組件）
第1步：選擇組件
登錄 iPaiban Pro 編輯器后，點(diǎn)擊編輯器右側(cè)「組件」按鈕，直接在搜索框中搜索「三層滑動(dòng)-上滑(多張,自動(dòng)對(duì)齊)」組件或者搜索組件編號(hào)11754，點(diǎn)擊選擇。
第2步：上傳圖片素材
點(diǎn)擊右側(cè)「換圖」按鈕上傳中間層圖片，點(diǎn)擊兩個(gè)「+」號(hào)分別批量上傳前景圖和背景圖。前景圖和背景圖在順序上注意一一對(duì)應(yīng)。所有圖片尺寸需保持一致。
如果發(fā)現(xiàn)圖片順序不對(duì)，可上下拖動(dòng)調(diào)整。
第3步：導(dǎo)入公眾號(hào)后臺(tái)
點(diǎn)擊最右側(cè)「預(yù)覽草稿」預(yù)覽效果，效果滿意后接著點(diǎn)擊「同步至微信后臺(tái)」就可以了。
使用同步功能無需頻繁在編輯器和微信后臺(tái)切換，同步成功后可以立即掃描二維碼查看。
轉(zhuǎn)載請(qǐng)?jiān)谖恼麻_頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請(qǐng)聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請(qǐng)至數(shù)英微信公眾號(hào)(ID: digitaling) 后臺(tái)授權(quán)，侵權(quán)必究。
評(píng)論
評(píng)論
推薦評(píng)論
暫無評(píng)論哦，快來評(píng)論一下吧！
全部評(píng)論（0條）