企业官网建设流程全解析

简介：《Axure RP 9 使用详解》面向产品经理、交互设计师及原型设计初学者，针对只会基础绘图、备注堆叠导致原型难以向客户演示的问题，帮助读者系统掌握可交互、可交付的专业原型制作方法。资源为1个docx文档，压缩包约2.54MB，以图文说明形式组织内容，便于按目录检索和分模块查阅。目前已有6582人学习。文档围绕工具栏、元件样式与部件库、页面命名、下拉列表与文本框、多选框、悬浮说明、内链框架、菜单、热区、动态面板、内联框架交互、右键效果、函数、外显批注和取色工具等展开，并说明演示文件生成流程；读者可据此补齐交互细节、理清原型结构，提升客户演示与团队协作中的表达质量，适合作为系统学习与查漏补缺的参考。

1. 从「画图工具」到「可演示原型」：客户现场那 5 分钟决定这套方案值不值

某次投标演示，对面评审只给了五分钟。打开那份 Axure RP 9 使用详解 里攒了半个月的线框稿，二十几个页面全是灰块加密密麻麻的批注，客户翻了两页就低头看手机。问题不在设计能力，而在这套原型只会「画」，不会「演」。这份 Axure RP 9 使用详解 要解决的正是这件事：把工具栏、元件库、动态面板、内联框架、函数表达式和演示文件生成串成一条能走完的流程，让原型从静态草图变成能点、能跳、能切换的可演示文件。它适合三类人：正在做产品方向毕设或课程设计的学生、需要向客户交付原型的产品岗新人、以及想把交互说明讲清楚的开发转设计的人。下面按页面与工具、控件布局、交互实现、避坑排查、验收交付的顺序，把这套流程拆成能照着做的步骤。

2. 页面与工具的基础盘：三层工作区与元件属性的职责划分

原型做到后期变乱，绝大多数时候不是因为交互复杂，而是因为找不到东西：页面叫「页面1」，母版叫「Master2」，按钮叫「矩形3」，改一个样式要翻半个小时。Axure RP 9 的工作区其实是三层结构——左侧的页面树管结构，中间的画布管视觉，右侧的检查器管行为，三层各司其职，谁越界谁就会制造混乱。这一章先把这三层的使用规矩立起来，后面所有控件和交互都建立在这个基础上。

2.1 页面树、母版与画布的命名约定

页面树（Pages）决定原型的骨架。演示时客户看到的导航顺序，本质上就是页面树从上到下的顺序，所以命名不能随手来。我一般用「序号_模块_页面」三段式，序号控制在两位数，中间留出十位数的空档，方便后期插页面而不必全部重命名。

母版（Masters）的用法要想清楚再动手。顶部导航、侧边菜单、页脚这类全站复用的块做成全局母版；弹窗、提示条、卡片这类局部复用的做成普通母版。母版拖进页面后成为「实例」，实例上改文字和图片没问题，但改样式和交互时要留意——母版一旦更新，实例上被本地覆盖过的属性是保留还是回滚，跟覆盖方式有关，改之前先在测试页上试一次，别在主流程页上直接动刀。

画布（Canvas）上还有一个容易被忽略的物件：参考线。划出 1200 宽的内容区边界和 24 像素的栅格间距，所有页面都在这条线上对齐，生成出来的演示文件翻页时就不会出现内容左右抖动。这套规矩看着啰嗦，但它是「拿得出手」和「拿不出手」的分水岭。

提示：命名改得勤不如一开始就定规矩。新建文件后先花十分钟把页面树骨架搭好，比后期改一百个元件名省事得多。

2.2 元件样式、图标与交互属性三件套

Axure RP 9 里任何一个元件都挂着三组属性，右侧检查器面板把它们分得很清楚：样式（Style）管长相，包括填充、边框、圆角、字体、阴影、透明度；属性（Properties）管数据和文字内容，比如下拉列表的选项列表、文本框的提示语、表格的行列数；交互（Interactions）管行为，也就是点击、悬停、载入时发生什么。新手最容易犯的错是把三件事混在一起——用改样式的方式去做状态切换，用堆元件的方式去做选项列表，结果一个按钮复制出五份，改颜色要改五遍。

图标在 Axure 9 里有两套来源：元件库自带的图标库，以及直接把图标字体当文本用。前者省事，后者灵活但要注意字体文件是否随生成文件一起走。图标大小统一控制在 16、20、24 三档，别出现 17.5 这种数字，对不齐的时候会非常难受。

交互属性这一栏，真正高频的只有四五个动作：显示/隐藏、设置面板状态、打开链接、设置文本、设置选中。把这五个动作练熟，能覆盖原型里八成以上的演示需求，剩下的复杂逻辑再交给函数表达式。

2.3 取色工具与样式复用：让原型不像拼贴画

取色工具（吸管）在顶部工具栏里，作用是把界面上任意一点的颜色吸出来复用。很多人拿它当临时救火工具，看到哪里颜色不对吸一下，结果一个文件里出现七八种蓝色，演示时一眼就能看出是拼起来的。正确的顺序是反过来的：先定色板，再画页面，色板之外的颜色一律不准出现。

色板定好之后写进样式管理器，把按钮、输入框、标题、正文分别存成默认样式。之后新建元件直接用样式套，改配色时只改样式定义，全文件同步更新。这一步做完，原型的「专业感」会有一个肉眼可见的跳变——不是因为设计水平提高了，而是因为视觉终于一致了。

3. 控件与布局落地：从下拉列表到菜单导航的搭建方法

控件这一层是原型的血肉。客户在演示现场点得最多的是表单和导航，而不是花哨的动效，所以这一章把下拉列表、多选框、文本框、菜单、热区这几类高频控件逐个拆开，说清楚每个控件的属性怎么设、交互挂在哪里、失败时先看什么。掌握这五类，一个中等复杂度的业务原型基本就够用了。

3.1 下拉列表与多选下拉框：选项状态与选中回显

Axure RP 9 的下拉列表（Droplist）元件，选项不在画布上编辑，而是在右侧属性面板的列表项编辑器里逐行添加，支持设置默认选中项。这一点跟很多人习惯的「画一堆矩形叠起来」完全不同，用原生元件的好处是演示时点开是真的下拉展开，而不是一个静态图。

多选场景要分两种做法。选项数量少、样式要求高的，用复选框（Checkbox）竖排拼一个下拉面板：外层放一个动态面板，两个状态分别是「收起」和「展开」，点标题栏切换状态，展开态里摆一排复选框。选项数量多、需要滚动条的，直接用列表框（List Box）元件，在属性里打开多选开关，演示时按住就能连选。

回显和计数这两类需求，靠「设置文本」加函数表达式就能完成，不用写脚本。表达式写在设置文本动作的 fx 入口里，用双中括号包住，LVAR1 这类局部变量指向你选中的元件。数量统计这种需求，直接在表达式里读元件的已选项数量即可。

3.2 文本框：默认值、提示语与提交校验

文本框（Text Field）在属性面板里有几个必须配的项：提示文字（Hint Text）写「请输入手机号」这类占位语，默认值写预填内容，最大长度限制输入字符数，密码类型把输入变成圆点。提示文字和默认值的区别要分清——提示文字在输入后自动消失，默认值是真实内容，演示时客户一删就没了，两者用错会显得很不专业。

校验逻辑挂在提交按钮的单击事件上，动作选「设置文本」，目标选错误提示标签，值用表达式算。下面这段是登录表单的典型校验，先判空、再判长度、最后判格式，三层判断一条表达式写完：

// 位置：btn_登录 → 单击 → 设置文本 → lbl_错误提示 // LVAR1 指向 txt_密码，LVAR2 指向 txt_账号 // 返回值是字符串，空字符串表示校验通过，提示标签自然不显示 [[ if (LVAR1.text == "") "请输入密码" else if (LVAR1.text.length < 6) "密码长度不能少于 6 位" else if (LVAR2.text.indexOf("@") < 0) "账号需为邮箱格式" else "" ]]

表达式里的.text取元件当前文本，.length取字符长度，indexOf判断是否包含某字符，这几个是最常用的字符串处理。注意判断顺序不能乱：先判空再判长度，否则空值直接进长度判断会得到 0，提示语就变成了「密码长度不能少于 6 位」，客户一看就知道你没测过。校验通过之后再加一条「显示」动作，把成功提示或下一步按钮露出来，形成完整的正向反馈。

3.3 水平菜单与垂直菜单：选中态的三种实现路径

导航菜单看着简单，做法却有三条完全不同的路，选错了后期改起来很痛苦。

第一种是多矩形拼装：每个菜单项一个矩形或文本标签，点击时把当前项设为选中、其余项取消选中，靠选中样式换颜色。优点是轻，缺点是菜单项一多，交互要挂十几条。第二种是动态面板多状态：整个内容区做成一个多状态面板，菜单项点击时切换到对应状态，视觉上是局部刷新。优点是切换流畅、动画自然，缺点是一个页面里塞了所有内容，文件会变重。第三种是母版加多页面：菜单做成母版，每个功能一个独立页面，点击走页面跳转。优点是结构清晰、便于分工，缺点是每次跳转整页刷新，演示时会有短暂白屏。

选中态本身靠两样东西：元件的「选中」状态，以及交互样式里给选中态单独配色。点击菜单项时先对所有同级菜单项执行「设置选中 → 假」，再对自己执行「设置选中 → 真」，这一步漏了就会出现多个菜单同时高亮的尴尬场面。

3.4 热区与显示顺序：不规则点击区与层叠管理

热区（Hot Spot）是一块透明的点击区域，专门解决两类问题：形状不规则的按钮（比如圆形图标、异形卡片），以及图片上的局部点击（比如地图上的省份）。做法是把热区盖在目标图形上方，尺寸略小于图形，交互挂热区而不是图形本身。

显示顺序（置顶/置底）是层级管理的开关，右键菜单里就能调。原型里常见的层级从下到上是：背景图、内容区、悬浮提示、遮罩与弹窗、热区。热区放最上层要特别小心，透明不等于不拦截点击，一块盖住按钮的热区会让按钮彻底点不动——这类问题在演示现场才暴露，属于典型的翻车现场。

判断层级对不对，最快的办法是打开大纲（Outline）面板，从上往下看一遍顺序，再逐个点一遍。演示前把这一遍走完，能省掉现场一半的尴尬。

4. 交互与动态面板：让原型真正动起来的四类交互

静态页面谁都会画，交互才是 Axure RP 9 的分水岭。这一章的四类交互——动态面板、内联框架、右键菜单与悬浮说明、函数表达式——覆盖了原型里绝大多数「看起来像真的」的效果。每一类都按「元件怎么建、事件挂哪里、参数怎么填、出问题先看什么」的顺序讲，照着做能直接复现。

4.1 动态面板：状态切换、滑动与自适应

动态面板（Dynamic Panel）是 Axure 交互的核心机制，本质是一个容器里装着若干个状态，同一时刻只显示一个。折叠展开、选项卡、轮播、步骤条、弹窗，全靠它。建法有两种：先画好内容再右键「转换为动态面板」，或者从元件库直接拖一个空面板出来往里填。前者适合已有设计稿，后者适合从零搭。

折叠展开是最小可用的例子。面板建两个状态，State1 放收起态的标题栏，State2 放展开态的完整内容，点击标题栏执行「设置面板状态」，目标选自己，状态选「下一状态」，动画选「向下滑动」，时长 300 毫秒。加一个循环开关，两个状态就能来回切。

滑动方向要成对配：展开用向下滑动，收起就用向上滑动，两个都用同方向会出现内容「弹回去」的怪现象。自适应方面，面板尺寸固定时内容超出会被裁切，需要提前把面板高度调到最大内容的高度，再靠显示区域控制可见部分；这一条在长表单和长列表里特别容易踩。

4.2 内联框架与页面内链：局部刷新和命名对齐

内联框架（Inline Frame）的作用是在当前页面里嵌一个子页面，做出「局部刷新、外层不动」的效果。典型用法是左侧导航固定、右侧内容区跟着菜单变，或者顶部栏不变、下面切模块。用它的关键不在拖控件，而在命名对齐：框架本身要有一个唯一名字，比如 iframe_内容区，所有指向它的链接都要选这个目标框架，名字错一个字符就是一片空白。

内链（Internal Link）指向的是本文件里的页面，外链指向网址。原型阶段一律用内链，别指向本地文件路径——生成 HTML 之后目录结构会变，本地绝对路径十有八九失效，客户打开就是白屏。

框架尺寸要和内嵌页面尺寸匹配，子页面宽度大于框架宽度会出现横向滚动条，演示时很难看。稳妥的做法是子页面统一按 1200 宽设计，框架宽度设成 1200，样式里把滚动条关掉。

4.3 右键菜单与元件悬浮说明

右键菜单能显著提升「像真的」的程度，尤其在做文件列表、表格、画布类产品时。做法是先用动态面板做一个绝对定位的菜单块，默认隐藏，然后给目标区域挂「右键菜单」事件：先把菜单移到鼠标位置，再显示面板。菜单项本身挂单击事件，点完之后记得把自己隐藏掉，否则菜单位置会停在上次点的地方。

悬浮说明（Tooltip）用「鼠标移入显示、移出隐藏」实现，位置通常放在元件右下方偏移 8 像素处。这里有个细节：tooltip 面板要放在页面层级的高位，并且所有 tooltip 共用一个面板，移入时改文字、移出时隐藏，比每个元件配一个面板省事得多。

注意：右键菜单面板和 tooltip 面板都不要放在会被裁切的容器里，父容器隐藏溢出时，子面板跟着消失，表现就是「点了没反应」。

4.4 函数表达式与变量：条件判断、数学运算、跨页面传值

Axure RP 9 的表达式用双中括号包裹，能写条件、能算数、能读全局变量。全局变量在项目设置里定义，命名也建议带前缀，比如 gv_用户名、gv_购物车数量，页面之间靠它传值。下面这段是订单结算的典型计算，把单价乘数量、按满减规则打折、保留两位小数：

// 位置：lbl_合计 → 载入时 → 设置文本 // LVAR1 指向 txt_单价，LVAR2 指向 txt_数量 // 满 200 减 30，结果四舍五入到两位小数 [[ if (LVAR1.text * LVAR2.text >= 200) Math.round((LVAR1.text * LVAR2.text - 30) * 100) / 100 else Math.round(LVAR1.text * LVAR2.text * 100) / 100 ]] // 位置：lbl_角标 → 载入时 → 设置文本 // gv_购物车数量 为全局变量，为 0 时显示空串，避免出现「0」角标 [[ if (gv_购物车数量 == 0) "" else gv_购物车数量 ]]

Math.round(x * 100) / 100是保留两位小数的标准写法，容易错的地方是直接Math.round(x)，金额会变成整数，演示时被客户一眼看穿。全局变量还有一个坑：它在文件打开期间一直存在，从 A 页面跳到 B 页面再跳回来，变量值不会自动重置。需要初始化的变量，在入口页面的「载入时」事件里统一赋初值，这条规矩能避免很多「第二次进来数据不对」的怪异现象。

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

原型做得好不好，演示现场十分钟就能验证。下面五条是我在项目里反复见到的翻车点，每条都按「现象、原因、解决」写，照着排查基本能覆盖八成以上的现场问题。

5.1 点了没反应：元件被透明层拦截

现象：按钮、链接、菜单点下去毫无反馈，但选中元件看交互明明是挂好的。原因通常是上方盖了一块热区、一个透明矩形或一个未隐藏的遮罩，把点击吃掉了；另一种情况是交互挂在母版实例上，母版更新后被覆盖。解决：打开大纲面板从顶层往下逐层隐藏，隐藏到哪层能点动，问题就出在它上面；母版相关的，去母版里改而不是在实例上改。排查顺序固定成「先看层级、再看交互归属」，比瞎点省时间。

5.2 数据对不上：全局变量没初始化

现象：第一次进页面数据正常，退出再进数据翻倍或者残留上次的值。原因：全局变量在文件打开期间一直存在，页面切换不会清空。解决：在入口页面或模块首页的「载入时」事件里，先用「设置变量值」把该重置的变量归零，再执行后续逻辑。涉及金额、数量的变量尤其要重置，客户来回点两次就能发现异常。

5.3 打开一片空白：内联框架目标名不匹配

现象：生成 HTML 后点菜单，右侧内容区一直空白，本地预览却正常。原因有三类：框架的 target 名字和交互里选的目标不一致；被链接的页面在生成时没有勾选，压根没输出；链接指向了本地文件路径而不是文件内页面。解决：统一用「iframe_内容区」这种带前缀的命名，生成时在页面范围里全选，链接一律改用内链。生成完成后打开输出目录，看对应页面文件在不在，这比在 Axure 里反复调快得多。

5.4 排版全乱：字体和图片惹的祸

现象：自己电脑上排版精致，客户电脑上文字换行、按钮撑高、图标错位。原因：用了系统里没有的字体，浏览器回退到默认字体后字宽变化；或者图片直接从设计稿拖入未压缩，大图加载慢导致位置跳动。解决：正文和标题统一用系统安全字体，特殊字体只在 logo 这类固定尺寸的地方用；图片先压到合理体积再导入，能用纯色和形状画的就别贴图。生成演示文件时把字体选项确认一遍，别留下「本地看着好、发出去就崩」的隐患。

5.5 越改越卡：文件膨胀与母版嵌套过深

现象：编辑时滚动卡顿、保存报错、生成 HTML 要等好几分钟。原因：图片未压缩、页面元件数量上万、母版里套母版套了三层、复制粘贴带进来一堆隐藏元件。解决：把大图先压到长边 1920 以内；超过三十个页面的项目拆成主文件和模块子文件；母版嵌套控制在两层以内；定期用「另存为」生成一个新文件，把历史冗余清掉。原型文件和代码一样，也需要定期整理，拖着不治最后只能重做。

6. 验收与答辩：生成演示文件后的走查清单

原型做完不等于能交付。Axure RP 9 的演示文件生成入口在发布菜单里，生成前有三个选项必须确认：输出的页面范围（别漏页）、起始页（一定是入口页）、打开方式（浏览器直接打开，不依赖额外软件）。生成完之后，先在自己的机器上用另一个浏览器打开一遍，再拷到一台没装过 Axure 的电脑上打开一遍，这两步能提前暴露绝大多数环境问题。

下面这份清单是我每次交付前必走的，按顺序勾完再发给客户或者带上答辩台：

答辩场景还有两条额外的经验。第一，提前准备一条「最短演示路径」，三到五个页面走完核心价值，别从登录页开始一步步点，评委没有那个耐心。第二，把关键交互的说明写进元件的说明面板或者用批注图形标出来，答辩被问到「这里怎么做」的时候直接切到编辑界面展示，比口头解释有说服力得多。批注图形记得设为默认隐藏，演示时按需显示，别让注释糊在正式界面上。

从那以后我每次生成演示文件前，都会把这份清单打印出来放在手边逐条勾，勾不完不发给客户。吃过一次现场白屏的亏之后，这个习惯就再也没断过。这份 Axure RP 9 使用详解 里的步骤和参数，我按上面的结构整理成了一份可以对照着做的文档，需要拿去改成自己项目的话，直接按章节替换业务内容就行。希望帮到你。

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