1. 首页
  2. 教程
  3. 动态面板

【Axure8案例教程】如何快速制作弹出框,简单易学

在制作原型的时候,经常会用到弹出框,对于初学者来讲,可能感觉弹出框实现的逻辑比较复杂,涉及到蒙层、隐藏/显示、居中显示等多个效果,尤其是在复制复用的时候感觉很麻烦,那么有没有一种方法能够方便快速的实现呢?
当然是有的啦~~其实Axure中自带一种效果可以轻松的实现弹出框的效果,下面我们就来一起学习一下吧!
实现步骤
1、拖入矩形,调整矩形宽高【宽:400】、【高:200】(宽高可随意定,这里取比较常用的弹出框高度,可以拿小本本偷偷做做笔记哟~~)
【Axure8案例教程】如何快速制作弹出框,简单易学
2、拖入按钮、文字,放置合适的位置,如下图所示(一般按钮可组成组,成组快捷键:Ctrl+G)
【Axure8案例教程】如何快速制作弹出框,简单易学
3、切换元件库为【Icons】,找到关闭图标,拖入画布中,调整按钮宽高到合适尺寸这里设置为【宽:16】、【高:16】(记笔记啦~~)
【Axure8案例教程】如何快速制作弹出框,简单易学
4、选中矩形框、文字、按钮、删除图标,右键选择【转换为动态面板】,并命名为【弹出框】
【Axure8案例教程】如何快速制作弹出框,简单易学
5、选中【弹出框】动态面板,右键选择【固定到浏览器】
【Axure8案例教程】如何快速制作弹出框,简单易学
6、接上一步,勾选【固定到浏览器窗口】,选中水平固定【居中】,垂直固定【居中】,点击确定(此处用于设置弹出框能够固定在屏幕的居中位置,且不跟随屏幕内容的滚动而滚动)
【Axure8案例教程】如何快速制作弹出框,简单易学
7、选中弹出框,点击【隐藏】,拖入一个按钮(默认情况下弹出框是隐藏不可见的,点击按钮可显示弹出框)
【Axure8案例教程】如何快速制作弹出框,简单易学
8、重头戏来啦,此处是关键~~,选中弹出框按钮,添加交互事件【鼠标单击时】,添加动作【显示/隐藏】,选中【弹出框】动态面板,勾选【置于顶层】,更多选项选择【灯箱效果】,点击确定(此处设置灯箱效果是关键,这是axure自带的效果,可以给动态面板带上蒙层,蒙层的颜色也是可以设置的)
【Axure8案例教程】如何快速制作弹出框,简单易学
9、进入弹出框动态面板,选中删除按钮,添加交互事件【鼠标单击时】,添加动作【显示/隐藏】,选中【弹出框】动态面板,可见性选择【隐藏】,点击确定
【Axure8案例教程】如何快速制作弹出框,简单易学
到目前为止一个可显示可隐藏的弹出框就做成啦,有没有很简单~~),赶紧去试试吧!
【Axure8案例教程】如何快速制作弹出框,简单易学

原创文章,作者:院长大大,如若转载,请注明出处:https://www.axureschool.cn/28.html

发表评论

登录后才能评论

评论列表(3条)

  • studentno1 2019年7月13日 下午2:07

    😀 😮

  • 巴诗雪 2022年4月14日 上午10:15

    这个不就是正常的做法嘛,我还以为有什么简便的方法呢,骗人,哼

    • 院长大大 回复 巴诗雪 2022年4月15日 下午6:45

      这个确实是常规,且比较便捷的做法呢,如果有更好的实现方法,欢迎投稿哦?

联系我们

在线咨询:点击这里给我发消息

邮件:fleede@163.com

工作时间:周一至周五,9:30-18:30,节假日休息