经验笔记｜Axure制作一个动态状态显示元件
Axure自带的元件库里，大部分元件是所见即所得的静态元件，最有特色的就是中继器和动态面板，也是初学Axure时比较容易发懵的地方，通过这个状态提示元件，对于这2个元件有了更深入的理解与应用，所以写了这篇小教程，希望对学习Axure的朋友有所帮助，制作过程中有什么疑问可以在下方评论区讨论哦~
后台界面设计中，为了看到当前活动进度，或是业务的处理进度，需要各种状态提示，通常是根据业务线成组出现。例如这样：
常见状态示例
如果是直接使用Axure元件拼接，上面的效果就需要排放5个元件，对齐，并设置颜色和状态描述。如果只是这一个功能的10以内的状态的制作倒还不算麻烦，但整个后台界面，往往有多条业务线，多种状态描述，还用简单的堆积木方式构建表单，就会比较吃力。
于是我开始思考有没有更高效的快速搭建状态提示的方式，很快发现Axure自带的中继器、动态面板有很大帮助，加上交互事件关联起来，最后实现了需要的效果：利用中继器实现批量状态显示，还可以通过操作表格内容，实现状态提示增删改。
由中继器控制动态状态显示
改表格值比改一堆元件快捷多了~，工作效率提升不少，那么如何从0到1搭建出这样的动态元件呢？接下来逐步介绍制作过程。
准备工作
准备工作要点
要搭建适用于工作环境的元件，需要做好这些准备工作：
1.整理后台状态颜色清单
本案例选用的是B端后台设计中常见的5种状态色：灰、蓝、绿、橙、红
2.确定后台状态提示显示结构
本案例选用的显示结构是，左边有小圆点，右边是描述，还有椭圆背景色
3.中继器应用知识
本案例涉及的中继器应用知识，主要是对中继器的data表进行操作，涉及行和列两大方面：
行：中继器可以理解为一个复制器，会按照data表行数，自动向下复制行数一样多的元件数量，对data表行进行增删就可以实现元件数量增删.
列：中继器的列通常对应是中继器内部的需要动态更改内容的元件名，或是较为复杂的交互事件的中间变量（这些变量的内容不会显示出来，只用于支持交互事件）。
本案例用到的data表列：
ztType：设置状态元件的颜色，1-5对应常见色：灰、蓝、绿、橙、红
ztTXT：设置状态描述（不超过4字）
4.动态面板应用知识
动态面板由多个状态组成，每个状态可以理解成一个玻璃盒子，整个动态面板就是一堆叠起来的玻璃盒子，最终的显示效果就相当于从顶部去俯视这一堆玻璃盒子。
通过属性设置，可以让玻璃盒子默认显示或是隐藏，然后加入交互事件，让一部分玻璃盒子隐藏，另一部分显示，实现玻璃盒子切换。为了避免同时露出太多元件影响显示，大部分动态面板都是默认隐藏的，直到需要使用到某个玻璃盒子里的东西时才显示出指定的玻璃盒子。
本案例需要的是5种不同的状态色提示，所以用制作5个状态层（玻璃盒子），然后通过加载事件（load）识别需要显示哪个状态（玻璃盒子），进而实现data表一改数字，显示状态就会切换的效果。
5.了解Axure加载事件逻辑与写法
状态提示的展示，通常是一开始就有显示的，所以可以直接用loaded事件，然后添加对应的判断语句。
本案例中是约定了data表第一个列：ztType的值1-5，来控制状态提示颜色，即状态层切换，所以需要添加5条判断语句（用例）。
搭建流程
step01 搭建元件结构
新建一个动态面板（zt-style），双击进入，会看到默认会就有一个状态层，在这个状态层里绘制好第一个状态元件（灰色），并修改状态层名称为grey。绘制完成后，分析出哪些元件的内容是会动态变化的，这些元件简短好识别的名称（符合变量命名法则更好）。
元件结构与显示内容对应关系
在状态层右键菜单，可以复制状态层，复制出第2-5个状态层，并修改成需要的颜色：蓝、绿、橙、红，这样动态面板（zt-style）就制作好了。
为了实现复制多个的效果，需要把这个动态面板放进一个中继器（table-zt）中，并且加入两个隐形的文本元件（对应data列名：ztType、ztTXT）用于传递控制值和状态描述。完整的动态状态元件的结构如下：
完整的动态面板元件结构
step02 搭建交互事件
制作好元件身体后，接下来是实现动态变化的关联。本案例的交互事件主要有两部分：
第一部分：中继器loaded事件
加载时将data表的值传入到隐形元件中
中继器事件
第二部分：动态面板事件和文本zt事件
动态面板事件：根据隐形元件的值，切换到对应的状态层
动态面板事件
文本zt事件：并显示状态描述
状态描述元件事件
step03 测试调整放入表格
这篇小教程介绍了如何通过利用Axure的中继器、动态面板以及交互事件，实现一个多合一状态提示元件。
首先，要对相关设计需求和Axure元件应用有一定了解；
其次，按照先根据显示结构搭建动态面板，再动作的思路完成元件制作。
除了多合一的状态提示元件，类似的样式上有规律且结构上重复性高的元件，都可以这样通过中继器和动态面板改造成多合一的高效元件。
制作过程中有什么疑问可以在下方评论区讨论哦~
