Axure零基础跟我学：全面认识热区、动态面板、内联框架、中继器

 亲爱的小伙伴，如有帮助请订阅专栏！跟着老师每课一练，系统学习Axure交互设计课程！
Axure产品经理精品视频课https://edu.csdn.net/course/detail/40420https://edu.csdn.net/course/detail/40420

课程主题：全面认识热区、动态面板、内联框架、中继器

课程视频：

Axure重要元件:热区、动态面板、内联框架、中继器

---

本文涉及到多个定义和博主根据自身经验总结出的知识点，禁止抄袭(侵权必究)，本文仅供学习所用，帮助大家更好的理解Axure；能学好一门技术不在于操作的多华丽，而在于理解技术的内涵、作用和解决的问题。

一、认识热区

官方定义：热区（Hotspot）是一个特殊的交互元件，它本身不可见（在预览或发布时透明），但可以覆盖在其他元件上方，用于触发交互事件（如点击、悬停等）

博主定义：指定的区域内都执行“设置”的交互（记住这个考，以后红字标注的练习题必考）

如何创建和使用热区（用最少得语言说明白）

1. 添加热区：直接拖拽到制图区即可；

2. 设置交互：鼠标单击选中热区，在右侧交互区，添加交互；

二、认识动态面板

官方定义：动态面板（Dynamic Panel） 是一个功能强大的容器类元件，允许你在同一个区域切换不同的内容状态（State），并支持拖拽、滚动、固定位置等高级交互效果。它是制作高保真交互原型的核心工具之一。

博主定义：是一个容器的概念，可以进行元件的嵌套，每一个State均可嵌套元件

如何创建和使用动态面板

1. 添加动态面板：直接拖拽到制图区即可；

2. 添加动态面板内容：双击打开动态面板，拖入元件即可；

3. 添加动态面板状态：双击打开动态面板，在顶部State下箭头点开添加；

4. 添加交互：鼠标单击选中动态面板，在右侧交互区，添加交互；

三、认识内联框架

官方定义：内联框架（Inline Frame） 是一个可以嵌入外部内容或内部页面的容器元件，类似于网页中的 <iframe> 标签。它允许你在当前页面中直接显示其他网页、本地文件或Axure原型中的其他页面，非常适合制作高保真原型或整合多来源内容。

博主定义：实现页面之间的链接，可以将其他页面的内容链接到本页面

如何创建和使用内联框架

1. 添加内联框架：直接拖拽到制图区即可；

2. 链接页面内容：鼠标双击内联框架，选择要链接的原型内页面或者外部的URL；

四、认识中继器

官方定义：中继器（Repeater） 是一个高级交互元件，用于动态展示、编辑和操作重复数据，类似于前端开发中的“列表渲染”或“循环输出”。它特别适合模拟数据库驱动的界面，如表格、列表、卡片流等。

博主定义：是一个数据容器，可以进行数据的增删改查，更多的复杂交互

如何创建和使用中继器

1. 添加中继器：直接拖拽到制图区即可；

2. 添加中继器表格：删除默认的表格，拖入一个表格，只保留Column行；

3. 添加中继器数据：鼠标单击选中中继器，在右侧数据区添加（专题讲）；

4. 调整中继器尺寸：双击打开中继器，设置内部表格的尺寸以达到尺寸的调整；

---

每课一练

练习题一（填空）：默写热区、动态面板、内联框架、中继器的博主定义

1.                                                                                                          
2.                                                                                                          
3.                                                                                                          
4.                                                                                                          

练习题二（填空）：已知下图按钮组合，如何使用热区实现下方组合隐藏，交互逻辑是什么（）

练习题三（练习）：使用动态面板实现下方视频的交互设计，已知表单为中继器（）

动态面板课堂练习

---

上节课答案：

练习题一：ABC；练习题二：居中；

练习题三：1、设置图片置于顶层（或文字置于底层）2、左侧摘要（大纲）拖动图片至文字上方

其他专栏直通车：

《Axure疑难杂症专题》https://blog.csdn.net/benleiqiang/category_12961170.html《Axure应用交互设计》https://blog.csdn.net/benleiqiang/category_12803093.html《Axure原型设计精品课》https://edu.csdn.net/course/detail/40420

 如有其他相关问题，欢迎私信沟通，关注  结构化知识课堂-CSDN博客

明天的产品大咖就是你，创作不易，麻烦关注一下，点赞+收藏，感谢大家！