【Axure教程】动态面板制作弹出框效果

转载自：老二牛车教育 » 【Axure教程】动态面板制作弹出框效果

作为一名互联网产品设计人员，相信很多同行每天上班电脑上都会运行着一个软件——Axure，她能帮助网站需求设计者，快捷而简便的创建基于网站构架图的带注释页面示意图、操作流程图、以及交互设计，并可自动生成用于演示的网页文件和规格文件，以提供演示与开发。

随着互联网展品的发展，交互元素越来越多的在页面中体现，常见的就有很多的弹出框，大家在使用微波的时候就会深有体会。

（新浪微博的各种弹出框）

随之而来的问题就是产品设计师如何在原型设计或者demo中制作出这样的弹出效果呢？不要紧，今天抽空来和大家分享一下在Axure中添加动态弹出框的方法。笔者以家居宝的商品详细页面为例，首先我们来看一下现在的效果。

下面笔者用最快的速度告诉大家这样特效的制作方法。

步骤一：打开Axure，为了更加形象我直接利用图片来制作，加入原型基本内容元素。

步骤二：加入弹出框，在这里我还是使用图片来制作（正常情况下可以用矩形工具在制作，原理都是一样的），鼠标右击：<转换>—<转换为动态面板>。

步骤三：因为该动态面板是需要点击后弹出显示，因此我们需要在默认情况下把它设置为隐藏，在转换为动态面板以后我们再次选中后鼠标右击<编辑动态面板>—<设为隐藏>。这时你会发现该动态面板就会被隐藏了，此时的隐藏不是完全意义上的隐藏，为了方便使用软件默认在其位置上显示成为一个背景色为黄色的透明图层。

步骤四：一个页面中可能会出现多个动态面板，因此我们可以将它命名，方便我们使用时方便辨认。命名的方式也很简单选中双击黄色透明区域在<动态面板标签>后的输入框内填写标签名称。（此步骤同样可以在步骤二结束后进行操作）。

步骤五：做好以上的准备工作以后就需要将按钮和动态面板关联起来因此该步骤也最为重要，该步骤总共分为六个小步骤。第一步：选中（鼠标左键点击一下）点击弹出事件的触发元素，这里当然就是如下图中的“点我就弹出”的按钮了，第二步：在Axure右边的工具栏上找到交互一栏，点击OnClick（其实这个就是一个鼠标点击的触发事件。如果需要实现弹出后再点击按钮关闭弹出框的操作话直接点击交互下面的添加事件），第三步：在弹出框中选中<显示动态面板>，第四步：点击下面的“Show Panel”，第五步：勾选我们刚才命名的动态面板，第六步：点击确定按钮完成操作。

总结，至此我们就完成了添加动态面板的交互操作，是不是很简单，简简单单的增加互动元素会让你在演示原型的时候给观看者带去生动的演示，还等什么赶紧一起来试一下吧。如有有更为简单的地方欢迎大家在评论处补充。祝大家工作愉快。

转载请注明：老二牛车教育 » 【Axure教程】动态面板制作弹出框效果