1、打开Axure软件,从元件库中拉出一个矩形框和按钮,矩形框是为了展示主页的内容,按钮是为了点击后弹出对话框的效果,如下图所示:

【产品】原型设计之Axure如何通过动态面板实现弹框_IoT产品之原型及UI设计

2、从元件库中拉出一个动态面板,放在页面上,摆放位置可以根据需要进行摆放,也可以通过设置,使其在页面上居中显示,如下图所示:

【产品】原型设计之Axure如何通过动态面板实现弹框_原型设计_02

3、双击动态面板,将弹出如下对话框,先为动态面板定义一个名称,这个名称等会在设置显隐的时候需要用到。

然后再单击"state1"会弹出另一个新的子页面,就可以在该页面中增加弹出框的具体内容,如下图所示:

【产品】原型设计之Axure如何通过动态面板实现弹框_axure_03【产品】原型设计之Axure如何通过动态面板实现弹框_产品设计_04

4、鼠标右键点击动态面板,把动态面板设置成隐藏,具体操作如下图所示:

【产品】原型设计之Axure如何通过动态面板实现弹框_IoT产品之原型及UI设计_05【产品】原型设计之Axure如何通过动态面板实现弹框_产品设计_06

5、选中按钮,在右边的设置面板中,双击“鼠标单击时”按键,页面将会弹出新的用例编辑窗口,选择元件的“显示/隐藏”,找到刚刚的动态面板,并将其设置为显示。

【产品】原型设计之Axure如何通过动态面板实现弹框_IoT产品之原型及UI设计_07【产品】原型设计之Axure如何通过动态面板实现弹框_IoT产品之原型及UI设计_08

6、在动态面板中放置一个按钮,该按钮的作用就是点击后自动关闭弹出框,将“显示”改成了“隐藏”。

【产品】原型设计之Axure如何通过动态面板实现弹框_原型设计_09

7、配置完后,点击预览,在浏览器上点击“打开新窗口”按钮,页面将弹出新的对话框如下截图,点击“关闭窗口”将关闭该页面。

【产品】原型设计之Axure如何通过动态面板实现弹框_axure_10

 

refer:

https://jingyan.baidu.com/article/aa6a2c14956d3f0d4c19c4a9.html