【公眾號排版教程】無限二選一SVG交互效果
掌握新媒體互動設(shè)計新技巧!本文詳細(xì)介紹了如何在135編輯器中創(chuàng)建無限二選一點(diǎn)擊展開/點(diǎn)擊收回的SVG交互效果,增強(qiáng)用戶體驗(yàn)。適用于網(wǎng)絡(luò)安全宣傳、品牌推廣等多場景應(yīng)用。加入我們,學(xué)習(xí)如何通過創(chuàng)意互動提升內(nèi)容吸引力,讓信息傳遞更生動有趣。
在新媒體運(yùn)營中,創(chuàng)新的交互設(shè)計能夠顯著提升用戶體驗(yàn)和內(nèi)容的吸引力。今天,我們將學(xué)習(xí)如何在135編輯器中實(shí)現(xiàn)無限二選一點(diǎn)擊展開/點(diǎn)擊收回的SVG效果,這一效果已被多個品牌成功應(yīng)用,適用于各種行業(yè)和場景。
步驟一:了解無限二選一SVG效果
無限二選一SVG效果允許用戶通過點(diǎn)擊來展開和收回內(nèi)容,這種互動性可以增加用戶的參與度,并使信息傳遞更加生動有趣。例如,在網(wǎng)絡(luò)安全宣傳中,通過條漫設(shè)計和SVG交互,可以讓用戶在互動中學(xué)習(xí)網(wǎng)絡(luò)安全知識。
步驟二:進(jìn)入SVG編輯器
1.登錄135編輯器。
2.在編輯器頁面左側(cè),選擇SVG編輯器進(jìn)入界面。
步驟三:添加互動效果
1.在SVG編輯器的【互動效果】中,搜索ID:434,找到無限二選一選擇性點(diǎn)擊展開/點(diǎn)擊縮回效果。
2.點(diǎn)擊效果,將其放入編輯界面。
步驟四:上傳圖片素材
1.為組件添加兩個版塊的圖片內(nèi)容,即A版塊和B版塊。
2.確保A、B版塊的封面圖部分寬高一致,展開部分的圖片寬度保持一致。
3.上傳A版塊封面圖后,設(shè)置觸發(fā)區(qū)域,拖拽紅色虛線控制區(qū)域的大小和位置。
4.上傳A版塊展開圖,并設(shè)置返回區(qū)域。
5.重復(fù)步驟3和4,添加B版塊的圖片。
步驟五:調(diào)整組件細(xì)節(jié)
1.可以為組件設(shè)置展開的時間,數(shù)字越大,展開速度越慢;數(shù)字越小,展開速度越快。
步驟六:同步到公眾號后臺
1.組件設(shè)置完畢后,選擇右上角的【導(dǎo)出】【同步】到公眾號后臺。
結(jié)語
通過以上步驟,你可以輕松地在135編輯器中實(shí)現(xiàn)無限二選一SVG交互效果,為你的推文內(nèi)容增添創(chuàng)意和互動性。記得點(diǎn)贊和在看,如果有任何疑問或想學(xué)的內(nèi)容,歡迎在評論區(qū)留言。
注意事項(xiàng)
-以上所涉及的素材僅供學(xué)習(xí)交流使用,如有侵權(quán)請聯(lián)系刪除。
立即登錄