最新消息:本站教程基于Axure RP 9.0.0.3723及更高版本,请在学习前确认软件版本是否符合要求,以免因为界面差异导致学习障碍!

动态面板的应用(4)

教程 小楼一夜听春语 2097浏览

在移动端的原型设计中,通过手指拖动切换不同界面的操作很常见。

这样的交互设计,我们可通过动态面板的多个状态来实现。

在画布中,我们添加一个动态面板,命名为“切换面板”,并且为它添加3个状态,每个状态中放入一个矩形表示面板中的内容。

接下来,给动态面板添加[向左拖动结束时]的交互,[设置面板状态]为[下一项],并且设置[动画]为“500”毫秒的[向左滑动]效果。

界面的切换不需要循环切换,也就是到最后一个界面不会再切换回第一个界面,所以,不需要勾选[向后]循环的选项。

然后,再给动态面板添加[向右拖动结束时]的交互,[设置面板状态]为[上一项],并且设置[动画]为“500”毫秒的[向右滑动]效果。

此时,在浏览器中查看原型的话,就能够进行左右拖动的操作了。

拖动的交互是动态面板独有的。

所以,如果想在原型设计中,需要添加拖动的交互时,最简单的就是把需要拖动的内容添加到动态面板中,然后通过给动态面板添加拖动的交互来实现。

/教程源文件/

不习惯看文字教程?还有《Axure RP 9萌新修炼视频》奉上!

转载请注明:iaxure.com » 动态面板的应用(4)