“
— — — — — — — — — — — — — — —
我看过很多动态面板的教程
来自X度经验、来自X乎、来自各大产品网站
却未曾见过一股清流
— — — — — — — — — — — — — — —
”
几乎都是直接讲解操作，诸如“手把手教你用动态面板制作手风琴菜单”、“如何用动态面板实现tab页签切换”、“快速用动态面板实现菜单展开折叠或下拉”。
虽然也能让人上手，但总觉得缺少了最根本的内功。
何谓内功？
就好比江南七侠教郭靖，6位师傅各有所长，足足教了8年，但为什么郭靖所学有限，进步唯艰？
为什么马钰只是教了1年多呼吸、打坐、睡觉的法子，郭靖就不负所望、进展神速呢？
这里体现的就是内功心法的重要性。
为了更高效地使用动态面板，以及让我们看到某个交互效果时有能力思考其实现过程，我们很有必要先了解动态面板的基础原理、它和其他元件的不同之处，再学习实践具体的交互操作。
一、认识检视区
在页面上拖入一个新的动态面板，可在检视区看到它的属性、说明、样式。
动态面板的属性、说明、样式
1）样式
对于一个矩形，可在样式中设置文字的各种颜色、背景色、大小、字体等。
并且，自带元件中一切形状的基础都是矩形，包括文本标签、各种标题。
但动态面板不能输入文字，只能添加新状态，样式中只能添加背景色和背景图片。
2）属性-交互
属性是设置一个元件各种交互效果的区域。
属性菜单下又进行二级划分，矩形的属性划分了交互和形状，而动态面板的属性划分了交互和动态面板，还有热区的属性也比较特别，所以此处我们先把三者的交互对比来看，下图所示
重点需要了解的地方已经圈红
交互事件比对图
在交互事件中，鼠标相关操作、位移、显示隐藏等都是相同，故不再赘述。
a、矩形有选中状态和载入状态
b、热区没有选中状态
c、动态面板也没有选中状态，并且增加了拖动和滚动两类交互事件
这些交互事件体现的就是这个元件能完成的交互效果。
比如动态面板有拖动，那么我们能联想到，购物时有放大局部图片的交互，那么，这可能就和动态面板有关。
再如动态面板有滚动，那么我们能联想到，一个页面上下滚动以及定位到指定位置，这也和动态面板有关。
3）属性-动态面板
还是先来看三种元件的比对图
形状、热区、面板比对图
形状的属性除了基本交互，下面形状菜单中有悬停、按下、选中、禁用四种设置
我们常见的效果例如一个按钮，鼠标移上、点击时会变换字体颜色、按钮背景色、出现阴影等效果，通过形状的交互样式可以快速设置。
动态面板由于缺少选中状态，所以没有这几类交互样式
但它有滚动条、固定到浏览器以及鼠标交互，因此和定位、滚动相关的交互就一定和动态面板有关系。
二、用例动作：显示隐藏
随意选中一个元件，打开【检视-属性-更多事件】，我们在此处可以设置一个元件的交互用例。
随意打开一个事件的用例编辑对话框，如下图，从左至右，依次选中【显示--某个动态面板--切换】，这样选择的目的是方便我们最大限度地看到这个动作的功能。
所有元件都具备的显示隐藏
在配置动作时，如果不选动态面板，而是选一个矩形，下方的可见性及显示隐藏动画都完全相同。
并且，选择元件时每次只能选一个再设置，不能选择多个元件的组合统一设置，这个过程说明了两点
1、一个元件的显示-隐藏，对应所能配置的动作都是一致的。也即矩形或动态面板的显示、隐藏效果相同
2、多个元件的交互效果如果一致，就可以考虑放入动态面板。也即利用动态面板的容器特性
三、用例动作：设置面板状态
在用例编辑对话框中，依次点击【设置面板状态-某个动态面板-选择状态】，我选了next状态，能看到最多的动作设置。
所有元件都具备的设置面板状态
重点关注【选择状态】【推动/拉动元件】，这都是动态面板的特有属性，其他元件不具备。
动态面板可以添加多个状态，每个状态内部又可以添加多个元件，而多个状态之间又可循环，这让我们联想到各个电商网站的首页图片轮播效果。
四、五大用途
当我们了解完上述特有属性及动作的特殊设置，我们才算对动态面板有了较全面的基本认识。可以总结为以下5大用途，此处只做总结说明，后续文章再总结具体方式。
1、容器
● 说明：动态面板的一个状态内可以放入多个元件，就好比一个容器。尤其是多个元件的交互效果一致时利用容器特性，就可以一次性实现交互，不必每个元件单独设置。
● 案例：鼠标移上一级菜单时下方显示二级菜单，此时利用容器只需设置交互事件为【鼠标移上时显示动态面板】即可。
2、滑动/翻转效果（包含于显示-隐藏）
● 说明：在用例动作中的显示隐藏动作内，可设置显示或隐藏的动画效果。具体分为【上下左右滑动】、【上下左右翻转】
● 案例：滚动文字或图片，利用滑动效果只需设置交互事件为【页面载入时、显示某动态面板、向左滑动】
3、拖动效果
● 说明：拖动是动态面板的特有交互，页面上常见的拖拽操作是通过它实现的
● 案例：电商网站查看商品图片时可放大图片，原理是鼠标所在位置有一个动态面板，鼠标移动时也即拖动面板，同时在附近区域显示放大的图片即可。
4、固定位置
● 说明：重要的导航按钮一般都固定在页面右侧或顶部，这利用的是动态面板的固定在浏览器特性，其他元件不存在。
● 案例：页面右侧的固定按钮常见有回到顶部、建议反馈、分享，不会随页面滚动而变化，原理是将这些元件放入动态面板里，再设置固定到浏览器。
5、多状态切换
● 说明：动态面板可以添加多个状态，并且可以设置切换动效。选择状态时，可以选具体某状态、Next、Previous、Value、停止循环。
● 案例：首页有5个图片和5个序号，点击序号几，则切换到对应第几个图片，原理可利用序号和动态面板的状态对应，如下图
面板的多状态切换
以上，就是用好动态面板之前需要了解的要点。
我们常说Axure软件上手快，这话不错，但想要熟练、精通，毕竟不是一日之功，每类元件的细节都有差异，这些细节需要平日使用时逐步积累总结，最好的方法是比较、尝试。
— — — — 系 列 目 录 — — — —
这不是Axure教程！（四）元件六要素与用例
这不是Axure教程！（五）变量与函数
— — — — 目 录 完 — — — —
网友评论