想點(diǎn)哪里點(diǎn)哪里！如何使用 iPaiban Pro 精確設(shè)置交互圖文的觸發(fā)區(qū)？
這是一個(gè)普通的點(diǎn)擊切換圖片：
這是一個(gè)有點(diǎn)不普通的點(diǎn)擊切換圖片：
可以明顯看到，后者的特殊之處在于只有點(diǎn)擊特定的區(qū)域才會(huì)觸發(fā)切換圖片的交互。
這樣的好處是使得交互更加精細(xì)了，很多時(shí)候還會(huì)防止用戶的誤觸。
iPaiban Pro 黑科技編輯器為許多交互模板都提供了設(shè)置觸發(fā)區(qū)域的功能，但很多初次使用該功能的小伙伴常常會(huì)遇到一些小問(wèn)題，比如觸發(fā)區(qū)變紅了、點(diǎn)擊觸發(fā)區(qū)沒(méi)有反應(yīng)等。
今天整理了5種模板設(shè)置觸發(fā)區(qū)的情況，看完這篇自己再設(shè)置觸發(fā)區(qū)時(shí)基本就沒(méi)有啥問(wèn)題了。
1只調(diào)整位置
適用模板：隱藏式音頻相關(guān)組件
代表模板：
組件：音頻-隱藏式音頻(需上傳素材,防誤觸)
編號(hào)：10103（組件）
隱藏式音頻的觸發(fā)區(qū)設(shè)置起來(lái)很簡(jiǎn)單。
選擇音頻組件后，先上傳圖片并輸入音頻id再設(shè)置觸發(fā)區(qū)。編輯區(qū)圖片上的紅色方塊即為音頻觸發(fā)區(qū)，該方塊大小固定，我們只能拖動(dòng)調(diào)整位置。
2可調(diào)整位置和大小
適用模板：點(diǎn)擊切換圖片相關(guān)組件；點(diǎn)擊展開(kāi)相關(guān)組合
代表模板：
組件：點(diǎn)擊-切換圖片(設(shè)置觸發(fā)區(qū)域)
編號(hào)：10043（組件）
組件：雙擊-切換圖片(設(shè)置觸發(fā)區(qū)域)
編號(hào)：10030（組件）
組合：點(diǎn)擊展開(kāi)(有觸發(fā)區(qū))
編號(hào)：10051（組合）
大部分模板調(diào)整觸發(fā)區(qū)的方式是這一種。
素材上傳完畢后，我們雙擊編輯區(qū)的圖片，便調(diào)出觸發(fā)區(qū)域調(diào)整窗口。
點(diǎn)擊紅色區(qū)域激活，激活后，按住鼠標(biāo)左鍵拖動(dòng)紅色區(qū)域，可以調(diào)整位置，按住鼠標(biāo)左鍵拖動(dòng)紅色區(qū)域的邊界，可以調(diào)整大小。
如果想要更精細(xì)的確定區(qū)域，可以通過(guò)輸入數(shù)值調(diào)整。設(shè)置完畢關(guān)掉窗口即可。
在編輯區(qū)我們點(diǎn)擊圖片右上角可以顯示紅色方塊，進(jìn)一步確定觸發(fā)區(qū)域的位置，但正式發(fā)布時(shí)一定要將紅色方塊隱藏掉，否則就翻車?yán)病?/p>
3可調(diào)整位置和大小
但比例不變
適用模板：局部切換圖片、滑動(dòng)圖片、視頻等相關(guān)組件
代表模板：
組件：點(diǎn)擊-局部切換圖片(可調(diào)整大小及位置)
編號(hào)：10163（組件）
組件：普通滑動(dòng)-左滑(可調(diào)整大小及位置)
編號(hào)：10159（組件）
組件：視頻-無(wú)縫拼接(可調(diào)整大小及位置)
編號(hào)：10152（組件）
局部切換圖片、滑動(dòng)圖片、視頻是指將切換圖片等交互在背景圖的某一局部顯示，就像這種：
這里我們講的觸發(fā)區(qū)其實(shí)是指交互顯示的區(qū)域。設(shè)置方法和情況2一樣，唯一不同是，為了保證素材的完美呈現(xiàn)，無(wú)論我們?cè)鯓诱{(diào)整紅色方塊（觸發(fā)區(qū)）的大小，素材比例是不變的，比如視頻一直保持16:9。
那調(diào)整時(shí)我們就需要注意這樣一個(gè)原則：用紅色方塊左上角確定素材的位置，右上角確定素材的大小。詳細(xì)教程見(jiàn)：《局部點(diǎn)擊切換、局部視頻、局部滑動(dòng)……這是怎么做到的？》
4可調(diào)整位置和大小
但需按對(duì)應(yīng)觸發(fā)結(jié)果擺放
適用模板：多點(diǎn)超鏈接、小程序、彈出圖相關(guān)組件
代表模板：
組件：超鏈接-圖片(設(shè)置多個(gè)鏈接區(qū))
編號(hào)：11134（組件）
組件：小程序-圖片(設(shè)置多個(gè)小程序)
編號(hào)：11135（組件）
組件：點(diǎn)擊彈出-彈出圖片(設(shè)置多個(gè)觸發(fā)區(qū))
編號(hào)：10100（組件）
有時(shí)候一張圖片上可能有多個(gè)觸發(fā)區(qū)域，比如多點(diǎn)點(diǎn)擊彈出圖片。
單獨(dú)調(diào)整某個(gè)觸發(fā)區(qū)域的方式和情況2一樣，但擺放時(shí)我們要注意將位置與觸發(fā)結(jié)果對(duì)應(yīng)，另外關(guān)閉調(diào)整彈窗時(shí)一定要點(diǎn)擊「保存設(shè)置并退出」按鈕才算設(shè)置成功。
5兩處不同觸發(fā)只需設(shè)置一處
適用模板：點(diǎn)擊移入點(diǎn)擊移出相關(guān)組件；點(diǎn)擊展開(kāi)點(diǎn)擊收回相關(guān)組件、組合
代表模板：
組件：點(diǎn)擊移入點(diǎn)擊移出(左進(jìn)右出)
編號(hào)：11854（組件）
組件：點(diǎn)擊展開(kāi),點(diǎn)擊收回(無(wú)限循環(huán))
編號(hào)：10237（組件）
組合：點(diǎn)擊展開(kāi),點(diǎn)擊收回(無(wú)限循環(huán))
編號(hào)：10284（組合）
還有一些交互有兩次觸發(fā)且觸發(fā)結(jié)果不同，這樣的我們一般只有一處可以設(shè)置觸發(fā)區(qū)域。
比如點(diǎn)擊移入點(diǎn)擊移出的效果：
雙擊圖片后要設(shè)置的紅塊區(qū)域是控制點(diǎn)擊移入的，點(diǎn)擊移出的觸發(fā)區(qū)域無(wú)需設(shè)置，紅塊以外的區(qū)域默認(rèn)為點(diǎn)擊移出的觸發(fā)區(qū)域，但我們?cè)谠O(shè)計(jì)圖片時(shí)可以引導(dǎo)用戶點(diǎn)擊某一特定區(qū)域觸發(fā)，就像上圖一樣。
還有一個(gè)點(diǎn)擊展開(kāi)點(diǎn)擊收回的效果：
雙擊圖片后要設(shè)置的紅塊區(qū)域是控制點(diǎn)擊收回的，點(diǎn)擊展開(kāi)無(wú)需設(shè)置觸發(fā)區(qū)域，點(diǎn)擊展開(kāi)的觸發(fā)區(qū)域默認(rèn)為整張展開(kāi)前圖片。詳細(xì)教程見(jiàn)：《可以無(wú)限次玩的【展開(kāi)>收縮】來(lái)啦！》
最后再給大家補(bǔ)充幾點(diǎn)統(tǒng)一適用的注意事項(xiàng)：
1.觸發(fā)區(qū)域范圍不可超出圖片邊緣
2.有多個(gè)觸發(fā)區(qū)域時(shí)觸發(fā)區(qū)域不能互相重合
3.圖文發(fā)布時(shí)要將觸發(fā)區(qū)域的紅色色塊隱藏
對(duì)了，如果你想要查找某個(gè)交互效果在編輯器中是否有可以設(shè)置觸發(fā)區(qū)的模板，有兩種方式可以進(jìn)行快速篩選。
一種是搜索關(guān)鍵詞。
搜索時(shí)輸入交互效果的關(guān)鍵詞后，后面緊跟空格輸入「觸發(fā)區(qū)」三個(gè)字即可。比如想要可以設(shè)置觸發(fā)區(qū)的點(diǎn)擊切換圖片組件，可以搜索關(guān)鍵詞「點(diǎn)擊 切換 觸發(fā)區(qū)」。
另一種是根據(jù)分類查找。
同樣是查找可以設(shè)置觸發(fā)區(qū)的點(diǎn)擊切換圖片組件，我們選擇點(diǎn)擊-普通切換-更多衍生組件，然后選中「有觸發(fā)區(qū)」就能看到了。
制作SVG交互圖文認(rèn)準(zhǔn) iPaiban Pro 黑科技編輯器，網(wǎng)址：x.iPaiban.com，復(fù)制網(wǎng)址在 PC 端 Chrome（谷歌）瀏覽器打開(kāi)，即可開(kāi)始注冊(cè)并使用。
新用戶在「新手禮包」可領(lǐng)取3天企業(yè)標(biāo)準(zhǔn)版會(huì)員體驗(yàn)權(quán)，以及22個(gè)常用必備組件的大禮包（1年）哦。
一個(gè)互動(dòng)
你對(duì)觸發(fā)區(qū)的設(shè)置還有什么疑問(wèn)？
留言區(qū)聊聊
● SVG 黑科技交互排版????????
·
點(diǎn)個(gè)“在看”
戳沙小僧（playhudong033）
領(lǐng)取交互圖文案例庫(kù)15天會(huì)員（含數(shù)千品牌的1萬(wàn)+案例）
轉(zhuǎn)載請(qǐng)?jiān)谖恼麻_(kāi)頭和結(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)論
暫無(wú)評(píng)論哦，快來(lái)評(píng)論一下吧！
全部評(píng)論（0條）