Axure8 交互设计

目录（稍后给醋索引）

1.鼠标悬停

场景：甲方爸爸说鼠标悬停后可以切换样式，那么像这样简单的case就用如下办法解决就可

学点：理解交互样式

绘制一个框框，选中，在图1.1右边找到"鼠标悬停"，点击后出现图1.2

图1.1

图1.2

交互样式触发的事件类型只有四个，控制的元件属性也比较少

2.鼠标悬停时改变文字内容

场景：甲方爸爸说鼠标悬停后切换颜色（这个功能用上面方法1即可解决，下面的改变文字实际上是对上面的效果功能进行迭代）还要改变文字，显然比上面那个复杂了一丢丢，那么采用以下办法解决，也就是类似规则编辑器（也可以拿ow地图工坊的规则编辑器作比方）

学点：理解交互动作

绘制一个带文字的框框，选中，选择右边的"鼠标移入时"，弹出"用例编辑"设置框，如图2.1

图2.1

这里的case是系统识别到动作的归属者的差异性，即组件A的状态1是case1，组件A的状态2是case2，泛全局有效差异（即整个系统都是对组件A的状态1是case1，组件A的状态2是case2，切出去再对组件B进行设计时，会从case3开始编排）

在弹出的"用力编辑"框框中，点击"设置文本"。，如图2.2

图2.2

勾选"当前文件"，将"值"更改成要更改的的内容

图2.3

3.一级交互联动式改变效果内容

场景：甲方爸爸说我不要鼠标亲自触碰框框从而达到改变效果，要在"无触碰"下改变效果

学点：初步理解交互联动

思路：引进一个小伙伴C让其充当我们的开关，我们通过开关控制实现无接触改变效果

绘制一个带文字的框框，选中，选择右边的"鼠标移入时"，弹出"用例编辑"设置框，如图3.1

图3.1

对蓝色方块选中，点击“鼠标移入时”，弹出方框，选择 "触发事件"，选择作用对象，再选择鼠标移入时，完成移入的触发。

接着，按照一样的办法，完成移出的触发。

图3.2

完成上面两步的触发后，就完成啦。点击preview预览效果吧。

4.指示器+面板=金刚区

场景：场景不多说就是淘宝/美团中间的"金刚区"或者说是 banner区，与指示器配合使用

学点：掌握dramtic panel的使用

联系：就是墨刀软件中的局部滚动

思路：选中跟不选中，交互样式+交互逻辑

如图4.1所示，完成局部滚动的效果

图4.1

指示器的思路就是选中则黄，不选中则灰度。图4.2是第一个指示器的规则，其他两个指示器道理同。

每个指示器在交互样式那里选择选中就填充黄色。

此外，指示器是肯定有一个默认显示的，一般也是取第一个状态为默认状态，即第一个状态的指示器是显示黄色的。

图4.2

5.TabHost的制作

场景：底部导航栏

学点：交互

只需要改图中的那些东西就行，其他不用改不然就会乱，如图5.1

图5.1

最终总结

1.每个元件都需要命名，以免后面乱了。

2.逻辑想清楚，多操作！

最后编辑于：2020.07.26 21:46:29

禁止转载，如需转载请通过简信或评论联系作者。