深圳网站制作专业品牌! 联灿科技-深圳企业网站专业服务商 加入收藏
用户名: 密码: 注册
深圳市联灿科技有限公司深圳做网站,找联灿! 深圳网站设计热线 深圳网页设计在线咨询
技术交流
网站设计
网站优化
行业动态
 
深圳做网站,找联灿!
深圳市联灿科技有限公司成立于二零零四年,是家专业提供深圳网站制作深圳网页设计深圳网页制作深圳网站设计深圳网站开发、域名注册、虚拟主机、企业邮箱等服务的正规深圳做网站的公司,迄今已累积客户逾千家,在业界具有相当的知名度,在深圳网站建设市场上树立了良好的口碑。
业精于专,值得您的信赖!
销售热线:0755-26955674
查看更多联系方式
网站设计
网站交互不求人—Axure弹出动态面板使用方法

  作为一名互联网产品设计人员,相信很多同行每天上班电脑上都会运行着一个软件——Axure,她能帮助网站需求设计者,快捷而简便的创建基于网站构架图的带注释页面示意图、操作流程图、以及交互设计,并可自动生成用于演示的网页文件和规格文件,以提供演示与开发。
 
  随着互联网展品的发展,交互元素越来越多的在页面中体现,常见的就有很多的弹出框,大家在使用微博的时候就会深有体会。 
 
 
 
(新浪微博的各种弹出框)
 
   随之而来的问题就是产品设计师如何在原型设计或者demo中制作出这样的弹出效果呢?不要紧,今天抽空来和大家分享一下在Axure中添加动态弹出框的方法。笔者以某商城的商品详细页面为例,首先我们来看一下现在的效果。

 

  下面笔者用最快的速度告诉大家这样特效的制作方法。 
 
  步骤一:打开Axure,为了更加形象我直接利用图片来制作,加入原型基本内容元素。


 

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

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



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

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

  总结,至此我们就完成了添加动态面板的交互操作,是不是很简单,简简单单的增加互动元素会让你在演示原型的时候给观看者带去生动的演示,还等什么赶紧一起来试一下吧。


上一篇:浅析使你网站内容更具吸引力的五个方法
下一篇:自己动手制作网站banner广告

技术交流 最新上线
网站制作中关于图片优化的15个原则
网站进行改版时应该注意哪些方面?
多方面入手有效提升网站的用户体验
谷歌网站管理员博客:五个常见的SEO错误
揭示黑客在社交网站上的五大攻击手法
Foshan Green Pipe Technology 网站制作完成
色源实业有限公司深圳网站制作完成
Dongguan Yicheng Innovation 网站设计完成
鸿翼能科技有限公司深圳网站制作完成
AGS technology limited 深圳网站制作完成
 
网站首页 | 公司简介 | 新闻动态 | 超值套餐 | 经典案例 | 常见问答 | 技术支持 | 联系方式 | 留言反馈
Copyright © 2004-2017 LINKCHANT TECHNOLOGY LTD, All Rights Reserved. 粤ICP备05037094号
联系电话: 0755-26955674  电子邮箱: sales@linkchant.com
联灿科技: 深圳网站制作公司 | 深圳网页设计公司 | 深圳网页制作公司 | 深圳网站设计公司 | 深圳网站建设公司 | 深圳网站开发公司 | 深圳做网站的公司