企业官网建设流程全解析

简介：这份《Axure RP 9 使用详解》文档面向产品经理、交互设计师与软件开发人员，针对原型只会画图、备注堆砌、难以向客户演示的痛点，系统梳理了 Axure RP 9 的完整使用方法。资源包内仅含 1 个 docx 文件，约 2.54MB，内容按页面简介、工具简介、设计过程及方法、演示文件生成四大模块展开，涵盖工具栏与部件库、原件样式与交互属性、下拉列表与多选框、文本框、内链框架、热区、动态面板、水平与垂直菜单、函数运算、图形外显批注、取色工具等具体知识点，并说明如何生成 HTML 演示文件供团队与客户查看反馈。目前已有 6569 人学习下载，适合希望从基础操作进阶到复杂交互原型设计、提升项目投标与团队协作效率的读者参考。

1. 从“画图工具”到“可演示原型”：Axure RP 9 到底能解决什么

很多人第一次打开 Axure RP 9，把它当成 Visio 的替代品，拖几个矩形、写几行备注，导出 HTML 发给客户，结果对方点两下发现没有任何反馈，只能尴尬地关掉页面。问题不在工具，而在于没有用上它的交互体系。Axure RP 9 的核心价值是让静态线框图变成可点击、可跳转、可带条件判断的高保真原型，投标演示时能直接模拟真实软件的操作路径。这份《Axure RP 9 使用详解》文档覆盖了从工具栏、元件样式到动态面板、内联框架、函数、批注、取色、演示文件生成的完整链路，适合产品经理、交互设计师和需要独立完成投标 Demo 的开发者。它不教你“怎么画一个按钮”，而是教你“怎么让按钮点下去之后，右侧面板跟着切换内容”。

2. 工具栏与元件体系：先把命名和样式规范立住

2.1 工具栏分区与高频操作入口

Axure RP 9 的工具栏按功能分成几个区域：左侧是基础绘图工具（矩形、圆形、线段、文本、图片），中间是元件库入口，右侧是样式、交互、说明面板的切换按钮。很多人忽略的是顶部菜单栏下方的“视图”菜单，里面可以打开“网格”“参考线”“标尺”，这三个在还原真实界面间距时比手动对齐靠谱得多。

我一般会先做一件事：在“项目”菜单里打开“全局设置”，把默认字体改成项目实际使用的字体，比如微软雅黑或 PingFang SC。这一步不做，后面每个元件都要手动改字体，工作量翻倍。工具栏里的“钢笔工具”和“裁剪工具”用得不多，但做不规则热区或自定义形状时是唯一选择。

提示：工具栏上的“分布”和“对齐”按钮只有在选中两个以上元件时才激活，单选用不了，这是新手常问的问题。

2.2 元件样式、图标与交互属性的统一管理

元件样式面板里，最值得花时间的是“样式管理器”。你可以把常用的按钮样式、输入框样式、标题样式预设好，后面直接套用。图标方面，Axure RP 9 内置了一套基础图标库，但更常见的做法是从外部导入 SVG 或 PNG，然后在“样式”面板里设置“填充”和“边框”来统一色调。

交互属性是元件的灵魂。选中一个按钮，在“交互”面板里可以添加“单击时”“鼠标悬停时”“鼠标按下时”等触发条件。每个触发条件下面可以挂多个动作：打开链接、设置面板状态、显示/隐藏元件、移动、旋转、设置文本等。这里有一个容易翻车的地方：多个动作的执行顺序是从上到下依次执行，如果你先“隐藏”再“显示”同一个元件，最终结果是显示，但中间会闪一下。正确做法是用“切换”动作，或者把显示和隐藏拆到不同触发条件里。

// 这不是 Axure 里的代码，而是用伪代码说明交互动作的执行逻辑 // 假设按钮 A 的单击事件绑定了三个动作 onClick(ButtonA) { action1: hide(PanelB); // 第一步：隐藏面板 B action2: show(PanelC); // 第二步：显示面板 C action3: setText(LabelD, "已切换"); // 第三步：修改标签文字 } // 执行顺序严格按 action1 → action2 → action3 // 如果 action1 和 action2 操作同一个元件，后面的会覆盖前面的视觉效果

上面这段伪代码说明的是 Axure 交互面板里动作列表的执行顺序。你在面板里拖动动作可以调整先后，但很多人不知道可以拖，以为只能删除重建。参数方面，每个动作都有“动画”“持续时间”“延迟”三个可调项。动画选“逐渐”还是“瞬间”直接影响演示流畅度，持续时间一般设 200ms 到 500ms，超过 800ms 会让人觉得卡顿。

2.3 元件命名规范：后期维护的后悔药

命名这件事，刚开始做原型时觉得无所谓，等到页面里有三十个矩形、十五个动态面板、八个内联框架时，你会在交互面板的下拉列表里找不到目标元件。我自己的习惯是：页面级元件用“页面名_功能_序号”，比如“首页_导航栏_01”；动态面板用“DP_功能名”，比如“DP_用户信息切换”；内联框架用“IF_嵌入页面名”。

命名还有一个隐藏作用：生成 HTML 演示文件时，元件名称会变成 DOM 元素的 id 或 class 的一部分。如果你后期需要在前端代码里定位某个原型元素做二次开发，规范的命名能省掉大量排查时间。在“项目”菜单的“元件名称管理器”里可以批量查看和修改名称，建议每完成一个页面就过一遍。

3. 交互控件实战：下拉列表、文本框、多选框与悬浮说明

3.1 下拉列表控件的两种实现路径

Axure RP 9 里做下拉列表有两种方式。第一种是用“下拉列表”元件，双击进入编辑状态，逐行输入选项。这种方式简单，但样式受限，选项的字体、行高、背景色只能整体设置，不能单独控制某一项。第二种是用“动态面板 + 矩形”手动拼一个下拉列表，每个选项是一个独立矩形，点击后设置面板状态收起，同时把选中项的文字赋值给显示框。

第一种方式适合快速原型，第二种适合需要精细控制样式或选项带图标的场景。我一般会先用第一种跑通逻辑，确认交互流程没问题后，再换成第二种做视觉打磨。下拉列表的“选中项”可以通过“设置文本”动作读取，但要注意：读取的是显示文字，不是选项的 value。如果你需要区分显示值和实际值，得用“选中项索引”来间接判断。

// 伪代码：下拉列表选中项变化的处理逻辑 onSelectionChange(DropdownList) { selectedIndex = getSelectedIndex(DropdownList); // 获取选中项索引，从 0 开始 if (selectedIndex == 0) { setText(DisplayLabel, "请选择城市"); } else if (selectedIndex == 1) { setText(DisplayLabel, "北京"); setPanelState(PanelCity, "北京状态"); // 切换到北京对应的面板状态 } else if (selectedIndex == 2) { setText(DisplayLabel, "上海"); setPanelState(PanelCity, "上海状态"); } } // 参数说明：selectedIndex 从 0 开始，第一项通常是占位提示文字 // setPanelState 的第二个参数是动态面板里预先定义好的状态名称

这段逻辑的关键在于：下拉列表的索引从 0 开始，所以如果你第一项写的是“请选择”，那它的索引就是 0，实际城市从索引 1 开始。很多人在判断时写selectedIndex == 1对应第一个城市，结果发现选“请选择”时也触发了，就是因为索引没对齐。

3.2 文本框的输入类型与验证规则

文本框元件在“属性”面板里可以设置“输入类型”：文本、密码、数字、邮箱、电话、网址等。设置成密码后，输入内容会显示为圆点；设置成数字后，移动端演示时会弹出数字键盘。验证规则在“属性”面板的“验证”区域设置，可以限定必填、最小长度、最大长度、正则表达式。

一个常见的坑是：Axure 的文本框验证只在“失去焦点”时触发，不是实时校验。如果你需要实时提示，得用“文本改变时”事件配合条件判断。比如输入框要求 6 位以上密码，可以在“文本改变时”判断length < 6，然后显示一个提示标签。

// 伪代码：文本框实时验证密码长度 onTextChange(PasswordInput) { inputLength = getTextLength(PasswordInput); // 获取当前输入字符数 if (inputLength < 6) { show(ErrorLabel); // 显示错误提示 setText(ErrorLabel, "密码至少 6 位"); setColor(ErrorLabel, "#FF0000"); } else { hide(ErrorLabel); // 隐藏错误提示 } } // 参数说明：getTextLength 返回的是字符数，中文和英文都算 1 个字符 // setColor 的第二个参数是十六进制颜色值

这段逻辑里，onTextChange是 Axure 里“文本改变时”事件的对应写法。注意：这个事件在每次按键后都会触发，如果页面里有很多元件同时做实时计算，预览时可能会卡。建议只在关键输入框上使用。

3.3 多选框与悬浮说明的配合

多选框元件在 Axure 里叫“复选框”，每个复选框有“选中”和“未选中”两种状态。你可以给复选框添加“选中时”和“取消选中时”的交互，比如选中某个选项后，在右侧汇总区域显示已选内容。多个复选框之间没有自动互斥关系，如果需要“最多选三项”这种逻辑，得用全局变量计数。

悬浮说明用“工具提示”动作实现。选中一个元件，在“交互”面板添加“鼠标悬停时”触发“显示”动作，目标是一个预先画好的说明矩形，并设置“置于顶层”。鼠标移出时再隐藏。这里有一个细节：说明矩形的位置最好用“相对位置”而不是绝对坐标，否则页面滚动或元件移动后，提示会飘到别的地方。

注意：工具提示的显示和隐藏如果都用“逐渐”动画，快速移动鼠标时会出现闪烁。把显示设为“瞬间”，隐藏设为“逐渐”，体验会好很多。

4. 动态面板与内联框架：复杂交互的底层逻辑

4.1 动态面板的多状态切换与双击编辑

动态面板是 Axure RP 9 里最核心也最容易让人迷糊的元件。它的本质是一个容器，里面可以放多个“状态”，每个状态是一组独立的元件。双击动态面板进入编辑模式，在顶部可以看到状态标签，点击“+”号添加新状态。默认状态叫“State1”，你可以重命名成有意义的名字，比如“收起”“展开”“加载中”。

给动态面板切换状态有两种方式：一是通过“设置面板状态”动作，指定目标状态名称；二是通过“设置面板状态”动作配合“下一个”“上一个”实现循环切换。前者用于精确控制，后者用于轮播图这类场景。

// 伪代码：点击按钮切换动态面板状态 onClick(ToggleButton) { currentState = getPanelState(DP_Content); // 获取当前状态名称 if (currentState == "收起") { setPanelState(DP_Content, "展开", "向下滑动", 300); // 切换到展开，动画 300ms setText(ToggleButton, "收起"); } else { setPanelState(DP_Content, "收起", "向上滑动", 300); setText(ToggleButton, "展开"); } } // 参数说明：setPanelState 的第三个参数是动画类型，第四个是持续时间（毫秒） // 动画类型可选：逐渐、向下滑动、向上滑动、向左滑动、向右滑动

这段逻辑里，getPanelState返回的是当前状态的名称字符串。注意：动态面板的状态名称是区分大小写的，如果你在面板里命名成“展开”，代码里写“展开”没问题，写“展开 ”（带空格）就会匹配失败。这个坑我在一个项目里排查了半小时，最后发现是复制粘贴时带了个尾随空格。

4.2 内联框架的页面嵌入与交互隔离

内联框架的作用是在当前页面里嵌入另一个 Axure 页面。选中内联框架，在“属性”面板的“目标”里选择要嵌入的页面。嵌入后，内联框架内部的交互是独立的，外部页面的交互不会直接影响内部，反之亦然。这个特性适合做“主界面 + 内容区”的布局：主界面放导航菜单，内容区用内联框架，点击不同菜单项时，改变内联框架的目标页面。

内联框架的交互有一个限制：你不能直接在内联框架上添加“单击时”动作来操作框架内部的元件。框架内部的元件只能在被嵌入的那个页面里定义交互。如果你需要内外联动，得用全局变量传值。比如内部页面点击某个按钮时，设置全局变量selectedItem，外部页面用“页面载入时”读取这个变量，再执行相应动作。

// 伪代码：内联框架内外通过全局变量通信 // 内部页面：按钮点击时设置全局变量 onClick(InnerButton) { setGlobalVariable("selectedItem", "详情页A"); } // 外部页面：页面载入时读取全局变量并切换内联框架目标 onPageLoad(OuterPage) { item = getGlobalVariable("selectedItem"); if (item == "详情页A") { setInlineFrameTarget(IF_Content, "详情页A"); } else if (item == "详情页B") { setInlineFrameTarget(IF_Content, "详情页B"); } } // 参数说明：setGlobalVariable 和 getGlobalVariable 是 Axure 内置函数 // 全局变量在“项目”菜单的“全局变量”里预先定义

这个模式在投标演示里非常实用：客户点击左侧菜单，右侧内容区无刷新切换，看起来就像真实的后台管理系统。但要注意，内联框架嵌入的页面如果本身有动态面板，切换时可能会有短暂白屏，把内联框架的背景色设成和内容区一致可以缓解。

4.3 右键菜单与热区的配合

Axure RP 9 没有直接的“右键菜单”元件，但可以用“热区 + 动态面板”模拟。在目标区域上覆盖一个热区，热区添加“右键单击时”触发“显示”动作，目标是一个预先画好的菜单动态面板。菜单面板默认隐藏，显示时用“置于顶层”确保不被遮挡。点击菜单项后，隐藏菜单面板并执行对应动作。

热区的另一个用途是定义不规则点击区域。比如一张地图图片，只有某个省份需要点击跳转，你可以在该省份位置画一个热区，热区本身透明，但能响应点击。热区的“形状”可以选矩形、圆形或多边形，多边形热区适合边界不规则的区域。

提示：右键菜单显示后，如果用户点击页面其他位置，菜单应该自动隐藏。实现方式是在页面空白处放一个全屏热区，添加“单击时”隐藏菜单面板，并把这个热区置于底层。

5. 函数、批注与演示文件生成：从能用到能交付

5.1 函数在动态计算与条件判断中的用法

Axure RP 9 的函数分几类：数学函数（加、减、乘、除、取整、绝对值）、字符串函数（截取、查找、替换、长度）、日期函数（当前日期、格式化）、布尔函数（与、或、非）。函数通常用在“设置文本”动作的“值”输入框里，或者条件判断的表达式里。

一个典型场景：购物车原型里，商品单价乘以数量，自动计算总价。你可以在总价标签的“设置文本”动作里写[[单价元件.text * 数量元件.text]]。注意：Axure 里取元件文本用.text，取元件值用.value，两者在文本框上表现不同。文本框的.text返回显示文字，.value返回实际输入值，密码框必须用.value才能拿到真实内容。

// 伪代码：购物车总价计算 onTextChange(QuantityInput) { price = parseFloat(getText(PriceLabel)); // 单价，转成浮点数 quantity = parseInt(getText(QuantityInput)); // 数量，转成整数 if (isNaN(price) || isNaN(quantity)) { setText(TotalLabel, "0.00"); // 输入非法时显示 0.00 } else { total = price * quantity; setText(TotalLabel, total.toFixed(2)); // 保留两位小数 } } // 参数说明：parseFloat 和 parseInt 是 Axure 内置函数 // toFixed(2) 把数字格式化为两位小数的字符串

这段逻辑里，isNaN判断是必要的，因为用户可能输入非数字字符。如果不判断，计算结果会变成NaN，显示在标签上很难看。toFixed(2)保证总价始终显示两位小数，符合金额展示习惯。

5.2 图形外显批注与取色工具

批注在 Axure 里有两种：一种是元件自带的“说明”面板，生成 HTML 后鼠标悬停可以看到；另一种是手动插入的批注图形，通常是一个带颜色的矩形或气泡，里面写文字。手动批注的好处是可以在演示时直接看到，不需要悬停。做法是插入一个矩形，设置背景色为浅黄，边框为橙色，输入备注内容，然后右键设为“隐藏”。在需要展示批注的页面或按钮上，添加“单击时”显示批注图形的动作。

取色工具在工具栏的“填充”颜色选择器里，点击“吸管”图标后，可以吸取屏幕上任意位置的颜色。这个功能在还原设计稿时特别有用：把设计稿截图导入 Axure，用取色工具吸取颜色，直接应用到元件上，避免手动输入色值带来的偏差。

注意：取色工具吸取的是屏幕显示颜色，如果设计稿有透明度或叠加效果，吸取到的颜色可能和实际色值有差异。重要颜色建议直接输入十六进制值。

5.3 生成 HTML 演示文件的参数与发布检查

生成演示文件在“发布”菜单里，选择“生成 HTML 文件”。弹出的对话框里有几个关键选项：“输出路径”建议选一个空文件夹，避免覆盖旧文件；“页面”选项卡里可以勾选需要发布的页面，不勾的页面不会出现在演示里；“配置”选项卡里可以设置是否包含“页面列表”“站点地图”“搜索框”。

生成后的文件夹里，index.html是入口文件，双击就能在浏览器里打开。如果原型里有内联框架嵌入本地页面，确保所有被嵌入的页面都勾选了发布，否则框架里会显示空白。另外，如果原型里用了自定义字体，生成时要把字体文件一起复制到输出文件夹，并在 CSS 里正确引用，否则演示时字体会回退到系统默认字体。

# 生成后的文件夹结构示例 project_demo/ ├── index.html # 入口页面 ├── start.html # 启动页（可选） ├── files/ # 页面文件 │ ├── page_1.html │ ├── page_2.html │ └── ... ├── resources/ # 资源文件 │ ├── css/ │ ├── js/ │ └── images/ └── data/ # 数据文件 └── document.js # 全局变量和交互数据

这个结构里，data/document.js保存了全局变量的初始值和页面间的交互数据。如果你需要修改全局变量的默认值，可以直接编辑这个文件，但更推荐在 Axure 源文件里改，重新生成。直接改生成文件的话，下次重新生成会被覆盖。

6. 避坑与排查：五个血泪经验

6.1 动态面板状态切换后元件位置偏移

现象：动态面板从“收起”切换到“展开”后，里面的元件位置和设计时不一致，有的偏左，有的偏上。原因：动态面板的每个状态是独立画布，如果你在“收起”状态里调整了面板尺寸，切换到“展开”状态时，面板尺寸变化会导致内部元件相对位置偏移。解决：在动态面板的“属性”面板里，把“适应内容”取消勾选，手动固定面板宽高；或者在每个状态里用“绝对定位”重新排列元件。

6.2 内联框架嵌入页面后交互失效

现象：内联框架里嵌入的页面，按钮点击没有反应，或者点击后跳转到了框架外部。原因：内联框架的目标页面没有正确发布，或者框架的“目标”设置成了“新窗口/新标签”。解决：检查“发布”时是否勾选了被嵌入的页面；在内联框架的“属性”面板里，把“目标”改成“内联框架”，而不是“弹出窗口”或“新窗口”。

6.3 全局变量在页面跳转后丢失

现象：在页面 A 设置了全局变量，跳转到页面 B 后读取不到，值变成了初始值。原因：Axure 的全局变量在页面刷新或跳转时不会自动保留，除非你用“设置全局变量”动作显式赋值，并且目标页面在载入时读取。解决：在页面 B 的“页面载入时”事件里，用“设置文本”或“设置面板状态”动作读取全局变量，而不是在页面 A 里直接操作页面 B 的元件。

6.4 生成 HTML 后字体和图标显示异常

现象：本地预览正常，生成 HTML 后字体变成宋体，图标变成方框。原因：自定义字体没有随文件一起发布，或者图标用的是系统字体里的符号，目标电脑没有安装。解决：在“发布”设置里勾选“包含字体文件”；图标尽量用 SVG 或 PNG 图片，不要用字体图标。

6.5 交互动作在预览时执行顺序混乱

现象：一个按钮绑定了多个动作，预览时发现有的先执行有的后执行，和预期不符。原因：Axure 的动作执行顺序是从上到下，但如果你用了“等待”动作，后续动作会延迟执行。解决：在交互面板里拖动动作调整顺序；如果不需要延迟，删掉“等待”动作；如果需要同步执行，把多个动作合并到一个“设置面板状态”里，用多状态切换代替多个独立动作。

7. 进阶技巧：用母版和自适应视图提升复用率

母版是 Axure 里被低估的功能。你可以把导航栏、页脚、版权信息这些每个页面都有的部分做成母版，修改母版后所有引用它的页面自动更新。创建母版的方法：选中一组元件，右键“转换为母版”，命名后确定。在“母版”面板里可以拖拽母版到任意页面。母版的交互和普通元件一样定义，但注意：母版里的元件名称在多个页面里是共享的，如果你在不同页面给同一个母版元件设置了不同的交互，可能会互相覆盖。常见做法是给母版里的关键元件加上页面前缀，比如“首页_导航_按钮”。

自适应视图用于做响应式原型。在“项目”菜单里打开“自适应视图”，可以添加不同宽度的视图（比如 320px、768px、1200px）。在每个视图里单独调整元件位置和大小，Axure 会自动生成媒体查询。这个功能在投标演示里很加分，客户用手机打开演示链接时，布局会自动适配。但要注意：自适应视图的断点设置不要太多，三个足够，太多会导致维护成本飙升。

// 伪代码：母版里根据页面名称判断当前页面 onPageLoad(MasterNav) { currentPage = getCurrentPageName(); // 获取当前页面名称 if (currentPage == "首页") { setSelectedState(NavHome, true); // 首页菜单项高亮 } else if (currentPage == "产品") { setSelectedState(NavProduct, true); } // 其他页面同理 } // 参数说明：getCurrentPageName 返回当前页面在 Axure 里的名称 // setSelectedState 是自定义动作，实际用“设置选中”动作实现

这段逻辑让母版导航栏能自动高亮当前页面，不需要在每个页面单独设置。实现方式是在母版的“页面载入时”事件里判断页面名称，然后设置对应菜单项的选中状态。这个技巧我每次做多页面原型都会用，省掉大量重复劳动。

从那以后我每次生成演示文件前，都强制走一遍“三查”：查内联框架目标页面是否发布、查全局变量是否在目标页面载入时读取、查自定义字体是否随文件导出。这三步走完，基本不会出现演示时翻车的情况。希望帮到你。

本文还有配套的精品资源，点击获取