公眾號SVG互動效果，選擇生成結果教程
【炫酷交互制作教程】大牌同款新交互來襲！跟隨三兒輕松打造“多項點擊選擇”效果，實現(xiàn)獨一無二的結果生成。從SVG編輯器到素材上傳，詳細步驟一一解析，讓你輕松上手。
朋友們大家好，我是三兒。
最近不少朋友看到了許多大牌愛上了一個新交互。
就像這樣??
??點擊查看
以及三兒之前做過類似的效果【如果offer長這樣，桂林仔也會愛上班】
本質上是讓用戶有多個選項選擇其中某個結果，最后根據(jù)用戶的選項生成一個獨一無二的結果。
是不是有點炫酷，你是不是也想要制作同款？那就跟著三兒一起開啟今日的學習之旅吧??
-進入SVG編輯器-
在編輯器左側找到【SVG編輯器】
點擊進入SVG編輯器選中【互動效果】后在搜索框中輸入【多項點擊選擇】或是輸入組件ID
我們這里就以多項點擊選擇-點擊展開生成結果為例。
點擊組件進入編輯頁面，這個時候咱們先別著急上傳素材，先看看素材要求再上傳。
是不是看的有些云里霧里的？
我們做一個簡單的拆分：多項點擊選擇-點擊展開生成結果由這幾個部分組成。
一：選擇題板塊：內容圖與點擊選擇后的圖寬高尺寸一致，各個選擇題內容圖寬需要一致，高可以不同；
選擇題目板塊
點擊選擇后的顯示
二：選項關聯(lián)結果圖與結果背景圖的寬高需要一致
結果背景圖
選項關聯(lián)結果圖
三：關聯(lián)結果圖中的元素需要按照最終在結果背景圖上的位置擺放下載。
簡單點講就是你先把生成結果的位置擺好，然后去除背景只保留你的結果圖。
四：封面圖與結果背景的寬度一致
結果封面圖
結果背景圖
我們先上傳自己的選擇題板塊
上傳選擇生成圖，我這里是選擇哪個選項就會出現(xiàn)?，因為我一共有4個選項所以會出現(xiàn)四個?。
設置點擊觸發(fā)區(qū)，以及觸發(fā)效果。
上傳結果關聯(lián)圖
最后記得上傳結果封面圖與結果背景圖
我們這里只做了其中一個選項的結果生成，大家重復上述素材上傳即可。
在完成所有內容編輯后就可以選擇導出到編輯器或是微信公眾號后臺了。
怎么樣是不是已經(jīng)學會了
如果你不想有【展開】這一步
可以直接選擇
【多項點擊選擇+生成結果展示】
大家可以根據(jù)自己的喜好來
這個效果在三兒看來
最麻煩的是厘清圖片素材尺寸關系
一定要確認好再開始作圖
要不然很可能是
竹籃打水一場空
（這都是血淋淋的教訓）
相信聰明的你已經(jīng)學會了
那么眼睛看會了
記得動手做一做哦
春日暖陽
三兒也有一份薄禮相送
快去掃碼領取吧
立即登錄
