“點(diǎn)擊彈圖和點(diǎn)擊彈窗，有啥不一樣啊？”
點(diǎn)擊彈出圖片和點(diǎn)擊彈窗，經(jīng)常會(huì)有人用錯(cuò)，其實(shí)這是兩種完全不同的交互效果。
我們?cè)賮眢w驗(yàn)一下
點(diǎn)擊彈出圖片：
組件：點(diǎn)擊彈出-彈出圖片(設(shè)置多個(gè)觸發(fā)區(qū))
編號(hào)：10100（組件）
點(diǎn)擊彈窗：
組件：點(diǎn)擊-懸浮彈窗(無限次彈出,相同關(guān)閉位置)
編號(hào)：11114（組件）
點(diǎn)擊彈出圖片效果可以在一張圖片上設(shè)置多個(gè)觸發(fā)點(diǎn)，點(diǎn)擊彈窗效果同樣也可以在一張圖片上設(shè)置多個(gè)觸發(fā)點(diǎn)。
看著挺像，其實(shí)很不一樣。
點(diǎn)擊彈出圖片實(shí)際上是利用微信的圖片機(jī)制，將一張圖片藏在了正文中的某個(gè)位置，這張圖一直在屏幕中；點(diǎn)擊彈窗則是通過點(diǎn)擊指令使得擺放在某個(gè)坐標(biāo)的位圖移入到屏幕中，這張圖在不觸發(fā)指令前其實(shí)是在屏幕外。
點(diǎn)擊彈出圖片的優(yōu)點(diǎn)是彈出圖可以保存；點(diǎn)擊彈窗在定制時(shí)可以給彈窗疊加圖層，增加彈幕、輪播banner、小程序、超鏈接等效果（如需定制可聯(lián)系大師兄微信（ID：iPaiban001））。
這兩個(gè)效果都很受歡迎，明白了兩者的不同，今天再向大家推薦一下它們的進(jìn)階效果——點(diǎn)擊彈圖或彈窗的同時(shí)，底部的圖片也會(huì)切換。
這種進(jìn)階效果會(huì)讓交互更加符合邏輯，也會(huì)有更多創(chuàng)意發(fā)揮的空間，比如點(diǎn)擊信封彈出圖片，信封同時(shí)打開：
組件：點(diǎn)擊-彈出同時(shí)切換圖片(有觸發(fā)區(qū))
編號(hào)：11095（組件）
點(diǎn)擊電梯彈出畫外音窗口，配合文案電梯門同時(shí)打開：
組件：點(diǎn)擊-切換圖片+彈窗(彈窗可關(guān)閉)
編號(hào)：11534（組件）
前者是點(diǎn)擊彈圖同時(shí)切換圖片，之前介紹過教程，感興趣的戳：《圣誕節(jié)經(jīng)典玩法升級(jí)了，點(diǎn)擊彈出的同時(shí)還能切換背景！》；后者是最新上線的點(diǎn)擊彈窗同時(shí)切換圖片，它的制作方法有一些不同之處，一起看下它的教程吧：
詳細(xì)教程：
工具：iPaiban Pro 黑科技編輯器，網(wǎng)址：x.iPaiban.com
組件：點(diǎn)擊-切換圖片+彈窗(彈窗可關(guān)閉)
編號(hào)：11534（組件）
第1步：選擇組件
登錄 iPaiban Pro 編輯器后，點(diǎn)擊編輯器左側(cè)「組件」按鈕，在「彈出 | 彈窗」分類中找到「點(diǎn)擊-切換圖片+彈窗(彈窗可關(guān)閉)」組件，或者直接搜索組件編號(hào)11534，點(diǎn)擊選擇。
第2步：上傳圖片
圖片素材共需要3張，分為點(diǎn)擊前、點(diǎn)擊后和彈窗圖，點(diǎn)擊前和點(diǎn)擊后指點(diǎn)擊切換的兩張圖。3張圖片尺寸需保持一致。
第3步：調(diào)整動(dòng)畫時(shí)間
這里的動(dòng)畫時(shí)間為圖片切換和彈窗出現(xiàn)動(dòng)畫的時(shí)間，滑動(dòng)滑桿任意設(shè)置。如果切換的是GIF，設(shè)置為0.1s最佳。
第4步：設(shè)置觸發(fā)區(qū)域
雙擊編輯區(qū)的圖片，調(diào)出觸發(fā)區(qū)域調(diào)整窗口，紅色色塊代表觸發(fā)區(qū)域。
拖動(dòng)紅色色塊首先調(diào)整點(diǎn)擊切換并彈窗的觸發(fā)區(qū)域，點(diǎn)擊「下一張」，調(diào)整關(guān)閉彈窗的觸發(fā)區(qū)域。
第5步：導(dǎo)入公眾號(hào)后臺(tái)
點(diǎn)擊最右側(cè)「預(yù)覽草稿」微信掃碼預(yù)覽效果，效果滿意后點(diǎn)擊「同步至微信后臺(tái)」同步到自己的公眾號(hào)就可以了。
使用同步功能不用頻繁在編輯器和微信后臺(tái)切換，同步成功后可以立即掃描二維碼預(yù)覽在公眾號(hào)的效果。
如需局部導(dǎo)入可參考：《iPaiban Pro小助手安裝和使用教程》
制作SVG交互圖文認(rèn)準(zhǔn) iPaiban Pro 黑科技編輯器，網(wǎng)址：x.iPaiban.com，復(fù)制網(wǎng)址在 PC 端 Chrome（谷歌）瀏覽器打開，即可開始注冊(cè)并使用。
新用戶在「新手禮包」可領(lǐng)取3天企業(yè)標(biāo)準(zhǔn)版會(huì)員體驗(yàn)權(quán)，以及22個(gè)常用必備組件的大禮包（1年）。隨禮包附贈(zèng)千元優(yōu)惠券，每單最高立降500元。
轉(zhuǎn)載請(qǐng)?jiān)谖恼麻_頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請(qǐng)聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請(qǐng)至數(shù)英微信公眾號(hào)(ID: digitaling) 后臺(tái)授權(quán)，侵權(quán)必究。
評(píng)論
評(píng)論
推薦評(píng)論
暫無評(píng)論哦，快來評(píng)論一下吧！
全部評(píng)論（0條）