Axure 动态面板的学习

之前的接触

在大三的时候，我参加服务外包竞赛，想要用这个动态面板，在短时间内做一个软件的demo（高仿真原型),当时的自己怎么也学不会，应该是我太焦虑的缘故。如果你也有立刻上手动态面板的需求，不要太焦虑，它其实很简单。动态面板很好上手，而且功能强大。做高仿真原型应该肯定会用到。

标志

在简书上，看到一篇文章，它将这个标志描述成一本相册，我觉得这个比喻真的很贴切。同时状态的切换，真的像在翻阅相册一样，可以先学会再来体会这个感觉。

用途

1.画面的切换
使用链接进行切换，每次切换，都会有闪烁，使用动态面板，没有画面的闪烁
2.可以做顶部导航栏等，一些固定于窗口，并且不会随着页面的滚动而滚动

动态面板“切换”实践

Axure版本：9
目标成果：做一个很简单的菜单

实践的步骤：
1.首先制作上方的菜单（拖入三个矩形),我把矩形下边的边进行隐藏

2.然后拖一个动态面板到canvas上，命名为MenuDy（或者拖入矩形，鼠标右键将它转化为动态面板）
3.点击menuDy
出现下图编辑框（Axure 9)，虚线框是canvas上的动态面板

如果把动态面板比作一个相册，那么每一个State就是一张照片。点击State1⏬ 可以 添加State，删除State，排序State。然后拖拽元件到对应的State 生成你想要的照片。

tips :
1.动态面板内部元件的x ,y 。（0，0）坐标是对应于一开始创建的动态模板的左上角
2.如果你的动态模板太小，你的元件超出了面板范围，就会有遮挡现象（不显示超出部分）。这时，打开动态面板的属性区域，如图的三个变量，会帮你解决这些遮挡问题。至于Pin to Brower,请继续看后续介绍。
4. 最后编辑菜单的点击事件，来进行切换吧
点击菜单，出现对应的State

“置顶导航栏”的实践

1.拖入矩形，来制作导航栏

2.全选 Group，将选中导航栏group, 之后鼠标右键，将group转化成动态面板
3.点击，在动态面板的属性区域，点击 Pin to Brower
1）勾选 Pin to browser window
2）选择固定的位置
3）最后一个，是指是否占有位置，简单的说勾选了以后会在图层的上方，浮在窗口，遮挡其它元素，不勾选的话，就会占有位置，不会遮挡其它元素。这个遮挡，是指在一开始生成的时候，滚动起来，肯定会遮挡一部分元素的吧。