Axure9的使用经验分享：如何高效的实现弹窗交互模型_axure9怎么做弹窗交互

在我们绘制原型时，很多按钮点击后会以弹窗的形式进行页面展示，如何更快速友好地做好弹窗交互效果，我个人做了很多的尝试，以下将我的经验和大家作个分享。

1、以动态面板为基础的弹窗交互

利用动态面板进行弹窗展示及交互，（个人更喜欢这种）
优点是利用交互效果逼真，可用灯箱效果、弹出效果等。
缺点是一个页面集成的东西比较多，有的人会搞混乱，但若有较好的元件命名习惯和看概要的习惯，混乱就不是问题了。
使用时的一些小技巧如下：
①新建动态面板（本处命名为弹窗汇总），在样式管理处设置：勾选自适应内容、设置固定到浏览器：中部，居中

固定到浏览器的弹出页面设置如下：
目的： 弹窗在浏览时能够居中显示，并且页面自适应，能始终和内容大小保持一致。
②动态面板中可以设置多个页面，页面命名建议使用操作按钮的名称命名；
如下：

目的： 设置交互效果时，可以复制通用，不用每个按钮都去单独设置指定页面。
③除所需的弹窗外，多设置一个分页，此页内容为空白。

页面效果如下：

目的： 用于首页隐藏动态面板，避免编辑的时候页面的内容层级过多造成不必要的干扰。
④设置操作按钮的弹出效果（本处使用的灯箱效果）
如下：

目的： 所有按钮都是这个交互设置，能通用，可以拖用元件、复制元件，不用每一个元件都设置指定展示页面。
⑤弹窗关闭的设置，在弹出的窗口中，返回键、关闭键等进行设置
如下：

以上设置完毕，就可以去试试弹窗效果了。

2、以页面为基础的弹窗交互

这种是将不同的平面层级绘制成不同的页面，组合展示交互效果。
这个的起因是由于公司对原型没有高保真要求，可以不设置交互，原型原稿给开发看的时候这么要求的，利于页面清晰易懂。但是这个原型若演示给用户看，又确实太陋了。所以我在上面做了改良，添加了交互展示。优点是每个平面有些什么元素比较清晰，适用于不太会做交互的产品和不会用这个软件的人直接看绘制页面的这种开发。缺点就是弹窗不能随内容自适应大小（除非自己一个一个的弹窗去设置展示尺寸），展示效果也没有那么美观。
使用时的步骤大致如下：
①不同的平面层级都用一个页面来画

②主页面的用来展开弹窗的操作按钮交互可以设置如下：

每一个按钮需要打开哪个弹窗，都需要单独的选择页面来设置。弹窗多的时候也会不那么友好。
③弹窗页面的关闭交互设置如下

当然，我也看到这一步也有人设置的是打开底层，自己测试了一下，两种方式都可以，但是以弹窗形式打开的这种，利用关闭窗口效果更好。

3、无需操作的提示浮层

在某些场景，我们也会使用无需进一步交互的提示弹出框，如进行以下提示时，展示后一段时间会自动消失。

因此可以进行如下设置：
①将需提示的内容整体设置为一个组合，隐藏，并将交互设置为如下：

②确认、保存、提交等触发提示的按钮，交互设置如下：