使用原型设计工具制作弹出框

作者:课课家更新于： 2015-10-27 13:59:41

本学期的教学，小编为大家来讲解一下。
本期的原型设计学习内容：教你如何使用原型设计工具快速制作弹出站长工具框特效。原型设计是交互设计师与PD、PM、网站开发者进行沟通的最好工具，而今天的原型设计工具有很多，就目前来说，AxurERP是最强大的原型设计工具了。我们要完成一些复杂的设计和沟通工作,的话，就得需要一个好的原型设计工具，此次的原型设计学习将大家介绍目前常用的和比较热门的工具axure rp的一些使用方法。
具体的操作方法如下，有兴趣的可以接着往下看：
1、打开Axure，为了更加形象我直接利用图片来制作，加入原型基本内容元素。

2、加入弹出框，在这里我还是使用图片来制作(正常情况下可以用矩形工具在制作，原理都是一样的)，鼠标右击：《转换》—《转换为动态面板》。

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

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

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

总结：以上即是使用原型设计工具快速制作出动态弹出框特效的5个操作，在学习原型设计的朋友可以看看，学习相关工具的操作方式的，更多更多详细的开发视频教程可以登录课课家官网查询相关课程学习。