.

1.热区 / Link

老赵发表于:2015年01月03日 20:35:04更新于:2023年07月24日 23:26:50

00160f671a5c71208be24708618dbd2


点击播放热区优酷视频教程

【老版】无广告教程网址


一、应用场景

热区组件的便利性在于:可在任意位置、设置任意区域,类似一张可自由调整的透明图片,主要作用有两个:

  • 针对选中区域设置触发器,如包括:点击/长按/鼠标移入/鼠标移出等触发器,进而设置触发行为;

  • 在元素顶层显示,用来遮挡手势触发


二、组件用法

基本用法

1.点击添加热区

image.png


2.热区尺寸大小可调整

image.png


3.点击选中热区,在右侧面板中可以设置相关的链接或者触发器等

image.png


4.热区多是跟元素结合使用,放置在元素的上方,如图:在一张图片的某个位置添加热区,可给这个热区设置触发器;当用户点击这个区域时,以触发某个行为。

image.png


5.遮挡手势触发是如何做到的:如热区设置初始隐藏

image.png

当用户点击该冰淇淋图片区域一次后,就显示热区(即不再隐藏热区),这样用户就不能再次点击该区域的冰激凌,起到遮挡手势的作用。当然这只是个例,关于热区的使用方法可根据个人需要设置。

image.png


高级用法

1.所有触发动作都支持,更常用的是跳转页面、打开网址

blob.png


2.辅助形成循环点击效果

元素A第1次点击时,元素B隐藏;

元素A第2次点击时,元素B显示;

元素A第3次点击时,元素B隐藏;

元素A第4次点击时,元素B显示;

........

以此类推,形成点击循环,如图:

0015ae1a18add9ba354d2c822638a4b

问题思考:

如果给元素A设置两个触发行为:隐藏元素和显示元素是不可行的,因为对于触发器来说,他无法识别对于同一个元素B,要做出得命令到底是显示还是隐藏。

所以需要借助热区来达成这一效果,具体设置:

(1)添加元素,并且热区覆盖住要点击的元素A

image.png


(2)因为元素B一开始是看不到的,热区第一次点击也是用不到的。所以元素B跟热区都分别设置初始隐藏。如图:

image.png


(3)把热区用鼠标右键单击暂时隐藏下,去设置元素A的触发器,第一次点击时显示元素B跟热区。

0015ae1a6a85981463a64f3edb76969


(4)再去给热区设置触发器,点击时隐藏元素B和热区本身。记得提前到资源管理面板显示热区。如图:

0015ae1a6e241d72528bd039d950a73

设置完成。


3.单张图片,多个区域点击触发不同动作

上传到编辑器中的图片,如果不想在PS等设计软件中裁切图片,可以导入一整张图,在上面添加不同的热区分布,触发不同区域的动作,如图:

image.png


4.遮挡手势。举例说明:假设页面中有4个选项,当用户点击完任意2个选项时,就不允许用户点击其他选项。这时,可以用一个参数配合触发热区显示。设置如下:

(1)页面中添加4个选项元素,1个热区(热区要覆盖在所有元素顶层,初始隐藏),1个参数变量(初始值为0)。

image.png


(2)给参数变量设置触发条件,当参数=2时,触发热区显示(不让用户再去选择其他选项。);并设置等待触发。

0015ae1abb3c8b305c0e4811aa1dd10


(3)给每个选项(A、B、C、D)设置点击时触发参数变量+1,如图:

image.png


4)并在点击的同时触发执行参数判断

0015ae1ac5ee0c5932e9e2e1bdcc4c1


(5)每个选项都这样设置,完成。效果如图:

0015ae1ae2188b42090ba9c588a213d

以上就是热区常见的几个使用场景,热区的使用非常灵活,欢迎大家不断发现,开启新技能。

--------- 不了解设计的程序员不是好客服 ---------------

回复(6)