Axure 动态面板终极教程
什么是动态面板？为什么它如此重要？
你可以把 动态面板 想象成一个“页面容器”或者“智能的图层组”。
- 它不是一个静态的元素，而是一个可以包含多个“状态”的特殊组件。
- 每个状态就像一个独立的画布，你可以为每个状态放置不同的内容、布局和交互。
- 通过简单的交互行为（如点击、悬停、页面载入等），你可以让动态面板在不同的“状态”之间进行切换、显示或隐藏,从而实现复杂的动态效果。
为什么重要？ 几乎所有 Axure 中的高级交互效果，
- 页面切换（Tab 选项卡）
- 下拉菜单
- 弹出模态框
- 手风琴折叠面板
- 轮播图
- 页面内导航
- 动态加载内容
...这些效果的核心都离不开动态面板，它是 Axure 从“原型工具”迈向“交互原型工具”的关键。
动态面板的核心组成部分
要理解动态面板,首先要熟悉它的三个核心元素：
-
动态面板组件
- 这是你在元件库中拖拽到画布上的那个灰色方框。
- 它本身是一个容器,默认只有一个空白状态。
-
状态
- 这是动态面板的“页面”或“画布”,一个动态面板可以包含一个或多个状态。
- 每个状态可以有自己的背景、边框，以及放置任何其他 Axure 元件（文本、图片、形状、其他动态面板等）。
- 你可以添加、删除、重命名和复制状态。
-
交互行为
- 这是驱动动态面板在不同状态间切换的“引擎”。
- 你通过设置元件的交互事件（如
OnClick,OnMouseEnter）来触发行为（如Set Panel State）。
动态面板的基本操作（实战演练）
让我们通过一个最简单的例子——点击按钮切换背景颜色,来熟悉动态面板的基本操作。
目标： 页面上有一个按钮，点击按钮后,整个页面的背景颜色从白色变为灰色。
步骤 1：创建动态面板
- 从左侧的 “动态面板” 元件库中，拖拽一个 “动态面板” 组件到画布上。
- 选中这个动态面板，在右侧的 “样式” 面板中，将其 尺寸 设置为和你的画布一样大（375x667）,这样它就能覆盖整个页面。
- 选中动态面板，在右侧的 “交互” 面板中，点击 “新建状态”，给它命名为
State 1。
步骤 2：设置初始状态
- 确保当前选中的是
State 1。 - 在右侧的 “样式” 面板中，找到 “填充” 选项，将其颜色设置为 白色。
- 在右侧的 “交互” 面板中，点击 “新建状态”，创建第二个状态，命名为
State 2。
步骤 3：设置目标状态
- 在右侧的 “元件交互” 或 “页面交互” 面板顶部，点击下拉菜单，切换到
State 2。 - 同样在 “样式” 面板中，将
State 2的 填充 颜色设置为 灰色。
步骤 4：创建交互行为
- 从左侧的 “按钮” 元件库中,拖拽一个按钮到画布上。
- 选中这个按钮，在右侧的 “交互” 面板中，点击 “新建交互”。
- 设置交互参数：
- 交互事件: 选择
单击时(OnClick) - 动作: 选择
设置面板状态(Set Panel State) - 目标: 选择你刚刚创建的那个动态面板
- 状态: 选择
State 2 - 动画: 选择 “向下滑动” (Slide Down) - 虽然我们不需要滑动效果，但选择一个动画类型是必须的，为了简单，我们也可以选择 “无” (No Animation)，但这样切换会非常生硬,通常选择一个淡入淡出或滑动效果会更好。
- 交互事件: 选择
步骤 5：预览效果 点击右上角的 “预览” 按钮（或按 F5）。
- 初始时,页面背景是白色。
- 点击按钮，背景会以你选择的动画效果（比如淡入）切换为灰色。
恭喜！你已经完成了第一个动态面板交互！
动态面板的核心交互行为详解
在 Axure 中,与动态面板相关的核心交互行为主要有三个：
-
设置面板状态
- 用途： 这是最常用的行为,用于切换动态面板的状态。
- 关键选项：
- 目标： 选择要操作的动态面板。
- 状态： 选择要切换到的目标状态。
- 动画： 这是精髓所在！它定义了状态切换的视觉效果。
- 无: 瞬间切换,无过渡效果。
- 向左/向右滑动: 状态内容从侧边滑入/滑出。
- 向上/向下滑动: 状态内容从上下滑入/滑出。
- 淡入/淡出: 内容透明度渐变。
- 交叉淡入淡出: 新旧内容同时淡入淡出,常用于图片轮播。
- 翻转: 3D 翻转效果。
-
显示/隐藏
- 用途： 用于显示或隐藏整个动态面板，而不是切换其内部状态，常用于实现模态弹窗、下拉菜单等。
- 关键选项：
- 目标： 选择要操作的动态面板。
- 动画： 同样可以选择显示/隐藏时的动画效果，如 淡入、向下滑动 等。
-
移动面板
- 用途： 在不改变其内部状态内容的情况下,动态地改变动态面板在页面上的位置。
- 关键选项：
- 目标： 选择要移动的动态面板。
- 移动到： 可以是 相对当前位置 或 绝对坐标。
- 动画： 可以设置移动过程的动画效果,实现平滑的拖拽或滑动。
经典实例：制作 Tab 选项卡
Tab 选项卡是动态面板最经典的应用之一。
目标： 制作一个包含“首页”、“产品”、“关于我们”三个选项卡的页面，点击不同的选项卡,下方的内容区域会相应切换。
步骤 1：布局静态内容
- 创建三个文本标签，分别命名为“首页”、“产品”、“关于我们”,作为选项卡按钮。
- 在下方创建三个文本框,分别放置对应的内容。
步骤 2：创建动态面板
- 拖入一个动态面板，覆盖住下方的内容区域（不包括选项卡按钮）。
- 选中动态面板，点击 “新建状态”，分别命名为 、、
关于我们内容。
步骤 3：设置各状态内容
- 在动态面板的交互面板顶部，切换到 状态，将“首页”的内容文本框拖入此状态。
- 切换到 状态，将“产品”的内容文本框拖入。
- 切换到
关于我们内容状态，将“关于我们”的内容文本框拖入。- 技巧： 你可以在画布外先做好三个内容框，然后直接复制粘贴到各个状态里,这样布局最整齐。
步骤 4：设置选项卡按钮的交互
-
选中“首页”按钮，打开 “交互” 面板,新建交互：
- 交互事件:
单击时 - 动作:
设置面板状态 - 目标: 你的动态面板
- 状态:
- 动画:
淡入
- 交互事件:
-
选中“产品”按钮,新建交互：
- 交互事件:
单击时 - 动作:
设置面板状态 - 目标: 你的动态面板
- 状态:
- 动画:
淡入
- 交互事件:
-
选中“关于我们”按钮，重复以上操作，将状态设置为
关于我们内容。
步骤 5：预览效果 点击预览，点击不同的选项卡,你会发现下方的动态内容区域会平滑地切换。
高级技巧与最佳实践
-
“固定”动态面板：
- 在右侧的 “样式” 面板中，勾选 “固定到浏览器” (Fixed in Browser)。
- 这会让动态面板（如导航栏、侧边栏）始终停留在视口的固定位置，不随页面滚动而移动,这是实现网站头部导航栏的关键。
-
嵌套动态面板：
动态面板内部可以再放置动态面板，一个大的动态面板用于控制整个页面的布局切换，而内部的一个小动态面板用于控制某个模块内的 Tab 切换,这种嵌套可以实现非常复杂的交互逻辑。
-
使用“交互样式”实现悬停效果：
- 不需要为悬停单独创建一个状态，你可以直接为按钮设置
OnMouseEnter（鼠标悬停时）和OnMouseLeave（鼠标离开时）的交互。 - OnMouseEnter: 动作为
设置面板状态,切换到带有高亮样式的状态。 - OnMouseLeave: 动作为
设置面板状态,切换回原始状态。 - 这样做比用两个状态更轻量,逻辑也更清晰。
- 不需要为悬停单独创建一个状态，你可以直接为按钮设置
-
“案例”功能：
- 当你的动态面板有很多状态时，管理起来会很麻烦，Axure 的 “案例” 功能可以让你将某个状态的内容复制并粘贴到画布上的其他位置，同时保持与动态面板的关联，这对于创建列表项（如商品列表、消息列表）非常有用。
-
命名规范：
- 养成良好的命名习惯，
- 动态面板命名：
dp_导航栏,dp_轮播图 - 状态命名：
dp_轮播图_State_首页,dp_轮播图_State_产品
- 动态面板命名：
- 这会让你在复杂项目中快速定位和管理元件。
- 养成良好的命名习惯，
动态面板是 Axure 的灵魂，掌握它，你就掌握了制作高保真、强交互原型的钥匙。
学习路径建议：
- 从基础开始： 先熟练掌握
设置面板状态和简单的动画效果。 - 模仿经典： 亲手制作 Tab 选项卡、下拉菜单、模态框这几个经典案例。
- 挑战复杂： 尝试制作一个完整的个人主页原型，包含固定导航、轮播图、作品集展示等。
- 探索高级： 学习嵌套动态面板和“案例”功能,解决更复杂的业务需求。
多练习，多思考，你会发现动态面板用起来得心应手，能够极大地提升你的原型设计效率和表现力,祝你学习愉快！
