Axure RP怎么设计弹出窗口的效果?

  发布时间:2017-03-27 11:18:09   作者:佚名   我要评论
Axure RP怎么设计弹出窗口的效果?Axure RP在设计网页原型的时候,需要制作一个弹出的窗口,该怎么设置呢?下面我们就来看看详细的教程,需要的朋友可以参考下

在使用Axure RP制作网站原型的过程中,很多时候会遇到弹出窗口的情况,一般情况下这种弹出的窗口叫做Modal,在RP中是利用动态面板来实现该功能。在使用RP工具的过程中,我们该如何实现这种效果呢?本文就这个问题分享经验如下。

1、我日常工作中使用的是Axure RP8.0,并且已经安装了汉化包,详细版本信息如下 截图,在使用的过程中如果版本不一样,菜单会有些差异,但是操作步骤基本上是可以借鉴的。

2、正常打开Axure RP8.0工具,如下图,创建一个新的RP文件

3、在空白页面上从元件库中拉出一个矩形框和一个按钮,矩形框是为了展示主页的内容,按钮是为了点击后弹出对话框的效果,界面设计如下截图,使用过程中根据自己项目的实际需求摆放具体内容。

4、从左边元件库中拉出一个动态面板,放在页面上,摆放位置可以根据需要进行摆放,也可以通过设置,使其在页面上居中显示,具体这个设置步骤请查看步骤十说明。

5、双击动态面板,将弹出如下对话框,先为动态面板定义一个名称 ,这个名称等会在设置显隐的时候需要用到。然后再单击"state1"会弹出另一个新的子页面,就可以在该页面中增加弹出框的具体内容了,详细步骤请查看截图2.

6、在上述步骤过后,主页index的页面效果将如下所示,鼠标右键点击动态面板,把动态面板设置成隐藏,具体操作如下截图2。

7、为页面上的按钮增加事件。选中按钮,在右边的设置面板中,双击“鼠标单击时”按键,如下截图1,页面将会弹出新的用例编辑窗口,选择元件的“显示/隐藏”,找到刚刚的动态面板,并将其设置为显示,具体操作如下截图2中标红的位置。这步的设置非常重要, 只有正确设置了这步,才能正确的弹出窗口。

8、在第五步中增加的动态面板,也有放置一个按钮,该按钮的作用就是点击后自动关闭弹出框,设置步骤和步骤7类似,只是将“显示”改成了“隐藏”,具体操作如下截图中标红的位置。

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

10、在第八步之后 ,已经完成了新窗口弹出的配置功能,这一步将分享如何美化页面。在第九步中展示的效果是设计人员在页面上将对话框放置在什么位置,弹出时就在什么位置,为了美观,我们经常需要将弹出框在页面中居中显示,要实现该功能也很简单,只要完成如下步骤就可以了。

11、在主页上,鼠标右键点击动态面板,在弹出的选择项中选择“固定到浏览器”并单击它。在弹出的对话框中按照如下截图2进行配置就可以了。

12、这时候预览页面效果,就如下截图所示,弹出框将在页面上居中展示。

相关推荐:

axure怎么制作弹出框效果?

Axure RP 8怎么设计弹窗交互模型?

axure怎么绘制浏览器窗口改变大小时事件?

相关文章

  • Axure怎么制作商品详情页产品图展示效果?

    Axure怎么制作商品详情页产品图展示效果?想要使用Axure设计一个商品图片展示效果,该怎么制作呢?下面我们就来看看详细的教程,需要的朋友可以参考下
    2017-03-26
  • Axure怎么制作中继器的筛选功能?

    Axure怎么制作中继器的筛选功能?Axure中设计网页的时候,想要使用志及其制作一个筛选的教程,该怎么制作呢?下面我们就来看看详细的教程,需要的朋友可以参考下
    2017-03-26
  • axure怎么制作复选框的全选和反选?

    axure怎么制作复选框的全选和反选?axure中制作了三个复选框,想要添加两个按钮可以控制复选框,一个是全选按钮,一个是单选按钮,该怎么制作呢?下面我们就来看看详细的教
    2017-03-22
  • Axure RP 8怎么设计单选按钮和按钮选择值?

    Axure RP 8怎么设计单选按钮和按钮选择值?Axure RP 8设计网页的时候,想要插入单选按钮、按钮和输入框,该怎么办呢?下面我们就来看看详细的教程,需要的朋友可以参考下
    2017-03-21
  • Axure RP 8怎么设计模拟播放器模型?

    Axure RP 8怎么设计模拟播放器模型?Axure RP 8中想要设计一款mp3音乐播放器,该怎么设计呢?下面我们就来看看使用Axure设计的教程,需要的朋友可以参考下
    2017-03-20
  • Axure设计的网页怎么生成html文件?

    Axure设计的网页怎么生成html文件?Axure中设计了网页,想要将网页生成html页面,该怎么生成呢?下面我们就来看看详细的教程,需要的朋友可以参考下
    2017-02-28
  • axure矩形怎么去掉下边框?

    axure矩形怎么去掉下边框?axure周公绘制的矩形想要去掉边框,该怎么办恩?下面我们就来看看详细的教程,很简单,需要的朋友可以参考下
    2017-02-28
  • Axure 8.0中怎么制作手机上下滑动效果?

    Axure 8.0中怎么制作手机上下滑动效果?Axure可以制作网页圆形,今天我们就来看看使用Axure绘制手机上下滑动效果的教程,需要的朋友可以参考下
    2017-02-21
  • Axure RP中的网页元件怎么显示与隐藏?

    Axure RP中的网页元件怎么显示与隐藏?Axure在绘制元件的时候,想要设置元件的属性,比如显示或者隐藏,该怎么设置呢?下面我们就来看看详细的教程,需要的朋友可以参考下
    2017-02-17
  • Axure RP 8.0注册码 软件授权 license key

    一个专业的快速原型设计工具,是产品经理(Product Manager)的首选利器,没有之一。Axure,代表美国 Axure 公司;RP 则是 Rapid Prototyping(快速原型)的缩写。它能够让
    2017-02-16

最新评论