5分钟玩转Axure之热区

基础元件-热区

    • 认识热区
    • 使用热区
    • 总结

认识热区

热区是一个透明的元件(在预览时完全看不见),在原型制作的过程中使用其并不会对美观程度产生影响。
热区在基础元件中,可以看到有一个矩形和一个鼠标箭头组成。右边则是在画板里显示的热区。
5分钟玩转Axure之热区_第1张图片5分钟玩转Axure之热区_第2张图片

使用热区

  • 批量增加交互
    很常见的一种使用场景是,我们在做一个表格时,每一行点击都进入当行的一个详情页面,如果不使用热区,我们就需要每个单元格去设置同一个交互点击事件。如果使用热区我们就只需要设置热区的点击事件即可,是不是很方便。
    新建表格:
    5分钟玩转Axure之热区_第3张图片
    设置热区大小覆盖表格数据并设置交互事件
    5分钟玩转Axure之热区_第4张图片
    5分钟玩转Axure之热区_第5张图片
    点击每一个表格数据都会进行跳转到表格详情展示页。这给我们带来了极高的效率和页面的整洁美观度。

  • 用作移动端的分页加载
    当我们使用手机进行浏览时,我们常常只能看到一屏的内容,当我们往下滑动时来看更多的内容,屏幕会出现往下滑动加载更多内容。我们可以设置当翻到加载热区时,自动加载更多内容。
    5分钟玩转Axure之热区_第6张图片
    设置交互事件:
    5分钟玩转Axure之热区_第7张图片
    5分钟玩转Axure之热区_第8张图片
    实现效果为:
    5分钟玩转Axure之热区_第9张图片
    5分钟玩转Axure之热区_第10张图片

总结

热区主要的使用场景有很多,但可以归纳为两类主要的功能:

  1. 添加锚点,增大你所需要的反应区域;
  2. 添加交互事件,跳转区域和图层;

我们在使用热区时可以多尝试在不同的场景下使用,热区主要是为了提高效率来使用的,如果发现某些场景下不使用效率反而更加提升,那就大可不必去可以使用这列元件。最终我们都希望原型是在高效率下实现高保真的状态,所以各种元件的使用也需要具体情况具体分析。

你可能感兴趣的:(5分钟玩转Axure,产品设计,产品经理)