Axure动态面板常用就这几个

原创文章 分类: 教程 版权:
1575 7 6 2
2018-05-17
9.2

本节课和大家一起分享axure的动态面板的用法以及如何在案例中灵活的运用,在大部分的交互结构中,我们都可以用动态面板去模拟实现出来。



大家好!我是海哥。欢迎阅读学习《海哥交互行》精品课程。



本节课和大家一起分享axure的动态面板的用法以及如何在案例中灵活的运用,在大部分的交互结构中,我们都可以用动态面板去模拟实现出来。所以,我们掌握动态面板就可以掌握axure的一些核心内容。那常用的动态都会运用到那些模式呢?在这里我向大家列举了9中案例模式,最后带大家一起用实践去练习如何的掌握这九种动态面板使用方法。


Image title


露一半(裁切)


在动态面板中,露一半(裁切)在很多图片、视频等展示的时候,为了节省空间,从而采取的一种交互模式,在移动端通常通过左右滑动,在PC端通过点击左右切换来实现查看更多。这样的交互方式可以更好的排版空间,而展示更多的内容。


Image title

案例详情

首先我们需要用axure画出下面交互原型图


Image title然后单击右键通过转化为动态面板


Image title


最后就可以通过调整动态面板的大小来实现内容区显示区域大小

Image title


栏目跳转


栏目跳转主要运用在一些需要当前页面切换的地方,比如类似下面的给出的这种菜单切换。也是最核心和最直接的使用模式。

Image title案例详情


首先我们需要用axure画出下面交互原型图


Image title


然后单击右键通过转化为动态面板


Image title


通过双击弹出动态面板,建议给动态面板以及状态层命好名称,不然当动态面板过多的时候就会找不到哪一个是你需要的。通过添加ioc给面板添加状态,在这里我们只添加了三个,当然你也可以添加更多。


Image title


接下来就是我们要给状态添加内容了,在这里我们通过复制状态里面的内容给到状态二和三,复制完成后记得修改每个状态的颜色也就是切换后的导航标签颜色。尽量把状态内容区域做成不一样,这样切换的时候就更加的直观。


Image title


后面就是加上交互效果,在这里我们是给状态导航标签添加热区。通过添加鼠标点击时交互事件,调出事件编辑,设置配置动作,选择动态面板,最后选择状态。在通过这样方式复制到其它两个状态,完成交互事件的设定,最后预览效果。


鼠标单击用例


Image title


设置面板状态


Image title


选择配置动作和状态


Image title


最后可以预览一下效果是否完成


编辑状态


用户需要做局部的数据输入或操作的时候就会用到编辑状态这种动态面板的操作。比如下面这种用户需要输入文字添加新标签的方式,这种在移动端会经常使用。

Image title


首先我们需要用axure画出下面交互原型图,并选中所有转化为动态面板。


Image title


通过双击面板弹出面板状态,给面板添加两个状态,并命名。因为我们是需要添加一个标签的样式,通过复制的方法制作,制作添加以后的状态样式。


Image title



应为我们这个是直接按钮,所以我们就可以直接在上面做点击交互事件,当鼠标点击时切换成输入文字状态,所以需要设置动态面板状态,并选中这个动态面板和状态,完成配置动作的设置。


Image title


最后预览一下制作效果


下拉菜单


这种下拉菜单在网页导航中会运用的比较多,通过鼠标移入时,展开导航下面的层级,鼠标移除是隐藏展开,从而形成一种闭环的交互形式,就比如下面的真实案例中所运用。


Image title


首先我们需要用axure画出下面交互原型图,并将需要将隐藏的图层转化为动态面板,给面板命名。右键单击面板选中设为隐藏并给面板添加状态。

Image title


通过复制得到下面这个新状态,并赋予热区。


Image title


通过给导航切换便签添加热区,并给热区添加鼠标移入移除交互事件。选中设置面板状态,配置动作。


Image title


最后预览一下制作效果


鼠标经过状态发生变化


这种交互模式大多使用在PC端,主要会运用在图片层的上面,通过移入图片,从而图片上出现文字,给用户一种反馈状态。

Image title Image title


首先我们需要用axure画出下面交互原型图,并将第一个转化为动态面板,双击面板弹出动态面板状态,为动态面板添加状态,并把第二个交互图放到第二个状态中。


Image title


通过给动态面板设置鼠标移入时状态的交互事件,以及设置面板状态,配置动作。


Image title


最后预览一下制作效果


弹出菜单


弹出层主要是通过点击按钮从而弹出一个图层让用户选择操作,就比如下面的案例。


Image title


首先我们需要用axure画出下面交互原型图,作为弹窗的背景。接着需要作出前面需要弹出的图层,通过转化为动态面板并隐藏,将弹出层移动到背景图层的下方位置(相对位置),这样的目的是通过移动绝对位置从而实现弹出。


Image title Image title


下面就是需要为续期会员案例添加点击事件,这里主要是运用鼠标点击时,显示动态面板,以及鼠标点击时移动动态面板到绝对位置。


Image title


最后就是要形成一个闭环,就是鼠标点击关闭按钮,隐藏动态面板。在这里我们需要进入到动态面板的状态中,给关闭添加热区形成按钮,通过鼠标点击时关闭,隐藏动态面板而形成一个闭环的流程。


Image title

Image title


最后通过预览查看一下效果。


小动画


小动画在交互原型中使用的比例会比比较少,而我们在考虑使用动画是是不是需要动画的操作,因为动画需要一定的过程,而用户在使用过程中,并不一定能够发现,所有使用动画需谨慎。

Image title


首先我们需要用axure画出下面交互原型图,并将需要运动的图标转化为动态面板。


Image title


接下来就是需要给动画按钮添加移入时的动作,需要给图标这个动态面板一个移动的动作,通过绝对位置来控制图标的位置,当然也可以用相对位置。在给一个鼠标移除效果,也是通过绝对位置,从而回到原处的一个交互动作。


Image title


最后预览一下效果


移动定位


移动定位在实际的案例中可能会运用的比较少,它主要的目的是通过点击每个标签或者按钮,通过定位到该内容区域。


Image title


首先我们需要用axure画出下面交互原型图,在这里我们页面会分为三大块,首页、关于、案例三部分,通过点击右侧的标签从而实现页面的定位。我们首先需要把页面转化为动态面板,通过拖动调整动态面板的大小,从事使动态面板正好一屏的位置。


Image title

Image title


接下来我们需要给动态面板状态中添加状态,并分别给面板和状态命名。进入动态面板中的状态页,这时候我们需要把页面转化为动态面板,因为我们需要在这个页面上做移动定位。在做页面定位的时候,我们需要记住每一部分到一定位置的参数,这个参数决定了后面我们给页面做绝对位置的参数。下面就是各部分的位置设定,分别是首页、关于、案例。


Image title

Image title

Image title


最后预览一下效果


手机浏览拖拽


浏览拖拽在移动端会使用比较多,就是在可视窗口以内通过上下滑动的交互方式完成操作,出现在一些比较长的移动端页面。


Image title


首先我们需要用axure画出下面交互原型图,并转化为动态面板。调整页面在手机模型的可视操作区域,并给面板命好名称。添加面板状态,进入状态页面,这里也需要把状态页面转化为动态面板并给面板命好名称。


Image title


下面回到我们的首页面板中,给面板添加拖动交互事。


Image title


添加配置动作


Image title


因为在拖动时为了保证不会拖出边界,所以就需添加边界,设置局部变量条件。


Image title

Image title


最后预览一下效果








海哥交互行

14年交互设计经验,前华为设计总监

1873粉丝/23关注

原创小生
Adobe PS里的10个交互设计原则印象笔记的品牌升级-你要学到什么?

海哥交互行

海哥交互行

14年交互设计经验,前华为设计总监

原创小生

扫描二维码
去手机端查看海报

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2018 UI.CN