微信公眾號(hào)SVG交互排版設(shè)計(jì)
微信公眾號(hào)的交互設(shè)計(jì)一直是近幾年來新媒體運(yùn)營(yíng)人非常重視的一種促活手段,不過因?yàn)榻换ピO(shè)計(jì)的技術(shù)門檻比較高,成本自然也比較高,但是現(xiàn)在有了SVG編輯器,不會(huì)代碼也能在微信公眾號(hào)里做出酷炫的交互設(shè)計(jì)了。
SVG編輯器里為大家提供了多種SVG交互效果,包含無縫、點(diǎn)擊、滑動(dòng)、長(zhǎng)按、圖片輪播、視音頻、小程序、超鏈接等等效果。
只需要上傳你的素材,這些動(dòng)態(tài)互動(dòng)效果就能DIY成你的定制互動(dòng)排版,以點(diǎn)擊切換效果為例,我們來一起看看,一個(gè)微信公眾號(hào)文章的交互設(shè)計(jì)排版是如何在SVG編輯器里實(shí)現(xiàn)的吧。
準(zhǔn)備工作:打開135編輯器,在首頁(yè)左側(cè)的功能區(qū)中找到【SVG編輯器】入口,或者直接點(diǎn)擊此處,進(jìn)入SVG編輯器。
1、點(diǎn)擊樣式,將樣式插入中間的編輯區(qū)
2、在編輯器右側(cè)點(diǎn)擊【添加圖片】按鈕,上傳點(diǎn)擊前和點(diǎn)擊后的圖片
注意點(diǎn)擊前后圖片的寬高尺寸要保持一致
3、圖片上傳完成后,在動(dòng)畫設(shè)置中,設(shè)置動(dòng)畫時(shí)長(zhǎng)和動(dòng)畫延時(shí)的參數(shù)(動(dòng)畫時(shí)長(zhǎng)的數(shù)值越大,點(diǎn)擊后圖片切換的時(shí)間越慢;動(dòng)畫延時(shí)的數(shù)值越大,點(diǎn)擊后動(dòng)畫推遲出現(xiàn)的時(shí)間越長(zhǎng))
4、鼠標(biāo)移動(dòng)紅色方框,調(diào)整點(diǎn)擊切換圖片觸發(fā)區(qū)域的位置和大小
觸發(fā)區(qū)域以外的位置點(diǎn)擊不響應(yīng)
5、設(shè)置完成,預(yù)覽無誤后,可以使用【同步】或【導(dǎo)出】功能,保存到微信公眾號(hào)平臺(tái)
大家都學(xué)會(huì)了嗎?SVG編輯器里還有更多黑科技排版的玩法,等你來發(fā)掘噢~ 創(chuàng)意的動(dòng)態(tài)互動(dòng)排版,一個(gè)SVG編輯器幫你輕松搞定!
- END -
立即登錄
- 雙十二電商活動(dòng)宣傳排版素材(電商商品促銷推廣模版樣式)
- 乞巧節(jié)微信公眾號(hào)推文排版素材(愛情浪漫活動(dòng)推廣文案)
- 二十四節(jié)氣立秋圖文排版素材(金黃色系立秋推文文案模版)
- 八一建軍節(jié)紀(jì)念日推文排版樣式(光輝歷程文案宣傳模版)