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