tft每日頭條

 > 生活

 > 微信公衆号文末二維碼設計

微信公衆号文末二維碼設計

生活 更新时间:2024-08-26 17:26:14

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

微信公衆号文末二維碼設計(微信公衆号SVG交互排版設計)1

—SVG交互設計—

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

隻需要上傳你的素材,這些動态互動效果就能DIY成你的定制互動排版,以點擊切換效果為例,我們來一起看看,一個微信公衆号文章的交互設計排版是如何在SVG編輯器裡實現的吧。

—微信公衆号交互設計教程—

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

1、點擊樣式,将樣式插入中間的編輯區

微信公衆号文末二維碼設計(微信公衆号SVG交互排版設計)2

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

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

微信公衆号文末二維碼設計(微信公衆号SVG交互排版設計)3

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

微信公衆号文末二維碼設計(微信公衆号SVG交互排版設計)4

4、鼠标移動紅色方框,調整點擊切換圖片觸發區域的位置和大小

觸發區域以外的位置點擊不響應

微信公衆号文末二維碼設計(微信公衆号SVG交互排版設計)5

5、設置完成,預覽無誤後,可以使用【同步】或【導出】功能,保存到微信公衆号平台。

[贊][贊][贊]

大家都學會了嗎?SVG編輯器裡還有更多黑科技排版的玩法,等你來發掘噢~ 創意的動态互動排版,一個SVG編輯器幫你輕松搞定!

- END -

微信公衆号文末二維碼設計(微信公衆号SVG交互排版設計)6

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved