交互动效的构成
目标:谁触发交互
事件:什么动作触发
动作:触发后执行什么
情形:触发的条件
大部分情况下,只会涉及目标、事件和动作。比较复杂情况下需要用到情形。
1、目标
点击不同元件,交互动作会有差异。如图所示,分别点击按钮和动态面板,右侧交互显示有所不同。
2、事件
选择按钮,点击新建交互后,就会显示出各种事件
3、动作
任意选择一个事件后,就会出现动作选择
设置完成,鼠标单击,打开测试页面,下面进行预览。
点击预览后,自动跳到浏览器,进入web页面 。点击按钮
即可跳转到测试页
上面依靠目标、事件和动作即可完成一个简单交互动效。
4、情形
下面加入情形
将鼠标放置在“鼠标单击时”旁边,就会出现“启用用例”选项,点击“启用用例”
点击添加逻辑
在这个页面中,即可设置交互动效发生情形。此时页面的意思为,只有当前元件文字显示为“按钮”时,才可以完成交互动效,如果改成其他文字,则无法完成动效
设置完成后,交互状态显示如下
简单交互动效
以微信朋友圈为例完成交互动效
要点1:在页面处给“发现”和“朋友圈”分好层级。在设置交互动效时,既可以直接设置从朋友圈返回发现页,也可以设置从朋友圈返回上一级。
要点2:元件库中“图像热区”的使用。图像热区在预览时不会出现,但可以在制作时,帮助覆盖更多区域,在覆盖区域内进行事件都可以完成动作。
效果预览
动态面板
动态面板是用来存放多个元件的容器,其中包含多个状态,多个状态可以通过交互动作控制切换
三个页面,设置三种切换效果:点击左右按钮切换、点击123切换,向左向右滑动切换。