企业官网建设流程全解析

简介：这份《Axure RP 9 使用详解》面向产品经理、交互设计师与原型初学者，针对只会画静态页面、备注堆叠、难以向客户演示的问题，系统梳理从界面工具到高保真交互的进阶用法。压缩包共1个docx文档，大小约2.54MB，按页面简介、工具简介、设计过程及方法、演示文件生成等模块组织，便于按目录查阅。内容覆盖元件样式与部件库、下拉列表和多选框、文本框、热区、水平/垂直菜单、动态面板、内联框架、右键效果、函数运算、图形批注与取色工具，并说明如何生成HTML演示文件。已有6587人学习，适合希望提升原型表现力、投标演示与团队沟通效率的读者对照练习。

1. 需求先行：为什么“能点”的原型比“能看”的截图更抗打

Axure RP 9 使用详解 这份资料真正值钱的地方，不是把工具栏认全，而是让原型在客户面前点得动。很多人做原型，页面画得挺整齐，交互却只停在“点击跳转”，备注密密麻麻，一演示就露馅：下拉列表展不开，内联框架空白，动态面板切过去回不来。项目投标也好，毕设答辩也好，评委和客户不会替你脑补交互，他们只会点。Axure RP 9 的定位不是画图工具，它更像一份能执行的交互说明书：页面、元件、状态、函数、批注和演示文件生成，每一层都在回答“点下去会发生什么”。这套方案适合正在做产品原型课设、毕设或交付方案的人，也适合需要把需求讲清楚的从业者。下面从页面骨架开始，把能照着配的步骤拆开。

2. 总体设计：页面骨架、元件命名与工具栏的职责划分

2.1 页面骨架先定，别打开软件就拖矩形

Axure RP 9 的页面树不是只给自己看的草稿，生成演示文件后，页面名会出现在左侧导航里，客户和评委一眼就能看到。页面命名一旦变成“页面1、页面2、矩形3”，后面加交互就是灾难。我一般先画一张页面清单，再打开软件建页面，顺序是入口页、主界面、子功能页、弹层页、演示辅助页。入口页负责登录或启动，主界面承载导航和内容区，子功能页按模块拆，弹层页放右键菜单、悬浮说明这类不在主流程里的界面，演示辅助页专门放批注和备用状态。

页面树控制在三级以内，超过三级就用弹层或动态面板状态替代。主界面按“顶部导航 + 左侧菜单 + 内容区 + 操作区”分区，顶部放水平菜单，左侧放垂直菜单，内容区放一个内联框架，后面第 4 章会把菜单点击和框架切换串起来。这里先把分区用参考线固定，元件按区域命名，后续加交互才不会互相踩。页面骨架稳了，演示文件左侧的导航就像目录，客户点到哪都知道自己在哪。

2.2 元件命名与工具栏分区：把“矩形3”消灭在开始阶段

工具栏不是用来背按钮的，按任务分组更顺手：选择与连接、绘制、文本、图片、热区、动态面板、内联框架。选择工具负责选中和拖拽，连接工具画流程线，绘制工具放矩形和占位块，文本工具放标题和说明，图片工具放图标和示意图，热区负责透明点击区域，动态面板负责多状态，内联框架负责嵌入页面。原件样式、图标及交互属性是三条线：外观管颜色大小位置，图标管视觉识别，交互属性管点击、悬停、状态变化。取色工具在统一主色时很实用，看到客户现有系统的颜色，吸一下就能保持一致，比手动输色值稳。

命名规则用“类型_模块_动作或状态”，复制元件后第一件事是改名，不是改样式。血泪经验是：交互全绑在“矩形3”上，改版时图层面板一折叠，根本不知道哪个矩形是提交按钮。元件样式统一用取色工具定主色、辅色、错误色，图标从元件库拖，不要每个页面单独画。交互属性先不加，等页面和命名稳定后再加，否则改一次名断一次交互。可抄作业的做法是：建一个P00_元件库页面，把常用按钮、输入框、下拉列表、菜单项做成组件，复制到各页面后只改文案和命名。

2.3 主界面布局与批注层：让演示时能关掉解释

主界面布局我通常按 1440 宽做参考：顶部导航 64 高，左侧菜单 220 宽，右侧内容区自适应，底部状态栏 32 高。顶部放水平菜单，左侧放垂直菜单，内容区放内联框架，操作区放按钮组。Axure RP 9 里用参考线和网格对齐，别靠肉眼拖。主界面命名定下来后，子页面按P02_01_订单列表这种格式排，页面树自然成目录。图形外显批注单独建一层：插入批注图形，在里面输入备注内容，给图形命名note_模块_序号，右键设为隐藏。答辩需要解释时，用交互把批注层显示出来；讲完再隐藏，内容层不被遮挡。

批注层不是备注面板，它是演示时能开关的图层。常见误用是把说明文字直接写在按钮旁边，客户一看全是字，根本不想点。正确做法是内容层保持干净，批注层放在最上面，默认隐藏，需要时按模块显示。验收标准可以定三条：页面树不超过三级；任意元件能在图层面板里靠名字找到；批注层独立且默认隐藏。做到这三条，后面加下拉列表、动态面板、内联框架才不会乱。提示：先命名再画交互，改名的成本比重新绑交互低得多。

3. 表单控件落地：下拉列表、文本框与多选框的交互配置

3.1 下拉列表与多选组合：单选靠控件，多选靠组合

下拉列表控件拖进来后，双击编辑选项，把默认选中项设好。交互挂在OnChange上，常用动作是“设置文本”或“显示面板”。比如订单状态筛选，选中“已支付”后，内容区显示已支付列表；选中“全部”后，显示全部列表。配置时注意目标元件要先命名，别在动作里选“矩形5”。下拉列表原生是单选，遇到“下拉列表多选框”这种需求，通常的做法是用复选框组加动态面板模拟：一个只读文本框显示已选结果，点击后展开动态面板，面板里放复选框组，每个复选框改变时把选中项拼到文本框里。

多选组合的关键是“收起后还能看到结果”。文本框设成只读，背景用输入框样式，点击时展开面板，面板里复选框改变时用“设置文本”把结果拼进去。拼接时注意分隔符，别直接连成一串。可抄作业的配置是：复选框命名chk_role_01到chk_role_05，每个改变时设置文本[[LVAR1.text]]到结果框，多个复选框用条件判断追加。常见误用是把多选做成五个下拉列表并排，客户点起来像填表，演示效果很差。

3.2 文本框与输入校验：默认值、提示文字和错误态

文本框要设三样东西：默认值、提示文字、输入类型。登录页的用户名框给默认值方便演示，搜索框给提示文字“请输入关键词”，密码框设成密码类型。输入校验别只靠属性面板里的验证规则，演示文件里不一定按预期拦截，通常用交互补：失去焦点时判断文本长度，小于 6 位就显示错误文本，并把焦点设回输入框。错误文本单独放一个元件，命名txt_login_error，默认隐藏，校验失败时显示，校验通过时隐藏。

条件判断里用局部变量接文本框内容，别直接写元件名。错误提示不要用弹窗，弹窗会打断演示节奏，用行内错误文本更稳。原件悬浮说明也在这里配：鼠标移入输入框时显示提示面板，移出时隐藏。提示面板放在顶层，命名dp_tip_username，默认隐藏。常见误用是悬浮说明挡住输入框，用户刚要点就被盖住。做法是把提示面板放在输入框上方或右侧，设置“鼠标移出隐藏”，不要加延迟过长。

3.3 悬浮说明、显隐顺序、热区与菜单：把点击区域做对

原件悬浮说明解决的是“这个按钮干什么”的问题。配置方式是：给目标元件加OnMouseEnter显示提示面板，OnMouseExit隐藏提示面板。提示面板里放短句，不要放长段落，答辩时客户没耐心读。设置隐藏/显示/显示顺序是三个不同动作：隐藏是看不见，显示是看得见，显示顺序是图层前后。做右键菜单时，菜单面板要置于顶层，否则被内容区盖住。热区用来定义点击区域，即使形状不规则也能触发交互，透明填充，盖在卡片或图标上，命名hot_模块_动作。

水平菜单和垂直菜单用元件组做，每个菜单项有默认态和选中态。点击菜单项时，设置当前项为选中态，其他项恢复默认态，同时切换内联框架页面。热区比菜单项稍大一点，点击手感更好，但别大到盖住相邻项。可抄作业的配置是：菜单项命名menu_order、menu_user、menu_report，点击时设置选中，热区命名hot_menu_order，点击热区切换if_main_content到对应页面。常见误用是热区比视觉按钮小，客户点边缘没反应；或者菜单选中态用颜色硬改，换个页面就丢状态。

验收时可以定三条：每个可点击控件至少有默认态和点击态；悬浮说明不遮挡输入区域；热区覆盖视觉区域且不重叠。做到这三条，演示时点击手感就稳了。提示：显隐动作尽量绑在具名元件上，别绑在组上，组一解散交互就断。

4. 动态面板与内联框架：把页面跳转、状态切换和右键菜单串起来

4.1 动态面板多状态：双击进去，给每个状态起名字

动态面板是 Axure RP 9 里最容易出效果、也最容易翻车的元件。拖入面板后双击，进入状态管理，默认是State1，先改成有意义的名字，比如st_列表、st_空态、st_加载。不同展示界面放在不同状态里，切换时用“设置面板状态”动作，选Next、Previous或指定状态。选项卡、折叠面板、轮播图都用这个思路。面板尺寸要固定，状态之间尺寸不一致会让页面跳动，客户以为点错了。

配置选项卡时，每个选项卡按钮点击后做两件事：设置面板状态，设置当前选项卡选中态。选中态可以用元件样式切换，也可以换图片。别在面板内部再加一层同名交互，否则点击会冒泡到外层，出现“点一次切两次”的玄学问题。动态面板里的内容要按状态分别命名，比如st_列表里的列表项叫list_order_01，st_空态里的提示叫txt_empty_tip，这样排查时知道自己在哪个状态。常见误用是面板尺寸设成“适应内容”，切换状态时高度忽大忽小，演示时页面抖动，客户第一反应是不专业。

4.2 内联框架与右键菜单：先命名框架，再谈跳转

内联框架用来在内容区嵌入其他页面，做后台系统原型特别合适。第一步不是设链接，是选中框架命名，比如if_main_content。命名后再设置链接，动作里选“打开链接在框架中”，目标选if_main_content，页面选子功能页。这样左侧菜单点击时，只有内容区变，顶部和左侧不动，演示起来像真系统。常见翻车是框架没命名，链接目标选成了“当前窗口”，一点菜单整个页面跳走，客户找不到返回路。

右键效果用动态面板做菜单，目标区域加透明热区，触发“右键单击”显示菜单面板，面板置于顶层，位置跟随鼠标或固定在卡片右上角。点击菜单项后隐藏面板，再执行对应动作。点击空白关闭需要一层全屏热区，放在菜单下面、内容上面，点击时隐藏菜单。注意菜单面板别挡住系统默认右键，演示时客户可能想复制文字，结果弹出自定义菜单，体验会怪。通常的做法是只在特定卡片上启用右键，不要全页面启用。

4.3 函数与图形外显批注：让计算和解释都能演示

Axure RP 9 的函数用在动态计算和控制原型行为上，表达式放在[[ ]]里，局部变量用LVAR1、LVAR2接元件值。常用场景是长度判断、包含判断、四舍五入、保留小数。函数本身不复杂，难在变量有没有值、类型对不对。调试时别盯着条件看，先设一个隐藏文本框，把[[LVAR1]]设进去，预览时看它到底输出了什么，这比猜快得多。

图形外显批注是答辩利器。插入批注图形，在里面输入备注内容，给图形命名note_模块_序号，右键设为隐藏。演示时用按钮或热区显示批注层，讲完隐藏。批注层单独放一个页面或一个顶层组，不要和内容层混在一起。常见误用是批注图形盖住按钮，客户点不到；正确做法是批注放在空白处，用引线指向目标，默认隐藏。取色工具在这里也能用：批注颜色跟主色区分，但别用大红大绿，答辩时看着像警告框。

提示：函数条件里先判断空值，再判断长度和格式，顺序反了容易在空输入时直接报错。

5. 避坑与排查：五个最容易在演示前翻车的配置点

5.1 交互与状态类问题

现象：预览时点击按钮没反应，或者点一次触发两次。原因通常不是交互没加，而是热区被上层元件遮挡，或者交互绑在了错误的状态里。动态面板有多个状态时，你在st_列表里加了点击，切到st_空态后按钮还在，但交互没跟过去。解决方式是把热区置于顶层，给热区命名，交互只绑当前状态里的具名元件；预览时逐页点，别只看设计画布。另一个常见原因是组上加了交互，组内元件又加了一次，点击冒泡导致重复执行。我一般把组交互删掉，只保留最内层可点击元件的交互。

现象：动态面板切换后页面跳动、内容错位。原因是状态尺寸不一致，或者面板开了“适应内容”。设计时一个状态高 400，另一个高 600，切换时容器跟着变，下面的按钮全跑位。解决方式是统一状态宽高，面板固定尺寸，状态内元件用绝对定位对齐；如果内容确实长短不一，把面板设成固定高度，内部内容滚动或分页。还有一种是状态里复制了元件但没改坐标，切过去看着像叠在一起。排查时在面板里逐个状态看坐标，别在预览里靠肉眼猜。

现象：内联框架空白或跳错页面。原因多半是框架没命名，链接目标选成了“当前窗口”，或者页面路径写错。内联框架的交互顺序是：先选中框架命名if_main_content，再给菜单加“在框架中打开链接”，目标选这个框架名，页面选子功能页。预览时如果空白，先看框架名有没有拼错，再看目标页面是否在页面树里，最后看链接是不是用了绝对路径。演示文件换目录后绝对路径会断，通常用相对页面链接。解决完在预览里点三次菜单，确认内容区每次都换、顶部导航不跳。

5.2 演示交付类问题

现象：演示文件发给客户，对方打开样式丢失、图片不显示，或者干脆打不开。原因是生成时输出目录不干净，资源文件夹没一起打包，或者用了对方电脑没有的字体。解决方式是生成到一个空目录，生成后把整个目录压缩，不要只发单个 HTML 文件；字体用系统自带字体，别用特殊字体；生成完断网打开一次，确认不依赖网络资源。换一台没装 Axure 的电脑再打开一次，这一步很土但很有效，我吃过亏之后每次都做。

现象：函数和条件判断不生效，明明表达式写对了。原因通常是局部变量没赋值、变量类型不对，或者条件顺序反了。文本框里是空值，你直接判断长度小于 6，结果可能不符合预期；数字文本参与数学运算前要先转数字；多个条件要从严格到宽松排，先判空再判格式。解决方式是用隐藏文本框做“黑匣子”，把[[LVAR1]]和[[LVAR1.length]]设进去，预览时看输出；条件里先加“如果文本为空”的分支，再走长度和格式判断。别在条件里写一长串嵌套，拆成多个交互更好排查。

现象：右键菜单弹不出来，或者弹出来关不掉。原因是菜单面板没置于顶层，被内容区盖住；或者点击空白关闭的热区没加。解决方式是把菜单面板放到最上层，右键热区只覆盖目标卡片，点击菜单项后隐藏面板，再加一层全屏透明热区负责关闭。注意全屏热区别盖住菜单本身，图层顺序是菜单在上、关闭热区在下。演示前把右键、左键、空白点击各走一遍，确认不会出现“点一次弹两个菜单”的情况。

现象：批注层演示时关不掉，客户以为页面坏了。原因是批注图形画在内容层，或者显示交互加了但隐藏交互没加。解决方式是把批注统一放P09_批注层或顶层组，默认隐藏，显示和隐藏用同一个按钮切换；答辩前预览一次，确认批注打开后还能关。批注是解释工具，不是装饰，别让它在主流程里一直亮着。提示：避坑清单不用多，把这五条在生成演示文件前走一遍，能省掉现场大半尴尬。

6. 验收与答辩：用一份演示文件把交互链路讲清楚

6.1 生成演示文件与自测清单

生成演示文件不是点一下“发布”就完事。我一般先生成到一个空目录，确认资源文件夹跟着输出，再用浏览器打开入口页。自测按客户视角走主链路：登录 → 主界面 → 左侧菜单切内联框架 → 下拉列表筛选 → 多选组合展开收起 → 动态面板切选项卡 → 右键菜单弹出关闭 → 批注层显示隐藏。每一步都问三个问题：点得到吗，反馈对吗，退得回来吗。断网再走一遍，换一台没装 Axure 的电脑再走一遍，这两个动作能提前暴露大部分交付问题。

6.2 答辩讲法：按“操作—反馈”讲，不按工具栏讲

答辩时最怕从头讲工具栏，评委听三分钟就走神。更稳的讲法是按一条业务链路走：先讲用户进入页面看到什么，再讲点某个控件发生什么，最后讲异常状态怎么提示。比如“这里选择订单状态，列表区通过动态面板切到对应状态；如果没数据，切到空态；右键卡片弹出菜单，点空白关闭。”每讲一个交互，手上就点一次，让评委看到反馈。函数和批注放在后面讲，作为“为什么这样设计”的补充，不要一上来就讲表达式。

我早些年把演示文件直接发给客户，结果内联框架空白，现场只能用截图救场。从那以后，每次生成完都强制走一遍“空目录 + 断网 + 换机”三件套，再按验收表逐项打勾。这份《Axure RP 9 使用详解》文档的目录可以当检查表，页面、工具、控件、交互、函数、批注、演示生成缺哪项补哪项；你手里如果正缺一份能照着走的参照，拿它对照练习就够用了。希望帮到你。

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