企业官网建设流程全解析

简介：这份教程是面向产品经理、交互设计师的Axure RP入门与操作指南，系统介绍从界面认识到线框图、交互、注释、动态面板等功能，帮助零基础读者快速掌握原型设计工具的核心用法。资源包为1个doc文档，压缩后大小4.73MB，内容按“Axure介绍→界面与功能→工具栏→站点地图→部件库→交互与动态面板→注释与变量”等模块层层递进，并配有界面截图与步骤说明。目前已有164人学习下载。文档从几款常见原型工具的对比讲起，说明Axure相对Word、Visio、PS等软件在表达交互与注释上的优势，再结合4.6稳定版讲解具体操作，也提及5.0版本的新特性。读者按章节动手练习，无需编写HTML与JavaScript即可绘制带注释的wireframe，并能一键生成HTML演示和Word版原型设计文档，可直接用于需求评审与团队协作。

1. 原型设计工具为什么选 Axure：七个工具的对比与一个反直觉结论

做原型设计这件事，工具选错了，后面全是在补坑。纸笔适合记录灵感，但保真度不够，也没法表达页面跳转；Word 能画线框、能写批注，可交互演示很弱；PPT 演示方便，却撑不下大篇幅的功能说明；Visio 画流程是把好手，注释字段聊胜于无；PS/FW 和 DW 要么上手重，要么得先会 HTML——这些工具没有一个是冲着原型设计来的。Axure RP 不一样，它把带注释的 wireframe、页面流程、交互触发和 HTML/Word 输出放在同一条流程里，不用写一行代码就能让原型在浏览器里跑起来，直接拿去给开发演示。

这份图文教程从 4.6 版本讲起，从界面、站点地图、模板复用、widgets，一直讲到交互注释和自动出稿。适合刚接触 Axure 的产品经理、交互设计师按顺序跟练，也适合想系统补一遍基础的老手查漏。需要提前说的是，高版本保存的文件低版本打不开，这不算 bug，但沟通协作时确实会翻车，我会在后面的章节展开。

2. 界面与信息栏：九个功能区怎么认、信息栏怎么帮你精确对位

第一次打开 Axure RP，多数人会被一堆面板吓到：命令区、工作区、站点地图、器具箱、复用模块、页面笔记……其实它和 Office 是一个套路，先把每个面板的功能边界搞清楚，后面画 wireframe 时就能少走弯路。这一章我带你把主界面过一遍，重点说说最容易被人忽略的右下角信息栏，那是给 UI 交像素数值的关键工具。

2.1 欢迎界面与主界面：三个特殊命令菜单

运行 Axure RP 后，先弹出来的是欢迎界面。左侧是文档区，显示最近打开的文件，也能快捷新建文档和打开默认文件夹；中间是认证区，注册用户显示注册名和认证图标，未注册用户会看到注册引导；右侧是 Axure RP 学习中心，提供在线视频教程、官方讨论组和博客入口。如果不希望每次启动都看到这个面板，勾选 “Don't show this at startup” 即可。需要留意的是，欢迎界面里会明确提示你：4.6 高版本创建并保存的文件，低版本无法查看。

关闭欢迎界面后就进入主界面。整体是淡蓝色调的 UI，和 Office 风格接近。我把九个功能区整理成一张表，后面提到某个面板时你直接对照：

命令区有几个 Axure 特有的菜单需要单独说明。wireframe 菜单包含所有画线框图的操作命令；object 菜单用来操作工作区里的对象，包括组合、排序、锁定和脚注；generate 菜单则是自动生成 HTML 演示文件和 Word 说明文档，生成规则也能自己定义。这三个菜单没有对应的工具栏按钮，很多新手找不到入口，画完原型要出文档时，记得回到命令区找 generate。

页面笔记和页面载入时交互针对的是整个页面，注释与交互区针对的是页面里的单个元素，两者在生成文档时的表现也不一样。这个区别后面讲注释时还会提到，先记住它们的定位不同就不会混淆。

注意：4.6 高版本保存的文件，低版本无法查看。团队协作前先统一下版本，这个提示不是摆设。

2.2 右下角的信息栏：不被注意的像素度量工具

在功能区 6、7、8 的下方有一行系统信息，很多人会忽略它，但它是交 wireframe 时最重要的工具之一。信息栏左边显示当前文档的保存情况，右边在你选中某个 widget 时，显示这个 widget 的高、宽，以及距离页面顶部和左边的像素距离。也就是说，你完全可以在 Axure 里度量出每个元素的精确像素位置。

我的操作习惯是这样的：先把一个矩形从器具箱拖到工作区，选中它，盯着右下角信息栏看宽高数值；然后用键盘的方向键微调位置，每按一下，信息栏里的左边距和上边距数值都会跟着变。这一步非常重要，因为 UI 设计师拿到 wireframe 后必然会问“这里多少像素”“那里多少像素”，信息栏就是你的度量尺。

具体操作可以按四步走：

1. 从器具箱里拖一个 rectangle 到工作区，作为某个模块的占位。
2. 选中它，在信息栏右侧读取高、宽、距页面顶部、距页面左侧四个数值。
3. 用方向键移动 widget，观察信息栏数值变化，移动到目标位置。
4. 把这个位置数值记下来，写进注释字段，方便对接时直接引用。

参数说明：信息栏的数值单位是 px；页面坐标系的原点在左上角，距左侧对应 x 值，距顶部对应 y 值。对齐时先调 x 再调 y，比同时动两步更稳。配合工作区多张文档同时打开，你可以在一个页面里画好标准尺寸的控件，复制到其他页面时用信息栏确认位置一致，这样整套原型的页面间距能保持统一。

3. 站点地图与文档管理：sitemap 的父子目录与 flow/wireframe 双页面类型

站点地图是 Axure 里管理所有页面的地方，它模拟的是真实网站的页面关系。很多新手在这里只是机械地加页面、命名，完全没有目录意识，结果文件一多就开始乱。这一章把 sitemap 的父子关系、页面类型和右键菜单讲透，你会发现文档组织其实是在理产品思路，而不是在做杂务。

3.1 站点地图的结构：父子关系与增删升降级

sitemap 的目录结构和 Windows 资源管理器很像，是树形父子关系。每个节点既可以是一个页面 page，也可以是一个流程图 flow。工具栏上提供了六类操作，我按实际使用频率列一下：

这里最关键的坑在“删除页面”——它会把所选页面的全部子页面一起删掉，而且没有拆分选项。我见过有人想清理一个废弃分支，结果把下面七八个画好的页面全删了。后面避坑章我会展开说，这里先提一句：删之前一定要展开目录确认有没有子页面。

右键菜单还提供了几个工具栏没有的操作。复制功能有两种：复制页面只复制所选页面本身，不包含子页面；复制分支则会把所选页面连同所有子页面一起复制，生成一个新分支。这个差异很适合用来做版本备份。另外右键菜单里的“生成流程表”可以把所选页面及其子页面的关系直接生成一张流程图，布局方式有两种：标准模式按父子关系从上到下排列，阶梯模式从左上到右下阶梯式排列。画完页面框架后生成一张流程表，能快速检查目录结构是否合理。

3.2 flow 与 wireframe 的两种组合方式：从流程图推导页面框架

sitemap 里的每个页面都能在右键菜单里被标记为两种类型：wireframe 或 flow。wireframe 类型的文件图标显示页面图标，表示这是一个线框页面；flow 类型的文件图标显示流程图标，表示这是一个流程图页面。用这两种类型标记页面，能让阅读者一眼分清哪些是流程说明、哪些是实际页面。

我总结出两种常用的组合方式，你可以根据产品阶段来选择。第一种是 flow 为父、wireframe 为子：先画整体流程图，再根据流程图推导页面框架，把页面挂在流程分支下。这样的好处是页面结构有流程逻辑支撑，开发看目录时能顺着流程找到对应页面，特别适合从零开始的新项目。第二种是 wireframe 为父、flow 为子：在某个页面的线框图下挂一个子流程图，用来解释页面里某个特殊部分的具体逻辑，适合对复杂模块做补充说明。

两种方式不是二选一的排他关系，复杂产品里往往是“你中有我，我中有你”。核心原则是让目录结构表达产品逻辑：能用树形关系讲清楚的事情，就不要堆在一张图里。

3.3 文档管理习惯：命名规范和 LOFI/HIFI 分组

这一节说点软性的东西，但实际影响很大。我刚带项目的时候发现，不少刚从学校出来的同事对文档命名和放置完全随心所欲，文件名是“新建文档(2)”“未命名3”这种，页面层级也是想到哪加到哪。结果每次找历史文档都要翻半天，偶尔还会误删，请假时别人根本没法接手。

我一般的做法是：命名用“序号-模块-页面名”的格式，比如“01-登录注册-手机号登录”，让文件名本身能说明在流程中的位置；页面层级严格按照功能模块划分，同一模块的页面放在同一个父节点下；同时在 sitemap 里用 flow 和 wireframe 区分流程和页面，让目录结构自带说明。

还有一点值得提的是 LOFI 和 HIFI 的分组。低保真和低保真原型面向的读者不同，低保真适合早期讨论结构，高保真适合给 UI 和开发确认细节。在 sitemap 里把两套分开建目录，分别维护，演示时按需展示，比混在一起到处改方便得多。这个习惯养成之后，出 PRD、做评审、交接文档都会顺很多。

4. widgets 与 masters：组件体系全解析，从模板复用到动态面板

器具箱里囤着所有画 wireframe 和流程图的对象，这些在 Axure 里叫 widgets；复用模块区里的文件则叫 masters，是可以被多个页面反复调用的模块。这两个概念是 Axure 组件体系的核心，理解它们的关系后，你才能摆脱“每次画新页面都重新画一遍页头页脚”的体力劳动。

4.1 masters 模板复用：normal、底层定位与自定义组件

masters 面板和 sitemap 面板看上去很像，文档操作也类似，但它们有本质区别：sitemap 里的文件是最终展示页面，masters 里的文件只是页面的一部分，是一个可复用的模块。这对应到程序开发里就是 include 概念——把重复出现的一段内容单独抽出来，然后在需要的页面里引用它。用过 Dreamweaver 的人可以把它理解成 template。

masters 的功能条和 sitemap 基本一样，唯一多出来的是“增加文件夹”，因为 masters 靠文件夹组织文件，文件之间没有父子关系。右键菜单里和 sitemap 的差异也不大。重点要看的是右键菜单里的“行为”设置，这是 Axure 4 版本之后加入的关键功能，决定了一个 master 在页面里的自由度：

custom widgets 这个行为容易理解偏差。它和普通 master 的根本区别在于：normal 行为的模块在页面中完全等同于 master 原件，改一个全变；custom widgets 行为则是“母子关系”，母件只决定了模块的功能和位置，进入具体页面后，各部分的功能和说明可以按页面重新定义。想做“大体相同、局部有差异”的模块时，选它比建多个 master 副本要干净得多。

右键菜单里还有两个批量操作：一个是把所选 master 批量应用到多个页面，一个是从多个页面批量移除。选择时会弹出 sitemap 树形目录，提供了 check all、uncheck all、check all children、uncheck all children 四种选项，按页面层级批量勾选。在弹出面板里还能设置 position 和 options：position 里有两个命令，“place in background”把模板放到页面背景层，“specify location”可以指定距离左侧和顶部的像素位置来精确放置模板；options 里的多选框默认是勾上的，意思是“只有页面中没有此模块时才置入”，不勾选时如果强制置入，页面里已存在的同模块会被再次插入，产生重复。

最后提醒一下 usage report 功能：右键 master 文件选择使用报告，会列出所有使用了这个模板的页面，双击文件名即可在工作区打开对应页面。这是一个好用但容易被忽略的维护工具，模块改版后想确认影响范围，用它最快。

4.2 wireframe 线框工具：从占位符到动态面板

器具箱里的 wireframe 工具对应着 web 页面里的各种图形元素，有 HTML 基础的人学这部分会非常快。我把 20 个工具的作用和常见使用场景列成一张表，方便你对照：

这里挑几个需要在意的工具展开。placeholder 占位符用来表达页面上那些“现在不处理”或“情况复杂”的区域，画图时先用它占住位置，配合注释文字说明细节，能避免在低保真阶段纠缠具体内容。image map region 图像映射区是专门为图片热区设计的，在一张大图上划出不可见区域，就能给这块区域单独加说明或交互，现实中电商页面的大图 Banner 就是这么处理的。

dynamic panel 动态面板是 Axure 表现交互的核心工具，它的图标本身就说明了结构：多个 state 叠加成一个动态区域，默认显示某一个 state，当用户触发按钮、图片或下拉列表时，可以切换到另一个 state。不同 state 之间的关系类似 Photoshop 的图层，也类似 CSS 里的 layer。操作方式是右键 dynamic panel 新增 state，双击打开单个 state 进行编辑，编辑方式和编辑普通页面一致。比如做一个 Tab 切换，就把每个 Tab 的内容分别画在独立 state 里，再用按钮的点击事件触发 state 切换。

inline frame 对应 HTML 里的 iframe，常用来做后台系统的左右分栏布局，左侧载入导航、右侧载入管理页面。它的缺点是暂时不支持百分比，只能按像素度量，所以画出来的效果和实际浏览器里的表现会有差距，这一点后面避坑章再展开。

菜单工具可以用来画水平或垂直导航，选中菜单项后右键添加子菜单，就能生成带悬浮子菜单的导航结构。整套 wireframe 工具对应着实际页面里的基本元素，画线框图时尽量按标准区分普通文本和链接文本，让设计人员一眼看出哪些是可点击的，这比画得花哨更重要。

4.3 flow 流程工具：画清楚逻辑比画得标准更重要

flow 工具组是为画流程图准备的。和程序工程师沟通时，用口水讲半天不如一张简明流程图；产品经理这时候需要的是理性思维和清晰思路，如果自己思路不清，开发大概率会跟着一起乱。这套工具基本涵盖了流程图、页面框架图和用例图常用的图形：

这里插一段个人观点：Axure 把流程图、框架图、用例图常用的图形都囊括进了 flow 工具，但它并不打算维护一套标准流程图的规范，而是尽量贴近交互设计的工作内容。所以用这些图形时，不必死抠某个图形的通用标准，理解和沟通是第一位的。对于那些大家公认的图形，比如菱形代表判断、圆角矩形代表起止，则遵循共同的准则，这样表达目的能达到。

Axure 里没有提供的标准图形，比如不规则图形、侧面双矩形，你可以自己定义符号标准，就像 PRD 文档里加上名词解释一样。我一般会给团队定一个简单的图例说明，把自定义图形的含义写清楚，挂在项目的第一页，这样任何接手的人都不会误解。

5. 常见问题与避坑：Axure 4.6 里五个高频翻车点

这一章是血泪经验的汇总。下面五条都是实际使用中高频出现的问题，每一条都按“现象→原因→解决”的顺序写，遇到同类情况可以直接对照处理。

5.1 在 sitemap 误删页面，子页面一起消失

现象：想清理一个暂时不用的父页面，点了删除，结果这个父页面下面挂着的七八个子页面全部一起消失了，包括已经画好的线框图。 原因：sitemap 的删除命令设计成“删除所选页面及其子页面”，工具栏和右键菜单的删除操作都是这个逻辑，执行时不会单独提示你要连带删除子页面。 解决：删除任何页面之前，先展开目录确认它下面有没有子分支；不确定是不是还要的内容，先右键复制分支做备份再删，把“复制分支”当作后悔药用；日常画完一个阶段就生成一张流程表看整体结构，减少误操作的几率。

5.2 高版本文件低版本打不开，演示现场翻车

现象：用 4.6 画好的原型发到同事机器上，对方用低版本打开直接报错或一片空白；或者自己用 5.0 beta 编辑过文件，回到 4.6 就打不开了。 原因：Axure 高版本创建并保存的文件，低版本无法查看。这个限制在欢迎界面里有明确提示，但很多人从没注意过。 解决：团队协作前规定统一版本号，所有成员安装同一版本；对外交付时确认接收方使用的版本，必要时让对方升级；用 beta 版本演示完记得把文件转换回团队实际使用的稳定版本再做正式交付。

5.3 inline frame 不支持百分比，iframe 对不齐

现象：用 inline frame 嵌一个后台管理页面，按百分比设置宽度，结果没生效；放到浏览器里预览，宽度和设计稿对不上。 原因：Axure 4.6 的 inline frame 是按像素度量的，不支持百分比设置，这是工具本身的局限，和实际浏览器渲染效果存在差距。 解决：画图时按像素精确设置 iframe 的宽高，不要依赖百分比；在注释里标注清楚这个模块的实际页面宽度；和开发沟通时说明 iframe 在原型里只是示意，实际表现以浏览器为准，避免误解。

5.4 master 被全局同步，局部修改改不动

现象：把页头做成 master，放到多个页面后，想在某个页面里单独微调一下页头高度，结果一改所有页面都跟着变了；改成 place in background 后，元素被锁定在原始位置，完全动不了。 原因：normal 行为的 master 在页面里和原件完全一致，任何修改都会同步到所有实例；place in background 行为还会把位置也锁定。不同行为意味着不同的自由度，用错自然改不动。 解决：需要同一模块在不同页面有差别时，改用 custom widgets 行为，它允许页面里对模块的各部分重新定义说明和功能；只是定位需求就选 place in background，不要总用一个默认行为。

5.5 表格控件加行列费劲，用表格布局直接翻车

现象：在 wireframe 里画一个后台数据表格，加行、加列、调列宽都特别别扭，想排一个复杂布局费了半天还没画对。 原因：table 控件在 Axure 里确实难用，增加行、列，修改行列宽度都不方便，这是工具的一个明显短板。 解决：把表格当数据列表展示用，不要拿它做页面布局；复杂的表格结构可以在 PS 里画好图片再置入 image 占位；或者用矩形加水平线、垂直线拼出框架，再用注释说明每列字段含义，灵活度和可读性都比原生表格控件好。

6. 自定义注释字段与一键出稿：用 F5/F6 把原型变成可交付的文档

Axure 的注释功能是最能体现它“为产品经理而生”这一特点的地方。默认的注释面板里是一堆英文选项，比如 specification、status、benefit，这些字段来自欧美公司的文档习惯，不一定适合你所在团队的沟通方式。更合理的做法是完全无视默认字段，按自己的需求重新定义一套。

具体的操作路径是：在注释与交互面板里选择“自定义字段和视图”，进入字段管理窗口。新增字段时先选择类型，Axure 提供了四种：

比如你要给对象加一个“优先级”说明字段，就选 Selectlist 类型，命名为“优先级”，点击添加时还能编辑选项，每一行代表一个选择项。字段添加后可以对它进行管理，包括删除、重命名、上下移动排序。这里有个细节：Selectlist 类型的字段随时可以重新编辑选项，不需要反复重建字段。

字段建好后，在“自定义视图”里创建一个视图，把常用的字段勾选进去，就形成一套属于自己的注释模板。之后选中页面或任意 widget，在注释面板里按自己的字段填写说明即可。真正让这套工作流高效起来的，是踩过坑后的一个习惯：我刚开始做原型时直接用默认英文选项，生成出来的文档和开发同事的认知对不上一处对不上，返工过两次。从那以后每个项目一开始，我先花十分钟把字段全部改成团队自己的称呼和选项，再开始画原型。

注释写完后，出稿只需要两个快捷键。按 F5 生成 HTML 演示文件，生成的页面里会保留注释入口，点击即可弹出对应元素或页面的说明文字，演示给开发同事看时，他们能自己点开说明查看，不用在旁边一直口头解释。按 F6 生成 Word 版本的说明文档，Axure 会根据每个元素的标签和编号自动生成对应的表格说明文档，字段、优先级、功能说明都在表格里对应好，这份文档可以直接当 PRD 来用。

验证方法也很简单：生成 HTML 后逐页点击，检查动态面板的 state 切换、菜单的悬浮子菜单、热区的点击响应是否生效；生成 Word 后核对表格编号是否连续、字段内容是否完整。如果发现某块交互生成后没有响应，先回到原文件检查这个 widget 是否真的设置了交互事件和注释，而不是修改已生成的 HTML。这套流程走顺之后，从画线框到出交付文档基本能一条龙完成。希望帮到你。

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