企业官网建设流程全解析

简介：一份围绕Axure RP Pro原型设计展开的实战教程汇编，适合UI/UX设计师、交互设计师和软件开发初学者。资源以网页与App原型制作的真实需求为主线，从新建项目、拖拽矩形/图像/文本输入框/按钮等组件开始，逐步介绍编辑位置与大小、对齐排版、组件标签命名等基础操作；随后深入交互逻辑，讲解如何为点击、悬停等事件设置跳转与动态效果，并结合动态面板模拟页面滚动和模态窗口。教程以Facebook未登录首页为贯穿案例，分步拆解头部底色、Logo、登录框、快速注册、底部信息等模块的设计过程，穿插大量作者总结的软件技巧与快捷键提示，例如复制组件、对齐基准、中文输入注意事项等。资源为单个PDF文件，包体约5.57MB，图文混排便于随时查阅。目前已有484人学习下载，学完后可系统掌握Axure核心操作与交互原型搭建方法，有效提升设计效率。

1. Axure 教程 PDF：把 SNS 首页原型从组件拖拽到发布一次跑通的实操手册

做原型这件事，难的不是拖一个矩形、放一个输入框，而是整套交互文档怎么编排，发布出去还不能丢细节。我第一次认真学 Axure，靠的就是一份 PDF 教程，它直接拿 Facebook 的未登录首页做案例，从页面头部往下，把 Logo、登录框、网站介绍、快速注册、底部信息一层层搭起来，最后还补了动态面板、菜单和发布方式。这份《Axure教程[汇编].pdf》适合两类人：一类是刚摸 Axure RP Pro、不知道从哪下手的新手；另一类是已经会拖组件、但总在交互和发布上翻车的熟手。它不讲大道理，全是分步操作、参数和踩坑提示，读起来比官方文档有人情味得多。

2. 组件选型与像素级布局：从矩形到登录框的对齐逻辑

2.1 先搭骨架：矩形、坐标与 Ctrl+L 精确编辑

Axure 里所有页面最后都会落到组件上，而组件的位置和大小是第一批需要统一的规则。教程把「Facebook 未登录首页」的头部拉成一个 850×80 的深蓝矩形，放在工作区左上方，作为整个页面视觉的起点。这个尺寸不是拍脑袋，是参考了当时页面的头部宽度和导航高度。你在自己项目里完全可以改成 750、960 或者 1280，关键是先定一个标准，后续所有组件都对齐这个坐标体系。

操作很简单。从 Widgets 面板拖一个 Rectangle 出来，工作区顶部的信息栏会实时显示它的坐标和宽高，单位是 px。想要精确，右键选择“Edit Location and Size”，或者直接按 Ctrl+L，打开编辑框输入数值。这一步比用鼠标拖到眼睛准要高效得多，尤其是做多页共用 Header 的时候，差一两个像素会让后续视觉返工。我自己的习惯是：所有头部组件都先在纸上列好数值，再一次性填进编辑框，避免反复微调。

设置完矩形后，边框设为无色、背景深蓝，这个底色就是头部的视觉基底。这里有一个常被忽略的细节：矩形默认会带一像素描边，如果不关掉，最后生成的 HTML 在白色背景下会有一条难看的灰线。很多看似玄学的“线不对齐”问题，其实就是这个小参数在捣乱。

选型理由：用矩形而不是图片做头部底色，因为矩形可以通过公共栏直接改色、改尺寸，后面如果调整整体配色，只需选中组件在公共栏换色，不必重新导图。这在原型阶段能省很多事。你在“公共栏”里还能设置字体的颜色、大小、边框样式，这些和 CSS 的概念是对应的，理解了这一层，后面做主题切换也会顺手很多。

2.2 Logo 与图片插入：预设尺寸和原尺寸选哪个

头部底色放好后，下一步是 Logo。从 Widgets 面板拖一个 Image 组件到工作区，双击它选择图片文件。这里有个几乎所有新手都会遇到的提示：工作区里预设的图片框和图片原尺寸不一致，Axure 会弹窗问你要不要按原尺寸插入。

选“是”会保留图片原始宽高比和像素尺寸，显示质量最好；选“否”则会按你在工作区画出来的那个框进行拉伸。我的建议是，原型阶段只要不是刻意做占位，优先选“是”，因为拉伸后的图片会给评审一个错误的信息——“这里好像有张糊图”，容易被误以为资源没切好。占位图则可以选“否”，比如网站还没定 Logo 图案时，直接用默认 image 占位就行，布局不会乱。

Logo 放好后，右侧的 Annotations & Interactions 面板有 Label（标签）栏，给组件命名“Logo”。教程里特别提到，规范命名是个好习惯。这个习惯越早养成越好。如果你只做一个页面，不改名看似没有影响；可一旦组件数量超过 20 个，或者后面要做动态面板、交互事件，你会在事件面板里对着一堆“Rectangle3”“Image4”发懵。我后来带人做原型，第一条要求就是：拖出来先改名，再谈样式。

2.3 登录框与对齐基准：先选谁，谁就是对齐的中心

登录框是首屏交互的核心区域。教程的步骤很直白：拖一个 Text Field，设置字体大小、颜色，输入“电子邮件”；按住 Ctrl 拖拽复制出第二个文本框，把内容改为“密码”；再拖一个 Button，写上“登录”，放到两个文本框右边。

接下来就是对齐。很多新手在这里翻车，是因为用鼠标反复微调还觉得差一点。Axure 的多选对齐有一个基准规则：以第一个被选中的组件为基准，其他组件向它对齐。比如先点一下“登录”按钮，然后按住 Ctrl 依次选中“密码”和“电子邮件”，再在公共栏点向下对齐，三个组件就都以“登录”按钮的下边线为基准对齐了。如果你先选的是“密码”，对齐之后按钮的位置会跟着变，甚至跑到你不想要的位置。

由于对齐基准是第一个选中的对象，习惯上应该先把那个“锚点”选出来，再选其它跟随组件。还要注意，拖选时可能误框住旁边的内容，最稳妥的办法是把附近不参与对齐的组件先锁定，就像在 PS 里把图层锁住一样。

这里还有一个 Axure 的自动吸附行为：复选框和文本面板如果拉长，它们的边线会自动吸附到下面文本框的边线，之后再对文字内容做向右对齐即可。这个特性在排表单时很好用，不需要手动分别对齐上下两组组件，能省不少事。记住：在这个案例里，先拉长复选框和“忘记密码？”文本到与登录框等宽，边线自动吸附，然后再统一文字右对齐，整体效果就出来了。

2.4 下拉菜单与默认项：Droplist 的 Edit Options 用法

快速注册表单里会出现下拉菜单，比如城市、年龄段。Axure 的 Droplist 对应新版里的“下拉列表”控件。双击下拉菜单组件，打开 Edit Options 窗口，可以在里面添加、删除、移动选项。每个选项前面有个复选框，勾选它表示该选项是默认选中项“selected”。

这一步很多人会漏掉，导致发布后预览发现下拉框第一项总是空白。记住：如果不勾选任何选项，Axure 会默认把第一项作为选中项；但如果你把第一项作为“请选择”占位文案，展示效果就不对。正确做法是勾选一个真正的默认值，比如“北京”或者“18-25岁”。另外，如果选项需要排序，直接用窗口右侧的上移、下移按钮，比删掉重加快得多。

到这里，首页头部的布局逻辑已经完整。不要觉得这些基础操作太琐碎，后面所有交互事件都要建立在组件命名明确、位置精确的前提上。换句话说，布局不是视觉问题，是数据问题。

3. 交互与动态面板：关键字匹配实例的搭建流程

3.1 动态面板的三个状态：空状态、matching1、matching2

动态面板是 Axure 里最重要也最容易绕晕的组件。它本质上是一组状态的容器，同一块区域在不同状态下显示不同内容，配合事件可以做出“点击切换”“输入触发”“滚动固定”等效果。教程中的关键字匹配实例，就是一个小型动态面板应用。

先搭一个搜索区：Text Panel 放搜索提示，Text Field 用来输入姓名，Button 作为触发按钮。然后在文本输入框下方拖出一个 Dynamic Panel，把它拉伸出一个“查询建议”区域，并在 Label 栏分别命名为“keyword”和“matching”。命名这一步直接决定后面写事件时能不能一眼认出对象。不要偷懒，否则等着被一堆 Rectangle、Dynamic Panel 默认名逼疯。

双击 matching，进入状态编辑界面，添加三个 State：

这里有一个细节：List Box 的 Allow multiple 多选属性不要勾选。这个选项默认关闭，但如果你在属性面板里手误开了它，预览时你会发现选项前面多出复选框，完全不像搜索建议列表了。

两个 List Box 分别命名为 matchingList1 和 matchingList2。动态面板的每个状态都可以有自己的内部命名，这样后续交互选中面板状态时不会搞混。用 List Box 而不是 Text Panel，深层原因是它更像一张“候选项列表”，每个选项独占一行，用户点击某个选项时还可以继续触发事件；只做静态展示的话 Text Panel 也可以，但交互丰富度会差很多。

另外，编辑状态时你会看到一圈蓝色虚线，这是该动态面板在页面中被预设的可视区域。凡是超出虚线的部分，预览时会被裁掉。如果你发现自己做好的“查询建议”列表发布后看不全，十有八九是这里的问题，而不是内容丢失。

3.2 添加交互事件：OnKeyUp 触发面板状态切换

表单的交互事件是关键字匹配的核心。流程是：选中 keyword 文本框，在右侧 Interactions 面板点击 Add case...，添加 OnKeyUp 事件。然后为该事件设置动作——把 matching 动态面板设置为 matching1 状态。这样当用户输入“李”后松开按键，下方查询建议区就会切换到已经准备好的“李姓好友列表”。

OnKeyUp 也就是“键入”事件，触发点在键盘按键松开时。相比 OnChange，它在 Axure 里更适合模拟“边输入边出结果”的联想效果。你还可以加入条件分支：

这样更接近真实的搜索建议。不过要注意的是，中文输入法下的 OnKeyUp 有若干兼容问题，老教程也提醒过：在旧版 RP Pro 5.0 中，表单组件的中文输入经常出问题，当时的临时办法是在其它地方输好内容再复制粘贴。这个坑我们会在下一章展开。

扩展说明：动态面板的状态切换，除了 Set Panel State，还可以搭配 OnFocus、OnLostFocus 事件。比如输入框聚焦时显示建议区域，输入框失焦时隐藏建议区域，或者点击页面空白处收起面板。这些都符合“原型要可点击、可演示”的目标。事件面板里还能选 OnClick 点击、OnFocus 聚焦、OnLostFocus 失去聚焦，它们和 HTML 里的事件名几乎一一对应，做过前端的同学会觉得很熟悉。

3.3 多级菜单与 Quick Link：导航不是静态摆设

在网站中，菜单往往是最先被点到的交互入口。Axure 中制作多级菜单用 Menu Horizontal / Menu Vertical 组件，对应水平菜单和垂直菜单。默认每个菜单有 3 个一级选项，通过右击某个选项可以插入同级菜单项，或增加下一级子菜单。子菜单显示的起始位置是上级菜单的左边线，并且不能超过左边线，这个约束在做右侧展开菜单时要特别注意。

这里有两个值得记录的规律：

1. Tab 键不会增加新菜单项，它只是在菜单项之间移动焦点。想加菜单项必须右键操作。
2. 菜单宽度是所有一级菜单选项宽度之和，不是整体框定的。新增菜单项会继承之前操作的菜单项宽度；修改任一个菜单项的宽度，整条菜单都会跟着变。而当你直接拉长整个菜单时，改变宽度的是最后一个菜单项。所以最稳妥的做法是逐个编辑菜单项宽度，而不是拖动整个菜单。

悬停效果通过右键菜单中的 Edit Rollover Style 设置，也就是翻转样式。Apply to 有三个粒度选项：只应用到当前菜单项、应用到同级菜单、应用到当前菜单及所有子菜单。加完样式后，菜单项左上角会出现一个黑白小框，鼠标移到上面可以预览悬停效果。这个预览功能很多人不知道，常以为自己没设置成功。

链接方面，选中菜单项后在 Interactions 面板选择 Quick Link，Link Properties 里可以选择站点地图中的某个页面，也可以是外部 URL、重新加载当前页、返回前页。Quick Link 名称虽然带 Quick，但它完全够用来撑住原型演示时的页面跳转。对大多数内部工具原型来说，有这些就足够做一轮用户测试了。

4. 避坑与常见问题：RP 5.0 时代的血泪经验，今天仍适用

任何一个原型工具都有几个反直觉的行为，Axure 也不例外。教程里的 Tips 分散在操作步骤中，但它们其实非常值得单独拎出来。这一章我把最容易让人卡住的几个坑集中整理成现象、原因、解决三件套，你在复现案例时碰到类似情况可以直接对照。

4.1 表单中文输入失效：在输入框里打不出中文

现象：在 Text Field、Button 等表单组件中直接用中文输入法打字，有时无响应，有时输入内容直接消失。 原因：旧版 RP Pro 5.0 对中文输入法支持不佳，尤其在某些系统和输入法组合下，组件键盘事件和输入法状态冲突。 解决：在其他文本编辑器里先输好内容，再复制粘贴到 Axure 组件中。这是教程给出的最省事方案。新版本（RP 9/10/11）里这个现象已经大幅减少，但如果你还在用老版本做维护，遇到时不要怀疑操作，先复制粘贴解决。不要浪费时间研究输入法设置，原型的重点是结构，不是打字手感。

4.2 对齐基准认错人：为什么坐标明明改了还是歪

现象：多选登录框三个组件进行向下对齐，结果所有组件都对齐到“密码”文本框而不是“登录”按钮，整个登录区整体下移。 原因：Axure 的对齐以第一个被选中的组件为基准，其他组件都向它看齐。很多人用鼠标框选，第一个选中对象其实是随机命中的，于是基准就飘了。 解决：先明确你想保留位置的那个组件，再按住 Ctrl 逐个加选其它组件；顺序就是你选择组件的顺序。做对齐时先单选基准组件，再按住 Ctrl 点其它组件。这个规则在整个 Axure 生命周期里都没变过，记住它，比别人反复取消重做要快得多。

4.3 动态面板内容被截断：蓝色虚线不是装饰

现象：在 matching 动态面板里做了三个状态的查询建议，预览时发现第二个状态中选项列表只显示了一半，滚动也无效。 原因：动态面板调用时预设的可视区域就是那条蓝色虚线。状态内容如果超出虚线范围，超出的部分在页面预览中会被裁掉，而且不会自动出现滚动条。 解决：编辑动态面板状态时，把内容宽度控制在虚线框内，或直接拉大虚线框大小。如果希望内容有滚动效果，需要给动态面板设置自动滚动条，而不是继续堆内容。后来我做下拉类组件，都会专门留一个状态检查虚线范围，这个动作几乎成了肌肉记忆。

4.4 菜单宽度越改越乱：为什么拖了整个菜单还是窄的

现象：想拉长水平菜单来撑满页面，结果整条菜单里只有一个菜单项变宽，其他项都不动。 原因：Axure 的菜单宽度由各一级菜单项宽度累加决定，不存在“整体宽度”这一独立属性。直接拉整个菜单时，改变的是最后一个菜单项的宽度。 解决：需要哪个菜单项变宽，就单独选中它改宽度。如果需要所有项平均，就选中全部菜单项统一设置宽度。新增菜单项会继承之前被操作项的宽度，所以新增后再统一检查一遍。这个坑在教程里写得很直白，但我当时还是翻了车，因为总习惯性把菜单当普通矩形去拖。

4.5 组件标签不命名：Interactions 面板里全是 Rectangle3

现象：想给 keyword 文本框添加 OnKeyUp 事件，结果在下拉列表里同时出现三个 Text Field，根本无法确定哪个是输入框。 原因：组件拖出来后没有在 Label 栏目里设置命名，Axure 默认按类型和序号命名，时间一长自己都分不清。 解决：每放一个组件就顺手在 Label 栏输入有意义的名称，比如“keyword”“matching”“matchingList1”。教程里强调规范命名是个好习惯，真不是套话。动态面板、菜单、按钮，一旦进入交互设计阶段，命名就是你的代码变量名，命名混乱的后果比写错代码还致命。

5. 发布与通用模块：让原型从 .rp 变成 HTML 和 Word

5.1 Masters 通用模块：footer 抽出来，多页共用

很多网站页脚在多个页面是通用的，教程里的首页底部也适合抽成公共模块。在 Axure 的 Masters 面板中新增一个模块，命名为 footer，双击进入编辑状态，把 Home 页 footer 的内容剪贴进去。为了让它在页面中能准确定位，可以给 footer 也加一个底色框，再把 footer 模块拖回 Home 页相应位置。这样后续只需修改 Master 本身，所有引用它的页面会一起更新，不用一页一页去改。这也是 Axure 里做得最早、也最实用的“组件复用”方案。

5.2 六种发布方式：HTML、Word、CSV 怎么选

Axure 的 .rp 源文件只有 Axure 能打开，交付给评审就得发布。教程列出至少六种方式：File 菜单的 Print 打印、Image 图像导出，以及 Generate 菜单里的 HTML、Word（2000/2007）、CSV，还能通过 Generator Configurations 增加更多类型。日常用的主要是 HTML 和 Word：HTML 适合交互演示，菜单能点、动态面板能切；Word 适合写进需求文档，方便上下游同事批注。

发布前有个习惯值得养成：先在本机预览一遍 HTML，把动态面板的每个状态点开，把菜单悬停效果过一遍，再发给别人。原型里看着正常的对齐，经过不同屏幕缩放可能暴露出窗口宽度适配问题。我最早学 Axure 时最烦的不是做不出来的交互，而是做完了发现蓝色虚线裁掉一半内容、发布出去链接打不开。后来我每次发布前都强制走一遍这个流程：重新检查组件命名，预览动态面板的每一个状态，再把 HTML 发到测试环境点一遍关键路径。这套办法帮我躲过了很多次评审时的尴尬。希望帮到你。

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