微信公眾號SVG交互排版設計

微信公眾號的交互設計一直是近幾年來新媒體運營人非常重視的一種促活手段,不過因為交互設計的技術門檻比較高,成本自然也比較高,但是現(xiàn)在有了SVG編輯器,不會代碼也能在微信公眾號里做出酷炫的交互設計了。

bige_0319141446_2603.png


SVG交互設計


SVG編輯器里為大家提供了多種SVG交互效果,包含無縫、點擊、滑動、長按、圖片輪播、視音頻、小程序、超鏈接等等效果。


只需要上傳你的素材,這些動態(tài)互動效果就能DIY成你的定制互動排版,以點擊切換效果為例,我們來一起看看,一個微信公眾號文章的交互設計排版是如何在SVG編輯器里實現(xiàn)的吧。


微信公眾號交互設計教程

準備工作:打開135編輯器,在首頁左側(cè)的功能區(qū)中找到【SVG編輯器】入口,或者直接點擊此處,進入SVG編輯器。


1、點擊樣式,將樣式插入中間的編輯區(qū)



2、在編輯器右側(cè)點擊【添加圖片】按鈕,上傳點擊前和點擊后的圖片


注意點擊前后圖片的寬高尺寸要保持一致



3、圖片上傳完成后,在動畫設置中,設置動畫時長和動畫延時的參數(shù)(動畫時長的數(shù)值越大,點擊后圖片切換的時間越慢;動畫延時的數(shù)值越大,點擊后動畫推遲出現(xiàn)的時間越長)



4、鼠標移動紅色方框,調(diào)整點擊切換圖片觸發(fā)區(qū)域的位置和大小


觸發(fā)區(qū)域以外的位置點擊不響應



5、設置完成,預覽無誤后,可以使用【同步】或【導出】功能,保存到微信公眾號平臺


大家都學會了嗎?SVG編輯器里還有更多黑科技排版的玩法,等你來發(fā)掘噢~ 創(chuàng)意的動態(tài)互動排版,一個SVG編輯器幫你輕松搞定!

- END -


點擊135編輯器獲取更多資訊

文章申明:本文章轉(zhuǎn)載自互聯(lián)網(wǎng)公開渠道,如有侵權請聯(lián)系我們刪除
文章評價
登錄后可以評論
立即登錄
小伍資深編輯
共638篇文章
最近文章
更多
  • 雙十二電商活動宣傳排版素材(電商商品促銷推廣模版樣式)
  • 乞巧節(jié)微信公眾號推文排版素材(愛情浪漫活動推廣文案)
  • 二十四節(jié)氣立秋圖文排版素材(金黃色系立秋推文文案模版)
  • 八一建軍節(jié)紀念日推文排版樣式(光輝歷程文案宣傳模版)
比格設計
熱門工具
135編輯器
領先的在線圖文編輯平臺原創(chuàng)樣式素材,一鍵套用
筆格設計
受歡迎的在線作圖網(wǎng)站,新媒體配圖、手機海報應有盡有
輸入主題,AI一鍵生成PPT;上傳本地文件秒變PPT
管小助
企業(yè)營銷、私域流量運營——站式營銷管理平臺
推薦文章
用戶運營平臺產(chǎn)品設計指南
淺談用戶運營中的用戶分層
內(nèi)容運營:戴上寫作的六頂思考帽
5000字方法論:4個細節(jié),決定私域能不能賺錢
一個案例說明白用戶分析怎么用
22條視頻,漲粉12.6萬,一個女孩子在抖音靠洗車也能月入過萬!
高價值社群的5大核心關鍵
抖音賬號內(nèi)容自檢清單!
決定離職后,3天拿到offer的總結(jié)與反思!
【135早資訊】:教育部將徹查教材插圖問題;抖音6月1日起將對本地生活商家收取服務費
熱門素材樣式
運營導航
運營工具
分享到