企业官网建设流程全解析

简介：这是一份面向产品经理、界面设计师及原型设计初学者的 Axure RP 9 使用详解文档，重点解决只会基础画图、原型交互不足、演示效果不专业等问题。文档以 docx 格式打包，共 1 个文件，大小约 2.54MB，便于随时查阅。已有 6573 人学习下载。内容涵盖工具栏与元件库、页面设计、下拉列表、文本框、多选框等常用控件，以及动态面板、内联框架交互、隐藏显示顺序、右键效果、函数运算、取色工具和 HTML 演示文件生成等进阶用法；同时逐一拆解原件样式与交互属性、部件库、原件悬浮说明、热区和水平/垂直菜单等细节，帮助读者系统掌握从静态页面到可交互原型的完整设计流程。无论是投标演示、团队协作还是开发对接，这份详解都能有效提升原型设计的专业度和项目沟通效率。

1. Axure RP 9 是什么：为什么原型工具里它最值得认真学

我第一次真正把 Axure RP 9 当回事，是在一次需求评审会上被开发连环追问“这个分支怎么走、那个状态怎么变”的时候。当时用静态图讲流程，讲到一半就讲不下去了，不是因为逻辑没想清楚，而是手里的工具根本没法把逻辑“跑”起来。Axure RP 9 解决的就是这个问题：它把页面、交互、状态、变量、数据放在同一个画布里，让原型从一张张死的图变成一套能点、能跳、能判断的“假系统”。它适合产品经理、交互设计师、售前方案和用户研究员，特别是当你需要验证复杂流程、做高保真交互原型或者给开发讲清楚边界条件时，它比纯视觉工具可靠得多。本文从界面结构讲到事件、动态面板和避坑，照着走完就能交付一个开发拿起来就能用的原型。

2. 界面与工作流：从空白画布到第一个可点击原型

Axure RP 9 的界面密度很高，第一次打开很容易被左侧、右侧、顶部工具栏加底部状态栏吓到。但真正每天要打交道的地方其实就三块：页面面板、元件库、右侧的样式与交互面板。把这三块的职责分清楚，剩下的布局就都好理解了。

2.1 页面面板、元件库与样式面板：三块核心区域各管什么

页面面板管理的是整套原型的“目录结构”。它和文件系统的逻辑一样，一个项目下可以有多个页面，页面还可以分组。原型页一旦超过十个，不分组会让你自己都找不到，更不要说评审会上来回跳转。我习惯按“登录注册｜首页｜列表｜详情｜个人中心”这样的模块建分组，生成 HTML 后左侧导航也按这个层级走，演示效率会高很多。

元件库是往画布上放东西的货架。Axure RP 9 默认带了一套基础元件：矩形、按钮、文本框、下拉列表、复选框、单选按钮、图片热区、中继器等等，覆盖了大多数原型场景。9 版把默认库整理得更清爽，常用元件一眼就能找到，不像 8 版那样要在旧分类里翻半天。元件库有一个容易被忽略的点：如果你拖了一个元件进画布然后改了它的样式，这不影响库里的默认元件；要改默认样式，必须单独编辑 .rplib 库文件。这个特性决定了团队做统一组件库的路径，后面第 6 章会再展开。

样式面板放的是选中元件的外观参数：填充色、边框、圆角、透明度、字体、字号、行高、阴影。它和交互面板在同一个侧栏里，选中的元件不同，面板里能配置的内容也不同。Axure 的使用习惯是“先选中，再看右侧”，所有操作都围绕当前选中对象完成。

这四块里最容易忽视的是页面面板和交互面板的联动关系。页面面板不仅管页面层级，还管母版和页面说明；交互面板则负责把画布上的元件“激活”。如果你发现某个元件点不动，十有八九是交互面板里还没有给它挂任何事件，元件本身没有“能力”可响应。

2.2 从零搭建第一个可点击原型：页面跳转的最小操作

下面做一个最小可用的原型：两个页面，一个按钮，点击后从首页跳到详情页。这步跑通了，Axure 的基本工作流就建立了。

先在左侧页面面板把默认的“页面1”改成“首页”，右键再添加一个“详情页”。然后从元件库拖一个按钮元件到首页画布，双击按钮把文字改成“查看详情”。选中这个按钮，在右侧交互面板点“新建交互”，下拉框里选“鼠标单击时”。在用例编辑器里点“添加动作”，找到“页面”分类下的“打开链接”。在目标下拉框里选“详情页”，窗口类型选“当前窗口”。最后点工具栏的预览按钮，浏览器里点击按钮，页面就跳过去了。

这个流程里最容易出问题的是窗口类型。很多初学的人不展开“更多选项”，默认生成的新窗口会让浏览器弹出一个新标签页，演示时看起来像跳到了新页面，实际上原来的窗口还在原地。要模拟真实产品里的跳转，尽量统一用“当前窗口”。

注意：预览的快捷键在 9 版里是 F5，生成 HTML 在“发布”菜单里。F5 预览只在本机看，不会生成实际文件；生成 HTML 会产出一整个目录，可以打包分发。两者并不完全等价，对外演示记得用后者。

2.3 母版与页面分组：让重复结构不再复制粘贴

原型通常有很多页面共享顶部导航、底部 Tab、侧边栏这类结构。如果每个页面单独画一遍，后面改一个菜单文案就要全站返工。Axure 处理这个问题靠母版。

创建母版的路径是左侧“母版”面板，右键“添加母版”。双击进入母版编辑区，把导航结构画好；然后在母版上右键，“添加到页面中”，勾选需要应用的页面。母版里的内容会出现在这些页面上，但页面里不能直接编辑母版元素；如果某个页面确实需要不一样的样式，可以右键该页面的母版实例，“从当前页面脱离”，脱离后就变成普通元件，想怎么改都行。

母版还有一个细节：母版里的事件会作用于所有引用它的页面。这意味着导航按钮的跳转逻辑放在母版里是最划算的，一次配置，全站生效。反过来，如果某个页面不想触发这个跳转，脱离关系几乎是唯一干净的做法。项目里有人图省事用复制粘贴代替母版，页数少还行，20 个页面以上的原型这么做，就是给自己埋雷。

页面说明区同样值得养成习惯。在画布空白处双击，会进入该页面的说明编辑区，可以把交互规则、边界条件写成文字。这些说明会随注释面板一起呈现在生成的 HTML 里，对开发理解原型意图很有帮助。我在交付原型前，都会把每个页面的说明补全，这比让开发逐条去猜动态面板的状态切换要省事得多。

3. 交互设计：用事件和用例把静态页面变成可操作原型

从这一章开始，原型从“能看”变成“能交互”。Axure 的交互模型其实非常接近程序的“事件驱动”写法：元件监听事件，事件触发用例，用例执行动作。理解了这个模型，后面各种交互都是套模板。

3.1 事件面板的触发机制：鼠标单击、页面载入、键盘按下

在 Axure RP 9 里，每个元件能响应的事件集合是固定的。选中文本框、按钮、图片、动态面板，右侧交互面板列出的事件完全不同。常用事件可以列成一张表：

页面载入时是特例，它不是元件事件，而是页面事件。操作方式是先点画布空白处，让右侧面板显示页面属性，再切到交互面板添加事件。很多初学者在完整选中一个元件的状态下满世界找“页面载入时”找不到，就是因为没有把选中目标切回页面。

用例编辑器的本质是“条件加动作”的序列。一个事件下面可以挂多个用例，用例之间的逻辑关系是 if / else if / else，从上往下执行，遇到条件成立的就执行对应动作，执行完这个用例就结束，不再继续往下判断。这一点很像写代码时的分支逻辑，也是最容易出错的地方，第 5 章会专门讲顺序翻车的案例。

3.2 用例与条件分支：做一个带校验的登录交互

用一个登录表单把事件和条件串起来：手机号输入框、验证码输入框、登录按钮。按钮点击后要依次校验手机号非空、手机号格式、验证码非空，全部通过才跳转。

第一步，先拖两个文本框和一个按钮，在右侧把元件名称分别改成 phoneInput、codeInput、loginBtn。元件名称在样式面板上方改，改它的意义在于用例编辑器里引用时不至于认错。第二步，选中 loginBtn，新建交互“鼠标单击时”。第一个用例：添加条件，条件面板选“元件文本”——phoneInput——“满足”——“空值”，动作里选“设置文本”，目标是一个提示文本元件，写入“请输入手机号”。第三步，点“添加否则如果”，加第二个用例：条件为 phoneInput 的“文本”——“不匹配于”——“正则”，正则表达式写：

^1[3-9]\d{9}$

动作是设置提示文本为“手机号格式不正确”。第四个用例判断 codeInput 是否为空，动作提示“请输入验证码”。最后走“否则”分支，直接“打开链接”到“登录成功页”。

条件面板里有几个选项要说明。“文本”的大类叫“元件文本”，选的时候注意别选成“焦点于”这类属性。“匹配于/不匹配于”在 9 版里是独立的运算符，选完后会弹出正则输入框，直接粘贴正则表达式即可。这个正则覆盖了当前大陆手机号主流的 11 位开头规则，照抄能用；实际项目中按运营规则微调即可。

注意：提示文字的元件需要提前放在页面上，并命名为 tipsText。它可以是普通文本标签，也可以是一个带样式的矩形。通过“设置文本”动作写入内容，比直接改元件默认显示内容更灵活，因为同一个元件可以在不同分支里被反复改写。

3.3 用“触发事件”串起多个动作：全局交互的一条捷径

有些交互涉及多个元件的联动：点击按钮，弹窗出现，背景变暗，列表刷新。与其在按钮上把动作全部写完，不如把一部分逻辑放到元件自己的事件里，用“触发事件”去调用。

比如弹窗关闭按钮，可以先给关闭按钮配一个“鼠标单击时”事件，动作是隐藏弹窗。然后在遮罩层上加一个“鼠标单击时”事件，动作直接“触发事件”，选择关闭按钮的“鼠标单击时”。这样一来，关闭逻辑只写一遍，以后不管是用按钮关、遮罩关还是按其他入口关，都复用同一个用例。

“触发事件”在用例编辑器的动作列表里，分类是“其他”——“触发事件”。选目标元件，再选要触发的事件名。这个能力让原型交互可以像函数调用一样组织：一个事件负责一个完整的动作序列，其他地方需要时去触发它，而不是复制粘贴用例。这个习惯对维护大原型的帮助非常大，到了第 6 章做自检时，你会感激当初没有写三份重复逻辑。

4. 动态面板与中继器：复杂交互的两个核心容器

动态面板和中继器是整个 Axure RP 9 里掌握成本最高的两个元件，也是把原型从“页面跳转”推向“状态管理”的关键。理解了这两个容器，你能表达的原型复杂度会上升一个台阶。

4.1 动态面板的状态管理与“推动/拉下”物理效果

动态面板是“套了多个子页面”的容器元件。核心模型是多状态：同一个面板可以有多个状态，每个状态是独立的一套内容，但某个时刻只能显示其中一个。“设置面板状态”这个动作负责切换当前显示哪个状态。

为什么要用一个容器而不是多放几个元件？因为只有动态面板才能做到：隐藏与显示的精确控制、状态间的过渡动画、内容的整体推动。比如弹窗：弹窗内容有好几层，可以用动态面板的不同状态表达不同类型的弹窗；也可以像移动端抽屉那样，面板本体是一块 260px 宽的侧栏，切换状态并配合“推动元件”，把页面整体推向左方。

“推动/拉下”在用例编辑器里点“更多选项”能看到，是动态面板的动画选项。推动的效果是让动态面板在滑入时把页面本身推开，拉下则是收回时把页面拉回来。时间我一般设 300ms，动画类型选“向左滑动”或“向右滑动”。这个参数组合在还原移动端抽屉导航时效果最自然，快于 200ms 会显得生硬，超过 500ms 会让用户觉得卡。

动态面板的另一个关键参数是默认状态。双击面板进入状态管理，可以切换默认显示哪个状态。很多问题的根源就出在默认状态没设对，导致预览时首屏显示的是 State2 而不是 State1。这个坑在第 5 章里会展开说。

4.2 用动态面板做轮播图和抽屉导航：分步操作

轮播图是动态面板的经典应用。做法是：先画一个图片容器，右键转换为动态面板，添加三个状态 State1、State2、State3，每个状态里放一张轮播图。然后选中这个动态面板，新建交互“状态改变时”，在用例里配置两个动作：先“等待”3000 毫秒，再“设置面板状态”为“下一个”，动画选“向左滑动”，时间 500ms。最后回到页面画布空白处，添加“页面载入时”事件，动作是“设置面板状态”切换到第一个状态。

这里有一个关键逻辑：页面载入时把动态面板切到 State1 会触发“状态改变时”事件，这个事件执行等待 3000ms、切到 State2；切到 State2 又触发“状态改变时”，再次等待 3000ms 切到 State3，如此循环。这就是轮播图“自动播放”的驱动方式，不是靠一个写满十次的用例，而是靠“状态改变时”事件的自我触发。

这个写法有个副作用：用户手动切换轮播图时也会触发“状态改变时”，等待计时会被重置，自动播放节拍会被手动操作影响。对原型演示来说无伤大雅，但如果你要精准模拟“手动切换后 3 秒恢复自动播放”，就得用变量记录最近一次手动切换的时间点，在用例里判断时间差，这已经属于高阶玩法，本节不展开。

抽屉导航的步骤稍有不同。先拖一个矩形作为抽屉容器，宽度 260px，转换成动态面板。它需要两个状态：State1 是收起的，State2 是展开的。在页面左上角放一个“菜单”按钮，给它加“鼠标单击时”事件，动作为“设置面板状态”选中抽屉，模式选“切换”，动画选“向右滑动”，时间 300ms，并勾选“更多选项”里的“推动元件”。这样每点一次菜单，抽屉就在展开和收起之间切换，页面内容也随之被推动。

遮罩层的配合做法是：在抽屉下面放一个全屏半透明矩形，初始隐藏。打开抽屉时同时把遮罩“显示”，点击遮罩触发抽屉的“切换”并隐藏自身。遮罩的层级要注意：遮罩应在抽屉下方，否则会挡住抽屉的点击区域。这个细节决定了抽屉能不能被遮罩点击关闭，很多人做出来遮罩盖住了抽屉，怎么点都打不开。

4.3 中继器基础：让原型里的数据列表“活”起来

中继器是带数据集的列表容器，默认拖出来有三行示例数据。它的价值在于列表内容由数据集驱动，而不是一行行手工绘制。对“订单列表”“消息列表”“商品列表”这类原型，用中继器可以让开发一眼看清数据结构。

操作分三步。第一步，从元件库拖入中继器，双击进入内部，会看到一行模板：一个矩形和几个文字标签，这是单行的排版。第二步，在右侧面板找到“数据集”，把默认的列名改掉，比如改成 name、price、status，填上几行假数据。第三步，回到面板内部，选中文字标签，在属性面板的“文字”输入框点 fx 按钮，在插入变量对话框里选item.name，这样模板行就绑定了数据集里的 name 列。

预览时，数据集有多少行，中继器就按模板重复渲染多少行。这个机制和前端框架里的列表渲染几乎一样，理解了“数据集驱动模板行”这个模型，后面加行、删行、筛选都不难。

中继器配合搜索框能做实时过滤：给列表上方加一个文本框，文本改变时的事件里加动作“筛选”，目标选中继器，条件设 name 包含[[LVAR]]，其中 LVAR 是从文本框读取的局部变量。这样每敲一个字符，列表就刷新一次，效果和开发版本几乎一致。这个 Demo 做下来，产品和技术对“搜索列表”的认知会很统一。

5. 常见问题与避坑：Axure RP 9 的高频踩坑记录

这一章把使用 Axure RP 9 过程中最容易掉进去的五个坑列出来，每个都按“现象、原因、解决”的顺序写，都是我实际处理过的问题。

5.1 字体异常与样式错乱

现象：本地预览一切正常，把 .rp 文件发给同事，对方打开后字体变了，布局位移。

原因：Axure 源文件记录的是字体名称，不会自动携带字体文件。对方电脑没有对应字体会逐级回退，中文字体回退后行高变化，布局就被撑乱。

解决：项目里统一用系统自带中文字体，比如思源黑体这类常用字体；对外发布用“发布—生成 HTML 文件”里的字体嵌入选项，勾选嵌入字体后生成包自带字体，但体积会明显增大。如果只是内部预览，统一字体就够了。这个坑在跨平台传递原型时极其常见，Mac 上看着正常的字体到 Windows 上基本都会变。

5.2 动态面板高度不跟随内容、滚动条不出现

现象：动态面板里的内容超过面板高度，预览时内容被截断，或者出现了滚动条但滚不动。

原因：Axure 的动态面板在默认状态下不会自动调整高度，面板高度固定，不会随内部内容长高，也不允许滚动；滚动条默认是“无”。

解决：如果希望面板变高，勾选面板属性里的“自动调整为内容尺寸”；如果希望面板固定高度且内容可滚动，保持固定高度，把“滚动条”从“无”改成“自动显示”。这两种诉求很容易搞混，先确认你要的是“长高”还是“滚动”。项目里被问得最多的问题就是“为什么内容看不全”，绝大多数是动态面板没有开自适应，或者滚动条没打开。

5.3 中继器数据修改不生效或显示空白

现象：在数据集里改了数据，预览时列表还是旧数据；改了列名后整列变空白。

原因：中继器渲染机制是逐行触发 Item Loaded 事件，模板里的文字绑定如果引用了旧的列名，比如item.Column1而不是item.name，数据就取不到；或者数据集的修改没有同步到预览缓存。

解决：改名列后一定要重新绑定模板里文字标签的 fx 公式，把item.Column1换成item.name。如果只是数据内容变化，预览前在中继器上右键“重新加载数据集”，让行重新渲染一次。建议把列名固定下来，尽量别中途改名，改动一次就要把绑定关系全部排查一遍，很容易漏。

5.4 交互用例顺序颠倒导致翻车

现象：输入框为空时点登录，提示的却是“手机号格式不正确”；验证码没填，但手机号校验通过后直接跳走了。

原因：用例编辑器按“用例一、用例二……”顺序执行，第一个条件成立就执行动作并结束。如果先写“格式不匹配”再写“是否为空”，空值也会先走到格式分支。

解决：把最基础的前置条件放在最前面，“为空”判断排第一，其次是“格式不匹配”，再次是“验证码为空”，最后是成功路径。写完后按从上到下的顺序读一遍用例，就像读代码的 if-else 一样，这个习惯能排查掉一大半交互逻辑错误。交互用例多了之后，顺序就是逻辑本身，任何一次拖拽排序都可能改变执行结果。

5.5 生成 HTML 后资源丢失、链接打不开

现象：本地 F5 预览正常，生成了 HTML 文件夹，打包发给同事后图片不显示、页面跳转报错。

原因：生成器输出的路径是相对路径，但文件若用中文命名或嵌套了多层目录，在部分系统环境中会解析失败；打包时只拷了部分文件也会让相对路径断掉。

解决：页面和图片资源统一用英文命名；每次发布都把整个输出目录完整打包，不要只拖 index.html。我习惯生成后用一条命令把输出目录打成压缩包，再分发：

zip -r prototype_html.zip output/

如果换了机器，重新在目标机上生成一遍 HTML 再分发，不要抱着旧压缩包到处传。这个坑在团队协作中极其常见，很多人只发了一个 html 文件，别人打开自然什么都看不到。

6. 把原型变成交付物：标注、分享与自检清单

6.1 用标注模式输出开发可用的尺寸与交互说明

原型不只是给产品看，还要给开发用。生成 HTML 后，点击工具栏的“标注”按钮，光标选中任意元件时，页面会显示这个元件的位置、宽高、边距、字体大小和行高，开发拿到就能照着写样式。

但标注只解决了视觉信息，交互逻辑仍然要人写。我一般在每个页面的画布空白处双击进入页面说明区，把交互规则以“当 xxx 时，显示/隐藏 xxx，跳转到 xxx”的格式写出来。这些说明会随注释面板一起呈现在生成的 HTML 里，开发按说明对逻辑，比对着满屏动态面板自己去猜高效得多。

进阶一点的技巧是把常用控件沉淀成自己的元件库。选中画布上做好的按钮、输入框、卡片，右键“创建元件库”，会存成 .rplib 文件。下次新建项目直接加载这个库，拖出来就能用，样式统一，交互也带着。团队里只要有人维护一套 .rplib，整个项目的原型风格就能收口。

6.2 发布前最后十分钟：原型自检清单

发布任何原型之前，我都会过一遍这张清单：

1. 从首页开始，把主导航的每条入口点一遍，确认跳转目标页存在、路径正确。
2. 检查动态面板的默认状态，确认首屏不是空状态或错误状态。
3. 检查全局变量的初始值，确认和首屏逻辑一致。
4. 对登录、提交、删除这类操作，把空值、格式错、成功三条路径各走一遍。
5. 检查中继器数据有没有明显脏数据，排序和筛选条件是否符合产品逻辑。
6. 如果有移动端稿子，用手机浏览器打开生成的 HTML，横竖屏各看一眼。

我自己的习惯是，在生成 HTML 之前先做一次“全链路走查”：从注册到登录到列表到详情到提交，把所有关键路径一口气走完，而不是每个页面孤零零看。通常走完一轮就能抓到几个动态面板状态没切换、用例顺序写反的遗留问题。这个习惯帮我少背了不少评审会上被开发当面指出漏洞的黑锅。希望帮到你。

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