企业官网建设流程全解析

简介：这套Axure模板精选合集共收纳72套高保真APP原型，适合产品经理、交互设计师和UI设计师在项目早期快速验证产品概念。模板覆盖移动应用、网页端及后台管理等多类场景，整体采用中高保真视觉风格，包含颜色、字体、图标等细节，使原型在评审与用户测试中更接近最终成品。资源包共1431个文件，核心为88个rp源文件，兼容Axure RP 7/8/9，可打开编辑；另有679个png、311个jpg、65个gif等图像素材，以及104个js、63个html、42个css等辅助演示文件，压缩包整体441.78MB。目前已吸引432人学习查看，适合需要快速搭建产品原型的团队。模板整理自2022年，并非简单素材堆叠，而是附带页面流程与交互逻辑，设计师可按业务需求调整导航、布局和视觉细节，有效缩短从需求到可测试原型的产出周期。

1. 为什么 72 套 Axure 模板源文件值得下载：高保真 APP 原型不只是把线框图涂上颜色

很多产品经理第一次接触高保真原型时，都以为不过是用 Axure 把线框灰块换成带色的圆角矩形。真做起来才发现，卡片阴影、列表间距、空状态、键盘弹起这类细节会耗掉整个下午。这套 72 套高保真 APP 原型模板源文件的价值，不在“画得好看”，而在于把常用功能模块做成了可以直接改的成品：登录注册、首页信息流、扫码支付、订单列表、个人中心，全是可编辑的 Axure 源文件，不是截图。你还在研究怎么把文本框和按钮对齐时，别人已经改完文案、换好配色、截几张预览图发给研发了。适合产品经理、交互设计新手以及需要快速出高保真提案的人，拿到手不是用来收藏，而是第一周就要产出能演示的原型。

2. 先看懂这套模板的构成：RP 源文件、元件库与母版的加载逻辑

2.1 模板文件怎么装：Axure RP 9 与 RP 10 的版本匹配

拿到压缩包后先解压。这套模板里一般是按行业或场景分目录，每个目录下放一个或多个.rp源文件。Axure 的源文件后缀只有一种，但版本兼容并不是双向友好的。以我自己的使用习惯，机器上装的是 RP9，就用 RP9 打开；装 RP10，打开 rp9 文件时会弹一次“版本升级”提示，点确定就转成 RP10 工程。如果双击文件没反应，先打开 Axure，再用“文件 → 打开”去选文件，不要直接把文件拖进已经打开的 Axure 窗口——旧版处理拖入文件的方式并不智能，轻则打开失败，重则覆盖你当前未保存的工作，这是很多新手第一次“翻车”的来源。

这里还要分清.rp和.rplib。.rp是完整原型工程，包含页面树、母版、全局变量和全部组件；.rplib是元件库，只能通过“载入元件库”加载，在元件库面板里拖出来用，不能像工程文件那样直接双击打开页面。这套模板里如果某些目录带.rplib，那一般是按钮、弹窗、导航这类高频元件，由作者单独抽出来做了库。两类文件混着用时，最典型的问题就是你明明改好了页面里的按钮，结果重新生成 HTML 后按钮还是老样子——因为页面里的按钮是从元件库拖出来的引用，你改的只是实例，源头还在库里没改。

版本匹配这件事，我从血泪经验里总结出两条硬规矩：第一，模板不要边看边改原件，先复制一份改名“工作版”；第二，用 RP10 打开并保存后，工程会转成新版本格式，如果你的同事还在用 RP9，直接丢工程文件过去他大概率打不开。遇到协作场景，我一般会把关键页面导出一份 HTML 预览发给对方，而不是让所有人都跟着升级工具。这套模板里绝大多数内容是 RP9 时期建的，用 RP10 打开体验更稳，但不要以为“版本越高越兼容”。

2.2 从业务场景倒推：72 套模板里先挑哪一套

模板再多，也是按业务分层放的。我拆这类资源时，发现覆盖比较全的通常是工具、社交、电商、生活服务、教育、金融这些常见赛道。盲选最容易踩坑。正确做法是先给项目定性：页面密度高不高、需不需要信息流、有没有地图或支付模块。比如你做后台管理类 APP，就别选那份走颜值路线的年轻化电商模板——后台要求信息密度大、列表可扫读，选结构板正的工具类模板，改起来反而是最快的。

另一种挑法是直接过页面清单。解压后先不看视觉，把每个.rp文件的页面树快速翻一遍，哪个包含你必须有、但自己画很费劲的页面，就优先开它。比如做外卖或社区团购，最怕画“门店审核进度”这种状态页；做招聘，怕画“职位卡片流”和“筛选弹窗”。模板里若有现成的，哪怕整体视觉风格不完全对，你也已经拿到了最难的骨架，剩下只是换肤。

还有一个常见误用：以为模板选得越接近自己的产品越好，于是反复换模板，最后每个项目都停留在“看了三天”的阶段。我的建议是，先定一套主模板把主流程跑通，跑通再优化视觉。高保真原型的第一目标是让开发理解数据怎么流转，而不是让老板觉得好看。你先在流程上确认能闭环，再回头换视觉，效率比反复对比模板高得多。

2.3 母版与样式系统：模板为什么能保持“高保真”

看到模板里一个按钮改了，几十个页面跟着变，不要觉得是玄学，Axure 的母版（Master）就是干这个的。这套模板的很多导航栏、底部 Tab、弹窗都做成了母版，双击母版页编辑一次，所有引用它的页面自动更新。这也是模板能维持高保真的关键：视觉元素只维护一份，不会被各个页面里的复制文件改散。

颜色和字体则是通过“样式”面板管理的。RP9 之后支持把颜色存为样式，模板里常用的主色、辅助色、阴影色都在样式下拉里带着名字，比如Primary、Text-Sub。换主题色时，优先改这些带名字的样式，而不是逐个选中圆形重新取色，否则工作量会放大几十倍。如果你发现模板里某个颜色改了三处，其他地方还是原色，那基本可以断定那个位置的颜色不是走样式，而是手工选的，属于从零画容易踩的坑。

字体也是一样。Axure 的“样式”里可以同时定义字体、字号、行高，模板里文本链路（标题、正文、说明）一般是通过文本样式串起来的。我接手任何模板做的第一件事，不是急着改内容，而是把所有样式名过一遍，有用的保留、不用的删除。这样后期全局换字体时，只需要改样式面板，不需要在几十个页面里逐个点。

2.4 .rp 文件内部结构：用解压命令看模板的资源组织方式

如果你好奇模板里的图片、图标存在哪里，可以用任何支持 zip 解压的工具打开.rp文件，里面是 Axure 自己的内部目录结构。.rp本质上是一个压缩包，内部有Document.xml存储页面和组件的数据，图片、字体等资源则按 id 命名放在资源目录下。理解这个结构后，你可以大致判断某个页面挂在哪个母版下，甚至能在不开 Axure 的情况下统计某个文案在哪些地方出现。

我偶尔会用一个相对“粗暴”的办法：把整个.rp文件解压，用 grep 在Document.xml里搜某个文案，用来确认这套模板里到底有没有这个模块。不过必须提醒，这不是常规改图路径，解压后手工改 XML 字段再打包回去，极容易把文件结构改坏，导致 Axure 直接打不开。常规做法还是老老实实打开 Axure 改。

下面这段命令是解开.rp文件并快速摸清资源组成的方式：

mkdir rp_unpack && cd rp_unpack unzip ../template.rp find . -name "*.png" -o -name "*.svg" | head -50 unzip -p ../template.rp Document.xml | grep -o "咖啡" | wc -l

第一行创建目录并进入，第二行把模板源文件解压出来。第三行列出前 50 张图片或矢量资源，帮你看清模板素材有多少、够不够后续替换。第四行用-p参数把Document.xml的内容打到标准输出并统计“咖啡”这个词出现的次数，用于快速判断哪套模板里有你参考的页面模块。使用这组命令的前提是先备份原始文件，我的习惯是把命令里所有输出路径都指向副本，原件只读不改。解压—查询—重新打包这种操作只建议用于统计和定位，真正的文案替换永远在 Axure 界面里做。

3. 把模板改成自己的原型：从文案替换到业务流调整的三步走

3.1 页面树与大纲面板：定位要改的元件与母版

打开模板后，左侧页面树是按流程组织的，比如“启动-引导-登录-首页-列表-详情-设置”。改之前先看页面命名，很多模板作者会在页面名后标注“母版页”“弹窗”“状态页”。双击进入目标页面，右侧大纲面板里会列出这个页面用到的所有母版和组件。当你发现某一元件怎么都选不中时，它很可能不在当前页面上，而在某个母版里，大纲面板会直接显示出来。

这个“选不中”的问题，几乎是所有模板改版新手的第一道坎。Axure 里从母版引用过来的元件默认带有保护，鼠标点选时只会选中整个母版容器，无法直接进入内部改文字。有不少人以为是自己电脑坏了，或是文件被锁了。实际上选不中时，两个操作路径：一是右键点母版容器，选择“从母版分离”，分离后变成当前页面的普通元件，可以随便改；二是双击进入母版进行编辑，改动会同步到所有引用该母版的页面。需要团队协作时，我一般不用分离，而是直接改母版，避免同事看到页面上一个按钮的风格和别的页面不一致。

还有就是页面重命名习惯。模板原始页面名往往是为了让作者自己好记，比如“Page 1”“Copy of Page 1”一类的非常多。等你把流程串到一半再想给开发讲“这个页面是确认订单”，才发现页面树里十几个重名页面。所以开始改模板之前的第一个动作，我建议是先花 10 分钟把页面树里所有页面名改成人话：登录页、首页、订单列表、结算成功页，后面你才会知道自己在哪。命名的同时顺手设置页面备注，把每个页面的业务逻辑写上一句，这一步省下来的沟通时间远超命名花掉的。

3.2 批量替换文案与图片：全局查找替换的两种姿势

模板里的文案都是示例性质的，比如“新品推荐”“立即购买”。不批量替换的话，一个一个双击改文本会改到眼发花。Axure 自带的“编辑→查找和替换”可以选中某一页面、某一母版或整个项目进行替换。这里注意，它替换的是文本内容，不是元件名。比如做课程预约项目，把“咖啡”全部替换成“课程”，把“点单”替换成“约课”，几十个页面一次改完。

界面操作虽然稳，但也有它替换不到的位置。比如嵌在中继器项目里的文本，查找替换有时会漏掉。这时候可以靠“文件级操作”补：Axure 的.rp文件本质是 zip，你可以在 VS Code 中以文本方式直接打开（它会把内部的Document.xml按文本显示），搜索中文原文后确认位置。但不推荐直接在里面改，因为 XML 结构搞坏一个闭合标签，整个文件就打不开了。我一般只在“确认这句话到底在哪个页面哪个状态下”时用这种方式，真正的替换走软件本身。

替换前有一点必须强调：先备份。我自己的习惯是任何模板改版都先复制一份原文件给一个origin文件，后面改坏了有后悔药。命令行看资源的方式如下：

cp template_backup.rp template_work.rp unzip -p template_work.rp Document.xml | grep -o "立即购买" | wc -l

第一行把备份文件复制为工作文件，避免直接动原件。第二行把工作文件里的文档结构输出出来，统计某个示例文案出现的次数。对模板资源做排查时，这个小操作能告诉你模板里某段文案出现了多少处、分布范围大不大，是全局替换还是单个页面手改，心里有数再动手。

图片替换是另一个重点。模板里的图片大多是占位图，右边属性面板选中图片后右键“替换图片”选本地文件即可。替换后最重要的参数在样式面板里：适应内容、拉伸、裁剪。Axure 默认是按图片原始大小显示，如果你的设计图比例和模板里的占位图不一致，直接替换会出现大图撑破卡片、小图留白边两种现象。做高保真原型时，这里最影响观感，我第一次接模板时没注意，替换完的列表页图片全是歪的，后来才悟出这个坑。通常建议统一选“适应内容”，再按卡片实际高度微调，不要在模板原尺寸上死磕。

3.3 业务流程改装：从“打开链接”到“设置面板状态”的取舍

模板里的页面跳转已经配好，比如“点击登录按钮—校验—跳转首页”。但你的业务流程可能完全不同。这时先不要急着删页面，先在右侧“交互”面板里看每个按钮绑定了哪些用例。Axure 的用例列表会明确写出触发事件：单击、鼠标移入、载入，以及动作：打开链接、设置面板状态、设置变量值。把模板现有的连线看明白，再按你的流程拆掉重连。

实际拆模板时会发现一个很重要的现象：很多页面跳转不是用“打开链接”，而是用“设置面板状态”。它没有真正换页面，只是在当前页面里切换动态面板的显示，看起来像 APP 内的页面覆盖。这是模板作者模仿原生体验最常用的写法。如果你要的是浏览器里的真实跳转，选中按钮后把动作从“设置面板状态”改成“打开链接”，目标选择目标页面。相反，如果你觉得模板里“打开链接”跳得太生硬，想更接近 APP，就改成面板切换。

改交互时顺手把业务说明写进“说明”栏，这一点我反复跟朋友强调。开发往往不会逐页点开原型，他们更喜欢直接看按钮旁边的注释：这里点击后调用什么接口、传什么参数、失败时弹什么提示。模板作者给出的示例说明不一定匹配你的项目，所以流程改到哪，注释就跟着改到哪。这个习惯养成后，评审会上你能少回答很多次“这个页面是怎么进来的”。

4. 高保真交互的核心部件：动态面板、中继器与全局变量的现成实现

4.1 动态面板做转场与弹窗：模板里的三种典型状态

模板里的“加载中”“弹窗”“空状态”很多时候不是一个独立页面，而是一个动态面板的多个状态。动态面板相当于把几个页面叠在一起，通过交互切换显示。在大纲面板里可以看到一个动态面板下挂好几个状态，双击状态名就能进入编辑。动态面板是模板里保真度最高的部分，你不需要理解它背后复杂的机制，只需要知道“当前显示哪个状态、什么动作切到哪个状态”就够了。

模板里最常见的实现有这三种：一是底部弹窗。面板固定在页面底部，初始隐藏，点击某按钮后设置面板状态为“展开”，同时显示一个半透明遮罩。二是左右滑动，这类常见于引导页或图片画廊，用拖动结束事件设置上一个/下一个状态。三是轮播图，背景图加指示点做成一个动态面板，在用例里配置载入后定时循环切换状态。替换内容时，把状态里的示例文字和图片换掉就行，关键是保留触发事件。比如底部弹窗的关闭，一般绑定的是“点击遮罩关闭”，你替换时别把遮罩这个元件删了，否则弹窗开得出来关不掉，预览时只能把整个页面关掉。

新手最容易把动态面板和页面弄混，在页面树里看到一个动态面板以为是独立页面，双击进去发现只有一个拖拽框。这里记住一个口诀：动态面板里的状态不是页面，是同一块屏幕的不同显示层；页面树里的每个页面才是真正的独立页面。模板里如果页面上写着“弹窗页”三个字，去页面树里翻它，大概率在某个页面下面的状态里，而不是独立节点。

4.2 中继器做列表与搜索：数据绑定、筛选函数与常见写法

模板里的列表页大多用中继器实现，因为中继器自带一张数据表，双击中继器，下方“数据集”里能看到列名，比如 name、desc、price，每一行对应一条列表项。列表项的视觉设计放在中继器内部的 Item 里，通过[[Item.name]]这种模板绑定符号把数据拉到文本控件上。这套语法类似前端模板字符串的用法，但底层机制不一样，思路是通用的：数据是数据，视觉是视觉，改数据不用动视觉。

改数据时直接双击数据集改单元格，不要试图通过复制粘贴替换样式。如果模板里某个列表项样式很复杂，你想新增一行，就在数据集里新增一条记录，中继器会自动多渲染一个列表项。间距错乱通常是因为某一行的字段太长或为空，Axure 不会像前端框架那样自动做空值容错，为空时文本控件高度可能是 0，要检查样式里是否设置了“自适应”。

中继器里最常用的搜索写法是过滤。要给中继器加搜索功能时，选中中继器，在“交互”面板里添加“设置过滤器”，表达式写法接近 JavaScript 子集。比如搜索框输入“咖啡”，列表只显示包含“咖啡”的行：

[[Item.name.indexOf('咖啡') > -1 || Item.desc.indexOf('咖啡') > -1]]

说明：Item.name对应数据集中的 name 列，indexOf是字符串查找函数，返回第一次出现的位置，找不到时返回 -1，所以> -1就表示包含。两个条件用||连接，表示标题或描述里任一匹配就显示。如果你想搜索词来自文本框，不要写死在表达式里，直接引用文本框元件，例如[[Item.name.indexOf(搜索框元件名.text) > -1]]，注意引用元件名时中间不要加引号。Axure 中继器表达式不是完整 JavaScript，不能用 let、箭头函数，也不能用现代模板字符串，只支持它内置的操作符和函数，写复杂判断时先做最小验证再往完整表达式上叠。

4.3 全局变量管理登录态：页面联动与替换内容时的红线

很多模板会把“是否已登录”用一个全局变量存着，比如 onLogin。全局变量的值可以在多个页面之间共享：登录成功页把它设为真，个人中心页的“我的”按钮状态就跟着变。这套模板里如果已经搭好了登录联动，你替换内容时，最忌讳的就是把变量名顺手改掉。变量名一改，所有引用它的条件判断全部失效，页面显示就会变成“明明登录成功，个人中心还是未登录状态”。

用全局变量的典型交互写法，在 Axure 用例面板里是分段配置的，逻辑上等价于下面的流程：

if (textInputUsername.text == '' || textInputPassword.text == '') { // 设置弹窗面板状态为"提示" } else { // 设置变量 onLogin 为 true // 打开目标页面 }

这个例子里的重点在于：变量赋值用的是“设置变量值”动作，而不是直接像编程一样写等于号；判断条件写在用例的 If 条件里，用的是文本框内容作为变量字段。模板里这类逻辑是现成的，你只需要把 username 和 password 对应的文本框换成你项目里的实际元件名。如果模板里根本没有登录模块，只是静态页面，那建议你先搭一个简易的全局变量版本，否则后面加权限控制时会反复返工。

还有一条容易被忽略的红线：全局变量和动态面板状态经常配合使用。比如“设置 onLogin 为真后，同时把底部导航栏的某一项切到已登录状态”。如果你只改了对变量的赋值，没有改面板状态切换，那原型看起来就是“数据对了但界面没反应”。排查这类问题时，优先看用例里的“设置面板状态”目标是不是指向了你想要的动态面板。

5. 避坑与常见问题：从打不开到样式乱，模板落地翻车的五个现场

5.1 打不开：版本高于当前 Axure

现象：双击.rp文件，Axure 直接弹窗提示文件由更高版本创建，当前版本无法打开。

原因：模板作者用的是 RP10，你本机装的是 RP9，格式不向下兼容。

解决：最稳妥的办法是换到 RP10 环境打开。如果一时没有，可以用 Axure 官方试用渠道打开，把关键页面导出成图片或 HTML 应急。不要指望在 RP9 里通过某个选项强行打开新版本文件，这是版本限制，不是设置问题。急用的场景下，先让团队里有新版软件的人导出 HTML 预览，评审和演示都能顶住，等你装好 RP10 再回来细改。

5.2 字体和间距乱：缺字体被自动替换

现象：模板里原本是圆角饱满的字体，打开后变成另一个字体，甚至卡片里的文字行高不对，重叠或被截断。

原因：模板用的字体本机没有，比如苹方、思源黑体，Axure 用默认字体自动替换，导致布局错乱。

解决：先全局替换字体再动布局。具体做法：打开“样式”面板，把文本样式里的 font-family 统一改为你本机确定存在的中文字体，比如“微软雅黑”。不要选“默认字体”，那样在不同电脑上打开又是一套结果。全项目替换完再看有没有文字溢出，有溢出的才是真的布局问题，需要单独调。

5.3 母版里的元件点不动：被母版锁住

现象：在一个页面上想改底部导航栏里的文字，鼠标点上去只能选中一个大的蓝色容器，进不去里面。

原因：这个导航栏是母版引用，Axure 默认把母版里的元件锁在母版容器里，不允许在页面直接编辑。

解决：两个思路。只想改这一个页面，就右键容器，选“从母版分离”，之后它变成普通元件随便改；想让所有用到这个导航栏的页面一起改，就双击进入母版编辑，改完后所有引用页自动同步。注意，分离之后这个页面就不再跟随母版更新，以后别人改母版，你分离过的页面不会变，这是最常见的版本漂移来源。

5.4 中继器过滤后空白：全角引号和错误列名

现象：加了一个搜索过滤表达式后，列表一条数据都不显示，甚至整个中继器区域消失。

原因：表达式里的列名写错，或者引号用了中文全角引号，Axure 语法解析失败。

解决：把表达式拆到最简，比如先写[[true]]，确认中继器能显示，再逐步叠条件。写条件时只使用英文半角引号，列名必须和数据集里完全一致，大小写也一样。另一个隐蔽坑：indexOf('关键词') == 0只能匹配以关键词开头的行，输入中间词就会匹配不到，需要写成> -1才表示包含。这两条我每次给别人排查时都能撞见一个，几乎成了模板改版的必修课。

5.5 预览缺图：外部图片引用失效

现象：预览或导出 HTML 时，页面上出现大 X 或灰色图块。

原因：模板里的部分图片来自外部链接，比如原作者的本地绝对路径，换到你的机器上路径失效。

解决：在 Axure 里重新导入图片：把失效图片删除，从资源面板重新拖入本地文件。导入后不要再去改磁盘路径，让它跟随工程文件一起打包。遇到大量缺图时，先检查“资源”面板里哪些图片是“链接”状态，优先替换这一类。老版本工程里还存在从磁盘拖入后按链接方式引用的图片，新版打开后不会自动嵌入，这一条在旧模板上尤其常见。

6. 把一套模板变成你自己的组件库：元件的原子化抽取与复用

模板用顺手之后，下一步不是继续在页面里改，而是把它抽成自己的组件资产。我一般会从选定的一套模板里做三件事：第一，把颜色和字体统一样式化，在“样式”面板中把模板里出现过的所有颜色规整成一套带名字的样式，比如Primary、Success、Warning，替换主题色时只改样式源；第二，把高频元件存入元件库，选中一个按钮、卡片或弹窗，右键“添加至元件库”，新建一个.rplib文件，以后新项目直接拖出来用。这一步的意义在于，下一个项目不需要再打开这套 72 套模板找元件，直接从自己的元件库里拖。

第三，也是最容易被忽略的，把整页结构存成“页面模板”。Axure 支持从现有页面创建模板，把首页、列表页、详情页这几个骨架存下来，下次新建项目先从模板建页，而不是从空白页开始画。三个动作做完，你手里就不再是“72 套模板”，而是一套自己的设计系统源文件：颜色、字体、元件、页面骨架全部可复用。

做抽取时有一个反向操作要注意：模板里有些元件用“无样式”的方式硬编码了颜色，这类元件在样式面板里看不到名字。抽取时遇到这种，先手动把它纳入统一样式，否则你的组件库里会出现两种“主色”，后面改主题时会漏。我上次就是这样，把一套电商模板抽了个底朝天，结果预览时发现“确认订单”页的按钮颜色死活没变，查了半天才看到那个按钮的颜色是硬编码的，不在样式面板管辖内。从那以后，我做组件抽取都会批量过一遍所有元件的样式归属，看到没有样式名的颜色就顺手补一个，宁可多花十分钟，也不让硬编码颜色拖后腿。

这套流程跑顺之后，新项目从立项到产出可演示的高保真原型，通常只需要一到两天，节省下来的都是加班时间。希望帮到你。用完记得把原件归档，不要直接覆盖，以后回看项目时你还能知道当初是从哪套模板起家的，这也是我现在的工作习惯。

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