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

最新推荐文章于 2024-11-21 16:19:27 发布

Lxy_shirley

最新推荐文章于 2024-11-21 16:19:27 发布

阅读量5.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：经验分享文章标签：产品设计

本文链接：https://blog.csdn.net/Lxy_shirley/article/details/117443280

经验分享专栏收录该内容

1 篇文章

订阅专栏

本文分享了使用Axure9高效实现弹窗交互的两种方法：1) 以动态面板为基础，利用自适应内容和固定定位创建逼真的弹窗效果；2) 以页面为基础，适合不追求高保真效果的原型。同时介绍了无需操作的提示浮层的设置技巧，帮助提升原型展示质量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

利用动态面板进行弹窗展示及交互，（个人更喜欢这种）
优点是利用交互效果逼真，可用灯箱效果、弹出效果等。
缺点是一个页面集成的东西比较多，有的人会搞混乱，但若有较好的元件命名习惯和看概要的习惯，混乱就不是问题了。
使用时的一些小技巧如下：
①新建动态面板（本处命名为弹窗汇总），在样式管理处设置：勾选自适应内容、设置固定到浏览器：中部，居中
在这里插入图片描述
固定到浏览器的弹出页面设置如下：
目的： 弹窗在浏览时能够居中显示，并且页面自适应，能始终和内容大小保持一致。
②动态面板中可以设置多个页面，页面命名建议使用操作按钮的名称命名；
如下：
在这里插入图片描述
目的： 设置交互效果时，可以复制通用，不用每个按钮都去单独设置指定页面。
③除所需的弹窗外，多设置一个分页，此页内容为空白。

页面效果如下：

目的： 用于首页隐藏动态面板，避免编辑的时候页面的内容层级过多造成不必要的干扰。
④设置操作按钮的弹出效果（本处使用的灯箱效果）
如下：
在这里插入图片描述
目的： 所有按钮都是这个交互设置，能通用，可以拖用元件、复制元件，不用每一个元件都设置指定展示页面。
⑤弹窗关闭的设置，在弹出的窗口中，返回键、关闭键等进行设置
如下：

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

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

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