企业官网建设流程全解析

每次带新人做产品原型，我都会盯着他们的“第二天”看。

第一天，大家都学得很快，拖几个矩形、打几行字、画几条线，一个静态页面就出来了。等到第二天，一旦开始碰“交互”，学习曲线会突然变陡。原因很简单：Axure表面上是个画图工具，实际上是个“事件驱动”的逻辑工具。你不能只告诉它“页面长什么样”，还得告诉它“用户点了某处之后，到底发生什么”。

这篇Axure基础教程完整指南，就是写给处在Day2阶段的人。不管你是刚看完第一天教程、准备上手做需求的产品经理，还是第一次接触交互原型的开发、运营或自由职业者，这篇文章会把动态面板、母版、事件交互这些绕不开的概念讲透，并且用“固定背景滚动+底部悬浮栏”这种真实需求串起来。目标只有一个：让你从“能画静态页面”平滑过渡到“能交付带交互逻辑的可点击原型”。

带人的经验告诉我，Day2学得好不好，直接决定你后面是继续用Axure，还是老老实实退回静态图。这篇文章里没有照着官方文档念的东西，都是实际带项目、做需求时踩过坑又验证过的内容。

1. Day1结束后，Day2到底该补哪块短板

1.1 从“画图工具”切换到“交互原型工具”

很多教程把Axure归到“画图”这一类，其实是误导。Axure的全名是Axure RP，RP全称Rapid Prototyping，也就是快速原型设计。它的强项不是画出多精美的视觉稿，而是用最低成本把产品的流程、状态、反馈讲清楚。

Day1你大概率已经掌握的是：新建页面、从元件库拖出矩形和文本、调整颜色和大小、用预览看一眼静态效果。这些是“会画”。但到了评审会和需求沟通现场，别人问的问题往往不是“这个按钮好看吗”，而是“点这个按钮跳到哪一页”“没有网络时界面怎么显示”“下拉选项展开后怎么收回”。这些问题，静态图回答不了，必须靠交互来回答。

所以Day2要补的第一块短板，是思维层面的：把Axure从“画图工具”切换成“逻辑表达工具”。一切操作都围绕“用户操作之后，系统如何响应”来组织，而不是围绕“画面好不好看”来组织。

1.2 所有复杂交互，底层都能拆成“触发—对象—结果”

为了不让Day2淹没在功能海洋里，我习惯先给人一个极简框架：任何一个交互，无论多复杂，本质都是三件事。

• 触发：用户做了什么，或者页面加载后自动发生，比如鼠标点击、移入、键盘输入、页面载入。
• 对象：要操作哪个元件，比如某个按钮、某个输入框、某个动态面板。
• 结果：操作之后发生了什么，比如跳转到新页面、某个区域隐藏、某张图片切换。

这个框架听着简单，但特别管用。Day2遇到的困难，比如“不知道怎么让某个区域展开收起”“为什么我设置了交互没反应”，绝大多数都是因为这三件事里有一样没想清楚。先写一句话把交互描述清楚，再去软件里找对应配置项，效率会高很多。

比如“点击登录按钮后，如果账号和密码都不为空，就跳转到首页”，拆开就是：触发是“点击登录按钮”，对象是“账号输入框和密码输入框”，结果是“判断后跳转首页”。Axure里需要用到“事件+条件+动作”来组合，后面的章节会展开讲。

1.3 关于Axure和AI：真正值得尝试的配合方式

经常有人问，Axure能不能跟AI结合用。我的结论是：能结合，但要分清各自擅长什么。

我现在的习惯是，拿到需求后，先让AI帮我整理交互逻辑清单，比如把“登录流程的异常分支”拆列出来，再对照清单用Axure实现。AI在生成文字内容、梳理状态流转、写PRD草稿、把一段描述转成结构化步骤列表上，效率非常高。但Axure页面本身的拖拽和配置，还是得手工来，AI目前没办法直接帮你生成一个可编辑的.rp文件。

如果你做原型时需要大量真实文案，也可以让AI批量生成，再粘贴到元件里，比一个个打字省不少时间。简单说，把AI当“前道工序”用，最终表达回到Axure，这是目前比较务实的玩法。

2. 工作区里被忽略但决定效率的四个细节

2.1 页面管理：把“页面清单”当成产品地图来维护

页面管理器在Axure界面的左上角（RP 9里叫Pages面板）。很多新人第一天学的时候，都是随手新建几个页面，命名乱七八糟。到了Day2开始做跳转交互，你会在“打开链接”的目标页下拉列表里，面对一堆“Page 1”“Page 2”“未命名4”这样的选项，当场崩溃。

我的习惯是从第一个页面开始就用编号和前缀组织：01_全局框架、02_首页、02_列表页、03_详情页、04_个人中心。有层级关系就用文件夹归档。这样当一个交互需要选择目标页时，下拉列表本身就是一份清晰的目录。

这不仅是美观问题。原型做到中后期，页面数量往往会超过三十个，前期不梳理，光是在页面列表里找目标页就够让人抓狂。

2.2 图层和元件命名：为交互面板省下80%的查找时间

每个元件拖进画布后，默认名称是“矩形1”“文本框2”这种。你要是画了一屏的“矩形17”“矩形18”，等设置交互、指定操作对象的时候，点开目标元件的下拉框，等你的就是一场灾难。

我的建议是，重要元件一律重命名，命名格式用“类型_位置_含义”：比如按钮btn_login、导航栏nav_header、动态面板panel_userinfo。英文前缀是为了在下拉列表里排序更规整，中文含义是为了自己一眼能看懂。

有人觉得这很麻烦，但实际算下来，一次命名只多花几秒钟，省下的是后面无数次查找和误操作的时间。尤其当你在动态面板里嵌套了好几层内容之后，一个能看清结构的元件树（Outline面板）比什么都重要。

2.3 样式面板、标尺和辅助线：精确布局的基本功

右侧的样式面板（Style）是Day2必啃的。位置X/Y、尺寸W/H、圆角半径、不透明度、旋转角度、边框和阴影，这些都不要用鼠标去拖动碰运气，养成直接输入数值的习惯。想微调就用键盘方向键，默认一次移动1像素，按住Shift再按方向键，一次移动10像素。

标尺和辅助线对对齐帮助很大。按Ctrl+R可以开启或隐藏标尺，从标尺上拖出的是蓝色辅助线，辅助线只在编辑时显示，预览时不会出现。如果团队对页面尺寸有统一规范，比如内容区宽度1200像素，可以直接拖一条垂直辅助线放在1200的位置，所有页面都按这个边界画。

样式面板里还有一个很实用的功能：格式刷。选中一个设置好样式的元件，点工具栏里的格式刷，再点另一个元件，样式就复制过去了。批量统一按钮和卡片的圆角、阴影、配色时，比手动改快得多。

2.4 组合与快捷键：让重复性操作明显变快

画原型时，一定要养成“组合”的习惯。选中多个元件，按Ctrl+G（Mac是Command+G）组合成一个整体，移动、复制、统一调样式都方便。取消组合是Ctrl+Shift+G。组合不会改变预览表现，纯粹是帮你自己管理画布。

另外，Ctrl+D可以快速复制一个元件，在创建列表项、卡片、多列布局时非常好用。复制出来的元件会稍微偏移一点，方便你看出这是新对象。

这些操作单个看都不起眼，但到了Day2以后，页面复杂度会快速上升，操作速度和准确率很多时候就是靠这些习惯撑着。

3. 交互机制拆解：事件、条件、动作、用例是如何协作的

3.1 先看懂交互面板的信息结构

Day2最容易卡住的地方，是交互面板里那一堆概念：事件（Event）、用例（Case）、条件（Condition）、动作（Action）。很多新人分不清谁包含谁，结果交互配置的一塌糊涂。

我用大白话解释一下：事件是“什么时候开始监听”，比如单击、双击、鼠标移入；一个事件下可以有多个用例，所谓用例就是“一种处理方案”；每个用例里可以设置条件，条件通过了就执行动作；动作是“实际干什么”，比如打开链接、设置面板状态、隐藏元件。

打个比方：门铃响了（事件），管家先看你是不是住户（条件），确认之后就开门（动作）。如果有多个住户，按顺序一个个匹配，匹配上了就执行，不再往下判断。Axure里同一个事件下多个用例，就是这种“顺序匹配”的逻辑。

这个理解极其重要，因为新手常犯的错误是以为一个事件只能配置一个动作。其实一个Click事件下面，可以挂好几个用例，每个用例都有自己独立的条件。这样“判断登录成功与否”“分支处理不同状态”才能实现。

3.2 动手配置第一个交互：点击按钮跳转页面

我们从一个最基础的交互开始：点按钮，跳转到另一个页面。

1. 在页面A放一个按钮，选中它。
2. 打开右侧交互面板，点击“新建交互”。
3. 事件选择“单击（Click）”。
4. 点击“打开链接（Open Link）”。
5. 选择目标页面，比如02_首页。
6. 保存后按F5预览，点击按钮验证跳转。

这里面有一个容易被忽略的设置，是打开链接的“打开方式”。Axure默认是“当前窗口”，会直接替换当前页；如果想把原型当成演示文稿一样弹新页面，可以选“新窗口/新标签页”。真实评审场景我一般用“当前窗口”，体验更接近真实App。

做完这一步，你已经掌握了一个交互的最小闭环：事件+动作。接下来的难点，是怎么加条件。

3.3 条件分支：让交互“聪明”起来

还是登录场景。需求是：如果账号输入框不为空，且密码不为空，才跳转；否则弹出一个提示框。

操作步骤：

1. 选中登录按钮，在交互面板里新建“单击”事件。
2. 在“单击”事件下会生成“用例1”，点击它旁边的“启用条件（Enable Case）”链接，进入条件编辑器。
3. 条件配置里加两个条件：控件1（账号输入框）的文本 不等于 空；控件2（密码输入框）的文本 不等于 空；逻辑关系选“并且（AND）”。
4. 条件通过时执行的动作为“打开链接”。
5. 再给同一个“单击”事件新增一个用例，不设置条件，直接执行“弹窗（Alert）”提示“账号或密码不能为空”。

预览时你会发现，如果条件不满足，第一个用例不会执行，继续跑到第二个用例，弹出提示；如果条件满足，第一个用例执行后，后续用例不再执行。

这是Axure“用例”设计里最关键的分支逻辑。很多教程没讲透，导致新人以为条件写在事件层，其实条件是挂在用例层的，这一点一定要记住。

3.4 新手常见的交互配置误区

第一个误区是把交互写在错误的元件上。比如一个按钮上覆盖了一个透明矩形，用户实际点击的是透明的那个，结果你在按钮上写了Click事件，怎么点都没反应。这种情况在画复杂区域时很容易出现，排查时可以看画布右侧的元件层级关系，把遮挡的透明层移走或禁用。

第二个误区是做完交互不预览。交互必须按F5预览才能体验到，编辑模式下是没有“点击”反馈的。很多新人在编辑模式下猛点按钮，然后跑来问“为什么没反应”，其实只是没进预览。

第三个误区是删除用例而不是禁用用例。排查交互问题时，我建议先禁用掉可疑的用例，确认问题后再决定是否删除。删除后再想恢复，就得重新配置，浪费时间。

4. 动态面板：撑起九成交互的“容器”到底怎么用

4.1 先理解动态面板和普通容器的区别

动态面板（Dynamic Panel）是Axure里使用频率最高的核心元件，可以简单理解成一个“可以切换状态的透明容器”。普通矩形只能显示固定内容，而动态面板内部可以准备多套内容，运行时随时切换。

它最像生活中的电子相框：外层相框是固定的，里面的照片可以一张张切换。原型里的Tab切换、轮播图、下拉菜单、侧滑抽屉、表单校验提示，底层几乎都是动态面板在起作用。

新手最容易产生的一个误解是：动态面板就是一个用来“划分区域”的普通图层。这是错的。如果只是想给几个元件成组移动，直接用“组合（Group）”就够了，没必要上动态面板。动态面板的价值在于“状态”和“切换”，没有状态切换需求的区域不要滥用。

4.2 创建动态面板并管理状态

创建方式很简单：从元件库的“Dynamic Panel”图标拖进画布，或者选中一个已有的元件，右键选择“创建动态面板”。

创建后双击面板任意位置，就进入面板内部编辑状态。左侧会列出这个面板的所有状态（State），默认叫State1。管理状态的核心操作有三个：新增状态、重命名状态、复制状态。

• 新增：在状态列表下方点加号，一般用于准备不同的显示内容。
• 重命名：状态名要能看懂，比如“默认”“展开”“加载中”“空数据”。
• 复制：右键状态选择复制，适合做“只有微小差异”的多个状态，比如hover效果。

这里有一个新手最常见的卡点：进入动态面板内部之后，不知道怎么退出回到页面。解决方法是双击画布空白处，或者在画布外单击，也可以看页面管理器上方的层级路径，点上一级返回。

不提前把这个操作搞懂，做状态切换时会非常别扭。

4.3 用“设置面板状态”实现Tab切换

真正让动态面板发挥作用的是“设置面板状态（Set Panel State）”这个动作。

以Tab切换为例：页面顶部分别是“推荐”和“关注”两个Tab，下面是内容区。此时把内容区建一个动态面板，状态A放推荐列表，状态B放关注列表。然后：

1. 选中“推荐”Tab，新建Click事件。
2. 添加动作“设置面板状态”。
3. 目标选内容区动态面板，状态选A，切换动画可以选“淡入（Fade）”或“无”，持续时间300毫秒。
4. 同理给“关注”Tab配置同样的动作，目标状态选B。

预览后点击Tab，下面的内容就会切换。到这里，你已经掌握了动态面板最核心的用法。后面所有复杂一点的交互，比如轮播图自动切换、下拉菜单展开收起、多步骤表单，本质都是在“切换动态面板的状态”。

4.4 用动态面板做局部滚动区域

动态面板还有一个非常实用的场景：在页面里做“局部滚动”。比如页面的顶栏和底栏固定，中间的内容区域可以独立滚动。

操作要点是在动态面板的属性面板里找到“滚动条”设置，选择“垂直滚动（Vertical Scroll）”。

这里有几个坑非常典型。第一个坑：内容放进动态面板后，发现超出面板的部分看不到，以为内容丢了。其实不是丢了，是面板尺寸固定，内容溢出被裁剪。你要做的是把面板的滚动条打开，或者调大面板尺寸。第二个坑：动态面板默认有“自动调整内容大小”的选项，一旦勾选，面板会随着内容变长，导致局部滚动失效。要做局部滚动，建议保持面板尺寸固定，并关闭自动尺寸调整。第三个坑：滚动条打开后，内容很短时看不出滚动效果。调试时可以把内容做得长一点，或者把面板高度调小，让内容明显溢出。

这个局部滚动能力和下一章的固定效果配合，就是很多移动端资讯类界面“底部操作栏固定、正文区域滚动”的实现基础。

5. 母版：搞定全站公共区块的“一次编辑，全局生效”

5.1 什么时候用母版，什么时候用动态面板

做原型到了“多页面系统”阶段，你会发现每个页面顶部都要放导航栏，每个内页底部都要放站点信息。如果一个一个复制，后面改一个导航文字就要把所有页面全改一遍，非常痛苦。

母版（Master）就是用来解决这种“多处复用同一内容”的需求的。它的工作机制是：先在母版里画好一块内容，然后把它拖到任意页面上。以后只要编辑母版本身，所有引用了它的页面都会同步更新。

那母版和动态面板有什么区别？简单说，母版强调的是“在不同页面上复用同一套内容”，动态面板强调的是“在同一个区域切换不同状态”。导航栏适合用母版，页签内容切换适合用动态面板。两者不冲突，很多时候还会配合使用。

5.2 创建母版并应用：导航栏改造全站

操作步骤：

1. 在Axure界面左下角的“母版”区域，右键选择“添加母版（Add Master）”，命名为“全局导航栏”。
2. 双击母版进入编辑，画好导航栏的全部内容，包括Logo、菜单项、右侧按钮。
3. 回到任意页面，从母版面板把“全局导航栏”拖到页面顶部。
4. 逐个打开其他页面，同样拖入母版，或者复制已经放好的母版实例。

完成后，如果产品改了一个菜单名称，只需要双击修改母版，所有页面的导航栏就会全部更新。这个“一次编辑，全局生效”的特性，在需求频繁变动的项目里非常宝贵。

如果你只有某一个页面不想用这个导航栏，可以在页面上右键点击母版实例，选择“从母版脱离（Detach from Master）”，把它转成普通元件再改。这样不会影响其他页面的母版引用。

5.3 母版里做交互的边界问题

母版里的交互有一个容易踩的深坑。你在母版里给导航菜单项添加了Click事件，想让它跳转到别的页面，这个没问题，因为“打开链接”是全局动作。但如果交互是要操作“页面上的动态面板”，比如点击导航栏里的刷新按钮，要刷新当前页面的内容区，你会发现默认情况下，在母版编辑环境里根本选不到那个动态面板，因为动态面板是页面级对象，不是母版级对象。

这个问题有几种解法。最简单的是，不用母版做这种操作，把刷新按钮放到页面里，或者用动态面板做导航栏。更进阶的解法是给母版添加自定义事件，母版内部用“触发事件”发出信号，页面接收后执行对应动作。

Day2阶段我不建议死磕自定义事件，但你要理解母版的“边界”：母版负责公共内容的展示和通用跳转，涉及页面内部独有的联动，尽量在页面层级完成。理解这个边界，能少踩很多坑。

6. 实战：资讯详情页的固定背景滚动与底部悬浮栏

6.1 需求拆解：先决定哪些层固定，哪些层滚动

前面讲的动态面板、固定功能、滚动设置，都是零件。这一节把它们组装起来，做一个最常见的场景：资讯详情页。界面要求是，背景保持不变，正文可以在内容区滚动，底部有一个操作栏始终悬浮在屏幕最下方，不随内容滚动。

放到Axure里，就是三个层次：背景层（不滚动）、内容层（局部滚动）、悬浮层（固定在浏览器窗口）。想清楚这个层次关系，操作就顺理成章了。

6.2 第一步：把正文放进可滚动的动态面板

新建一个页面“03_资讯详情页”，先拖一个大矩形模拟背景图片，或者直接在页面样式里设置背景色。然后在中间区域放一个动态面板，命名为panel_content，宽高设置为内容可视区大小，比如1200×600。

双击进入动态面板，把一整篇正文内容放进去，文本长度要明显超出面板高度，否则看不出滚动效果。文字放好后，回到页面层级，选中动态面板，在属性面板里设置滚动条为“垂直滚动”。预览时鼠标滚轮放在文字区域滚动，正文区域会独立滚动，而背景保持不变。

这一步的技巧是，动态面板的宽度和高度要提前想好。如果做响应式原型，可以把宽度设置成和页面内容区一致，高度用浏览器可视高度。面板高度过高会挤占页面其他元素的空间，需要自己权衡。

6.3 第二步：用“固定到浏览器”让底部操作栏悬浮

在页面底部放一个矩形，作为“收藏/分享”操作栏。如果不做任何设置，页面滚动时它会跟着内容一起滚走。要让它始终悬浮在浏览器窗口底部，做法如下：

1. 选中底部操作栏。
2. 在右侧属性面板里找到“固定到浏览器（Pin to Browser）”。
3. 点击编辑，勾选“固定位置（Fixed position）”。
4. 水平方向选择“居中”，垂直方向选择“底部”，下方边距设为0或10像素。
5. 确定后按F5预览。

这时你会发现，无论正文滚动到哪个位置，操作栏始终贴在屏幕最底部。这就是移动端资讯页常见的“底部悬浮操作栏”效果。

需要注意，这里的“固定到浏览器”是相对于整个浏览器窗口，而不是相对于某个动态面板。如果你需要在滚动区域内固定某个元素，那就得把该元素也放进该动态面板，再用动态面板的定位功能处理。两者容易混淆，我建议在Day2阶段先把“固定到浏览器”掌握住，它使用频率最高。

6.4 从演示到交付：评审前必须做的检查

原型做完，不是画完就结束了。我在交付评审前一定会做几件事。

第一，按F5完整预览一遍所有页面，重点走查每个可交互元件，确认跳转和状态切换都正常。第二，把原型生成HTML文件或通过在线分享链接给团队，而不是截图发静态图。第三，在链接或文件里标注清楚哪些是示意、哪些是已确认的需求，避免评审时混淆。

生成HTML的方式是：点击右上角“发布（Publish）”菜单，选择“生成HTML文件（Generate HTML Files）”，生成后把整个文件夹发给同事，打开里面的index.html就能看。这种方式亲测比在线云稳定，不受账号和网络限制。

最后再分享一个经验：原型不是画得越精细越好。Day2阶段你最该追求的是把交互逻辑跑通，让每个按钮都有响应，让每个状态都有交代。视觉美化可以往后放，逻辑完整性决定了这个原型能不能在评审会上真正解决问题。我每次带人踩完这一整套流程，都会说同样一句话：把Day2的东西练扎实，后面无论是做复杂后台还是高保真Demo，都只是在这个地基上添砖加瓦。