想点哪里点哪里！如何使用 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条）