在移动端原型设计中，动态面板可以说是使用率非常非常非常之高的元件之一，而具体什么时候应该使用动态面板呢？
1. 页面内容超出手机屏幕，需要垂直滚动时：
这个很容易理解，当我们的页面内容多到一屏无法展示的时候，就需要使用动态面板作为一个“容器”去装下这些内容，当然如果你将页面尺寸设置为移动端的大小并在虚线下的白色区域布置内容后，其实点击预览时页面依旧会产生一个下拉滚动的效果，只不过这个效果是全屏下拉，如果在屏幕顶端有放status bar的时候，status bar就会跟随一起下拉。这时我们仅仅在需要滚动地方放置动态面板即可，建议选中所有需要滚动的部分，点击右键——转化为动态面板，之后稍加调整动态面板的尺寸即可。
2. 元件/页面需要滑动（拖动）操作时：
当需要制作类似于滑动翻页，拖动滑块功能时，一般需要动态面板来进行制作。例如制作图片浏览功能时，左划时切换照片。亦或时制作类似微信好友列表中左划出现删除按钮等等功能时，都会用到动态面板。后续有时间的话我会做一些实际制作过程来进行演示。
3. 元件的样式需要有条件的改变时：
“我如何设置用户点击鼠标时改变按钮的颜色呢？”“点击时这个交互下面也没有更改元件颜色或者改变元件中字体大小和颜色的选项呀？”这些是刚刚开始学习交互编写的朋友可能会遇到的问题，诚然Axure在功能设计时并不支持编写交互时直接对某个元件的内部属性进行调整，而需要用户首先将需要修改样式后的元件制作出来，并与原来的元件共同组合成一个含有不同状态的动态面板，之后通过点击鼠标等触发事件来切换动态面板的状态来实现之前所说的点击鼠标改变按钮颜色等等功能。
4. 元件/内容有规律的改变时：
这一点可能比较容易理解，当在做诸如轮播图，HUD提醒，加载动画提示等等需要元件内容有规律的改变时，一般会使用动态面板的几个状态来进行切换，同时编写切换状态的交互逻辑来实现有规律/循环播放的效果。
5. 当切换页面时：
页面的切换在Axure中大致有四种方式：
（1）链接跳转（最简单，最暴力，但无切换动画效果）；
（2）元件隐藏显示切换；（可设置显示隐藏的动画，但一层压一层的千层饼的页面编辑起来真的脑壳痛）
（3）元件移动；（同上，但是不仅仅是千层饼的问题了，还得算好千层饼的尺寸和需要移动的距离）
（4）动态面板状态切换。（便于编辑，切换有动画效果，但切换的页面尺寸必须相同）
其中使用动态面板切换页面的好处是当页面内容较多，均需要上下拖动时，如果仅仅通过显示隐藏元件或移动元件的方法无法实现，而显示隐藏动态面板或移动动态面板的做法又未免有点脱裤子放屁（当然要切换的两个页面若是大小不同还是有必要的）。通过在动态面板的不同状态中分别编辑各个要切换的页面，并用切换手势或按钮进行状态切换行为的触发，切换时设置合适的切换动画即可实现漂亮的页面切换效果。因为编辑时可以分状态，终于不用所有页面都压在一起了，这种感觉试过一次都不想再用显示隐藏那种方法了。
以上是需要用到动态面板的几种场景，此外说一些使用动态面板时的注意事项和小技巧：
动态面板是可以“套娃”的，一个动态面板的状态中可以嵌套另一个或多个动态面板，目前我没发现有什么数量限制，但是嵌套过多偶尔会出现一些滑动bug并且浏览时性能也会有所下降，套娃时需要稍稍克制一下。另外中继器是不支持嵌套的。
如何隐藏动态面板下拉时的滚动条？请将动态面板的宽度增加15，并使用一个同背景色的无线框矩形压住这多出来的15宽度即可。
在设计需要页面滑动的移动端原型时，请千万不要打开动态面板的自适应功能，否则多一放一点内容，动态面板就跟着变大一圈，最后滑动变成了整个动态面板的滑动，而不是动态面板中内容的滑动。
——————————————————文章目录——————————————————
Chapter 1
开始前的准备
Chapter 2
开始做吧,初学时懵逼的问题：
Chapter3
实战教程，未完待续...
网友评论