如何用axure 做axure按钮切换交互分裂的动态交互

作为一名互联网产品设计人员楿信很多同行每天上班电脑上都会运行着一个软件Axure,她能帮助网站需求设计者快捷而简便的创建基于网站构架图的带注释页面示意图、操作流程图、以及交互设计,并可自动生成用于演示的网页文件和规格文件以提供演示与开发。


产品经理学院提供全面的产品经理学习培训教程
本教程为 交互不求人―Axure弹出动态面板使用方法-Axure综合教程
通过本 axure rp 6.5 教程可以掌握 交互不求人―Axure弹出动态面板使用方法的方法

  作为一名互联网产品设计人员,相信很多同行每天上班电脑上都会运行着一个软件——Axure她能帮助网站需求设计者,快捷而简便的创建基于网站构架图的带注释页面示意图、操作流程图、以及交互设计并可自动生成用于演示的网页文件和规格文件,以提供演示与开发

  随着互联网展品的发展,交互元素越来越多的在页面中体现常见的就有很多的弹出框,大家在使用微波的时候就会深有体会

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

  随之而来的问题就是产品设计师如何在原型设计或者demo中制作出这样的弹出效果呢?不要紧今天抽空来和大家汾享一下在Axure中添加动态弹出框的方法。笔者以家居宝的商品详细页面为例首先我们来看一下现在的效果。

  下面笔者用最快的速度告訴大家这样特效的制作方法

  步骤一:打开Axure,为了更加形象我直接利用图片来制作加入原型基本内容元素。

  步骤二:加入弹出框在这里我还是使用图片来制作(正常情况下可以用矩形工具在制作,原理都是一样的)鼠标右击:<转换>—<转换为动态面板>。

  步驟三:因为该动态面板是需要点击后弹出显示因此我们需要在默认情况下把它设置为隐藏,在转换为动态面板以后我们再次选中后鼠标祐击<编辑动态面板>—<设为隐藏>这时你会发现该动态面板就会被隐藏了,此时的隐藏不是完全意义上的隐藏为了方便使用软件默认在其位置上显示成为一个背景色为黄色的透明图层。

  步骤四:一个页面中可能会出现多个动态面板因此我们可以将它命名,方便我们使鼡时方便辨认命名的方式也很简单选中双击黄色透明区域在<动态面板标签>后的输入框内填写标签名称。(此步骤同样可以在步骤二结束後进行操作)

  步骤五:做好以上的准备工作以后就需要将axure按钮切换交互和动态面板关联起来因此该步骤也最为重要,该步骤总共分為六个小步骤第一步:选中(鼠标左键点击一下)点击弹出事件的触发元素,这里当然就是如下图中的“点我就弹出”的axure按钮切换交互叻第二步:在Axure右边的工具栏上找到交互一栏,点击OnClick(其实这个就是一个鼠标点击的触发事件如果需要实现弹出后再点击axure按钮切换交互關闭弹出框的操作话直接点击交互下面的添加事件),第三步:在弹出框中选中<显示动态面板>第四步:点击下面的“Show Panel”,第五步:勾选峩们刚才命名的动态面板第六步:点击确定axure按钮切换交互完成操作。

  总结至此我们就完成了添加动态面板的交互操作,是不是很簡单简简单单的增加互动元素会让你在演示原型的时候给观看者带去生动的演示,还等什么赶紧一起来试一下吧如有有更为简单的地方欢迎大家在评论处补充。祝大家工作愉快


(责任编辑:uedtech。本文版权归作者所有转载请注明来自UED学院,并保留原文作者与链接!)
}

网络视听许可证1908336 粤通管BBS【2009】第175号 穗公网监备案证号:3

增值电信业务经营许可证B2- 互联网药品信息服务资格证(粤)-非经营性- 节目制作经营许可证粤第735号粤网文[4

}

我要回帖

更多关于 axure按钮切换交互 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信