企业官网建设流程全解析

很多刚接触原型设计的朋友，第一次打开Axure看到满屏的元件库、属性面板和交互面板，第一反应往往是“这玩意儿比写代码还复杂”。我见过太多人装了软件、看了两小时教程，然后默默关掉，转头继续用PPT画方块。问题不在于Axure难，而在于大部分教程一上来就讲“动态面板的九种状态切换”，把工具当成了目的。实际上，Axure的核心价值只有一个：把脑子里的页面逻辑，用最低成本变成可以点、可以跳转、可以演示的东西。一张图学会Axure，说的不是真的只看一张图，而是把整个工具的使用逻辑压缩成一条清晰的主线——先画什么、再连什么、最后调什么。这篇内容适合三类人：完全没碰过原型工具的产品新人、从其他工具迁移过来的设计师、以及需要快速出高保真演示稿的独立开发者。我会按真实项目里出图的顺序，把Axure从打开到导出的完整链路拆开讲，每一步都告诉你为什么这么做、哪里容易卡住、怎么绕过去。

1. 先搞清楚Axure到底在解决什么问题

1.1 原型工具的本质是“可交互的草图”

很多人把Axure当成设计工具来学，一上来就纠结圆角像素、阴影参数、字体行距，结果三天过去连一个能点击跳转的页面都没做出来。这是方向性错误。Axure的定位从来不是视觉设计，它的核心能力是页面之间的跳转逻辑和元件状态的切换。你可以把它理解成一张会动的流程图：每个页面是一个节点，页面里的按钮是触发器，点击之后跳到哪个节点、触发什么变化，这才是Axure要表达的东西。

我在实际项目里给新人定过一个规矩：第一个Axure文件不许用任何图片素材，全部用矩形和文字拼。目的就是逼着人把注意力放在“这个按钮点了之后发生什么”上面，而不是“这个按钮好不好看”。视觉稿有专门的设计工具去做，Axure的产出物是给开发和需求方看逻辑的，不是看颜值的。想通这一点，学习路径会短很多。

1.2 一张图的主线：页面、元件、交互、预览

所谓“一张图学会”，本质是把Axure的操作压缩成四个环节的闭环。页面是容器，决定信息架构；元件是内容，决定页面上有什么；交互是规则，决定用户操作后发生什么；预览是验证，决定你做的东西能不能跑起来。这四个环节串起来就是一条完整的出图链路，缺一个都出不了可演示的原型。

我习惯在动手之前先在纸上画一个三列的表格：第一列写页面名称，第二列写这个页面上有哪些可点击的东西，第三列写点击之后去哪里。这个表格花十分钟填完，后面在Axure里就是纯执行，不会出现“画到一半不知道下一步干嘛”的情况。这个习惯看起来笨，但比直接在软件里瞎点效率高得多，尤其是页面超过五个之后，没有这张表很容易漏掉跳转关系。

1.3 新手最容易误解的三个概念

第一个误解是动态面板等于高级功能。实际上动态面板就是一个“可以装多个页面状态的盒子”，它的作用是让同一个区域在不同条件下显示不同内容，比如标签页切换、轮播图、弹窗。你不需要把它想得多神秘，就是一个容器，里面放几层东西，通过交互切换显示哪一层。

第二个误解是母版必须用。母版的作用是复用，比如每个页面都有同一个导航栏，做成母版改一处全站生效。但如果你的原型只有三四个页面，用母版反而增加理解成本，直接复制粘贴更省事。工具的功能是解决问题的，不是用来炫技的。

第三个误解是交互越多越专业。我见过一个登录页做了十七个交互，包括输入框获得焦点时边框变色、按钮悬停时阴影加深、密码错误时抖动三下。这些东西在演示的时候确实好看，但开发看了只会问一句“这些效果确定要做吗”。原型的交互应该聚焦在业务流程的验证上，视觉微交互能省则省，除非需求方明确要求看动效。

2. 页面结构怎么搭才不返工

2.1 先定信息架构再开软件

打开Axure第一件事不是拖元件，而是在左侧页面面板里把页面树建出来。这一步相当于盖房子先画房间布局，后面所有工作都挂在这棵树上。我的习惯是按用户操作路径来命名页面，比如“首页-商品列表-商品详情-下单确认-支付结果”，而不是“页面1、页面2、页面3”。命名清晰的好处是后面做交互跳转的时候，下拉菜单里一眼能找到目标页面，不用靠记忆去猜“页面7是哪个”。

页面树的层级不要超过三层。我见过有人把页面按“模块-子模块-功能-状态”分了四层，结果找一个页面要展开五次，效率极低。一般项目两层足够：第一层是大的功能模块，第二层是具体页面。如果某个页面有多个状态，不要新建页面，用动态面板在同一个页面里切换，这样页面树保持干净，演示的时候也不会出现“怎么跳到一个空白页”的尴尬。

2.2 用文件夹分组管理页面

页面超过十个之后，左侧面板会变得很长，滚动找页面很费劲。这时候用文件夹分组就很有必要。右键页面面板空白处新建文件夹，把同一流程的页面拖进去，文件夹可以折叠。比如把所有跟“个人中心”相关的页面放进一个文件夹，演示的时候展开这一个文件夹就够了，其他模块折叠起来不干扰视线。

这里有个细节：文件夹的命名最好跟页面命名用同一套前缀，比如“01-首页”“02-商品”“03-订单”，这样排序稳定，不会因为后来加了页面导致顺序乱掉。Axure默认按创建顺序排列，但你可以手动拖动调整，调整完之后记得检查一遍交互跳转有没有指错，因为拖动页面不会自动更新已经做好的交互链接。

2.3 页面尺寸和栅格的前期设定

新建页面时Axure会问你要不要用自适应视图，新手建议直接选“默认”，不要碰自适应。自适应视图是给需要同时适配手机和桌面的项目用的，配置起来相当绕，前期完全用不上。页面宽度按目标设备来定：做移动端原型就设375像素宽，做桌面端就设1440像素宽，这个数值跟主流设计稿保持一致，后面跟设计对接的时候不会出现比例对不上的问题。

栅格辅助线建议打开，列数设12列，间距设20像素。栅格的作用是让元件对齐有依据，不用靠肉眼估。我见过不少新手原型里按钮歪歪扭扭，不是审美问题，是没开栅格导致每次拖元件的位置都差几个像素。打开栅格之后，拖动元件会自动吸附到列线上，对齐这件事就变成自动的了。这个设置花三十秒，后面省几小时的微调时间。

3. 元件库的取舍：哪些必须会，哪些可以扔

3.1 高频元件其实只有六种

Axure自带元件库有几十个元件，但真实项目里高频使用的就那么几个：矩形（当按钮、当卡片、当占位图）、文本标签（写文字）、图片（放素材）、输入框（表单）、下拉列表（选择器）、动态面板（状态切换）。把这六个用熟，百分之九十的原型都能画出来。其他元件比如树形菜单、表格、内联框架，属于特定场景才用，前期不用花时间研究。

我的建议是新建一个自己的元件库文件，把这六个高频元件各拖一个进去，调好常用的样式（比如按钮的圆角、主色、文字大小），存成“.rplib”格式。以后每个新项目打开就直接导入这个库，不用每次从头调样式。这个动作一次投入，长期受益，尤其是做系列项目的时候，视觉一致性有保障。

3.2 矩形元件的隐藏用法

矩形看起来最简单，但它是Axure里最能打的元件。除了当按钮和卡片，它还有几个容易被忽略的用法。第一，矩形可以设置圆角半径，做头像占位、标签、徽章都靠它。第二，矩形可以填充图片，右键“导入图片”就能把一张图塞进矩形里，这样图片的尺寸和圆角控制跟矩形完全一致，比直接拖图片元件好管理。第三，矩形可以当热区，设置成透明无边框，盖在复杂图形上面接收点击事件，做可点击的图标时特别有用。

还有一个技巧：矩形的“形状”属性可以切换成圆形、三角形、箭头等预设形状，做简单的图标不需要导入素材。比如做一个返回按钮，拖一个矩形，形状选左箭头，填充设成透明，边框设成灰色，三十秒搞定一个能用的图标。这种土办法在快速出稿阶段非常实用，不用等设计师出图。

3.3 动态面板的正确打开方式

动态面板是Axure里劝退率最高的元件，但它的逻辑其实很朴素：就是一个可以装多层内容的盒子，同一时间只显示其中一层。创建动态面板有两种方式：先拖一个动态面板到画布上再往里加状态，或者选中几个已有元件右键“转换为动态面板”。后者更常用，因为你通常是先画了内容才发现需要切换状态。

状态切换靠交互实现。选中触发元件（比如一个标签按钮），新建交互“单击时-设置面板状态”，选择目标动态面板和要切换到的状态。这里有个关键细节：切换动画建议选“逐渐”或“无”，时长设200毫秒左右。不要选“滑动”之类的花哨动画，演示的时候会显得很拖沓。另外，如果做的是标签页切换，记得给每个标签按钮都配上对应的交互，并且把“选中”状态也做出来，否则用户不知道当前在哪个标签上。

4. 交互逻辑的搭建顺序与常见断点

4.1 从主流程开始，不要从细节开始

搭交互的顺序应该是：先把主流程的页面跳转全部连通，再回头补细节交互。什么叫主流程？就是用户从进入产品到完成核心任务的那条路径。比如电商原型，主流程是“首页-搜索-列表-详情-加购-下单-支付成功”，先把这条线上的按钮跳转全部做通，确保点一遍能走到底，然后再去补“收藏”“分享”“筛选”这些分支功能。

这个顺序的好处是，主流程跑通之后你就有了一份可以演示的完整原型，哪怕细节还没做，需求方也能看懂产品长什么样。如果反过来先抠细节，很可能做了半天发现主流程还断着，演示的时候点两下就卡住了，非常尴尬。我在项目里定过一个硬性节点：主流程没连通之前，不许做任何悬停效果和动画。

4.2 页面跳转交互的配置细节

页面跳转是最基础的交互，但有几个配置项容易被忽略。选中按钮，新建交互“单击时-打开链接”，选择目标页面。这里注意“当前窗口”和“新窗口”的区别：演示用的原型一律选当前窗口，选新窗口会在浏览器里开一堆标签页，演示时手忙脚乱。另外“打开链接”下面有个“动画”选项，建议设成“无”，页面切换加动画会让演示节奏变慢，而且有些浏览器对动画的支持不稳定，可能出现闪屏。

还有一个实用技巧：给每个页面的左上角放一个统一的“返回”按钮，交互设成“打开链接-上一页”。这样演示的时候不管走到哪一层都能退回去，不用为每个页面单独配返回逻辑。这个按钮做成母版更省事，改一次全站生效。返回按钮的位置固定在左上角，尺寸小一点，不要抢主内容的视觉焦点。

4.3 条件判断的入门用法

条件判断听起来高级，但入门用法很简单：根据某个元件的状态决定走哪条交互分支。最常见的场景是表单校验，比如登录页，点击登录按钮时判断用户名输入框是否为空，为空就显示错误提示，不为空就跳转到首页。配置方式是在交互里添加“条件”，设置“元件文字-输入框-不等于-空”，满足条件走跳转，不满足走提示。

这里有个坑：Axure的条件判断是基于元件当前状态的，如果你在演示过程中手动改了输入框的内容，条件判断会实时生效，但如果你在编辑模式下预览，输入框默认是空的，所以第一次点登录一定是走错误分支。这不是bug，是正常逻辑。测试的时候记得先输入内容再点按钮，否则会误以为跳转没配好。另外错误提示建议用动态面板做，默认隐藏，触发时显示，比弹窗温和，演示时也不会打断节奏。

5. 预览与导出的实战要点

5.1 本地预览和生成HTML的区别

Axure的预览有两种方式：按F5在本地浏览器预览，或者“发布-生成HTML文件”导出一个文件夹。本地预览适合自己调试，改完立刻能看到效果，不用等生成。生成HTML适合发给别人看，导出的文件夹里有完整的页面和资源，对方双击index.html就能在浏览器里打开，不需要装Axure。

这里有个实际经验：发给需求方或开发的时候，一定要生成HTML再打包成压缩包，不要直接发“.rp”源文件。源文件对方打不开，而且你的编辑痕迹、草稿页面都会暴露。生成HTML的时候在“发布”设置里勾选“包含页面说明”和“包含交互说明”，这样对方在看原型的时候能同时看到你写的注释，减少来回沟通的成本。

5.2 演示前的检查清单

正式演示之前，我有一套固定的检查动作，五分钟能过一遍，能避免百分之八十的现场翻车。第一，把所有页面的主流程点一遍，确认没有断链。第二，检查所有输入框的默认提示文字有没有写，空着输入框演示时很尴尬。第三，确认所有动态面板的默认状态是对的，不要一打开就显示错误的那一层。第四，把浏览器缩放调到百分之百，Axure原型在非百分之百缩放下点击热区可能偏移。第五，关掉浏览器里其他无关标签页，演示时切换窗口容易点错。

还有一个容易被忽略的点：演示用的电脑分辨率要跟原型页面宽度匹配。如果你的原型是1440像素宽，演示电脑是1366像素宽的屏幕，页面会出现横向滚动条，演示时得来回拖，很难看。提前确认演示设备的屏幕宽度，或者把原型页面宽度设成1280像素留出余量，这个细节能省掉现场调整的麻烦。

5.3 导出后的文件组织

生成HTML之后，文件夹里会有一堆文件：HTML页面、资源文件夹、数据文件夹。发给别人的时候整个文件夹打包，不要只挑几个文件发，否则打开会缺样式或缺交互。压缩包命名建议带上版本号和日期，比如“产品原型-v1.2-20240615”，对方收到之后能一眼看出是不是最新版。

如果原型要放到共享空间给团队看，注意Axure生成的HTML是纯静态的，不需要服务器环境，但需要对方能访问到那些文件。常见的做法是打包发邮件或者放共享盘，让对方下载后本地打开。这里提醒一句：不要试图把HTML文件单独拎出来发，页面之间的跳转依赖相对路径，单独一个文件打开会丢失所有跳转和样式。

6. 那些教程里不写的实操心得

6.1 元件命名比样式更重要

新手花大量时间调样式，老手花大量时间命名元件。原因很简单：当一个页面上有三十个元件的时候，交互面板里的元件列表如果全是“矩形1、矩形2、矩形3”，你根本找不到要操作的那个。给元件起名的成本是几秒钟，省下的排查时间是几十分钟。我的命名规则是“类型-用途”，比如“btn-登录”“input-用户名”“panel-错误提示”，一眼能看出是什么、干什么用。

批量命名有个技巧：选中多个同类元件，右键“批量命名”，可以按“前缀+序号”自动命名。比如选中五个按钮，批量命名成“btn-”，会自动变成“btn-1”到“btn-5”。虽然序号命名不算完美，但比默认的“矩形”强得多，至少能按类型筛选。做完一个页面之后花两分钟过一遍命名，后面改交互的时候会感谢自己。

6.2 善用“隐藏”和“禁用”状态

Axure的元件有“显示/隐藏”和“启用/禁用”两组状态，很多人只用显示隐藏，忽略了禁用状态。禁用状态在表单场景里特别有用：比如提交按钮在必填项没填完之前应该是灰的、点不动的，这就是禁用状态。配置方式是在页面载入时把按钮设为禁用，当输入框内容变化时再启用。虽然Axure做这种联动比较麻烦，但演示的时候能体现出完整的表单逻辑，比一个永远能点的按钮专业得多。

隐藏状态则要注意层级问题。如果一个元件被隐藏了，但它上面盖着另一个元件，点击事件可能被上层元件拦截。排查方法是选中上层元件，看它的位置和大小是否覆盖了隐藏元件的区域。遇到“点了没反应”的情况，先检查是不是有透明元件盖在上面。这个坑我踩过不止一次，后来养成了习惯：每加一个透明热区，就在旁边放一个明显的标记，做完再删掉。

6.3 版本备份的土办法

Axure没有自动保存历史版本的功能，改崩了只能重来。我的土办法是每天收工前“另存为”一个带日期的副本，比如“项目名-0615.rp”，原文件继续改。这样万一第二天改坏了，还能退回前一天的版本。文件多几个不占多少空间，但救命的时候是真救命。另外重大改动之前，比如要批量替换母版或者重构页面树，一定先存副本再动手。

还有一个习惯：在文件里建一个“废弃”文件夹，把删掉的页面拖进去而不是直接删除。有时候删完过两天又想要回来，从废弃文件夹拖出来就行。这个文件夹在生成HTML的时候不会被包含进去，不影响交付物。这些做法看起来原始，但比依赖任何自动机制都可靠，尤其是项目周期长、改动频繁的时候。

6.4 什么时候该停止用Axure

最后说一个反直觉的观点：Axure不是所有场景都适用。如果只是画几个静态页面给开发看布局，用任何画图工具都比Axure快。如果交互逻辑复杂到需要状态机，直接写代码或者用专门的逻辑工具更合适。Axure的最佳适用区间是中等复杂度的可交互原型：页面数量在十个到三十个之间，有明确的跳转流程和状态切换，需要给非技术人员演示。超出这个区间，要么太简单不值得用Axure，要么太复杂Axure表达不清楚。

我在实际项目里判断的标准是：如果这个原型的主要目的是“让人看懂流程”，用Axure；如果主要目的是“让人看懂视觉”，用设计工具；如果主要目的是“验证技术可行性”，直接写代码。工具选对了，效率翻倍；工具选错了，再熟练也是白费劲。Axure学到一个能跑通主流程、能配条件判断、能导出演示的程度就够了，剩下的高级功能用到再查，不用提前背。