1. Axure RP9 是干什么的谁真的需要它如果你在做产品、做交互或者经常需要把一个想法讲给别人听那 Axure RP9 这个名字大概率在你的下载列表里躺过。它不是什么新鲜工具但在原型设计这个圈子里它一直是重型装备的代表——能画静态页面也能做带逻辑的可点击原型甚至能做数据列表的增删改查模拟。很多团队的 PRD 已经从纯文字 Word 迁移到了文档 Axure 原型的组合原因很直白文字描述一套交互流程开发看完有五种理解扔一个能点、能填、能翻页的原型过去理解就收敛成一种。这篇内容我打算按真实上手顺序讲从判断要不要装、怎么装、装完怎么调一直讲到用它做出一个能交给开发的原型。中间会带上我自己反复踩过的坑比如字体突然变成方框、预览打不开、中继器数据不动、团队协作时文件互相覆盖。适合三类人看刚入行、第一次接触原型工具的产品新人从其他轻量工具迁过来、想搞明白 Axure 那套事件—动作—目标模型的老手以及只是临时要交一份可点击方案、不打算长期深耕的兼职选手。1.1 原型工具的几个流派Axure 站在哪一边原型工具大致分三档。第一档是纸面草图和白板快但没法交付。第二档是 Sketch、Figma、即时设计这类视觉设计工具它们做高保真视觉和简单跳转很强交互逻辑稍复杂就要靠插件或者变通。第三档就是 Axure、ProtoPie 这类以逻辑为核心的交互原型工具。Axure 的定位很明确视觉表现中上逻辑表达极强尤其是条件判断、变量、函数、动态面板状态机、中继器数据集这几块别的工具要么没有要么做起来别扭。举个具体例子你就懂了。一个登录后根据角色跳不同首页的流程在 Figma 里你得画好几个页面然后用原型连线硬凑角色判断根本做不了真逻辑在 Axure 里就是一句条件判断的事如果 用户名 等于 admin打开页面 A否则打开页面 B。再比如一个带搜索、翻页、排序的订单列表Axure 的中继器元件可以在不写一行代码的前提下模拟出来这对需求评审的价值极大——开发一眼就知道你要的分页是每页十条还是二十条。代价也很明显Axure 的学习曲线比那些拖一拖就出图的工具陡界面看着像 2010 年的软件性能还偏重文件一大就卡。所以它不是万能解你得分清楚自己属于哪种场景。1.2 RP9 这个版本到底改了什么Axure RP9 相对 RP8 最大的变化有三个方向值得单独说一下因为它们直接影响你怎么装、怎么用。第一是协作方式。RP9 把团队项目、云分享、评论这些能力整合进了 Axure Cloud 体系发布原型不再只是生成一堆 HTML 丢到服务器上而是可以直接发到一个链接里评审的人能在页面上直接留评论、圈选位置。这对远程团队是很实在的提升。第二是界面和交互编辑器的重构。RP9 把右侧面板拆成了样式交互说明几个独立标签交互用例的编辑从原来的弹窗式变成了侧栏式写多条件、多动作时不用来回滚动。画布上的控件尺寸、位置、边距也支持更精细的数值输入。第三是中继器和动态面板的能力增强。中继器支持了更完整的数据集操作、分页、排序、筛选配合项加载时事件可以做出非常接近真实的数据列表交互动态面板支持固定到浏览器100% 宽度滚动条这些自适应行为做移动端和响应式原型时省了不少手工活。需要提醒的是RP9 的授权模式改成了订阅制为主和老版本的买断制不一样。这一点在你决定要不要长期用之前最好先想清楚。1.3 哪些人适合上手哪些人不必硬上我见过太多人装完 Axure 然后用它画了三张静态页面就再也没打开过。说实话如果你的工作只需要画页面布局、连几个跳转、给别人看视觉效果那用 Figma 或者团队现有的设计工具就够了学 Axure 的时间成本收不回来。但如果你符合下面任意一条我建议认真学需要做带条件判断、带数据模拟的复杂流程需要输出给开发看的规格说明包括元件尺寸、交互逻辑、字段说明需要在评审会上直接演示用户点了这个按钮之后会发生什么团队已经用 Axure 作为标准交付物你不用就没法对齐。这几种情况下Axure 的重反而是优势因为它把逻辑说得足够清楚减少的是沟通成本省下来的是返工时间。2. 装之前先把三件事定下来版本、系统、授权很多人卡在安装这一步其实问题不在安装过程而在于装之前没想清楚三件事你的电脑能不能顺畅跑、你要用哪个版本、你打算怎么解决授权。这三件事想明白了安装本身五分钟就结束了。2.1 系统与硬件门槛Axure RP9 是桌面客户端Windows 和 macOS 都有对应版本而且它至今没有官方的网页版所以你必须装本地软件。这一点很多人第一次找的时候会困惑以为它有在线版可以直接用。硬件上它对配置要求不算高但因为它图形元素多、实时渲染重实际体验和配置强相关。我自己的判断标准是这样的内存 8GB 是底线16GB 才舒服尤其是你同时开着浏览器、即时通讯工具和 Axure 的时候磁盘一定要留出足够空间Axure 的临时文件、自动备份文件、生成的 HTML 输出目录都会吃空间我个人习惯给项目文件单独留 20GB 以上的余量屏幕分辨率建议 1920×1080 起步低于这个值右侧面板会挤在一起改数值很痛苦有条件上 2K 或更高画布可视区域大一圈效率差别很明显。系统版本方面Windows 建议 10 及以上macOS 建议近几个大版本内太老的系统可能遇到安装包签名校验失败或者启动崩溃。这不是吓唬人我就见过在很老的 Windows 上装完之后一点预览直接闪退的情况折腾半天最后发现是系统组件太旧。提示如果你的电脑是公司统一配发的装之前最好确认一下有没有软件白名单策略。Axure 生成的本地预览会启动一个本地服务并占用端口某些安全策略会拦这个行为导致你点了预览但浏览器打不开。2.2 试用、订阅、团队版怎么选Axure RP9 的正规获取方式只有一种从官方渠道下载安装包然后按官方提供的授权方式使用。官方提供有期限的试用试用期内功能基本是全的足够你判断这个工具值不值得投入正式长期使用则是订阅制按人按周期计费团队场景有对应的团队版本会额外包含协作、共享工程管理这类能力。这里我要把话说清楚网上流传的各种破解版免费密钥授权密钥生成器我一律不建议碰。原因不是道德说教而是很实际的风险——这类安装包来源不可控被塞进挖矿程序、窃取浏览器凭据的样本、后门的情况并不少见而且你做出原型往往是要给客户或者公司内部看的文件里可能带着真实业务数据一旦因为工具本身出了问题导致泄露责任算谁的很难说清。另外破解版通常伴随必须关闭自动更新必须屏蔽联网校验用起来处处别扭某天突然打不开耽误的是你自己的交付节点。我的建议是短期需求用官方试用期把该练的练完长期要用就规规矩矩走订阅把它当成一笔正常的生产力工具开销。这笔钱相对于你反复改需求的工时其实很划算。2.3 安装包从哪来怎么避免踩雷只从官方站点下载这是唯一可靠的来源。下载的时候注意两件事一是确认你下载的是你操作系统对应的版本别下错了平台二是下载完成后留意安装包的体积和数字签名正常安装包体积在一个合理范围内属性里能看到发行方签名信息如果签名缺失或者发行方信息看起来不对直接删掉重新下。还有个细节下载过程中如果网络不稳定导致文件不完整安装时会出现各种莫名其妙的报错比如安装包已损坏无法读取归档。遇到这类错误第一反应应该是重新下载一遍而不是去搜各种修复工具。我因为这个浪费过整整一个下午。3. 安装实操Windows 与 macOS 两条路线安装本身不复杂但两个平台各自有几个容易卡住的点我分开说。3.1 Windows 下的安装与常见拦截Windows 上的流程是双击安装包选择安装路径等待解压和写入完成后从开始菜单启动。安装路径建议不要选带中文和空格的目录虽然现在大部分软件对中文路径的兼容性已经好很多但 Axure 在生成 HTML、写临时文件的时候偶尔会因为路径字符出问题用纯英文路径最省心。安装过程中最常见的拦截有两个。一个是系统弹出已保护你的电脑之类的提示这是因为安装包不是来自应用商店属于正常的 SmartScreen 提示你确认来源可信之后继续即可。另一个是杀毒软件在安装或启动时直接把进程隔离掉表现是安装到一半突然失败或者装完之后双击没反应。这种情况不要急着卸载杀毒软件先看它的隔离记录确认是不是误报然后把安装目录加入信任列表再重新装一次。还有一点安装完成后第一次启动会明显慢它在初始化配置、检查更新、准备渲染环境这时候别以为卡死了就去强杀进程。我一般会等它自己出来最多等个一两分钟。3.2 macOS 下的安装与权限放行macOS 上通常是下载到磁盘映像文件打开之后把应用拖进应用程序文件夹。这一步很多人第一次会漏——直接在磁盘映像里双击运行能用是能用但重启之后就找不到了而且部分功能会因为运行位置不对而异常。拖进应用程序文件夹之后首次打开可能遇到系统提示无法验证开发者或者来自身份不明的开发者无法打开。这是系统的安全策略在起作用。正确的处理方式是去系统设置里找到隐私与安全性在安全那一栏确认允许打开然后再启动一次。不要用那种关闭整个安全机制的野路子那相当于把你后面所有的风险敞口都打开了得不偿失。另外 macOS 上要注意输入法和快捷键的冲突。Axure 里大量使用组合键如果你开了某些输入法的全局快捷键会出现按键被吞掉的情况表现是按了没反应。我的习惯是在用 Axure 的时候切成系统自带英文输入法冲突会少很多。3.3 首次启动要做的几项设置第一次进到主界面先别急着画东西把下面几项设置调好后面能省很多事。第一是自动备份。Axure 有自动保存和恢复机制但默认间隔可能偏长我会把间隔调短一点同时确认备份目录在一个空间充足的位置。这不是多余动作Axure 偶发崩溃的概率不算低尤其是在你操作大文件、频繁切换面板的时候有个近期的备份能救命。第二是默认字体。这一步特别关键直接决定你会不会遇到文字变方框。做法是新建一个空白文件在页面样式里把默认字体设置成你系统里确定存在的字体中文用思源黑体、微软雅黑这类通用字体都比较稳然后把这个文件另存为模板之后新建项目都基于这个模板。原因我放到后面第七节详细讲这里你先记住别用系统里可能没有的字体。第三是单位和栅格。默认单位一般够用栅格和辅助线我建议打开后面排版对齐全靠它。第四是确认工作目录结构。我个人的习惯是按项目名/源文件/输出/素材/备份分目录源文件只放 .rp 文件生成的 HTML 单独放输出目录素材图片单独放素材目录。你可能会觉得这是强迫症但当你一个项目里的图片有二三十张、输出过七八次 HTML 之后不这么分你真的会找不到文件。3.4 中文字体和界面语言的处理Axure 的界面本身对中文支持是没问题的你需要自己关注的是字体在别人电脑上能不能显示。Axure 生成 HTML 原型的时候理论上可以打包字体但实际做法通常是依赖访问者本机字体。这就带来一个经典问题你在自己电脑上用了一个特殊字体看着很漂亮发给同事打开之后全变成默认字体排版全乱。解决办法有两个一是只用通用字体二是生成时勾选嵌入字体的相关选项但后者会显著增大输出体积。我自己的取舍是正文、按钮、标签这类功能性文字一律用通用字体只有极少数需要强调视觉的地方才用特殊字体并且提前告知对方。这样最稳。还有一个容易忽略的点中文和英文混排时的行高。Axure 里设置行高是绝对值用英文字体的行高去套中文会出现字挤在一起或者行距过大的情况。我的做法是把中文段落的行高设成字号的 1.5 到 1.8 倍实测下来阅读体验最舒服。4. 界面速通五大区域和四个核心概念装完、设置调好接下来要做的是别慌。Axure 的界面看起来元素很多但它其实就是一个固定的分区逻辑理解了分区找功能就不迷路。4.1 界面分区与面板职责从上到下、从左到右主界面大致是这样几块。顶部是菜单栏和工具栏。菜单栏里文件、编辑、视图、项目、布局、发布、账户、帮助这几组是你要熟的尤其是项目下面的全局设置、页面样式、元件样式管理器发布下面的预览、生成 HTML、发布到云这两个菜单的使用频率最高。工具栏上是常用操作的快捷入口对齐、分布、层级、组合这些都在这里。左侧是页面面板和概要面板。页面面板管理你的所有页面支持文件夹分组这是组织项目的关键概要面板用树状结构展示当前页面上的所有元件元素一多的时候靠它来选中特定元件比在画布上点要准得多。中间是画布也就是你干活的区域。画布可以缩放、可以拖出标尺辅助线支持多页面标签切换。右侧面板分三块标签样式、交互、说明。样式面板管外观包括位置尺寸、填充描边、字体段落、圆角阴影交互面板管行为包括交互样式、交互用例、元件属性说明面板管文字说明你在这里写的字段说明可以随原型一起导出给开发看。底部是页面属性、元件样式等入口。移动端项目里页面属性的页面尺寸和自适应视图要在这里调。4.2 页面、母版、动态面板、中继器四个核心元件我一个个说清楚它们各自解决什么问题。页面是最基础的容器单元。一个页面通常对应一个完整界面比如登录页、首页、详情页。页面可以建文件夹分组我建议按模块分比如用户中心/订单模块/设置模块别把所有页面平铺着堆在一起。母版解决复用问题。导航栏、页脚、侧边栏、弹窗这些在多个页面重复出现的东西做成母版之后改一处全站生效。母版有两种放置方式一种是拖放即链接你把母版拖到画布上它就成了一个引用改母版所有引用处同步更新另一种是拖放任意位置相当于复制一份独立副本。搞混这两个是新手最常见的坑做出来的导航改了母版发现某个页面没变就是这个原因。动态面板是 Axure 交互能力的核心。你可以把它理解成一个卡片盒同一个位置放好几张卡片状态通过交互切换显示哪一张。标签页切换、轮播图、下拉菜单、弹窗、折叠面板本质都是它。动态面板还有个实用属性叫固定到浏览器用来做吸顶导航或者固定侧边栏。中继器是数据列表工具。它有一份数据集像一张表格然后通过项加载时事件决定每一行怎么渲染。配合它自带的分页、排序、筛选能力可以在不做后端的情况下模拟出很真实的列表交互。学习成本是这几个里最高的但一旦掌握你能做出来的原型档次会明显不同。4.3 交互的三段式模型事件 → 动作 → 目标Axure 的交互逻辑就一句话什么事件触发执行什么动作作用在哪个目标上。事件是触发条件比如单击时鼠标移入时载入时文本改变时状态改变时。动作是你要做的事情常见的有打开链接设置面板状态显示/隐藏移动旋转设置文本设置选中设置值设置列表选中项显示菜单。目标是动作的对象可以是某个元件、某个动态面板、当前元件、也可以是一个表达式算出来的结果。再加上两个补充概念就完整了。一个是交互样式管鼠标悬停、按下、选中、禁用、错误这几种视觉状态不用写交互用例直接在样式里勾选就行做按钮反馈最省事。另一个是条件判断在动作上可以加如果...则...用来做分支逻辑判断对象可以是元件文字、选中状态、面板状态、变量值、也可以是函数表达式。把这套模型记住你在 Axure 里看到的绝大多数功能就都能归位了它是事件、动作还是目标。5. 拿一个真实场景练手从空白到可点击原型光看概念没用找个具体场景走一遍。我用一个订单管理后台的简化版做例子包含导航、列表、筛选和详情弹窗覆盖了日常最常用的那几个功能。5.1 画布、栅格与页面样式定基准先进项目里的页面样式设置定三件事页面尺寸、默认字体、背景色。后台项目我一般用 1440 宽作为基准高度自适应移动端项目用 375 宽。然后打开栅格。我习惯设成列栅格列宽 20列间距 20内容区左右各留 40 的边距。这个数字不是随手定的——20 的基准能让大部分间距落在 8 和 4 的倍数上和主流前端框架的间距体系能对上你后续跟开发沟通这个间距是 20的时候对方不需要做换算。辅助线也拉上主要内容的左右边界各拉一条后面所有元件贴着辅助线对齐。这一步看起来琐碎但它是整个项目的地基。我见过太多人上来就画画到第五个页面发现每个页面的边距都不一样回头统一又要重画一遍。5.2 用母版解决导航与页脚导航栏这种要在十几个页面出现的东西必须做母版。做法是新建一个母版在里面画好顶部导航左边是产品名称中间是菜单项右边是用户信息。菜单项的状态切换可以先用交互样式做悬停变色。画完之后在每个页面顶部把它拖进来。关键细节有三个。第一是放置方式一定要选拖放即链接这样以后改母版能全站同步第二是母版的尺寸要精确高度设成实际高度因为它是按自身高度占位的高度不对会出现遮挡第三是如果导航后面还要放内容内容区的起始位置要考虑母版高度我一般会用一条辅助线标出来避免每次都要重新量。页脚同理。侧边栏如果每个页面的当前菜单项不一样有两个选择要么做多个母版变体要么在母版里用交互根据变量控制选中状态。小项目用前者更省事大项目用后者更规范。5.3 动态面板做状态切换订单详情我用弹窗来做弹窗本质就是一个动态面板。先画一个铺满页面的半透明遮罩矩形再画一个居中的白色卡片作为弹窗主体把这两样东西一起选中右键转换为动态面板命名为详情弹窗。这时候它只有一个状态我给它加一个空状态把默认状态设为空状态。然后给列表里的查看详情按钮加交互单击时设置面板状态为详情弹窗到有内容的状态同时做淡入效果遮罩上添加交互单击时设置面板状态回到空状态。这样点开、点关闭就通了。这里面有个细节特别容易出问题动态面板的尺寸和内部内容不匹配。如果你把弹窗内容画得比面板大超出部分会被裁掉表现就是内容显示不全。我的习惯是画完内容之后选中面板用右键菜单里的适应内容大小让面板自动贴合然后再手动微调。再一个细节是层级。遮罩必须在弹窗下面弹窗必须在遮罩上面不然会出现遮罩盖住弹窗点不了的情况。层级用工具栏上的置顶置底调整或者在概要面板里拖动排序。5.4 中继器做可筛选的数据列表中继器是这块的重点我拆成三步。第一步是准备数据。拖一个中继器到画布上双击进去编辑数据集列名我设成订单号、客户、金额、状态、时间五列然后手动填个十来行测试数据。数据不用很真实但建议字段值的类型要对——金额用数字、时间用日期格式后面排序才正常。第二步是设计行模板。在中继器的项模板区域里把上面这几个字段用矩形或文本标签摆成表格的一行。然后关键一步给每个要显示数据的元件绑定数据。选中文元件在交互面板找到项加载时事件添加动作设置文本值选对应的数据列名用中继器的表达式包起来。这样每一行渲染的时候就会自动填入对应数据。这个绑定过程有点绕但每一列绑一次就完了之后数据变了行内容会自动更新。第三步是筛选和分页。筛选我会在上方放一个文本框加搜索按钮按钮的交互里对中继器添加添加筛选动作条件写成客户列包含文本框的值。分页更简单选中中继器在属性里设置每页项目数为 10同时把分页控件拉进模板Axure 会自动处理翻页逻辑。这三步做完你就有了一个能搜、能翻页的列表而这一切没有写任何代码。我给开发演示这个原型的时候他们对需求的理解速度明显快很多因为每页十条还是二十条搜索是模糊匹配还是精确匹配这些问题全都在原型里定死了。注意中继器的筛选是叠加的不是替换的。如果你连续添加了两次筛选条件它会取交集。所以做重置筛选按钮的时候记得用移除筛选动作把所有条件清掉不然用户点了几次搜索之后列表会越来越空。5.5 交互用例与预览调优功能串起来之后一定要用预览走一遍流程。预览会启动本地服务并在浏览器里打开原型这时候你才是用户视角很多在编辑界面里看不出来的问题会暴露出来。我一般重点检查这几项。跳转链路是否闭环有没有哪个按钮点了没反应或者跳到莫名其妙的页面动态面板状态切换后返回时状态有没有复位如果没复位用户第二次点开会看到上次的残留状态滚动区域是否正常固定到浏览器的元件在滚动时会不会和内容重叠表单控件的交互样式输入框聚焦之后有没有明显反馈。预览还有个很方便的用法是做对比测试。你可以把同一个页面的两个方案放在不同页面里让同事看问他们第一眼更想点哪个。比拿着静态图问要靠谱得多。6. 发布、分享与交付原型做完了怎么送出去是另一回事。Axure 提供了几种方式各有各的适用场景选错了会很尴尬。6.1 本地生成 HTML发布菜单里选生成 HTML它会输出一整套静态文件包括页面、脚本、样式和资源。这套文件可以直接丢到内网服务器或者静态托管上别人用浏览器访问就行。生成时几个选项要注意。一个是选择生成的页面范围测试阶段可以只生成改动过的页面省时间正式交付再全量生成。另一个是资源路径如果对方是直接双击 index 文件打开用相对路径如果放到服务器上可能要根据目录结构调整。还有自动生成站点地图、搜索、评论这些附加功能按需勾选勾多了体积会变大。生成完之后我建议自己先完整点一遍尤其是跨页跳转和图片加载因为资源路径的问题往往在本地打开时才暴露。同时记得把输出的文件按版本命名比如加上日期不然几次输出之后你根本分不清哪个是最新的。6.2 云协作与版本管理Axure 支持把原型发布到云端生成一个可访问的链接评审的人直接在页面上圈选位置留评论。这个功能在远程协作里非常实用尤其是你不想让原型文件在群里传来传去、改一次发一次的时候。团队项目的话还涉及共享工程的概念。多人同时编辑一个工程需要一个统一的存储位置每次编辑前取出、编辑完签入。这套流程听起来正式但它解决的是真问题——两个人在同一个文件上各自修改最后保存的时候互相覆盖这种事故在团队里并不罕见。需要了解的是不同授权类型能用的协作能力不一样团队版才包含完整的共享工程管理。所以如果你是小团队确定要多人协作的话选型的时候要把这一项考虑进去别等用起来才发现缺功能。6.3 交给开发和测试的交付规范原型交给开发光有页面是不够的还有几样东西要一起给。第一是说明文字。在说明面板里给关键元件写清字段含义、字数限制、格式要求、校验规则比如手机号11 位数字非数字输入时提示格式错误。这些说明可以随原型导出比在群里挨个回复高效得多。第二是交互逻辑的书面版本。原型虽然有交互但开发看代码的人不一定有耐心点完所有路径。我会额外整理一份交互清单按页面列出每个按钮的动作、条件、跳转目标。第三是切图资源。Axure 里用到的图片、图标单独打包一份命名规范避免开发从 HTML 里扒资源。第四是版本标识。在原型首页放一个字版本号和更新日期评审的时候所有人看的是同一版避免你改的是哪里我看的不是这个版本这种扯皮。7. 踩坑实录安装、运行、发布三类问题排查表下面这些是我和身边同行实际遇到过的问题按阶段整理方便你对照排查。7.1 安装与启动阶段现象可能原因处理思路安装到一半报错退出安装包下载不完整或被安全软件拦截重新下载官方安装包检查隔离记录并把安装目录加信任双击图标没反应进程被拦截或依赖组件缺失用任务管理器看是否有残留进程重启后重试检查系统更新启动特别慢首次启动在初始化环境、检查更新耐心等一到两分钟别强杀进程提示无法验证开发者系统安全策略正常拦截到系统安全设置里确认允许打开不要整体关闭安全机制安装后找不到程序macOS 下没有拖进应用程序目录重新拖入应用程序文件夹后再启动关于这一类问题我有个通用的排查思路先判断是装不上还是启动不了。装不上多半是文件本身或安全拦截的问题启动不了多半是环境或权限的问题。分清楚了处理方向就不会跑偏。7.2 编辑阶段现象可能原因处理思路文字显示成方框或乱码使用了本机没有的字体换成通用字体或用模板统一默认字体改了母版但某些页面没变该页面用的是拖放任意位置的独立副本删掉副本重新以拖放即链接方式拖入动态面板内容显示不全面板尺寸小于内容尺寸右键适应内容大小再手动微调点击被上层元件挡住图层顺序错误在概要面板调整层级或把遮罩移到正确位置中继器数据不显示项加载事件里没有绑定数据列逐列检查设置文本动作是否指向正确数据列文件越来越大、操作变卡元件过多、图片未压缩、页面未分组拆分文件压缩图片用母版替换重复元件快捷键按了没反应输入法全局快捷键冲突切到英文输入法再操作字体问题是编辑阶段最高频的坑我在第三节已经提前铺垫了。这里再强调一次做原型之前先把默认字体定下来比事后一个个改要省太多时间。7.3 预览与发布阶段现象可能原因处理思路点预览浏览器打不开本地端口被占用或被安全策略拦截换个端口重试确认安全策略允许本地服务生成的 HTML 打开是白屏资源路径错误或文件未完整生成用浏览器控制台看报错检查是否用相对路径重新全量生成别人打开后字体和排版变了依赖本机字体对方没有同款改用通用字体或生成时嵌入字体图片不显示图片用了本地绝对路径未随文件打包把图片导入为项目内资源不要直接引用外部文件页面跳转错乱页面重命名后链接未更新在项目里用查找替换检查失效链接分享链接对方打不开权限设置或链接有效期问题检查分享权限确认链接是否已过期或被撤回提示预览打不开的时候先别怀疑 Axure 坏了。八成是端口或安全策略的问题。最快的验证方法是换一个项目新建一个空白页面再预览一次如果空白页能打开说明是项目文件的问题如果空白页也打不开那就是环境问题方向完全不同。8. 提效清单快捷键、自建元件库与我的几条经验前面讲的都是能用这一节讲用得快。8.1 高频快捷键用熟快捷键之后你的操作速度大概能提升三成以上。下面是真正高频的那几个。快捷键作用Ctrl/Cmd S保存Ctrl/Cmd Z撤销Ctrl/Cmd Y重做Ctrl/Cmd A全选当前页面元件Ctrl/Cmd C / V复制 / 粘贴Ctrl/Cmd G组合Ctrl/Cmd Shift G取消组合Ctrl/Cmd Shift S另存为F5预览空格 拖拽平移画布Ctrl/Cmd 滚轮缩放画布需要说明的是不同版本的快捷键可能有细微差异最准的做法是在帮助菜单里找到快捷键清单对着过一遍。另外对齐、分布这两个操作虽然没有默认单键但我建议你把顶部对齐水平分布这两个加到工具栏的常用位置比每次点菜单快得多。8.2 自建元件库维护Axure 自带的基础元件库够用但不够快。真正提效的做法是建自己的元件库。我的做法是这样每做完一个项目把里面复用价值高的元件挑出来——表单输入框、按钮的几种状态、带图标的列表项、空状态提示、常见的弹窗模板——整理到一个专门的元件库文件里。整理的时候要注意三点命名要规范比如用按钮/主按钮/常规这种带层级的命名而不是矩形 12每个元件内部用组合包起来拖出来就是一个整体不会散架把常用的交互样式提前设好比如按钮的悬停和按下状态这样拖出来就能用。这个习惯坚持两三个项目之后你新建原型的起点会完全不同很多页面是拖出来改文字而不是从头画。我自己的元件库已经积累了差不多六十多个常用元件做一套后台页面的时间从原来的两天压到半天。8.3 我个人在实际操作中的几点体会第一别一上来就追求高保真。原型的价值在于把逻辑讲清楚不在于画得多好看。我早期花了大量时间调渐变色、找图标结果评审的时候大家讨论的还是流程问题。先做低保真把链路跑通确认逻辑没问题之后再往视觉上投入这个顺序不能反。第二命名和分组要养成习惯。当你一个页面有五十个元件的时候矩形 23矩形 24这种名字会让你彻底崩溃。我一般是画完就顺手命名或者至少把相关的几个元件组合起来命名。这十几秒的投入在你三天后回来改需求的时候会十倍地还给你。第三文件要拆别什么都塞一个文件里。Axure 对单个文件的元件数量是有承载上限的超过之后操作会明显卡顿。我一般按模块拆用户模块一个文件订单模块一个文件最后用母版和链接串起来。拆的时候把公共母版抽出来单独维护避免改一处要改好几个文件。第四定期清理。项目做完之后把没用到的页面、废弃的母版、临时拖进来的图片清一遍文件体积往往能瘦一半。这不是洁癖是让下一次打开它的时候不卡。第五也是我最想说的一条别把 Axure 当唯一工具。它的强项是逻辑原型弱项是视觉设计和高保真视觉稿。实践中更高效的组合是——视觉稿在设计工具里做交互动线和逻辑用 Axure 表达两者各司其职。硬要用一个工具干所有事最后往往是两边都不够好。想清楚每个工具的边界然后把它们拼起来用这才是真正省时间的方式。
Axure RP9 安装配置与交互原型实战：中继器、动态面板、发布交付
1. Axure RP9 是干什么的谁真的需要它如果你在做产品、做交互或者经常需要把一个想法讲给别人听那 Axure RP9 这个名字大概率在你的下载列表里躺过。它不是什么新鲜工具但在原型设计这个圈子里它一直是重型装备的代表——能画静态页面也能做带逻辑的可点击原型甚至能做数据列表的增删改查模拟。很多团队的 PRD 已经从纯文字 Word 迁移到了文档 Axure 原型的组合原因很直白文字描述一套交互流程开发看完有五种理解扔一个能点、能填、能翻页的原型过去理解就收敛成一种。这篇内容我打算按真实上手顺序讲从判断要不要装、怎么装、装完怎么调一直讲到用它做出一个能交给开发的原型。中间会带上我自己反复踩过的坑比如字体突然变成方框、预览打不开、中继器数据不动、团队协作时文件互相覆盖。适合三类人看刚入行、第一次接触原型工具的产品新人从其他轻量工具迁过来、想搞明白 Axure 那套事件—动作—目标模型的老手以及只是临时要交一份可点击方案、不打算长期深耕的兼职选手。1.1 原型工具的几个流派Axure 站在哪一边原型工具大致分三档。第一档是纸面草图和白板快但没法交付。第二档是 Sketch、Figma、即时设计这类视觉设计工具它们做高保真视觉和简单跳转很强交互逻辑稍复杂就要靠插件或者变通。第三档就是 Axure、ProtoPie 这类以逻辑为核心的交互原型工具。Axure 的定位很明确视觉表现中上逻辑表达极强尤其是条件判断、变量、函数、动态面板状态机、中继器数据集这几块别的工具要么没有要么做起来别扭。举个具体例子你就懂了。一个登录后根据角色跳不同首页的流程在 Figma 里你得画好几个页面然后用原型连线硬凑角色判断根本做不了真逻辑在 Axure 里就是一句条件判断的事如果 用户名 等于 admin打开页面 A否则打开页面 B。再比如一个带搜索、翻页、排序的订单列表Axure 的中继器元件可以在不写一行代码的前提下模拟出来这对需求评审的价值极大——开发一眼就知道你要的分页是每页十条还是二十条。代价也很明显Axure 的学习曲线比那些拖一拖就出图的工具陡界面看着像 2010 年的软件性能还偏重文件一大就卡。所以它不是万能解你得分清楚自己属于哪种场景。1.2 RP9 这个版本到底改了什么Axure RP9 相对 RP8 最大的变化有三个方向值得单独说一下因为它们直接影响你怎么装、怎么用。第一是协作方式。RP9 把团队项目、云分享、评论这些能力整合进了 Axure Cloud 体系发布原型不再只是生成一堆 HTML 丢到服务器上而是可以直接发到一个链接里评审的人能在页面上直接留评论、圈选位置。这对远程团队是很实在的提升。第二是界面和交互编辑器的重构。RP9 把右侧面板拆成了样式交互说明几个独立标签交互用例的编辑从原来的弹窗式变成了侧栏式写多条件、多动作时不用来回滚动。画布上的控件尺寸、位置、边距也支持更精细的数值输入。第三是中继器和动态面板的能力增强。中继器支持了更完整的数据集操作、分页、排序、筛选配合项加载时事件可以做出非常接近真实的数据列表交互动态面板支持固定到浏览器100% 宽度滚动条这些自适应行为做移动端和响应式原型时省了不少手工活。需要提醒的是RP9 的授权模式改成了订阅制为主和老版本的买断制不一样。这一点在你决定要不要长期用之前最好先想清楚。1.3 哪些人适合上手哪些人不必硬上我见过太多人装完 Axure 然后用它画了三张静态页面就再也没打开过。说实话如果你的工作只需要画页面布局、连几个跳转、给别人看视觉效果那用 Figma 或者团队现有的设计工具就够了学 Axure 的时间成本收不回来。但如果你符合下面任意一条我建议认真学需要做带条件判断、带数据模拟的复杂流程需要输出给开发看的规格说明包括元件尺寸、交互逻辑、字段说明需要在评审会上直接演示用户点了这个按钮之后会发生什么团队已经用 Axure 作为标准交付物你不用就没法对齐。这几种情况下Axure 的重反而是优势因为它把逻辑说得足够清楚减少的是沟通成本省下来的是返工时间。2. 装之前先把三件事定下来版本、系统、授权很多人卡在安装这一步其实问题不在安装过程而在于装之前没想清楚三件事你的电脑能不能顺畅跑、你要用哪个版本、你打算怎么解决授权。这三件事想明白了安装本身五分钟就结束了。2.1 系统与硬件门槛Axure RP9 是桌面客户端Windows 和 macOS 都有对应版本而且它至今没有官方的网页版所以你必须装本地软件。这一点很多人第一次找的时候会困惑以为它有在线版可以直接用。硬件上它对配置要求不算高但因为它图形元素多、实时渲染重实际体验和配置强相关。我自己的判断标准是这样的内存 8GB 是底线16GB 才舒服尤其是你同时开着浏览器、即时通讯工具和 Axure 的时候磁盘一定要留出足够空间Axure 的临时文件、自动备份文件、生成的 HTML 输出目录都会吃空间我个人习惯给项目文件单独留 20GB 以上的余量屏幕分辨率建议 1920×1080 起步低于这个值右侧面板会挤在一起改数值很痛苦有条件上 2K 或更高画布可视区域大一圈效率差别很明显。系统版本方面Windows 建议 10 及以上macOS 建议近几个大版本内太老的系统可能遇到安装包签名校验失败或者启动崩溃。这不是吓唬人我就见过在很老的 Windows 上装完之后一点预览直接闪退的情况折腾半天最后发现是系统组件太旧。提示如果你的电脑是公司统一配发的装之前最好确认一下有没有软件白名单策略。Axure 生成的本地预览会启动一个本地服务并占用端口某些安全策略会拦这个行为导致你点了预览但浏览器打不开。2.2 试用、订阅、团队版怎么选Axure RP9 的正规获取方式只有一种从官方渠道下载安装包然后按官方提供的授权方式使用。官方提供有期限的试用试用期内功能基本是全的足够你判断这个工具值不值得投入正式长期使用则是订阅制按人按周期计费团队场景有对应的团队版本会额外包含协作、共享工程管理这类能力。这里我要把话说清楚网上流传的各种破解版免费密钥授权密钥生成器我一律不建议碰。原因不是道德说教而是很实际的风险——这类安装包来源不可控被塞进挖矿程序、窃取浏览器凭据的样本、后门的情况并不少见而且你做出原型往往是要给客户或者公司内部看的文件里可能带着真实业务数据一旦因为工具本身出了问题导致泄露责任算谁的很难说清。另外破解版通常伴随必须关闭自动更新必须屏蔽联网校验用起来处处别扭某天突然打不开耽误的是你自己的交付节点。我的建议是短期需求用官方试用期把该练的练完长期要用就规规矩矩走订阅把它当成一笔正常的生产力工具开销。这笔钱相对于你反复改需求的工时其实很划算。2.3 安装包从哪来怎么避免踩雷只从官方站点下载这是唯一可靠的来源。下载的时候注意两件事一是确认你下载的是你操作系统对应的版本别下错了平台二是下载完成后留意安装包的体积和数字签名正常安装包体积在一个合理范围内属性里能看到发行方签名信息如果签名缺失或者发行方信息看起来不对直接删掉重新下。还有个细节下载过程中如果网络不稳定导致文件不完整安装时会出现各种莫名其妙的报错比如安装包已损坏无法读取归档。遇到这类错误第一反应应该是重新下载一遍而不是去搜各种修复工具。我因为这个浪费过整整一个下午。3. 安装实操Windows 与 macOS 两条路线安装本身不复杂但两个平台各自有几个容易卡住的点我分开说。3.1 Windows 下的安装与常见拦截Windows 上的流程是双击安装包选择安装路径等待解压和写入完成后从开始菜单启动。安装路径建议不要选带中文和空格的目录虽然现在大部分软件对中文路径的兼容性已经好很多但 Axure 在生成 HTML、写临时文件的时候偶尔会因为路径字符出问题用纯英文路径最省心。安装过程中最常见的拦截有两个。一个是系统弹出已保护你的电脑之类的提示这是因为安装包不是来自应用商店属于正常的 SmartScreen 提示你确认来源可信之后继续即可。另一个是杀毒软件在安装或启动时直接把进程隔离掉表现是安装到一半突然失败或者装完之后双击没反应。这种情况不要急着卸载杀毒软件先看它的隔离记录确认是不是误报然后把安装目录加入信任列表再重新装一次。还有一点安装完成后第一次启动会明显慢它在初始化配置、检查更新、准备渲染环境这时候别以为卡死了就去强杀进程。我一般会等它自己出来最多等个一两分钟。3.2 macOS 下的安装与权限放行macOS 上通常是下载到磁盘映像文件打开之后把应用拖进应用程序文件夹。这一步很多人第一次会漏——直接在磁盘映像里双击运行能用是能用但重启之后就找不到了而且部分功能会因为运行位置不对而异常。拖进应用程序文件夹之后首次打开可能遇到系统提示无法验证开发者或者来自身份不明的开发者无法打开。这是系统的安全策略在起作用。正确的处理方式是去系统设置里找到隐私与安全性在安全那一栏确认允许打开然后再启动一次。不要用那种关闭整个安全机制的野路子那相当于把你后面所有的风险敞口都打开了得不偿失。另外 macOS 上要注意输入法和快捷键的冲突。Axure 里大量使用组合键如果你开了某些输入法的全局快捷键会出现按键被吞掉的情况表现是按了没反应。我的习惯是在用 Axure 的时候切成系统自带英文输入法冲突会少很多。3.3 首次启动要做的几项设置第一次进到主界面先别急着画东西把下面几项设置调好后面能省很多事。第一是自动备份。Axure 有自动保存和恢复机制但默认间隔可能偏长我会把间隔调短一点同时确认备份目录在一个空间充足的位置。这不是多余动作Axure 偶发崩溃的概率不算低尤其是在你操作大文件、频繁切换面板的时候有个近期的备份能救命。第二是默认字体。这一步特别关键直接决定你会不会遇到文字变方框。做法是新建一个空白文件在页面样式里把默认字体设置成你系统里确定存在的字体中文用思源黑体、微软雅黑这类通用字体都比较稳然后把这个文件另存为模板之后新建项目都基于这个模板。原因我放到后面第七节详细讲这里你先记住别用系统里可能没有的字体。第三是单位和栅格。默认单位一般够用栅格和辅助线我建议打开后面排版对齐全靠它。第四是确认工作目录结构。我个人的习惯是按项目名/源文件/输出/素材/备份分目录源文件只放 .rp 文件生成的 HTML 单独放输出目录素材图片单独放素材目录。你可能会觉得这是强迫症但当你一个项目里的图片有二三十张、输出过七八次 HTML 之后不这么分你真的会找不到文件。3.4 中文字体和界面语言的处理Axure 的界面本身对中文支持是没问题的你需要自己关注的是字体在别人电脑上能不能显示。Axure 生成 HTML 原型的时候理论上可以打包字体但实际做法通常是依赖访问者本机字体。这就带来一个经典问题你在自己电脑上用了一个特殊字体看着很漂亮发给同事打开之后全变成默认字体排版全乱。解决办法有两个一是只用通用字体二是生成时勾选嵌入字体的相关选项但后者会显著增大输出体积。我自己的取舍是正文、按钮、标签这类功能性文字一律用通用字体只有极少数需要强调视觉的地方才用特殊字体并且提前告知对方。这样最稳。还有一个容易忽略的点中文和英文混排时的行高。Axure 里设置行高是绝对值用英文字体的行高去套中文会出现字挤在一起或者行距过大的情况。我的做法是把中文段落的行高设成字号的 1.5 到 1.8 倍实测下来阅读体验最舒服。4. 界面速通五大区域和四个核心概念装完、设置调好接下来要做的是别慌。Axure 的界面看起来元素很多但它其实就是一个固定的分区逻辑理解了分区找功能就不迷路。4.1 界面分区与面板职责从上到下、从左到右主界面大致是这样几块。顶部是菜单栏和工具栏。菜单栏里文件、编辑、视图、项目、布局、发布、账户、帮助这几组是你要熟的尤其是项目下面的全局设置、页面样式、元件样式管理器发布下面的预览、生成 HTML、发布到云这两个菜单的使用频率最高。工具栏上是常用操作的快捷入口对齐、分布、层级、组合这些都在这里。左侧是页面面板和概要面板。页面面板管理你的所有页面支持文件夹分组这是组织项目的关键概要面板用树状结构展示当前页面上的所有元件元素一多的时候靠它来选中特定元件比在画布上点要准得多。中间是画布也就是你干活的区域。画布可以缩放、可以拖出标尺辅助线支持多页面标签切换。右侧面板分三块标签样式、交互、说明。样式面板管外观包括位置尺寸、填充描边、字体段落、圆角阴影交互面板管行为包括交互样式、交互用例、元件属性说明面板管文字说明你在这里写的字段说明可以随原型一起导出给开发看。底部是页面属性、元件样式等入口。移动端项目里页面属性的页面尺寸和自适应视图要在这里调。4.2 页面、母版、动态面板、中继器四个核心元件我一个个说清楚它们各自解决什么问题。页面是最基础的容器单元。一个页面通常对应一个完整界面比如登录页、首页、详情页。页面可以建文件夹分组我建议按模块分比如用户中心/订单模块/设置模块别把所有页面平铺着堆在一起。母版解决复用问题。导航栏、页脚、侧边栏、弹窗这些在多个页面重复出现的东西做成母版之后改一处全站生效。母版有两种放置方式一种是拖放即链接你把母版拖到画布上它就成了一个引用改母版所有引用处同步更新另一种是拖放任意位置相当于复制一份独立副本。搞混这两个是新手最常见的坑做出来的导航改了母版发现某个页面没变就是这个原因。动态面板是 Axure 交互能力的核心。你可以把它理解成一个卡片盒同一个位置放好几张卡片状态通过交互切换显示哪一张。标签页切换、轮播图、下拉菜单、弹窗、折叠面板本质都是它。动态面板还有个实用属性叫固定到浏览器用来做吸顶导航或者固定侧边栏。中继器是数据列表工具。它有一份数据集像一张表格然后通过项加载时事件决定每一行怎么渲染。配合它自带的分页、排序、筛选能力可以在不做后端的情况下模拟出很真实的列表交互。学习成本是这几个里最高的但一旦掌握你能做出来的原型档次会明显不同。4.3 交互的三段式模型事件 → 动作 → 目标Axure 的交互逻辑就一句话什么事件触发执行什么动作作用在哪个目标上。事件是触发条件比如单击时鼠标移入时载入时文本改变时状态改变时。动作是你要做的事情常见的有打开链接设置面板状态显示/隐藏移动旋转设置文本设置选中设置值设置列表选中项显示菜单。目标是动作的对象可以是某个元件、某个动态面板、当前元件、也可以是一个表达式算出来的结果。再加上两个补充概念就完整了。一个是交互样式管鼠标悬停、按下、选中、禁用、错误这几种视觉状态不用写交互用例直接在样式里勾选就行做按钮反馈最省事。另一个是条件判断在动作上可以加如果...则...用来做分支逻辑判断对象可以是元件文字、选中状态、面板状态、变量值、也可以是函数表达式。把这套模型记住你在 Axure 里看到的绝大多数功能就都能归位了它是事件、动作还是目标。5. 拿一个真实场景练手从空白到可点击原型光看概念没用找个具体场景走一遍。我用一个订单管理后台的简化版做例子包含导航、列表、筛选和详情弹窗覆盖了日常最常用的那几个功能。5.1 画布、栅格与页面样式定基准先进项目里的页面样式设置定三件事页面尺寸、默认字体、背景色。后台项目我一般用 1440 宽作为基准高度自适应移动端项目用 375 宽。然后打开栅格。我习惯设成列栅格列宽 20列间距 20内容区左右各留 40 的边距。这个数字不是随手定的——20 的基准能让大部分间距落在 8 和 4 的倍数上和主流前端框架的间距体系能对上你后续跟开发沟通这个间距是 20的时候对方不需要做换算。辅助线也拉上主要内容的左右边界各拉一条后面所有元件贴着辅助线对齐。这一步看起来琐碎但它是整个项目的地基。我见过太多人上来就画画到第五个页面发现每个页面的边距都不一样回头统一又要重画一遍。5.2 用母版解决导航与页脚导航栏这种要在十几个页面出现的东西必须做母版。做法是新建一个母版在里面画好顶部导航左边是产品名称中间是菜单项右边是用户信息。菜单项的状态切换可以先用交互样式做悬停变色。画完之后在每个页面顶部把它拖进来。关键细节有三个。第一是放置方式一定要选拖放即链接这样以后改母版能全站同步第二是母版的尺寸要精确高度设成实际高度因为它是按自身高度占位的高度不对会出现遮挡第三是如果导航后面还要放内容内容区的起始位置要考虑母版高度我一般会用一条辅助线标出来避免每次都要重新量。页脚同理。侧边栏如果每个页面的当前菜单项不一样有两个选择要么做多个母版变体要么在母版里用交互根据变量控制选中状态。小项目用前者更省事大项目用后者更规范。5.3 动态面板做状态切换订单详情我用弹窗来做弹窗本质就是一个动态面板。先画一个铺满页面的半透明遮罩矩形再画一个居中的白色卡片作为弹窗主体把这两样东西一起选中右键转换为动态面板命名为详情弹窗。这时候它只有一个状态我给它加一个空状态把默认状态设为空状态。然后给列表里的查看详情按钮加交互单击时设置面板状态为详情弹窗到有内容的状态同时做淡入效果遮罩上添加交互单击时设置面板状态回到空状态。这样点开、点关闭就通了。这里面有个细节特别容易出问题动态面板的尺寸和内部内容不匹配。如果你把弹窗内容画得比面板大超出部分会被裁掉表现就是内容显示不全。我的习惯是画完内容之后选中面板用右键菜单里的适应内容大小让面板自动贴合然后再手动微调。再一个细节是层级。遮罩必须在弹窗下面弹窗必须在遮罩上面不然会出现遮罩盖住弹窗点不了的情况。层级用工具栏上的置顶置底调整或者在概要面板里拖动排序。5.4 中继器做可筛选的数据列表中继器是这块的重点我拆成三步。第一步是准备数据。拖一个中继器到画布上双击进去编辑数据集列名我设成订单号、客户、金额、状态、时间五列然后手动填个十来行测试数据。数据不用很真实但建议字段值的类型要对——金额用数字、时间用日期格式后面排序才正常。第二步是设计行模板。在中继器的项模板区域里把上面这几个字段用矩形或文本标签摆成表格的一行。然后关键一步给每个要显示数据的元件绑定数据。选中文元件在交互面板找到项加载时事件添加动作设置文本值选对应的数据列名用中继器的表达式包起来。这样每一行渲染的时候就会自动填入对应数据。这个绑定过程有点绕但每一列绑一次就完了之后数据变了行内容会自动更新。第三步是筛选和分页。筛选我会在上方放一个文本框加搜索按钮按钮的交互里对中继器添加添加筛选动作条件写成客户列包含文本框的值。分页更简单选中中继器在属性里设置每页项目数为 10同时把分页控件拉进模板Axure 会自动处理翻页逻辑。这三步做完你就有了一个能搜、能翻页的列表而这一切没有写任何代码。我给开发演示这个原型的时候他们对需求的理解速度明显快很多因为每页十条还是二十条搜索是模糊匹配还是精确匹配这些问题全都在原型里定死了。注意中继器的筛选是叠加的不是替换的。如果你连续添加了两次筛选条件它会取交集。所以做重置筛选按钮的时候记得用移除筛选动作把所有条件清掉不然用户点了几次搜索之后列表会越来越空。5.5 交互用例与预览调优功能串起来之后一定要用预览走一遍流程。预览会启动本地服务并在浏览器里打开原型这时候你才是用户视角很多在编辑界面里看不出来的问题会暴露出来。我一般重点检查这几项。跳转链路是否闭环有没有哪个按钮点了没反应或者跳到莫名其妙的页面动态面板状态切换后返回时状态有没有复位如果没复位用户第二次点开会看到上次的残留状态滚动区域是否正常固定到浏览器的元件在滚动时会不会和内容重叠表单控件的交互样式输入框聚焦之后有没有明显反馈。预览还有个很方便的用法是做对比测试。你可以把同一个页面的两个方案放在不同页面里让同事看问他们第一眼更想点哪个。比拿着静态图问要靠谱得多。6. 发布、分享与交付原型做完了怎么送出去是另一回事。Axure 提供了几种方式各有各的适用场景选错了会很尴尬。6.1 本地生成 HTML发布菜单里选生成 HTML它会输出一整套静态文件包括页面、脚本、样式和资源。这套文件可以直接丢到内网服务器或者静态托管上别人用浏览器访问就行。生成时几个选项要注意。一个是选择生成的页面范围测试阶段可以只生成改动过的页面省时间正式交付再全量生成。另一个是资源路径如果对方是直接双击 index 文件打开用相对路径如果放到服务器上可能要根据目录结构调整。还有自动生成站点地图、搜索、评论这些附加功能按需勾选勾多了体积会变大。生成完之后我建议自己先完整点一遍尤其是跨页跳转和图片加载因为资源路径的问题往往在本地打开时才暴露。同时记得把输出的文件按版本命名比如加上日期不然几次输出之后你根本分不清哪个是最新的。6.2 云协作与版本管理Axure 支持把原型发布到云端生成一个可访问的链接评审的人直接在页面上圈选位置留评论。这个功能在远程协作里非常实用尤其是你不想让原型文件在群里传来传去、改一次发一次的时候。团队项目的话还涉及共享工程的概念。多人同时编辑一个工程需要一个统一的存储位置每次编辑前取出、编辑完签入。这套流程听起来正式但它解决的是真问题——两个人在同一个文件上各自修改最后保存的时候互相覆盖这种事故在团队里并不罕见。需要了解的是不同授权类型能用的协作能力不一样团队版才包含完整的共享工程管理。所以如果你是小团队确定要多人协作的话选型的时候要把这一项考虑进去别等用起来才发现缺功能。6.3 交给开发和测试的交付规范原型交给开发光有页面是不够的还有几样东西要一起给。第一是说明文字。在说明面板里给关键元件写清字段含义、字数限制、格式要求、校验规则比如手机号11 位数字非数字输入时提示格式错误。这些说明可以随原型导出比在群里挨个回复高效得多。第二是交互逻辑的书面版本。原型虽然有交互但开发看代码的人不一定有耐心点完所有路径。我会额外整理一份交互清单按页面列出每个按钮的动作、条件、跳转目标。第三是切图资源。Axure 里用到的图片、图标单独打包一份命名规范避免开发从 HTML 里扒资源。第四是版本标识。在原型首页放一个字版本号和更新日期评审的时候所有人看的是同一版避免你改的是哪里我看的不是这个版本这种扯皮。7. 踩坑实录安装、运行、发布三类问题排查表下面这些是我和身边同行实际遇到过的问题按阶段整理方便你对照排查。7.1 安装与启动阶段现象可能原因处理思路安装到一半报错退出安装包下载不完整或被安全软件拦截重新下载官方安装包检查隔离记录并把安装目录加信任双击图标没反应进程被拦截或依赖组件缺失用任务管理器看是否有残留进程重启后重试检查系统更新启动特别慢首次启动在初始化环境、检查更新耐心等一到两分钟别强杀进程提示无法验证开发者系统安全策略正常拦截到系统安全设置里确认允许打开不要整体关闭安全机制安装后找不到程序macOS 下没有拖进应用程序目录重新拖入应用程序文件夹后再启动关于这一类问题我有个通用的排查思路先判断是装不上还是启动不了。装不上多半是文件本身或安全拦截的问题启动不了多半是环境或权限的问题。分清楚了处理方向就不会跑偏。7.2 编辑阶段现象可能原因处理思路文字显示成方框或乱码使用了本机没有的字体换成通用字体或用模板统一默认字体改了母版但某些页面没变该页面用的是拖放任意位置的独立副本删掉副本重新以拖放即链接方式拖入动态面板内容显示不全面板尺寸小于内容尺寸右键适应内容大小再手动微调点击被上层元件挡住图层顺序错误在概要面板调整层级或把遮罩移到正确位置中继器数据不显示项加载事件里没有绑定数据列逐列检查设置文本动作是否指向正确数据列文件越来越大、操作变卡元件过多、图片未压缩、页面未分组拆分文件压缩图片用母版替换重复元件快捷键按了没反应输入法全局快捷键冲突切到英文输入法再操作字体问题是编辑阶段最高频的坑我在第三节已经提前铺垫了。这里再强调一次做原型之前先把默认字体定下来比事后一个个改要省太多时间。7.3 预览与发布阶段现象可能原因处理思路点预览浏览器打不开本地端口被占用或被安全策略拦截换个端口重试确认安全策略允许本地服务生成的 HTML 打开是白屏资源路径错误或文件未完整生成用浏览器控制台看报错检查是否用相对路径重新全量生成别人打开后字体和排版变了依赖本机字体对方没有同款改用通用字体或生成时嵌入字体图片不显示图片用了本地绝对路径未随文件打包把图片导入为项目内资源不要直接引用外部文件页面跳转错乱页面重命名后链接未更新在项目里用查找替换检查失效链接分享链接对方打不开权限设置或链接有效期问题检查分享权限确认链接是否已过期或被撤回提示预览打不开的时候先别怀疑 Axure 坏了。八成是端口或安全策略的问题。最快的验证方法是换一个项目新建一个空白页面再预览一次如果空白页能打开说明是项目文件的问题如果空白页也打不开那就是环境问题方向完全不同。8. 提效清单快捷键、自建元件库与我的几条经验前面讲的都是能用这一节讲用得快。8.1 高频快捷键用熟快捷键之后你的操作速度大概能提升三成以上。下面是真正高频的那几个。快捷键作用Ctrl/Cmd S保存Ctrl/Cmd Z撤销Ctrl/Cmd Y重做Ctrl/Cmd A全选当前页面元件Ctrl/Cmd C / V复制 / 粘贴Ctrl/Cmd G组合Ctrl/Cmd Shift G取消组合Ctrl/Cmd Shift S另存为F5预览空格 拖拽平移画布Ctrl/Cmd 滚轮缩放画布需要说明的是不同版本的快捷键可能有细微差异最准的做法是在帮助菜单里找到快捷键清单对着过一遍。另外对齐、分布这两个操作虽然没有默认单键但我建议你把顶部对齐水平分布这两个加到工具栏的常用位置比每次点菜单快得多。8.2 自建元件库维护Axure 自带的基础元件库够用但不够快。真正提效的做法是建自己的元件库。我的做法是这样每做完一个项目把里面复用价值高的元件挑出来——表单输入框、按钮的几种状态、带图标的列表项、空状态提示、常见的弹窗模板——整理到一个专门的元件库文件里。整理的时候要注意三点命名要规范比如用按钮/主按钮/常规这种带层级的命名而不是矩形 12每个元件内部用组合包起来拖出来就是一个整体不会散架把常用的交互样式提前设好比如按钮的悬停和按下状态这样拖出来就能用。这个习惯坚持两三个项目之后你新建原型的起点会完全不同很多页面是拖出来改文字而不是从头画。我自己的元件库已经积累了差不多六十多个常用元件做一套后台页面的时间从原来的两天压到半天。8.3 我个人在实际操作中的几点体会第一别一上来就追求高保真。原型的价值在于把逻辑讲清楚不在于画得多好看。我早期花了大量时间调渐变色、找图标结果评审的时候大家讨论的还是流程问题。先做低保真把链路跑通确认逻辑没问题之后再往视觉上投入这个顺序不能反。第二命名和分组要养成习惯。当你一个页面有五十个元件的时候矩形 23矩形 24这种名字会让你彻底崩溃。我一般是画完就顺手命名或者至少把相关的几个元件组合起来命名。这十几秒的投入在你三天后回来改需求的时候会十倍地还给你。第三文件要拆别什么都塞一个文件里。Axure 对单个文件的元件数量是有承载上限的超过之后操作会明显卡顿。我一般按模块拆用户模块一个文件订单模块一个文件最后用母版和链接串起来。拆的时候把公共母版抽出来单独维护避免改一处要改好几个文件。第四定期清理。项目做完之后把没用到的页面、废弃的母版、临时拖进来的图片清一遍文件体积往往能瘦一半。这不是洁癖是让下一次打开它的时候不卡。第五也是我最想说的一条别把 Axure 当唯一工具。它的强项是逻辑原型弱项是视觉设计和高保真视觉稿。实践中更高效的组合是——视觉稿在设计工具里做交互动线和逻辑用 Axure 表达两者各司其职。硬要用一个工具干所有事最后往往是两边都不够好。想清楚每个工具的边界然后把它们拼起来用这才是真正省时间的方式。
