苏米客XMSUMI

Axure RP教程:Axure快速制作屏幕垂直居中的弹出框

在制作原型的时候,经常会用到弹出框,对于初学者来讲,可能感觉弹出框实现的逻辑比较复杂,涉及到蒙层、隐藏/显示、居中显示等多个效果,尤其是在复制复用的时候感觉很麻烦,那么有没有一种方法能够方便快速的实现呢?

**以下以Axure RP 8.0 版本为例,9.0版本操作基本一致:

**

1、拖入矩形,调整矩形宽高【宽:400】、【高:200】(宽高可随意定,这里取比较常用的弹出框高度)

description

2、拖入按钮、文字,放置合适的位置,如下图所示(一般按钮可组成组,成组快捷键:Ctrl+G)

description

3、切换元件库为【Ic】,找到关闭图标,拖入画布中,调整按钮宽高到合适尺寸这里设置为【宽:16】、【高:16】

description

4、选中矩形框、文字、按钮、删除图标,右键选择【转换为动态面板】,并命名为【弹出框】

description

5、选中【弹出框】动态面板,右键选择【固定到浏览器】

description

6、接上一步,勾选【固定到浏览器窗口】,选中水平固定【居中】,垂直固定【居中】,点击确定(此处用于设置弹出框能够固定在屏幕的居中位置,且不跟随屏幕内容的滚动而滚动)

description

7、选中弹出框,点击【隐藏】,拖入一个按钮(默认情况下弹出框是隐藏不可见的,点击按钮可显示弹出框)

description

8、重头戏来啦,此处是关键~~,选中弹出框按钮,添加交互事件【鼠标单击时】,添加动作【显示/隐藏】,选中【弹出框】动态面板,勾选【置于顶层】,更多选项选择【灯箱效果】,点击确定(此处设置灯箱效果是关键,这是axure自带的效果,可以给动态面板带上蒙层,蒙层的颜色也是可以设置的)

description

9、进入弹出框动态面板,选中删除按钮,添加交互事件【鼠标单击时】,添加动作【显示/隐藏】,选中【弹出框】动态面板,可见性选择【隐藏】,点击确定

description

到目前为止一个可显示可隐藏的弹出框就做成啦,有没有很简单~~),赶紧去试试吧!

description

推荐原型

上一篇:Axure RP 教程:原型预览页面左上角的图片设置及清除

下一篇:Axure RP教程:Axure元件库的创建及载入元件库

猜你喜欢

QQ咨询
微信咨询 微信公众号