南京上古网络科技有限公司

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 3859|回复: 1

Axure RP原型工具 弹出框的制作

[复制链接]

1

主题

3

帖子

23

积分

新手上路

Rank: 1

积分
23
发表于 2017-6-9 10:31:17 | 显示全部楼层 |阅读模式
本帖最后由 luocaihong 于 2017-6-9 10:31 编辑

Axure是一款优秀的原型设计工具,可以将客户的想法快速的画出来,而对于WEB项目中,弹出框是最常用不过的界面元素,下面就说说在Axure中怎么实现弹出框的制作。

1、首先我们往页面1中拖入一个按钮

2、接着拖入一个矩形框


3、右击选中矩形框将其转换为动态面板

给动态面板命名,选中动态面板,在右侧的检视功能区命名为【告警】


4、双击动态面板,弹出面板状态管理界面,然后再双击状态State1进入面板编辑界面



这时我们看到动态面板的界面跟我们之前拖入的矩形框的大小形态是一样的

5、接下来就可以往这个页面中添加按钮及描述文字之类的组件,达到一个弹出框的界面效果


动态面板的页面变化会实时的反映在页面1中


6、弹出框既然有弹出就有关闭,选中【确认】按钮,在右侧的检视功能区可以给这个按钮添加一个交互事件,我们选择鼠标单击事件,

双击【鼠标单击时】打开用例编辑界面,在左侧添加动作树里面选择【隐藏】,然后在右侧的配置动作里面勾选我们命名好的【告警】动态面板,点击确定就完成了确定按钮的鼠标点击事件


我们给【取消】按钮重复刚刚的操作,最后效果如下


7、页面加载时我们想把这个弹出框隐藏起来怎么办呢?Axure也给页面提供了丰富的事件,比如页面加载事件,熟悉js的都知道onload事件,这个也类似;
回到页面1中,选择页面空白处,然后再右侧监视功能区给页面添加载入事件,

双击【页面载入时】,在左侧添加动作树里面选择【隐藏】,然后在右侧的配置动作里面勾选我们命名好的【告警】动态面板,点击确定完成


8、最后,我们需要点击【弹出框】按钮时弹出【告警】页面怎么办呢,跟上面的步骤类似,选择【弹出框】按钮,给它添加一个鼠标单击事件,在用例编辑页面在左侧添加动作树里面选择【显示】,右侧勾选【告警】动态面板,点击确定完成


最后我们点击发布或者预览就可以再浏览器中看到我们做的效果了


9、总结:Axure弹出框的制作可以衍生到很多场景,比较弹出模态框、切换Tab页等,其中重要的一个组件就是动态面板,动态面板可以理解成一个容器,容器里面可以放button、input输入框等页面元素;
Axure的事件功能也很实用,可以模拟出开发常用的事件效果,达到显示隐藏组件、实现页面跳转等功能。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

0

主题

2

帖子

13

积分

新手上路

Rank: 1

积分
13
发表于 2017-6-9 11:33:20 | 显示全部楼层
罗总双击666
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|上古网络论坛 ( 苏ICP备16002222号 )

GMT+8, 2021-5-8 07:18 , Processed in 0.125000 second(s), 4 queries , File On.

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表