Axure中热区的用法（二）

什么是热区呢？

热区，从字面意思来看的话，就是热点区域，也就是所谓的反应区域的意思。

在我个人平时的应用中，都是添加一些反应事件的区域使用的。

举个例子：

图标大小100*100，但是我需要在鼠标经过200*200的区域实现效果，这种就可以在图标的上层加上200*200的热区，做相应的事件反映区域了。

ps：这只是我实际应用场景的一个案例，其实我们平时了解了元件的性质后，可以应用一切适合的场景，不要束缚你的想象。

热区的其他用法：

1、可以添加成链接（譬如增大某处的反应区域时，添加热区作为反应区域比较好使）

2、跳转到层或区域（譬如微博的右侧方的＂回到顶部＂）

3、可以添加交互（譬如在做微博原型时，在翻到此处热区时自动加载下方更多）

打开工具,从左侧元件库中拖拽一个动态面板

2/11

双击动态面板，再双击打开状态1，然后，把日期选择图片粘贴到里面，并拖动到左上角的位置，点右键—顺序–设置为最底层

3/11

拖拽图片到动态面板区域,调整好大学

2020axure教程_0基础自学教程_限时398元

广告

4/11

从左侧元件库里面拖出四个图片热区，分别调整成合适的大小后覆盖在清空、今天、关闭三个按钮和要选择的日期数字上,下图我设置了一个热区,大家要做的话要全部设置上其他热区

5/11

分别设置热区的点击事件(如何设置点击事件大家看前几节课),点击清空上的热区时，删除日期文本框的文字

6/11

点击今天上的热区时，调用系统日期变量[[Year]]-[[Month]]-[[Day]]，将当前日期填入文本框。如果要是填前一天的就是[[Year]]-[[Month]]-[[Day-1]]喽，当天是月初1号，就是[[Year]]-[[Month-1]]-[[Day-1]]。

7/11

点击关闭上的热区时，设置隐藏动态面板。点击确定

8/11

点击日期数字上的热区时，直接设置文本框的值等于对应的日期就可以了。然后隐藏动态面板

查看剩余1张图

9/11

回到主页面给日历图标也加个鼠标点击事件，当鼠标点击时，切换动态面板可见性

10/11

在动态面板上点右键—编辑选项—设为隐藏。

11/11

生成原型界面,即可看到效果了

axure里很重要的一个特点也是体现他优越性的东西是可以实现交互（暂且讨论互联网pc端）

无论是低保真还是高保真

说到交互，什么是交互？

最常见的交互是怎么样的？

用户交互时最常见的 *** 作是什么样的？

————————————————————————分割线————————————————————————————————————

随着使用互联网时间的累积，随着使用互联网的经验变多 ，我们不可否认，虽然在使用中使用手册必不可少，但是很多 *** 作内容在大众心里都会有一些约定俗成的东西，比如移动端的使用中，如果我们想实现某些功能，可能你就会去尝试右滑、左滑或者长按等基本且屡试不爽的 *** 作去寻找我们想要完成的 *** 作。

这种约定俗称的东西，我们在pc端中会见到类似”汉堡菜单“或者箭头等来表示一类 *** 作的集合，在产品设计的初期必然会遇到交互的地方，所以现在说说在axure中如何实现单击”汉堡菜单‘出现待选选项。

场景：点击button，出现可以选择的东西

1.如图1，建立一个button按钮，

2.旁边新建一个热区或者矩形区域，将其命名为“d出框”，新建成功后右键选择"设为隐藏”将其隐藏，同时该区域会变色，如图2

3.设置交互，点击button，在右上角属性中选择“鼠标单击时”，进入交互设置，如图3

4.选择元件：显示/隐藏，如图4.

5.选择成功后，对该axure页面进行预览，点击button就会出现“d出框“啦~

*** 作教程已经结束啦，大家一定要学会举一反三，有很多种元件可以添加，互联网的交互性是非常强的，体现在设计的任何角落，有具体问题可以微信进行联系，方便交流，wechat：haiqay

---