如何使用Axure制作axure动态面板使用时间

来源：蜘蛛抓取(WebSpider) 时间：2015-09-27 07:32 标签： axure动态面板使用
使用Axure 制作动态广告展示 - 推酷
使用Axure 制作动态广告展示
一、最终实现的效果
当鼠标指针移入图中的 数字“01”、“02”、“03”、“04”不同的数字时，分别展示不同的图片。
二、做前准备
软件：Axure
三、制作流程
1、在开打的空页面上添加一个动态面板（X：20 ，Y：20 ；W：600，H：382）如图：
2、给动态面板取名为“动态广告”，再在该动态面板上添加4个字状态，分别取名为，图01、图02、图03、图04。如图：
3、为每个状态分别添加不同的图片。如图：
4、在主界面的动态模板上添加四个按钮控件，图形设置为圆形，大小为：25x25 ，同时设置按钮填充色和数字的颜色。如图：
5、分别为每个按钮添加“鼠标移入事件”，如图：
6、全部都添加好事件后就可以运行看看效果了。具体的展示图片及停留的时间还需要自己根据实际需求进行定制化的设置。
运行状态良好，OK！
已发表评论数()
&&登&&&录&&
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见Axure 上如何做到一个按钮 点击显示一个动态面板，再点击隐藏
- 产品经理最爱上的网站
Axure 上如何做到一个按钮 点击显示一个动态面板，再点击隐藏
Axure 上如何做到一个按钮 点击显示一个动态面板，再点击隐藏动态面板呢，估计有几种方式，我都想知道。
不区分大小写匿名
可以用条件实现，添加按钮用例，用例编辑窗口上方有个条件设置。设置好当动态面板状态是隐藏时，用户是显示面板，否则隐藏。即可。
事件里面有这个功能啊，就是 “切换面板可见性”
谢谢口口老弟，原来有这么个功能叫：切换可见性
相关知识等待您来回答
该问题来自：互联网产品经理交流与学习平台，提供大量资料下载。QQ空间领域专家
& &SOGOU - 京ICP证050897号用Axure做的原型如何在手机上运行 - 简书
下载简书移动应用
写了34021字，被132人关注，获得了632个喜欢
用Axure做的原型如何在手机上运行
一般的开发工作之前，我们通常会设计产品原型，大部分为axure绘制的线框图作为产品的PRD文档，供UI和开发进行前期工作，但是有的时候客户、领导想在开发之前，看到产品的概貌，就必须做产品的高保真原型进行模拟，这时如果做出来的原型能运行在手机端，那再好不过！原型制作软件有挺多，不过个人使用之后，最后还是依然坚持使用Axure,优点颇多，也可能是先入为主，这个教程Axure也是必须软件之一，适配为iphone5s。1、首选是制作高保真原型，如图1：
图1 高保真的原型图
（注：高保真原型最好不要用太多内部框架嵌套，加载速度有点慢，还是用动态面板慢慢做，层级多了要有耐心）iOS的屏幕尺寸目前是有限的几种，原型尺寸要和其一致。比如iphone5s视网膜下像素为640*1136（The default full screen size of the iPhone 5 is 320 x 568 px (w x h).就是说320*568已经可以铺满全屏，不过，由于Axure导出的原型在iOS上处理status bar时有问题，需要在高度上减去status bar的高度20，就为320*548，所以保证原型的高宽为320和548,如图3整体高度为548px：
图2 高宽为320*548
2、F8进行生成设置，设置如下图3：
3、生成原型文件，上传到axureshare或者放置在EasyWebSevr的根目录下，用本机IP替代电脑名称，获得完整路径。(不清楚的点击上期内容如何用EasyWebSvr搭建axure本地环境）4、复制生成的html中原型链接，选择without Sitemap,如图4：
图4 复制链接
5、在safari中粘贴链接，并打开，已经可以看到和屏幕宽度的界面，并添加到主屏幕，如图5：
图5 添加到主屏幕
6、可以通过桌面的快捷icon，进入原型，这个时候已经适配了手机，躺着桌面的icon,丝毫不会让人看得出是原型，下图6：
图6 test桌面icon
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
被以下专题收入，发现更多相似内容：
欢迎投稿 将实用的知识共享
· 14743人关注
· 11745人关注
· 7272人关注
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
选择支付方式：& 如何用Axure7.0制作购物车数量加减组件
购物车加减数量很常用，那么如何用Axure制作带有真实效果的组建呢？
1. 首先画出一下组件：用到“输入框”，“按钮”
2. 点击“-”按钮，添加点击事件。这里我们将设定条件，即当输入框中的值大于0时，才可进行操作：
设定完条件，就可以增加点击事件了。我们首先为输入框设定一个名称，我这里设置的是“dd”。点击的效果，是要修改输入框内的值，所以我们选择组件中的“Set text”（中文应为设定文字）。
当选中需要改变的输入框名称“我设定的是dd”后，修改它的“值得”。这时会在输入框后出现函数“Fx”图标。点击图标进入窗口，重点来了。我们要在这里创建一个局部变量，用以获取此时在输入框中的值，获取之后再对它进行减少的操作。
上图中，首先在1的区域创建一个局部变量，然后在后面的下拉框中选择要获取的组件的文字（也就是dd）；之后在上面2的区域选择“Insert Variable or Function”（插入变量），选择刚才设定的局部变量名，我设置的是“s”。你会在输入区域看到[[s]]。现在我们需要进行运算，注意要把运算符号写在中括号中，最终的效果是 [[s-1]]。
确认后，可以看到函数已经应用。现在的流程是：
1. 当用户点击“-”时候，会首先判断输入框中的值；
2. 如果小于0，则不会执行减值的操作；如果大于0，则继续执行；
3. 设定局部变量，获取到输入框中的值，并且对他进行-1操作；
4. 把运算后的结果，输出在输入框中，动作完成。
同理，我们进行“+”的操作，一切相同，只是在运算时需要加值，也就是[[s+1]]。如果你不想设定上限，也不用在设定条件了。
完成后，如果常用到，就保存为组件随时调用吧。酷勤网 C 程序员的那点事！
当前位置： >
浏览次数：次
简单的说，动态面板就是展示在页面不跳转的情况下所能实现的交互状态
1、什么是Axure的动态面板
按照 ：动态面板控件（Dynamic Panel）可以让你实现高级的交互功能，实现原型的高保真度。动态面板包含有多个状态（states），每个状态可包含一系列控件（你可以把一个状态理 解成一个独立的页面）。任何时候都只有一个状态（页面）是可见的，或整个动态面板可以被隐藏。结合交互动作，可以让动态面板的状态进行隐藏、显示和改变。 像添加其它控件一样，可以在控件面板中拖放动态面板控件到线框图中。
简单的说，动态面板就是展示在页面不跳转的情况下所能实现的交互状态。而动态面板的每一个状态都可以看作是产生的一个新的交互结果。
2、Axure的动态面板可以用来做什么
1）tab式页签的切换效果：Axure的官方给出的实例就是这个， 按照官方给出的做法制作了一个3tab的原型，不愿看英文说明的同学可以直接参照这篇博客。
2）鼠标触发式和点击触发式的下拉菜单效果：这个可以结合Axure的默认组件中的&垂直菜单&、&水平菜单&来实现，常用于导航的原型制作。
3）鼠标触发式的浮窗效果：类似&Alt&的效果，常用于浏览提示和触发式广告。
4）JS的鼠标点击弹层效果：这个是目前使用被广泛使用的效果之一。
5）注册表单中的根据焦点判断提示的效果：当焦点在输入框内的时候提示该表单栏目填写规范，当焦点离开输入框的时候根据填写的结果提示正确或者错误原因，这个需要动用高级设计交互编辑功能结合Axure的逻辑条件和设置变量功能来实现。
&.and so on&
3、如何使用Axure的动态面板
1）动态面板属于Axure的一个组件，在组件栏中选中它，直接拖到你希望它出现的位置。不用担心，即使在添加完状态之后它的位置也是可以随时改变的。
2）在动态面板上点击右键&&编辑动态面板&&管理动态面板状态。在弹出的窗口里输入动态面板的标签名称（默认是Unlabeled）、添加新的状态。当然，也可以在界面的右下角找到&动态面板管理&模块来对动态面板进行操作。
友情提示：
a）默认的动态面板的状态是显示（蓝色），我们可以把他设置成隐藏（黄色）。
b）状态页面中的蓝色虚线外框表示动态面板的边界范围，超过这个边界范围外的内容在最终生成原型时将不可见。
c）为了不影响其他交互的制作，可以点击&动态面板管理&模块右侧的淡蓝色小方块在隐藏或显示之间切换。或者，你可以在顶部的页面名称（如Home）上点击鼠标右键，选择右键菜单全部隐藏或全部显示，可以隐藏或显示页面中所有的动态面板。
3）双击添加完的动态面板状态（State1、2、&），会在Axure的工作区打开一个新标签。现在，把这个新标签当作是一个全新的页面来设计就OK了，不过，记住不要超过蓝色虚线外框。
4）给动态面板添加交互。Axure5.5中常用在动态面板上的交互行为包括：Set Panel state to State（设置动态面板的状态切换）、Show Panel（显示动态面板）、Hide Panel（隐藏动态面板）、Toggle Visibility for Panel（切换动态面板可见属性）、Move Panel（移动动态面板到一个设定的位置（x*y））、Bring Panel to Front（将动态面板置于最前）。交互行为的添加与添加其他组件的交互一样，没有什么好解释和介绍的。
5）生成HTML发布到web上、生成CHM分发给其他团队成员、建立Axure协作共享、&.
友情提示：
a）使用 会让你使用更轻松，虽然汉化的还不是非常完全，但是对于英文不好的同学来说已经是莫大的帮助了，向汉化的 同学致敬！
b）如果看Axure官方的使用说明很费劲，可以参考目前陈良泳同学翻译的 ，翻译质量很不错！
c）从Axure5开始，可以创建自己的组建库和导入别人做好的组建库了，官方提供了一套 ，个人觉得已经完全够用了。
d）模块和组件是2个完全不同的概念，模块的后缀是.rp而组件的后缀是.rplib。模块和组件之间是可以相互转化的，你可以利用组件去创建一些自己常用的模块如网站头部、底部等；你也可以把模块里的内容分拆成组件单个使用。
e）在生成chm格式的时候页面名称不要使用中文，中文名称的页面在chm里会显示成乱码。
& 相关主题：
本文来源：

我要回帖

更多关于 axure动态面板使用 的文章

 

随机推荐