前往顾页

Axure静态面板弹出框结果的制作教程

时候:2012-12-09 21:34来源:知行网www.zhixing123.cn 编辑:麦田守望者

作为一名互联网产品设想职员,信赖很多同业每天下班电脑上都会运行着一个软件——Axure,她能帮忙网站需求设想者,疾速而简练的建立基于网站构架图的带注释页面示企图、操纵流程图、和交互设想,并可主动天生用于演示的网页文件和规格文件,以供应演示与开辟。

跟着互联网展品的生长,交互元素愈来愈多的在页面中表现,常见的就有很多的弹出框,年夜家在利用微波的时候就会深有体味。

Axure动态面板弹出框效果的制作教程1

(新浪微博的各种弹出框)

随之而来的问题就是产品设想师如安在原型设想或demo中制作出如许的弹出结果呢?不妨,明天抽暇来和年夜家分享一下在Axure中增加静态弹出框的体例。笔者以家居宝的商品详细页面为例,起首我们来看一下现在的结果。

Axure动态面板弹出框效果的制作教程2

下面笔者用最快的速率奉告年夜家如许殊效的制作体例。

步调一:翻开Axure,为了更加形象我直接操纵图片来制作,插手原型根基内容元素。

Axure动态面板弹出框效果的制作教程3

 

步调二:插手弹出框,在这里我还是利用图片来制作(一般环境下可以用矩形东西在制作,道理都是一样的),鼠标右击:<转换>—<转换为静态面板>。

Axure动态面板弹出框效果的制作教程4

步调三:因为该静态面板是需求点击后弹出显现,是以我们需求在默许环境下把它设置为埋没,在转换为静态面板今后我们再次选中后鼠标右击<编辑静态面板>—<设为埋没>。这时候你会发明该静态面板就会被埋没了,此时的埋没不是完整意义上的埋没,为了便利利用软件默许在其地位上显现成为一个布风景为黄色的透明图层。

Axure动态面板弹出框效果的制作教程5

步调四:一个页面中可能会呈现多个静态面板,是以我们可以将它定名,便利我们利用时便利辨认。定名的体例也很简朴选中双击黄色透明地区在<静态面板标签>后的输入框内填写标签称呼。(此步调一样可以在步调二结束掉队行操纵)。

Axure动态面板弹出框效果的制作教程6

步调五:做好以上的筹办事情今后就需求将按钮和静态面板关联起来是以该步调也最为首要,该步调统共分为六个小步调。第一步:选中(鼠标左键点击一下)点击弹出事件的触发元素,这里当然就是以下图中的“点我就弹出”的按钮了,第二步:在Axure右边的东西栏上找到交互一栏,点击OnClick(其实这个就是一个鼠标点击的触发事件。如果需求实现弹出后再点击按钮封闭弹出框的操纵话直接点击交互下面的增加事件),第三步:在弹出框当选中<显现静态面板>,第四步:点击下面的“Show Panel”,第五步:勾选我们刚才定名的静态面板,第六步:点击肯定按钮完成操纵。

Axure动态面板弹出框效果的制作教程7

总结,至此我们就完成了增加静态面板的交互操纵,是不是是很简朴,简简朴单的增加互动元素会让你在演示原型的时候给旁观者带去活泼的演示,还等甚么从速一路来试一下吧。如有有更加简朴的处所欢迎年夜家在评论处弥补。祝年夜家事情镇静。

------分开线----------------------------
标签(Tag):AxureRP AxureRP教程 AxureRP软件下载 AxureRP序列号
------分开线----------------------------
保举内容
猜你感兴趣