上一篇文章我们学习了Axure的界面以及基本操作，明白了哪些区域的功能是用来干什么的，也能够通过基本的操作来自己做一些简单的页面交互
在这篇文章我们将继续学习交互效果，我们将学习到交互效果中的交互样式的两个常规操作，让你的页面看起来更高级
在开始学习之前，我们先了解一下交互的意义
交互，即交流互动，那么我们做的交互效果中的交互是谁跟谁在交互呢？
这个问题没有标准答案，你可以理解为用户与信息之间的交互，页可以理解为用户与产品之间的交互
这里就拿用户与一个产品的交互为例，比如我作为一个用户和Google之间的交互：
这里是Google的一个新建标签页，我要如何与它对话呢？它又如何与我交流呢？
看我接下来的操作：
我作为一个用户，想要进入Google新建标签页中的哔哩哔哩网站，也就是这个：
图1
那么作为一个用户，作为一个没有残疾大脑正常的我应该怎么做呢？
是的，我们会把鼠标指针先移动到这个红色方框内，然后点击它，于是我们就成功地进入了哔哩哔哩网站：
图2
图3
注意，在这个过程中发生了什么呢？用户与产品之间进行了哪些对话？互相交换了哪些信息呢？
我们把用户从Google标签页进入B站的过程分成下面几个步骤：
①找到哔哩哔哩网站的图标。如图1
②将鼠标指针移动到哔哩哔哩网站图标上。如图2
③好，确定瞄准图标了，点击鼠标左键！如图3
于是你成功到达哔哩哔哩首页门户
那么，在上面这个过程中，Google做了什么呢？
让我们用Google的视角重新看一下图1、图2、图3
①告诉你哔哩哔哩网站的图标在哪。如图1（得有一个按钮让你的眼睛看到）
②告诉你你的鼠标指针真的移动到了图标上面了。如图2（这里就是利用一个填充效果的改变让你观察到）
③让用户跳转进入界面。如图3（设置一个跳转的链接实现页面跳转）
所以，在你从Google进入B站的过程中，看似稀疏平常。可实际上，你们之间已经进行了三次你没有察觉到的交流互动。
那么现在，就让我们用Axure来学习上面这三种交流互动：
制作原型：从Google到Bilibili
第一步：首先我们要做的第一步是什么呢？创建我们需要的页面环境，我们需要两个页面：分别是Google和Bilibili，在站点地图创建好：
我们假设我们创建的Google就是Google，我们的Bilibili就是Bilibili，我们拉出两个一级标题来标注一下
第二步：接下来我们按照刚刚的操作步骤来对界面进行处理：
用户操作的第一步是用眼睛找到Bilibili的图标，那么我们先创建一个图标，作为传送门帮助用户跳转界面，从元件库拉出一个矩形，调整一下大小，双击输入文字，移动位置放到标题下方对齐（这里也可以用到我们第一课学习到的居中对齐功能，选中两个元件，点击居中对齐即可）：
现在我们就让用户用眼睛能够找到图标了
第三步：接下来我们让用户能够确认鼠标指针有没有移动到图标上
这里我们用到了交互功能中的交互样式，我们选中元件，点击交互—新建交互—选择“交互样式”中的“鼠标悬停”：
意思是设置鼠标指针悬停到该元件时，元件表现出不同的样式，用这种方式来让用户判定自己的鼠标指针有没有放置到元件上面
我们点击“鼠标悬停”后出先一个样式面板供我们对样式进行设置：
注意，这个时候元件属性页面的“样式”下的样式和“交互”下的样式是两种不同的样式，前者是元件本身的样式，后者是我们设置了“交互样式：鼠标悬停”之后，鼠标指针悬停在元件上时，元件表现出来的样式
为了大家更直观的理解，我们这里把元件本身的样式设置为填充色为红色，交互样式设置为鼠标悬停时，填充色为蓝色，点击“预览”：
是的，元件本身的样式被设置成了红色，所有鼠标指针没有移动到元件上时，它一直是红色
当你把鼠标指针放置在元件上时，它就会变成蓝色，用一种无声的语言告诉你：“你已经瞄准了我，可以开始点击了。”
第四步:像我们第一课中学习到的那样，新建交互—单击时—打开链接—选择“Bilibili”页面即可实现单击图标时界面跳转：
就这样我们利用Axure实现了从Google到Bilibili页面跳转的交互效果制作，自己试试吧！
我整理了一套产品经理学习大礼包福利。
含BAT大厂培训内部资料、PRD模板、面试真题。
微信公众号搜索“咸拾乱码”或扫描文末图片，关注公众号【咸拾乱码】发送【礼包】即可免费领取！公众号也会定期更新产品干货！
