美文网首页
Axure8 交互设计

Axure8 交互设计

作者: CallMeRaymon | 来源:发表于2020-07-26 19:20 被阅读0次

目录(稍后给醋索引)

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.逻辑想清楚,多操作!

相关文章

网友评论

      本文标题:Axure8 交互设计

      本文链接:https://www.haomeiwen.com/subject/owtglktx.html