企业官网建设流程全解析

简介：面向产品经理、交互设计师及软件开发人员的 Axure RP 9 系统学习文档，兼顾入门与进阶，重点解决只会画静态页面、备注堆砌，导致原型难以向客户演示的问题。压缩包内仅含1个docx文档，大小约2.54MB，围绕页面与工具栏、元件样式与部件库、下拉列表、文本框、多选框、内联框架、水平与垂直菜单、热区、动态面板、交互函数、图形外显批注、取色工具及HTML演示文件生成等模块展开，目录结构较完整，便于按知识点查阅。已有6582人学习，适合希望从基础操作进阶到高保真交互原型的读者。对照文档可系统掌握控件命名、状态切换、页面跳转、右键效果与演示文件输出等做法，提升原型专业度、客户演示效果和团队协作沟通效率，也能为项目投标阶段的原型展示提供较实用的参考。

1. 从投标演示翻车说起：Axure RP 9 手册到底补哪块短板

投标演示现场最尴尬的不是原型画得丑，而是你点到一个按钮，页面没反应，客户顺手翻了翻备注，发现只有密密麻麻的说明——这份 Axure RP 9 使用详解文档，补的正是从“能画”到“能讲”的断层。原型不是元件越多越专业，交互链路断一处，整套方案就会被当成静态图；尤其项目投标、客户评审、开发验收三个场景，演示文件必须自己会说话。这份文档按页面简介、工具简介、设计过程、演示文件生成组织，重点落在下拉列表、文本框、多选列表、内联框架、动态面板、热区、函数、批注和取色这些真正影响演示的环节。适合产品经理、交互设计、售前和实施人员，也适合刚接手 Axure RP 9、不想再靠备注堆说明的开发者。

2. 页面、工具栏与控件命名：先把原型工程化的底子打牢

Axure RP 9 的工具栏和元件库看起来只是“拖控件”，实际决定后面交互能不能维护。页面名、元件名、动态面板状态名一旦随手起，三五个页面还能靠记忆找，到了几十个页面、十几个弹层、多个内联框架时，排查交互就像开盲盒。我一般把命名当成原型工程化的第一步：页面负责导航结构，元件负责交互定位，状态负责演示分支，三者不要混着叫。常见做法是用“序号_模块_用途”的页面命名，用“类型_模块_动作”的元件命名，别等到生成演示文件后再回头改。

2.1 页面结构与命名规则：先定层级再拖控件

页面结构不是画布上的视觉分组，而是导出 HTML 后的导航骨架。Axure RP 9 的页面面板支持文件夹分组，建议先建“00_入口”“10_主流程”“20_弹层与状态”“90_归档”四类分组，再往里面放页面。主流程页面用两位序号控制顺序，弹层和动态面板状态单独归档，避免演示时在页面列表里翻找。页面名不要用空格、斜杠、问号这类在导出后容易转义或截断的字符，中文可以用，但建议“序号 + 中文模块 + 英文短标识”，例如“01_登录_login”。元件命名同样要能看出用途：按钮用btn_，输入框用input_，下拉列表用droplist_，动态面板用panel_，内联框架用frame_，热区用hot_。这样在交互面板里选目标时，列表不会全是“矩形 1”“按钮 2”。

操作步骤可以按下面这张表走，先做结构再做视觉，返工最少。

命名规则要落到参数上：页面序号用两位数字，模块名控制在 6 到 12 个字，元件前缀不超过 8 个字符，动态面板状态名不要用“State1”“State2”，改成“默认态”“加载态”“空态”“错误态”。这不是洁癖，而是血泪经验——演示前一天改交互，最怕目标列表里出现三个同名“按钮”。我一般会在画完主界面后先花十分钟统一命名，再开始加交互，后面能省掉大量排查时间。

2.2 下拉列表与文本框：控件状态别只做默认态

下拉列表控件（Droplist）在 Axure RP 9 里不只是摆一个选项框。它要处理默认选中、选项切换、联动过滤和空值提示。常见做法是先设置选项列表，再把默认选中项设为“请选择”或空值，不要让第一个业务选项默认选中，否则演示时客户会以为系统已经替用户做了决定。下拉列表的OnSelectionChange交互可以触发动态面板状态切换，例如选择“企业用户”后显示企业信息面板，选择“个人用户”后隐藏该面板。参数上，选项文字要短，避免在下拉框里被截断；选项值最好和页面文案一致，减少演示时解释成本。

文本框（Text Field）最容易翻车的地方是把默认值当提示文字。默认值是真实内容，用户输入前需要删除；提示文字是占位提示，输入后自动消失。Axure RP 9 的文本框可以设置提示文字、输入类型、最大长度和提交交互。手机号、邮箱、金额这类字段，建议在失焦时做一次格式检查，错误提示用隐藏的动态面板或文本元件显示，不要用浏览器弹窗打断演示。下面这张参数表可以直接抄。

操作时先把控件拖入画布，设置尺寸和对齐，再在交互面板里加事件。下拉列表的联动不要一上来就写复杂条件，先做“选择 A 显示面板 A、选择 B 显示面板 B”的两态验证，确认状态切换正常后再加第三个选项。文本框的错误提示建议单独做一个panel_错误提示，默认隐藏，校验失败时显示，校验通过时隐藏。这样演示时既能走正常流程，也能现场展示异常处理，客户会更容易理解交互边界。

2.3 多选与悬浮说明：把协作信息藏在正确层

多选列表在 Axure RP 9 里通常用 List Box 实现，开启多选后可以模拟权限选择、标签选择、批量操作这些场景。多选控件的关键不是“能选多个”，而是选中结果怎么被读取和展示。常见做法是给多选列表命名listbox_权限，在旁边放一个“确认选择”按钮，点击后用交互把选中项数量或提示文字写到结果区域。Axure RP 9 对多选结果的读取不如代码灵活，演示阶段可以用“选中后显示已选数量”的简化方式，不必把所有选中项逐条拼出来。参数上，列表高度要能露出至少 4 到 5 项，避免演示时滚动条太窄；选项顺序按业务优先级排，不要按字母排。

元件悬浮说明分两种：短说明用元件自带的提示属性，鼠标移入显示一行文字；长说明用隐藏的动态面板，鼠标移入显示、移出隐藏。短说明适合字段解释，长说明适合流程解释和规则说明。我一般把长说明面板命名为panel_说明_模块名，默认隐藏，放在内容区右侧或下方，避免遮住主操作按钮。悬浮说明的显示层级要高于普通元件，但低于弹层，否则演示时说明面板会挡住确认按钮。

这一节的核心是“信息分层”：用户操作层放按钮、输入框、下拉列表；反馈层放错误提示、结果摘要；协作层放悬浮说明和批注。三层不要混在一个动态面板里，否则演示时开关批注会把主流程也藏掉。命名和分层做到位，后面加动态面板、内联框架和函数时，原型才不会变成一团乱线。

3. 动态面板、内联框架与热区：把静态线框推到可点击演示

Axure RP 9 的演示感主要来自三类元件：动态面板负责状态切换，内联框架负责内容区切换，热区负责不规则点击。它们的共同点是“看起来是一个区域，实际背后有事件和状态”。选型时先问自己：这个区域是同一页面的视图变化，还是另一个页面的内容替换？如果是同一页面的折叠、展开、选项卡、弹窗，用动态面板；如果是主内容区加载不同页面，用内联框架；如果点击区域和视觉形状不一致，用热区补点击范围。这个判断顺序能避免把简单交互做成多层嵌套。

3.1 动态面板状态设计：先画状态表再拖面板

动态面板不是“把东西叠在一起”的容器，而是一个状态机。每个状态对应一个可演示视图，交互负责在状态之间切换。常见场景包括选项卡、折叠面板、弹窗、步骤条、轮播图。我一般先画状态表，再拖动态面板：状态名、触发事件、目标状态、返回方式四列写清楚，确认没有漏状态后再动手。双击动态面板可以添加不同状态，每个状态设置不同的展示界面；状态名要带业务含义，例如“默认态”“加载态”“空态”“错误态”“成功态”。如果状态名还是 State1、State2，后面设置交互时很容易选错。

操作步骤建议按“建面板、加状态、放内容、绑事件、设动画、测返回”走。

参数上，动画时间建议 200 到 300ms，太快看不出变化，太慢演示节奏拖沓；弹窗类面板的显示层级要置顶，但关闭按钮要固定在同一位置；选项卡类面板不要把每个标签按钮放进状态内部，否则切换后按钮会跟着消失。常见做法是把标签按钮放在动态面板外部，面板只负责内容区切换。这样交互目标稳定，排查也简单。

动态面板最容易忽略的是“初始状态”。页面载入时如果不设置默认状态，预览可能停在上次编辑的状态，演示时一打开就是错误页。建议在页面载入事件里显式设置一次默认状态，尤其是弹窗和结果面板。另一个细节是状态尺寸：不同状态内容高度不一致时，动态面板高度要按最大内容留足，或者用“适应内容”相关设置，避免内容被裁切。演示前把每个状态单独点一遍，比整体走流程更容易发现裁切和错位。

3.2 内联框架交互与内部页面命名

内联框架（Inline Frame）用来在当前页面中嵌入另一个页面，适合做后台主内容区、帮助中心、多步骤表单的内容切换。它的交互关键是“先选中框架，再给它命名，再设置目标页面”。没有命名的框架，在交互面板里就是匿名目标，页面一多根本分不清。我一般把主内容区框架命名为frame_main，弹层内的框架命名为frame_dialog_模块名，侧边帮助框架命名为frame_help。目标页面必须已经存在，并且放在页面面板的明确分组里，避免生成演示文件时漏页。

内联框架的常见配置如下：

操作时先拖入内联框架，设置尺寸和位置，再在属性面板里选择目标页面。需要点击切换时，给按钮添加“打开链接”类交互，目标选择内联框架，再选具体页面。这里容易翻车的是循环嵌套：主框架里又嵌入包含主框架的页面，预览时会递归加载或白屏。常见做法是内联框架只嵌内容页，不嵌导航页；导航固定在框架外，内容区随点击切换。这样页面职责清晰，演示时也不会出现“点一下整个界面刷新”的断裂感。

内联框架里的页面同样要命名和分组。不要因为它是被嵌入的页面就随便叫“Page1”。如果框架内页面有自己的动态面板和交互，命名规则要和主页面一致。演示前从入口页开始，依次点击每个框架切换按钮，确认目标页面存在、滚动条位置合理、返回按钮能回到默认页。内联框架的排查顺序是：框架是否命名、目标页面是否存在、交互目标是否选对框架、页面是否被包含在生成范围里。按这个顺序查，比盲目改交互快得多。

3.3 水平/垂直菜单、热区与显示顺序

水平菜单和垂直菜单在 Axure RP 9 里适合做导航结构。菜单项的文字、间距、选中态要提前定好，不要用一堆矩形手拼。菜单的选中态可以用动态面板或选中样式实现，常见做法是给每个菜单项加点击交互，切换内容区页面或动态面板状态。参数上，一级菜单文字控制在 4 到 8 个字，二级菜单用缩进和字号区分；菜单项高度保持一致，演示时鼠标移动不会跳。垂直菜单适合后台左侧导航，水平菜单适合顶部导航，二者不要在同一区域混用。

热区（Hot Spot）用来定义透明点击区域，特别适合图标按钮、图片局部点击、不规则卡片。热区本身不可见，所以要靠旁边的视觉元件提示用户可点击。常见做法是把热区放在图标上层，填充透明，尺寸略大于图标，确保点击命中。热区的层级很关键：如果热区在底层，被透明矩形或动态面板盖住，点击就会穿透或失效。设置显示顺序时，用“置于顶层”把热区放到可点击层，用“置于底层”把背景图放到底层。弹层出现时，热区要跟着弹层一起显示或隐藏，避免弹层关闭后热区还在拦截点击。

显示/隐藏交互要成对出现：打开弹层的按钮负责显示，弹层内的关闭按钮负责隐藏；不要只做显示不做隐藏。显示顺序也要在交互里检查，弹层显示时选择“置于顶层”，关闭时不需要改层级，但下次显示仍要置顶。演示前把每个菜单项点一遍，再把每个热区点一遍，最后开关一次弹层，确认没有透明层挡住主流程。这个环节看起来琐碎，实际是演示翻车的高发区。

4. 函数、批注与演示文件：让原型能自证逻辑并交付

Axure RP 9 的函数、批注和演示文件生成，决定原型能不能从“设计稿”变成“可交付物”。函数负责算必要逻辑，比如分页数、金额合计、日期差；批注负责把设计意图留在原型里，演示时可开关；演示文件负责把交互打包成别人能直接打开的东西。三者不要贪多：函数只算演示必须展示的逻辑，批注只写开发和评审需要的信息，演示文件只包含要给别人看的页面。把边界划清，原型才不会变成“看起来什么都有、点起来什么都断”的半成品。

4.1 函数表达式与变量：只算必要逻辑

Axure RP 9 支持数学运算、字符串处理、日期函数和条件判断。常见用法是分页计算、金额格式化、按钮可用状态判断。变量分全局变量和局部变量：全局变量在项目设置里定义，跨页面可用；局部变量在交互里绑定元件文字或变量值，只在当前交互生效。我一般只把跨页面要用的值放全局变量，比如当前用户角色、当前选中模块；临时计算用局部变量，避免全局变量越堆越多。函数表达式写在[[ ]]里，运算前先确认参与计算的元件文字是数字，空值或文字会导致结果为 0 或异常。

下面这个表达式用于计算分页数，可以直接放到“设置文本”交互里。

[[Math.ceil(LVAR1 / LVAR2)]]

逻辑说明：LVAR1绑定记录总数，LVAR2绑定每页条数，Math.ceil向上取整，得到总页数。参数说明：两个局部变量必须在交互里先绑定到元件文字或全局变量；LVAR2不能为 0，演示前要用条件判断拦住空值和零值；结果可以写到“共 X 页”的文本元件里。这个表达式只适合演示分页逻辑，不要拿它替代真实后端计算。条件判断建议放在设置文本之前：如果每页条数为空或为 0，先显示错误提示，再执行计算。

函数排错看三个地方：变量是否绑对、元件文字是否为空、表达式括号是否闭合。Axure RP 9 的表达式不会像代码那样给出详细堆栈，所以要靠分段验证：先输出LVAR1，再输出LVAR2，最后输出计算结果。演示用函数不要写太长，超过三层的嵌套就拆成多个交互步骤，否则后面改一个参数会牵动整条链路。

4.2 图形外显批注与右键效果：演示时能开关的说明层

图形外显批注适合把设计说明留在原型里，但不干扰主流程。做法是插入批注图形，在里面输入备注内容，给它命名，例如anno_登录规则，然后右键设为隐藏。演示需要说明时，用“显示批注”按钮把批注层显示出来并置于顶层；演示主流程时再隐藏。批注层默认隐藏这一点很关键，否则客户一打开原型就看到满屏说明，视觉上会显得很乱。批注命名要带模块名，方便在交互面板里批量控制。

右键效果用于模拟上下文菜单，适合表格行操作、卡片操作、画布操作。实现方式通常是给目标区域加右键菜单事件，显示一个隐藏的动态面板，面板里放“查看详情”“复制”“删除”等菜单项。不同小版本的右键事件叫法可能略有差异，在交互面板里找与右键相关的鼠标事件即可。菜单面板要设置点击外部关闭或再次右键关闭，避免演示时菜单一直挂在屏幕上。

批注层和右键菜单都不要盖住主操作按钮。批注开关建议放在演示页角落，右键菜单要限制在可视区域内，靠近屏幕边缘时调整弹出方向。演示前把批注开关连续点两次，确认显示和隐藏都正常；右键菜单点开后点一次菜单项，再右键一次，确认不会叠加多个菜单面板。这个环节的细节决定了原型是“能看”还是“能讲”。

4.3 取色工具与演示文件生成

取色工具用于保持设计风格一致。常见做法是先确定主色、辅助色、背景色、文字色四个基础色，再用取色工具从品牌图或参考界面取色，记录色值到样式说明里。Axure RP 9 的颜色选择器支持输入色值，取色后不要把颜色散落在每个元件上，能建样式就建样式，至少把同类按钮和标题统一。参数上，主色用于主按钮和选中态，辅助色用于提示和标签，背景色用于页面底色，文字色区分标题、正文、弱提示。取色工具解决的是“看起来是不是一套”，不是替代设计规范。

演示文件生成是交付前的最后一步。在 Axure RP 9 里选择发布/生成 HTML 文件，设置输出目录，勾选需要包含的页面，生成后打开入口 HTML 检查导航和交互。生成范围要包含所有被交互引用的页面，尤其是内联框架目标页和弹层所在页；如果漏页，本地预览正常，生成后点击就会空白。输出目录建议每次清空再生成，避免旧文件混在新文件里。下面这张表是生成前的检查项。

生成演示文件后，不要只看首页。从入口开始，按客户会走的路径点一遍：主流程、返回、关闭弹层、切换内联框架、打开右键菜单、开关批注。再把浏览器缓存清一次，重新打开入口文件，确认不是缓存造成的假正常。演示文件是给别人看的，任何一处断链都会让整份原型显得不专业。

5. 避坑与排查：五个高频翻车点从现象到解决

Axure RP 9 的交互问题很少是“软件坏了”，多数是命名、层级、目标页面和默认状态没对齐。排查时我一般按“先看元件名，再看交互目标，再看页面包含范围，最后看浏览器缓存”的顺序走。下面五条是演示前最容易遇到的翻车点，每条按现象、原因、解决记录，照着查能省掉不少返工。

5.1 动态面板一打开就串状态

现象：点击 A 按钮，弹出的却是 B 面板的内容；或者预览一打开就停在“错误态”，怎么点都回不到默认态。原因通常是动态面板状态命名重复、交互目标选错面板、页面载入时没有设置默认状态，或者复制面板后状态名被自动改成 State1。解决：先给每个面板加模块前缀，例如panel_订单_默认态、panel_订单_空态；在交互面板里逐条核对目标面板和目标状态；在页面载入事件里显式设置默认状态；复制面板后立即重命名状态，不要留着默认名。预览时先单独点每个状态，再走完整流程。

5.2 内联框架白屏或跳错页

现象：点击导航后主内容区空白，或者跳到完全无关的页面。原因通常是内联框架没有命名、交互目标选成了当前页面、目标页面被删除或改名、框架内又嵌入了包含自身的页面。解决：先选中框架再命名，交互里明确选择目标框架；目标页面必须在页面面板中存在，并且放在生成范围内；避免框架循环嵌套；检查页面分组里是否有旧页面残留。排查时从框架属性里的默认页面开始看，再点一次导航按钮，确认目标页面和框架名一致。

5.3 文本框默认值把用户输入卡住

现象：输入框里一直有文字，用户删不掉；或者提交时把提示文字当成真实值。原因是用默认值代替了提示文字，或者输入框没有设置空值状态。解决：把默认值清空，改用提示文字；需要示例内容时，用焦点事件清空，失焦时如果为空再恢复提示；提交前加条件判断，空值显示错误提示。手机号、邮箱、金额字段要在失焦时校验，错误提示用隐藏面板显示，不要用浏览器弹窗打断演示。

5.4 热区被遮挡或点击穿透

现象：图标看得到，点上去没反应；或者点弹层背景，结果触发了底层按钮。原因通常是热区层级太低、被透明矩形盖住、弹层关闭后热区没有跟着隐藏。解决：把热区置于顶层，尺寸略大于图标；透明背景层不要盖住可点击区域；弹层显示时一起显示热区，关闭时一起隐藏；检查显示顺序，背景置底、内容居中、热区置顶。演示前把每个热区单独点一遍，再开关一次弹层，确认没有残留点击层。

5.5 生成 HTML 后交互失效或批注误显示

现象：Axure 本地预览正常，生成演示文件后点击无反应；或者一打开就显示批注层。原因通常是页面没有包含在生成范围、交互引用了未发布页面、批注层默认隐藏没设置、浏览器缓存了旧文件。解决：生成时勾选所有被引用页面；检查内联框架目标页和弹层页是否包含；批注层统一设为默认隐藏，用开关按钮控制；每次生成到新目录，打开前清缓存。生成后从入口页走一遍主流程，再走一遍返回和关闭路径，最后开关一次批注。

6. 交付前验证：用三张检查表把原型从能看推到能讲

原型交付前的验证不需要把每个交互都重写一遍，按三张检查表走一轮就够：结构表看页面和命名，交互表看状态和跳转，交付表看生成范围和默认隐藏。我一般把这三张表放在原型旁边，边点边勾，发现问题当场改，不等到演示当天再救火。

6.1 三张检查表

6.2 一个可复用的验证动作

我常用的验证动作是“三遍走查”：第一遍只走主流程，从入口点到结果页，确认每一步都有反馈；第二遍专点返回、关闭、取消、空态和错误态，确认异常路径不中断；第三遍清缓存后从生成的 HTML 入口重新打开，按客户视角再走一遍。走查时手里拿一张纸，记下每个断点对应的页面名和元件名，改完再复测同一路径。这个动作比随机点半小时有效得多。

如果你手上正好缺一份按目录整理的操作手册，这份 Axure RP 9 使用详解文档可以放在手边当检查清单，遇到动态面板、内联框架、函数和演示文件生成时按章节翻。从那以后我每次交付前都强制走一遍“清缓存—主流程—返回路径—批注开关”的验证链，少一次都不安心。希望帮到你。

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