认识热区
热区是一个透明的元件(在预览时完全看不见),在原型制作的过程中使用其并不会对美观程度产生影响。
热区在基础元件中,可以看到有一个矩形和一个鼠标箭头组成。右边则是在画板里显示的热区。
使用热区
-
批量增加交互
很常见的一种使用场景是,我们在做一个表格时,每一行点击都进入当行的一个详情页面,如果不使用热区,我们就需要每个单元格去设置同一个交互点击事件。如果使用热区我们就只需要设置热区的点击事件即可,是不是很方便。
新建表格:
设置热区大小覆盖表格数据并设置交互事件
点击每一个表格数据都会进行跳转到表格详情展示页。这给我们带来了极高的效率和页面的整洁美观度。 -
用作移动端的分页加载
当我们使用手机进行浏览时,我们常常只能看到一屏的内容,当我们往下滑动时来看更多的内容,屏幕会出现往下滑动加载更多内容。我们可以设置当翻到加载热区时,自动加载更多内容。
设置交互事件:
实现效果为:
总结
热区主要的使用场景有很多,但可以归纳为两类主要的功能:
- 添加锚点,增大你所需要的反应区域;
- 添加交互事件,跳转区域和图层;
我们在使用热区时可以多尝试在不同的场景下使用,热区主要是为了提高效率来使用的,如果发现某些场景下不使用效率反而更加提升,那就大可不必去可以使用这列元件。最终我们都希望原型是在高效率下实现高保真的状态,所以各种元件的使用也需要具体情况具体分析。