做高保真原型时，最容易被卡住的不是画几个矩形，而是导航这种“看起来简单、动起来复杂”的部分。这门课以 Web 导航为切入点，用百度这样的真实界面做案例，把结构性导航和全局导航的交互拆开讲透。它不教你画图，而是教你怎么用 Axure 的元件、动态面板、热区，把搜索联想、信息切换、浮动条这些常见但容易做错的效果，一步步搭成可点击、可演示的原型。

这门课解决什么问题

很多初学者画原型时，只会把页面铺平，一旦需要“鼠标悬停出现联想”“滚动到某个位置导航条跟随移动”，就不知道从哪里下手。这门课的核心就是解决这类交互缺口。它先讲清楚结构性导航和全局导航的定义——不是你平时理解的“顶部菜单”，而是指信息架构层面，用户依靠哪些路径找到内容；然后给出高保真原型制作的四个步骤，让你有章法可循。接着用百度首页做完整演示：从 logo、搜索框、搜索按钮的静态搭建，到搜索联想提示的显示与切换，再到全局导航和浮动条的移动效果。每一个交互都拆成“用什么元件、在哪个状态、触发什么事件”，你跟着做一遍，就能明白动态面板和热区在导航场景里到底怎么配合。

适合什么基础，先看哪几块

如果你已经会用 Axure 画静态页面，但一碰交互就发懵，这门课正好对口。完全零基础也可以，但建议先补一下动态面板的基本概念，不然听“切换状态”会有点吃力。具体到看课顺序，建议这样安排：

  • 先看第 2 章开头关于结构性导航和全局导航定义的部分，花几分钟弄懂概念，后面案例才不会只是“抄操作”。
  • 接着看百度案例中静态搭建那几节，重点观察 logo、搜索框、按钮是怎么用元件和 icon 组合出来的，这是后面所有交互的地基。
  • 然后集中看搜索联想提示和“设置”信息切换的部分，这是本课最典型的交互难点，涉及动态面板状态切换和热区触发，建议反复看两遍。
  • 最后是全局导航和浮动条移动效果，这一节标注了重点，它把前面学的动态面板和热区又用了一遍，但场景换成了滚动跟随，做完这个你就掌握了导航类原型的核心套路。

学完能独立做什么，资料怎么配合练习

学完这门课，你能独立做出一个完整的 Web 导航高保真原型：包含搜索框的静态样式和交互样式、输入文字时出现的联想提示、点击“设置”切换显示内容、以及页面上方始终跟随的全局导航条。更重要的是，你能把这种“状态切换 + 位置变化”的思路迁移到其他交互上，比如下拉菜单、轮播图、侧边栏折叠，而不只是照搬案例。

配套资料包里是课程中使用的源文件，你不要一打开就照着改，那样学不到东西。正确的用法是：先自己按课程思路做一遍，做到卡住时再打开资料包对照，看老师是怎么设置动态面板的状态和热区的触发条件。每做完一个交互，就关掉源文件，重新从头做一遍，直到不依赖提示也能完成。最后，把百度案例换成另一个你熟悉的网站，比如电商或新闻站，用同样的方法重新设计它的导航，这一步能帮你把课程内容真正变成自己的技能。

课程目录

1-1 [课程简介] 课程内容的简介 (04:56)
2-1 [结构性导航、全局导航] 结构性导航的定义，全局导航的定义，全局导航的示例 (02:56)
2-2 [结构性导航、全局导航] 制作高保真原型制作的思路讲解（四步骤）及案例“百度”演示 (12:21)
2-3 [结构性导航、全局导航] 通过元件、icon等元素构建logo、搜索框、搜索按钮的静态 (09:41)
2-4 [结构性导航、全局导航] 搜索框、搜索按钮的静态样式及交互样式设置 (08:06)
2-5 [结构性导航、全局导航] 使用动态面板、矩形、热区制作搜索联想提示及信息切换显示效果 (17:31)
2-6 [结构性导航、全局导航] 搜索联想提示及“设置”信息切换显示的交互设置效果 (02:47)
2-7 [结构性导航、全局导航] （重点）制作“百度”的全局导航、制作浮动条移动效果 (18:58)
2-8 [结构性导航、全局导航] 元件对齐技巧，使用文本标签、icon、logo等完成搜索内容 (11:16)
2-9 [结构性导航、全局导航] （重点、难点）使用动态面板完成“百度高管”展开收起的效果 (16:37)
3-1 [局部导航] 局部导航定义及案例“W3school”演示 (02:39)
3-2 [局部导航] 案例“W3school”分析及制作思路讲解 (04:53)
3-3 [局部导航] 制作全局导航，制作鼠标悬停时的样式交互效果、浮动条移动效果 (09:40)
3-4 [局部导航] 制作局部导航，使用分组技巧制作栏目名称的样式交互变化效果 (11:26)
3-5 [局部导航] 使用文本标签、矩形等元件制作“W3school”的主内容 (07:40)
3-6 [局部导航] （重点）使用动态面板制作多个内容区域并实现内容区域的切换效果 (12:40)
3-7 [局部导航] 使用矩形、icon、占位符等元件完成广告内容设置 (06:39)
4-1 [关联性导航与上下文导航] 关联性导航与上下文导航的定义 (06:07)
4-2 [关联性导航与上下文导航] 案例“知乎”分析及制作思路讲解 (04:16)
4-3 [关联性导航与上下文导航] 使用矩形、输入框、icon、文本标签等元件制作静态页头区域 (06:04)
4-4 [关联性导航与上下文导航] 使用矩形、文本标签、icon等元件完成话题区域静态效果 (10:49)
4-5 [关联性导航与上下文导航] 使用矩形、文本标签、图片、icon等元件完成回答区域静态效果 (09:59)
4-6 [关联性导航与上下文导航] 使用矩形、文本标签、图片等元件完成推荐区域的静态效果 (08:00)
4-7 [关联性导航与上下文导航] （重点）动态面板改进页头，制作页头固定效果、按条件滚动效果 (18:23)
4-8 [关联性导航与上下文导航] （重点）结合动态面板制作“显示全部和收起”效果，计算移动距离 (13:04)
4-9 [关联性导航与上下文导航] （重点）结合动态面板制作“排序”功能，各种排序状态设置 (11:40)
5-1 [适应性导航] 适应性导航的定义及案例“当当”的演示 (02:51)
5-2 [适应性导航] 案例“当当”分析及制作思路讲解 (08:08)
5-3 [适应性导航] 使用矩形、文本标签、icon、水平线、图片等元件制作页头区域 (16:29)
5-4 [适应性导航] 完成商品图片、商品信息、商家信息等静态页面效果 (35:49)
5-5 [适应性导航] 完成关联商品的静态页面效果 (24:51)
5-6 [适应性导航] （重点、难点）制作商品图片放大镜效果 (31:41)
5-7 [适应性导航] （重点）制作倒计时效果、商品切换效果、商品增减及总额变化效果 (55:36)
5-8 [适应性导航] （重点）制作选项卡切换内容的效果 (08:12)
6-1 [面包屑导航] 面包屑导航定义及案例“新浪江苏”的演示 (02:59)
6-2 [面包屑导航] 案例“新浪江苏”分析及制作思路讲解 (01:37)
6-3 [面包屑导航] 制作正文页的页面静态效果，制作增减字号的效果 (18:31)
6-4 [面包屑导航] （重点）制作列表页的静态效果，制作级联菜单效果，制作联动效果 (21:43)
7-1 [步骤导航] 步骤导航的定义及案例“京东”的演示 (03:01)
7-2 [步骤导航] 案例“京东”分析及制作思路讲解 (03:13)
7-3 [步骤导航] 制作页面静态效果 (38:24)
7-4 [步骤导航] （重点）使用动态面板制作切换状态页面的效果，制作信息判断效果 (22:22)
8-1 [辅助导航] 辅助导航的定义及案例“腾讯”的演示 (02:44)
8-2 [辅助导航] 案例“腾讯”分析及制作思路、制作重点讲解 (06:53)
8-3 [辅助导航] 制作页面静态效果 (15:02)
8-4 [辅助导航] （重点）制作浮动条效果，制作锚点效果，计算锚点距离的技巧 (34:45)
9-1 [页脚导航] 页脚导航的定义及案例“国美”的演示 (02:42)
9-2 [页脚导航] 案例“国美”分析及制作思路、制作重点讲解 (02:02)
9-3 [页脚导航] 制作“国美”的静态页面、样式交互、动作交互等效果 (38:52)
10-1 [页码导航] 页码导航的定义及案例“谷歌”的演示 (02:47)
10-2 [页码导航] 案例“谷歌”分析及制作思路、制作重点讲解 (02:28)
10-3 [页码导航] 制作页面静态效果 (08:23)
10-4 [页码导航] （重点）结合动态面板制作页码切换效果、制作上下页的切换效果 (14:13)
11-1 [快速链接] 快速链接的定义及案例“某网站”的演示 (04:30)
11-2 [快速链接] 案例“某网站”分析及制作思路、制作重点讲解 (03:23)
11-3 [快速链接] （重点）制作页面静态效果，制作“跑马灯”效果 (42:56)
12-1 [友情链接] 友情链接的定义及案例“汽车之家”的演示 (04:46)
12-2 [友情链接] 案例“汽车之家”分析及制作思路、制作重点讲解 (01:35)
12-3 [友情链接] 制作“汽车之家”页面静态效果，制作选项卡切换效果 (32:50)
13-1 [锚点链接] 锚点链接的定义及案例“火狐主页”的演示 (02:45)
13-2 [锚点链接] 案例“火狐主页”分析及制作思路、制作重点讲解 (01:27)
13-3 [锚点链接] （重点）制作页面静态效果，制作页面锚点及跨页面锚点效果 (26:01)
14-1 [标签云] 标签云的定义及案例“wordpress”的演示 (05:44)
14-2 [标签云] 制作页面静态效果、样式交互效果 (39:04)
15-1 [标识链接] 标识链接的定义及案例“Apple”的演示 (05:40)
15-2 [标识链接] （重点）制作页面静态效果，结合动态面板制作“进度条”效果 (34:17)
15-3 [标识链接] （重点）SVG的使用技巧 (04:21)
16-1 [语种或地域导航] 语种或地域导航的定义及案例“圆通速递”的演示 (05:33)
16-2 [语种或地域导航] 案例“圆通速递”分析及制作思路、制作重点 (01:28)
16-3 [语种或地域导航] （重点）制作页面静态效果，结合动态面板制作地区选择交互效果 (50:07)
16-4 [语种或地域导航] （重点）制作下拉列表与动态面板交互效果，制作真实地图效果 (35:44)
17-1 [搜索引擎] 搜索引擎的定义及案例“iconfont”的演示 (02:04)
17-2 [搜索引擎] 案例“iconfont”分析及制作思路、制作重点 (02:48)
17-3 [搜索引擎] 制作页面静态效果，制作图片放大缩小效果，制作”天上掉钱”效果 (37:09)
18-1 [网站地图] 网站地图的定义及案例“淘宝网”的演示 (06:44)
18-2 [网站地图] 制作“淘宝网”的静态页面、样式交互效果 (24:50)