Apple同款效果無限選擇切換圖片,來啦!。

Apple的圖文,篇篇都少不了交互了。

在它的最新圖文《萬事開頭難?上手 Mac 可不難。

》《原文鏈接:https://mp.weixin.qq.com/s/JBgfunatUkT809Y_jt5G-g》中,主要使用了一種無限選擇切換圖片的效果,引起了很多小夥伴們的興趣。

點擊不同圖標,下方便會切換相應的圖片,支持無限重復點擊。

這種效果非常適合用來展示產品的多個功能或特點,互動性強並且節省圖文空間。

現在,我們用 iPaiban Pro 黑科技編輯器分分鐘就能實現同款效果了。

目前有支持兩組《編號:11274》、三組《編號:11275》、四組《編號:11276》和五組及以上《編號:11277》選擇切換的4個組件,每個組件使用時隻能上傳標註的圖片組數,少於或多於都不行。

你還要什麼樣的組件或者這個無限選擇還需要怎麼變化?留言區聊一聊你的想法,精選即送品牌時光機SVG案例庫高級會員1個月。

四組的:

詳細教程:

工具:iPaiban Pro黑科技編輯器,網址:x.iPaiban.com

組件:Apple同款-無限選擇切換圖片(四組)

編號:11276《組件》

第1步:選擇組件

登錄 iPaiban Pro 編輯器後,點擊編輯器左側「組件」按鈕,在「點擊」-「選擇切換」分類中找到「Apple同款-無限選擇切換圖片(四組)」組件,或者直接搜索組件編號11276,點擊選擇。

第2步:上傳圖片素材

在右側需要上傳三部分圖片:背景圖、選擇圖和結果圖。

背景圖尺寸為單組選擇圖和結果圖尺寸之和。

選擇圖為設計有選擇圖標的圖片,各個選擇圖尺寸需一致。

結果圖為用戶點擊選擇圖上的圖標後切換的圖片,各個結果圖尺寸需一致。

另外注意選擇圖與結果圖寬度需一致,結果圖上傳放置的順序應與選擇圖上的圖標順序相對應。

第3步:設置觸發區域

雙擊編輯區圖片,會出現一個觸發區域調整窗口。

觸發區序號為幾即代表第幾張選擇圖,用戶點擊該序號所在位置便會顯示該選擇圖,同時下方切換對應的結果圖。

注意四個觸發區的位置應左右平均擺放,否則可能導致點擊無法觸發。

調整觸發區到合適位置後,一定點擊「保存設置並退出」才算設置成功。

第4步:導入公眾號後臺

該效果不支持直接在編輯器體驗,點擊右側「預覽草稿」可掃碼預覽效果,效果滿意後接著點擊「同步至微信後臺」同步到自己的公眾號就可以了。

局部導入可參考:《iPaiban Pro小助手v2.0安裝和使用教程》《鏈接:https://mp.weixin.qq.com/s/0OjjcDQYPfubmcyYhJZ_2w》

現在新用戶註冊登錄iPaiban Pro 黑科技編輯器,在「新手禮包」可領取3天企業標準版會員體驗權,以及22個常用必備組件的大禮包《1年》。

認準編輯器網址:x.iPaiban.com,復制網址在 PC 端 Chrome《谷歌》瀏覽器打開,即可開始創作SVG交互排版《又稱公眾號交互圖文、互動圖文、黑科技排版、互動式排版》