axure如何出现交互鼠标点击时的状态(axure鼠标悬停交互)

基于Axure RP8实现的一些简单交互

如何实现如下图所示点击a,b,c三个按钮实现上方图片的切换

（1）首先我们先放置三个矩形框建立整体布局

（2）在大的矩形框上面放置动态面板，这是实现图片切换的重要条件（实现banner轮播同样需要这一步骤），本次例子是实现三张图的切换，所以再增加两个状态，点击右下角动态面板点击加号添加状态，如下图所示操作

（3）添加完三个状态后，为每个状态添加一张图片，例如双击state1进入面板状态state1，然后添加自己需要的图片，如下图操作，state2，state3操作同上

（3）接下来我们再来设置a,b,c三个切换键，为了使页面加载完a切换键就是黄色并且点击任意切换键该切换键会显示黄色，我们来进行如下操作：设置a键，将属性框下的选中勾中（为了实现页面加载完a键就显示为黄色），然后点击鼠标按下设置事件，设置填充颜色，点击确定，设置完成。b,c键除了不勾选中外，剩下的和a键操作相同。

（4）接下来实现点击三个按键后图片进行切换功能，还是先设置a键，在右边属性栏交互事件里双击鼠标单击时进入事件编辑，如下图，点击设置选中，将abc三个矩形选中，a为true，其他两个为false（设置b键b为true，设置c时c为true其余为false），设置完后再设置面板状态，具体操作如下图，在a键设置下，选择状态为state1，进入动画退出动画按自己的喜好选择，bc键设置下选择状态分别为state2，state3

（5）通过以下设置，这个交互事件设置也就完成了，按下F5可以进入网页查看设置后的效果。

? ? ? ?? 感谢查看，如有错误和意见请大家多多指点！

【交互样式】，一个被忽视的交互设计，你需要重新认识

Axure是一款快速原型制作工具，利用Axure的事件、动作可以制作出高保真交互原型，是产品Demo演示的利器。丰富的事件和灵活的动作，使得Axure在交互设计领域一骑绝尘。事件和动作并不是万能的，有些时候还需要配合交互样式，才能制作出色的交互原型。交互样式常常被一些新手忽略，甚至有些交互达人也会将它遗忘。

Axure提供的交互样式包含：鼠标悬停、鼠标按下、选中、禁用和获取焦点。本文将和大家聊一聊这5种交互样式的作用和使用场景。

鼠标悬停，即鼠标悬浮停靠在上方所呈现出的一种视觉样式。鼠标悬停的应用随处可见，如京东首页的导航菜单，人人都是产品经理的文章标题，都运用了鼠标悬停的交互效果。当鼠标停靠在导航菜单的上方、停靠在文章标题的上方，文字的颜色都发生了变化。鼠标悬停的交互样式被广泛运用于PC端的按钮、导航菜单、文字链接等设计元素中，在移动端则不会使用这一交互样式。

我们来看看，在Axure当中如何设置鼠标悬停的交互样式。选中目标元件（通常为文本标签或形状），鼠标右键菜单选择“交互样式”或点击右侧交互面板的“新建交互”，在事件列表中找到交互样式“鼠标悬停”，打开样式设置面板，在这里可以设置填充色、边框线（描边）、字体、阴影、圆角等样式属性。设置的样式属性会随着鼠标悬停的动作而被触发，因此这里的样式属性是动态的，不同于平面设计中的静态样式。

鼠标按下、选中、禁用及或获取焦点的样式设置方法与鼠标悬停相同，因此，下文中，关于这四种交互样式的设置不再重复讲解。

鼠标按下，顾名思义即当鼠标按下时显示的样式，这是操作按钮的一个基本样式。鼠标按下与正常、禁用构成了按钮的基础状态样式。鼠标按下与鼠标长按是不同的，运用时要注意区分。鼠标按下是一个瞬间的动作，即时响应，是Axure的交互样式；而鼠标长按是有时间要求的，要求鼠标按下一段时间后才做出动作响应，是Axure当中的交互事件。

选中作为选项被用户选择后所呈现的视觉样式。常用于单选、复选、导航、标签的交互设计。当我们设计单选的选中效果时，首先需要将这些选项设置成一个组。鼠标拖拽框选这几个选项，鼠标右键操作菜单选择“选项组”并做好命名。选中交互样式通常需要配合某个事件，才能发挥它的作用，一般与鼠标单击事件配合使用。

禁用作为按钮不可用的一种视觉样式，与鼠标按下一样，都是按钮的一种特殊状态。按钮的禁用与启用，通常都是依据一些条件判断。禁用状态的视觉样式要与正常状态下进行明显的区别，一般通过降低按钮填充色和文字的饱和度进行灰度处理，或者直接将按钮的填充色设置为灰色，在视觉上给用户呈现一种不可用的状态。与选中相似，禁用也需要与事件、动作配合使用，才能发挥他的作用。触发禁用样式的事件通常还需要添加逻辑条件。与禁用样式配合使用的事件主要包含：文本改变、鼠标单击、载入时，配合的动作仅有禁用，当然也可以与其它的事件配合，制作出更酷炫实用的交互，这些都有待于大家去探索。

禁用的使用场景有很多，如表单信息的填写，当信息填写不完整时，保存按钮可以设置为禁用样式。在Axure当中的设置方法其实很简单，为这些输入项的文本改变事件添加一个条件，当输入项为空，触发动作禁用保存按钮。

获取焦点常用于文本输入框获取输入焦点或突出一段文字信息时使用，主要目的用于吸引用户的目光。“获取焦点”样式想要发挥作用，同样也离不开与事件、动作的协同配合。与获取焦点样式配合使用的事件一般有：鼠标单击、鼠标移入、获取焦点，配合的动作仅有获取焦点。

本文的主要内容，总结起来有以下几条：

1. 交互样式是一种动态的样式属性；

2. 交互样式支持设置颜色、字体、描边、阴影、圆角等二十余种属性；

3. 鼠标悬停、鼠标按下属于随鼠标动作而触发的交互样式，不需要关联事件和动作；

4. 选中、禁用、获取焦点需配合事件、动作才能发挥作用，但触发交互样式的动作是固定的。

善于利用这些交互样式，让这些视觉的样式属性也能够动起来，可以极大的提高原型的保真度。交互技法的学习其实并不困难，重要的是我们要有交互设计的意识。多去思考、探索、研究，Axure当中这几类交互功能的作用，如何有效的将事件、动作、样式合理的结合在一起，制作出更丰富、更有用的交互效果，提升产品的交互体验。

【Axure10】交互功能-启用情形

进行交互事件的命名，在命名后，存在多个交互事件在预览与展示是可以展示对应的交互名称。方便快速选择交互逻辑。

命名可以方便进行部分交互事件的后期修改定位。

设置的所有的条件全部满足时，才会触发交互动作。

只需设置所有的条件满足其中一个就会会触发交互动作。

设置一些前置条件。通过设置条件来对交互动作进行约束。

设置对应的用于对比的类型。

值（text Value）

变量值

变量值长度

元件文字

焦点元件文字（焦点元件上的文字）

元件文字长度（元件值长度）

选中状态（选中项值）

禁用状态值

错误状态值

面板状态

元件可见性

按下的键

指针（光标）

元件范围

自适应范围

与类型进行关联，选择类型中的元件、公共变量、选项等。

此处的对应条件与类型挂钩，不同类型中可选项不同。

目前对比条件包含：==、!=、 、、=、=、包含、不包含、是、不是等。

在部分类型中，对应条件只能选择是与不是（例如：禁用状态、选中状态）。

类型与之对比参数。设置项与类型相同。

结果类型对应的状态、值等参数。

新增新的条件。

删除当前选中的条件。

一些常用的条件对比，可以快速的进行复用，提高效率。

设置完成的条件，会集中展示在本区域。方便快速查看，梳理。

条件本身就是一些逻辑的判断对比，在制作原型引用条件时，最好先梳理相关流程关系，然后进行添加对应的条件。

axure 下拉列表和文本框控件怎么设置鼠标经过和鼠标点击边框效果

由于Axure到目前版本都不能通过事件去改变控件的属性，所以要制作你这样的效果需要折中一下，那就是用动态面板。在动态面板第一个状态里放置初始状态的文本框，第二状态里设置带有边框效果的文本框。然后鼠标经过或者点击事件，将动态面板从状态一切换到状态二，事件结束再将动态面板状态二切换到状态一。