简介:一份面向网页、App与桌面应用设计人员的Axure RP Pro原型设计实践汇编,系统讲解从组件拖拽、界面布局到交互逻辑定义的全流程,帮助读者快速创建交互式原型并降低设计迭代成本。教程以SNS社区首页为实操案例,分章节演示页面头部底色、Logo插入、登录框、快速注册、底部链接等模块的制作方法,穿插大量Tips与快捷键提示。内容覆盖组件精确定位(Edit Location and Size)、多选对齐基准规则、Anotations注释管理、下拉菜单选项编辑、动态面板与事件动作设置,还介绍了HTML、Word、CSV及图片导出等多种发布方式,可输出能进行用户体验测试、接近真实应用的原型。压缩包内仅有1个pdf文件,大小5.57MB,结构紧凑,可直接作为案头手册查阅。目前已有484人学习,适合刚接触原型设计的新手对照练习,也便于进阶设计师查漏补缺、提升设计效率。
1. 原型设计的第一份案头书:Axure教程汇编到底在讲什么
如果你是产品经理、交互设计师,或者刚转岗做B端系统的功能原型,手头这份《Axure教程[汇编].pdf》大概率是你在搜索引擎里翻到的第一份系统资料。它把散落在官方文档、视频课和论坛里的Axure知识点,按“安装—元件—交互—发布”的顺序整理成一份可离线查阅的手册。和东一榔头西一棒子的视频教程比,优势是能快速定位:今天要画一个下拉筛选,直接翻对应章节。我自己的习惯是,用它做目录索引,再用实际项目反向验证每个知识点。它能帮你解决的问题很具体:从不知道元件库在哪,到能做出带条件判断的可点击高保真原型。适合零基础起步,也适合做了一段时间但只停留在拖拽层面的熟手补上交互逻辑这块短板。
2. 从安装到跑通:RP 9 与 11 的授权、汉化和初始配置
很多人被第一关“安装”卡住,不是因为下载不到,而是装完后发现界面上全是英文,或者在团队协作时被告知授权不可用。其实这些问题都可以在正式画原型之前一次性解决,并且步骤非常固定。下面按版本选择、授权激活、工作区配置、中文显示四个方向展开。
2.1 版本选择:为什么多数教程还停在 RP 9
打开这份汇编,你会发现大多数截图左上角是“RP 9”的字样。这不完全是教程作者偷懒,而是同类工具在9这个版本上已经形成了稳定的操作心智。RP 9 将交互面板、样式面板和页面管理分成三个独立区域,逻辑清晰,参数集中;RP 11 在界面风格上做了扁平化改造,属性面板被收纳进右侧抽屉,视觉上更现代,但对不熟悉新版的人来说,刚开始会找不到“交互”模块在哪。
另一个现实因素是插件生态。很多团队自建的元件库、图标库、甚至是内部的表格组件,都是基于 RP 9 的 .rplib 格式沉淀的。RP 11 对旧文件的兼容方式是从打开再另存,部分老插件会失效。如果你所在的公司已经积累了这套资产,升级前必须做一轮兼容测试。
我的建议是:如果只是个人学习或做小型项目,直接用 RP 11;如果是要跟着这份汇编一步步操作,建议先装一个 RP 9 做练习,等把原理吃透后,再回到 RP 11 的界面里重做一遍。这样你既不会因为版本差异卡住,又能吃到新版在矢量图和自动布局上的改进。版本选择这件事,核心不是“新版一定好”,而是“你的教程、团队和素材哪个版本占比大,就用哪个”。
| 对比项 | RP 9 | RP 11 |
|---|---|---|
| 界面布局 | 三段式面板,交互/样式分栏 | 右侧抽屉式,属性集中 |
| 旧文件兼容 | 可直接打开历史文件 | 需另存为新格式 |
| 插件生态 | 成熟,团队模板丰富 | 逐步完善 |
| 适合场景 | 跟随教程、稳定交付 | 新团队、新项目 |
2.2 授权激活的三种正规渠道与常见误区
先说结论:Axure 提供官方试用期,在试用期内,除了不能保存团队项目到云端,其余画图、预览、生成 HTML 的功能都是完整的。对自学而言,试用版完全够用;对正式交付,才需要购买授权。正规授权一般有三个来源:官网个人授权,适合独立设计师或小团队按人头购买;团队订阅,适合需要多人共享原型审阅、使用 Axure Cloud 协作的企业;教育授权,适合在校学生和教师,价格优惠,但需要提供学校邮箱验证。
网上能搜到不少“授权密钥”相关的内容,我劝你不要在上面浪费时间。非官方渠道的密钥往往会失效,而且可能捆绑了非官方安装包,安装后可能出现系统安全提示或文件被篡改。更麻烦的是,团队协作时 Axure 的服务端会校验账号,使用非法授权会导致无法加入团队项目,甚至被清退。实际上,Axure 的授权是按设备或账号绑定的,你不需要记密钥,登录账号即可激活。我一般在公司里直接让 IT 统一采购,个人学习则先试用一个月,确定要长期画原型再下单。
激活后,建议做两件事:一是检查“帮助-管理授权”里显示的账号和到期时间,避免某天突然提示“试用已过期”而慌乱;二是关闭“自动更新”或把更新策略改成手动。因为 Axure 的大版本升级会改变文件格式,团队里如果还有人用旧版,自动更新后保存的 .rp 文件对方可能打不开。这是很多协作冲突的根源,提前设好可以少半夜收到同事消息。
2.3 初始工作区配置:页面尺寸、网格与元件库路径
安装并激活后,不要急着从左侧面板拖元件。第一个要认真设置的选项是页面尺寸。Web 端原型我习惯用 1440×900,后台管理类界面用 1280×720 或 1366×768,移动端用 375×812。做法是:新建一个页面,在样式面板中修改“页面尺寸”,或者从“文件-原型面板”里设置默认尺寸。注意,页面尺寸影响的是预览时的画布大小,不是实际设备像素,不用设置成真实屏幕分辨率。
第二个是网格和辅助线。在“布局-网格设置”里,把网格步长设为 10px,同时开启“对齐网格”。这样拖动矩形或调整大小时,元件边缘会自动吸附到 10 的整数倍,后续使用“跨元件对齐”功能时,偏差会少很多。对于习惯了像素级还原的设计师,这一步可以显著减少“看起来差了 2px”的返工。
第三个是元件库路径。Axure 初始会加载系统内置元件库和本地“我的元件库”。为了避免换电脑后元件库丢失,我一般会新建一个项目目录,把 .rplib 文件统一放到该目录下的“libraries”文件夹中,然后在 Axure 的资源面板中点击“载入元件库”指向这个文件夹。这样整个项目打包发给别人时,不会出现元件库引用断裂。这里有一个常见的感知误差:元件库的“载入”是引用文件,不是复制。如果后来文件被移动或改名,旧页面里的元件仍会保留,只是无法从库面板再拖出同类的新实例。
配置完成后,可以随手画一个矩形,按下 F5 预览,确认界面能正常渲染。到这里,你已经有了一支能开工的“笔”,下面进入画页面骨架的阶段。
2.4 汉化与中文显示设置:避免乱码的三个细节
即使你打算用英文界面,也要处理中文显示问题。很多汇编教程里都提到“中文乱码”,尤其是从 Sketch 导入文字或从 Word 复制文本时,预览后变成方块。原因有三个:第一,Axure 默认字体在非中文系统下回退到系统默认字体,如果系统没有对应的中文字体,就会渲染为方块;第二,复制文本时携带了外部样式,字符集编码不一致;第三,在 RP 9 中,如果你在文本框输入中文后改了字体,有时预览时字体不会立即刷新。
解决办法很简单。打开“文件-原型偏好设置”,把“默认字体”设置为“微软雅黑”或“思源黑体”。在元件编辑时,选中所有文本元件,统一设置字体为指定中文小五或五号字号。复制外部文本后,先粘贴到纯文本编辑器里再粘贴到 Axure,能滤掉多余的 Word 样式。如果你的系统安装了中文字体但 Axure 列表里看不到,可以手动将字体文件复制到 Windows 字体目录,然后重启 Axure。
汉化插件这类工具我不建议使用。一方面,Axure 自身的界面英文并不复杂,用几天就记住了;另一方面,汉化工具会替换资源文件,可能导致菜单错位或学习时和教程截图对不上。这份汇编里的菜单名都是中文翻译,多看两遍就能建立“英文菜单=中文功能”的映射。真正值得花时间的,是让页面里的中文内容在预览和发布时保持一致,这比界面汉化重要得多。
3. 页面骨架与母版:先把交互前的底子打好
静态页面的搭建是交互原型的地基。很多人直接从设计稿里截图,往 Axure 里一摆了事,结果后面做交互时无法给局部元素绑定事件。正确的做法是用元件一点一点搭,让每一块可以被独立控制。这一章解决两个问题:如何高效搭出页面骨架,以及如何用母版让全局区块不重复劳动。
3.1 从矩形到列表:基础元件的选择和排列技巧
Axure 的元件库按功能分成常用、表单、基本、文件等内容。实际原型里出镜率最高的是矩形、文本、文本框、下拉列表和热区。矩形是所有版式的基础,既可以直接当模块背景,也可以输入文字变成按钮;文本标签负责展示标题和说明;热区则是一块透明区域,用来给图片或复杂图形挂载交互事件。我的习惯是:所有可点击的整块区域,都用一个看不到的“热区元件”罩在上面,而不是给图片本身加交互。这样以后更换图片时,不用重新绑定事件。
搭建页面骨架时,先画一个大的矩形作为内容区背景,然后在这个背景上叠加子模块。为了让模块对齐快速,多使用“右键-分布-水平/垂直分布”和“跨元件对齐”。比如顶部导航通常是高度 56px 的矩形,内部放一个 Logo 元件和两个菜单文本;左侧边栏是宽度 200px 的背景矩形,里面再放图标和文字组成一行选项。这里有一个容易忽略的层级关系:后画的元件默认在上层,多个元件重叠时,交互事件默认只响应最上层的可交互元件。所以热区要放到最上面,文本框要保证不被背景矩形盖住。
参数上,我一般给底色矩形设置边框为 none,圆角 4px;按钮矩形统一高度 36px,文字对齐居中;菜单文本用 14px 字号的微软雅黑。这些参数不是设计规范,而是为了预览时足够清晰。Axure 默认的元件间距比较紧凑,可以先全选页面里的主干元件,用“布局-间距”一次调整到 8px 或 16px。这比自己手动一个个拉动快得多。
3.2 母版:全局导航、页头页脚与状态切换
如果每个页面都重新画一遍顶部导航和侧边栏,效率会非常低。Axure 的“母版”就是为这类重复区块准备的。把导航、页头、页脚这些固定内容拖到母版里,再在普通页面中引用母版,之后修改母版,所有引用它的页面会同步更新。创建方式是:在左侧“页面”面板底部找到“母版”分类,右键新建母版,然后把元件拖进去;在普通页面中,从母版分类下将母版拖到画布即可。
母版有三个关键属性需要注意。第一个是“脱离母版”,如果某个页面需要个性化地改母版内容,你可以在该页面对母版实例右键选择“脱离”,此时它变成一个普通元件组合,后续母版更新不会再影响它。第二个是“固定定位”,在样式面板中打开“固定到浏览器窗口”,可以让侧边导航在页面滚动时保持不动,这比在每个页面里单独设置锚点更可靠。第三个是“置顶层级”,母版默认在所有普通元件之上,如果页面内容需要挡住母版的一部分,需要调整母版的发送顺序或使用“置顶”选项。
我通常会把三种母版分开:主框架母版(顶栏+侧边栏)、页面内容母版(比如表格表头)、弹窗母版。需要注意,母版里如果有交互元件,比如导航菜单的点击跳转,它在所有引用页面都会生效。这既是优点也是坑:一旦在母版里绑定了相对路径的跳转,而目标页面名称被修改,所有页面都会跳转失败。所以母版里的交互,尽量用页面名称引用,而不是选中某个具体页面后改位置。
3.3 自适应视图:用一套原型适配手机和桌面
产品评审时,最尴尬的事是同一个原型在投屏上是桌面布局,到手机上用 Axure App 预览却挤成一团。Axure 的自适应视图功能就是为这个问题准备的。它允许你在同一个页面里,为不同屏幕宽度流转不同的样式。
操作路径:在页面底部或样式面板中找到“自适应视图”按钮,点击新建视图,并设置最小/最大宽度。比如在桌面视图中设置 1440 宽,再建一个“手机 375”视图,宽度区间 360-414。进入手机视图后,可以调整元件的位置、大小,也可以隐藏某些不适合出现的模块。预览时,Axure 会根据浏览器窗口宽度自动切换对应视图。
| 视图名称 | 最小宽度 | 最大宽度 | 典型设备 |
|---|---|---|---|
| 桌面 | 1025 | 1920 | 显示器、投屏 |
| 平板 | 768 | 1024 | iPad 竖屏 |
| 手机 | 360 | 414 | iPhone 12/13/14 |
这里有一个必须注意的点:每个自适应视图里的元件是同一个元件在不同尺寸下的表现,不是复制一套。你在桌面视图里删掉一个元件,手机视图里也会消失。所以调整时要用“适应视图”面板中的“隐藏元件”功能,通过属性条件显示,而不是直接删除。另外,如果你是先从移动端设计稿做起的,建议把移动端设为主视图,再扩展到桌面,这样逻辑更顺。自适应视图的优先级遵循“宽度匹配最接近”的原则,如果设置不好,容易出现手机视图里看到两套导航叠加的玄学问题。我的经验是,先把每个视图的宽度区间间隔拉到 100px 以上,避免临界值处来回跳动。
3.4 页面属性与快捷键速查:让页面树变得可维护
页面树是原型的目录。每个页面右键打开“页面样式”,可以设置页面名称、对齐方式、背景色,以及在“页面注释”里写这一页的交互说明。命名上我强烈建议用“编号-模块-功能”,比如“02-订单-列表”和“02-订单-详情”,这样生成 HTML 后文件层级清晰,开发检索起来也方便。如果你修改了页面名称,需要注意所有引用该页面的链接会自动更新,但外部的标注文档不会。
快捷键方面,常用的是:F5 预览当前页面,Ctrl+Shift+F5 预览整个项目,Ctrl+加号放大画布,Ctrl+减号缩小,Ctrl+G 组合,Ctrl+Shift+G 取消组合,F2 重命名。这些高频操作熟练后,画页面的速度能提升一半。另外,Axure 的“动态面板”是管理多状态的神器,比如弹窗、轮播、Tab 切换。记住一个概念:动态面板本身是一个元件,里面可以包含多个状态,每个状态是独立画布。在交互事件中切换状态即可。这些在后面的交互章节会用到,但在搭骨架时,先学会创建动态面板并把内容放进对应状态,能避免很多返工。
4. 交互逻辑:从静态页面到可点击原型的落地路径
设计图变成可点击原型,靠的是 Axure 的交互系统。很多初学者误以为交互就是“给按钮加链接”,但真正的原型交互要能承载判断、循环和状态切换。这一章先把概念讲透,再给三个最常用的场景模板和一个动态面板的状态机思维。
4.1 事件、用例、动作:Axure 交互的三层结构
Axure 的交互逻辑由三个层次组成:事件是用户或系统触发的时机,比如“鼠标单击时”“页面载入时”“窗口改变尺寸时”;用例是某一事件下的一组处理流程,可以理解为一个 if 场景;动作是具体执行的操作,比如“打开链接”“显示/隐藏元件”“设置文本”。用笔试记录就是:事件(什么时候)-用例(什么条件下)-动作(做什么)。
在一个按钮上新建交互时,右侧面板会列出所有可用事件。你选中事件后,Axure 会自动创建一个名为“用例1”的分支,然后你需要点击“添加动作”,选择动作类型并设置目标元件。这样一个交互就完成了。如果后来需要增加一个分支,比如“当输入框为空时,弹窗提示;不为空时跳转”,就可以在同一个事件下再建一个用例,并给两个用例分别设置条件。
这里有个容易混淆的点:事件与用例的关系是“或”而不是“和”。同一个事件下的多个用例会从上到下依次判断,满足条件的用例执行,不满足的跳过;不会两个用例同时执行。所以如果你想表达“先做A再做B”,应该把它们放在同一个用例里按顺序添加动作,而不是分成两个用例。这个逻辑是后面所有复杂交互的基础,我几乎每次培训都要强调。
4.2 高频交互实现:跳转、弹窗、折叠、轮播
先说跳转。选中一个按钮,右键或右侧面板选择“新建交互-单击时-打开链接”,在动作配置中选目标页。注意“当前窗口”和“新窗口/新标签页”的区别:原型演示时一般用当前窗口跳转,避免标签页堆叠。如果你要做弹窗,第二个高频动作是“显示/隐藏”或“设置面板状态”。弹窗通常用动态面板承载,初始状态是隐藏的,点击按钮后显示,并设置一个半透明背景遮罩。
折叠面板的实现方式是:用一个动态面板,包含“展开”和“收起”两个状态,点击标题栏时切换状态。这比分别控制多个元件的显示/隐藏要稳定。轮播图稍微复杂,常见做法是动态面板里放多个状态,每个状态是一张图,交互事件“页面载入时-循环-下一个状态”,并设置间隔时间,比如 3 秒。关键参数是“循环”选项要勾选,否则切换一次就停了。
在这些高频交互中,我建议统一使用“交互样式”来反馈鼠标悬停和按下效果。选中元件后,在属性面板的“交互样式”里设置鼠标悬停时的填充色或边框,这样原型演示时用户能清楚地知道哪里可点。这个细节比任何动画效果都更能提升原型的可用性,且不会因为交互逻辑复杂而翻车。
4.3 条件分支:让原型根据输入产生不同反馈
当原型需要模拟登录校验、权限判断、表单验证时,就必须使用条件分支。Axure 的条件写在用例上方。以登录按钮为例:添加“单击时”事件后,先在用例上右键“启用条件”,选择“元件文本”“输入框”的“文本值”“等于”某个任意值。如果页面上有“[@name]”这样的变量,也可以直接比较变量。
具体流程是:创建一个文本框元件,命名为“inputUser”;再创建一个文本标签用于显示错误信息。登录按钮的单击用例设置条件:if “inputUser”的文本值等于 “admin”,则执行“跳转首页”;else,执行“设置错误提示文本为:用户名错误”。在实际设置时,Axure 需要用两个用例分别写 if 和 else,因为它的用例逻辑是“每个用例自带条件”。第一个用例条件为等于,第二个用例条件为“不等于”或“其他”。
条件分支的参数设置容易踩坑:比较的是“元件文本”还是“元件值”?对于输入框,我们通常比较“文本值”,这个值会随着用户输入变化;对于按钮,可能比较“状态”。另外,字符串比较是区分大小写的,如果你希望不区分,可以在条件里选择“不区分大小写”。这类逻辑做完后,建议用不同输入反复预览验证,因为条件分支里的小错误,比视觉错误更难发现。
条件分支写完后,点击“预览”按钮进入浏览器,用开发者工具或直接在页面里输出变量来验证。Axure 没有运行时控制台,所以最简单的做法是在关键位置放一个文本标签,把当前变量通过“设置文本”动作显示出来,观察是否符合预期。比如在登录失败时,把判断结果写到页面角落的隐藏文本里,看起来有点笨,但这比黑盒猜测高效得多。另一个习惯是给每个用例命名,比如“if_user_error”“else_success”,这样生成 HTML 后,在浏览器里查看时可以快速定位是哪个用例在生效。
4.4 动态面板的状态机思维:弹窗、加载与页面切换的通用解法
动态面板是 Axure 中当之无愧的枢纽元件。它像一个小型的多页面容器,元件本身在页面上有一个固定位置,内部可以切换多个状态。弹窗、抽屉、loading 动画、标签页都可以用“状态”来表达。我一般会在页面加载时,先把动态面板里的所有状态内容都摆放好,初始显示“状态1隐藏层”,然后用交互事件去切换。
一个典型的弹窗组成是:背景遮罩(动态面板外层)、弹窗内容(内层动态面板)、关闭按钮。点击遮罩时,设置面板状态为“隐藏弹窗状态”;点击弹窗按钮时,设置为“显示弹窗状态”。注意,动态面板的状态切换可以带过渡动画,比如“向下滑动”和“淡入淡出”,但动画时长不要超过 400ms,否则演示时会显得拖沓。
动态面板还有一个容易被忽略的属性:固定到浏览器窗口。如果弹窗需要在页面滚动时保持居中,就要在样式面板中勾选“固定到浏览器窗口”,然后设置水平/垂直居中。这比手动计算滚动偏移要可靠得多。学会了状态机思维,你会发现几乎所有界面反馈都可以建模成“当前状态+事件+目标状态”,这也是 Axure 交互设计的核心能力。
5. 避坑与排查:原型翻车时的 5 个高频问题
交互做完了,预览一跑就翻车,这几乎是每个用 Axure 的人都要经历的血泪阶段。很多问题不是操作错误,而是对 Axure 运行机制的边界理解不够。下面按我踩过的顺序,整理 5 个高频问题,每一条都包含现象、原因和解决方式。
5.1 元件错位与消失:固定位置和显示/隐藏的冲突
预览后某些元件从原本的位置跳开,或者整个组件不见了,重新打开文件又正常。我遇到最多的情况是给侧边栏勾选了“固定到浏览器窗口”,同时又在交互里用“移动”动作调整它的坐标,两个属性叠加后元件在页面滚动时计算位置错乱。另一个常见原因是动态面板状态切换时,某个状态里的元件没有放全,导致显示了空状态;检查方法是右键元件“在树中定位”,看它是否在正确的页面和面板状态中。解决时先把固定属性取消勾选,预览确认位置稳定后再重新勾选;移动动作的坐标尽量使用“当前坐标 + 偏移量”,避免绝对坐标与父级不对齐。
5.2 交互不触发:热区层级与用例条件的注意力陷阱
按钮加了单击事件,预览时怎么点都没反应,这是新手最常见的求助。原因通常有三种:一是按钮上方盖了一个透明矩形或热区,事件被上层元件拦截;二是按钮在母版里,母版被设置了“限制交互”;三是用例上有条件,比如“当输入框文本等于 admin”,但当前输入不匹配。排查时先按 Ctrl+Shift+A 打开“对象”面板,检查目标元件的层级,把遮挡它的元件移到下层;然后双击进入母版编辑器,看“属性”中是否启用了“交互限制”。最后临时禁用用例条件,如果点击能触发,就说明是条件判断的问题,逐条检查比较关系。
5.3 预览链接乱跳:页面名称变更与相对路径
本地预览时点击“打开链接”跳到了错误页面,或者直接 404。Axure 生成 HTML 时,链接使用的是相对路径,如果页面名称包含中文或特殊字符,在部分浏览器下 URL 编码会出问题;另外,如果你用“页面名称”做了展示名字,但实际文件名没有同步,也会导致链接失效。我的做法是页面树中的文件名统一用英文小写加短横线,比如 order-list、user-center,然后在“页面属性”中把“标题”设置为中文显示名。发布时用“发布-生成 HTML 文件”重新生成整个目录,不要只复制某个页面文件,避免相对路径断掉。
5.4 中文乱码与字体变形:设计稿到原型的显示差异
预览后中文变成方块或繁体,甚至文字被截断。原因一般是系统中不存在元件指定的字体,Axure 回退到系统默认字体;或者从 Sketch/Word 复制文字时携带了字体子集;也可能是文本框宽度不够且未设置自动换行。解决时先把全局默认字体设为“微软雅黑”,并给所有文本元件设置“字体-全部应用”一次。复制外部内容后,粘贴进 Axure 时选择“粘贴纯文本”或粘贴后清除样式。如果发布到 Axure Cloud 后仍乱码,检查生成 HTML 时是否勾选了“嵌入字体”;中文字体文件很大,不建议嵌入,优先保证常用系统字体的一致性。
5.5 团队协作文件损坏:SVN 提交冲突与备份习惯
团队通过 SVN 或 Axure Cloud 协作,某天同事打开共享文件提示损坏。根本原因是多人同时编辑同一个 .rp 文件,Axure 的自动保存与 SVN 提交产生冲突,或者有人直接覆盖了同事正在编辑的版本。解决方法是把页面树按模块拆分,规定同一时刻只有一个人编辑某个页面;提交前先执行 SVN 更新,解决完冲突再提交。更重要是养成备份习惯,每次大改前用“文件-另存为”生成带日期的副本,例如 order_rp_20250610v2.rp。如果文件已经打不开,可以尝试把 .rp 文件后缀改为 .zip 解压,看是否能抢救出资源文件,但这个操作成功率不高,真正的后悔药永远是周期性备份。
5.6 排查顺序:从预览到发布的一分钟定位法
当原型的表现不符合预期,别急着到处找原因。我习惯按“预览环境—页面属性—元件属性—交互用例—生成设置”的顺序排查。第一步,按 F5 预览,如果本地预览正常、导出后异常,问题多半在生成设置;如果预览一开始就不对,先刷新页面并清掉浏览器缓存。第二步,在 Axure 左侧页面树选中当前页,检查“页面属性”里的尺寸和自适应视图设置,很多“错位”其实是进入了大屏或小屏的响应式视图。第三步,选中疑似出错的元件,在样式面板中依次检查“可见性”“不透明度”“固定到浏览器窗口”三个开关,取消所有特殊属性后再试。第四步,查看事件列表,把用例逐个禁用再预览,用排除法锁定冲突用例。第五步,如果是链接跳转类问题,打开“生成 HTML 文件”对话框,确认输出目录干净,重新全量生成,不要只覆盖某个页面。
这套顺序能在一分钟内覆盖八成问题,也能让你在同事求助时显得很专业。我把它写在便签上贴在显示器边框,已经帮我少走了很多弯路。
6. 进阶技巧:用变量、函数和中继器做出“活”原型
如果前五章让你能做“看起来正常”的原型,这章就是让你的原型“动脑子”。变量负责存储状态,中继器负责模拟真实数据,两者配合,原型就能从演示工具变成需求验证工具。
6.1 变量与表达式:从登录态到动态数据
在“项目-全局变量”里新建一个变量叫 isLogin,初始值为 false。登录按钮的单击事件中,先“设置变量值”为 true,再跳转。页面载入时,用条件判断 if isLogin == true 就显示首页导航,否则显示登录按钮。这就是最简单的登录态模拟。Axure 的表达式支持字符串拼接,比如用 [[变量A]] 这种语法把用户输入插入到文本中,常用于展示动态问候语。
6.2 中继器:列表增删改查的轻量实现
中继器是一个带数据集的表格容器。在“样式”面板中,中继器有“数据集”属性,每行对应列表的一项。双击中继器可以设计每行的布局。要增加一条记录,使用动作“添加行”;要删除,使用“删除行”;要搜索,使用“对数据集进行筛选”。这个能力非常适合做订单列表、用户列表的模拟。我曾经在一个仓储管理原型里,用中继器实现了按状态筛选列表,评审时客户直接以为是真系统。
6.3 标注与交付:把原型变成开发接手的图纸
最后一步是交付。不要只丢一个 .rp 文件给开发。在页面左侧的“标注”模式下,可以添加注释,说明交互逻辑和边界条件。然后在“发布-生成 HTML 文件”时,勾选“包含标记”,开发在浏览器里点击元件就能看到注释。另一个技巧是在页面树中为每个页面设置“页面描述”,这样在生成的 HTML 首页能看到整体说明。我吃过亏:原型很完整,但标注只写了“点击跳转”,没有说明空数据时显示什么,结果开发自由发挥,返工了两次。现在我会把每个按钮的四种状态、异常分支都写进注释里。希望这些经验能帮到你,在下一个原型上少走弯路。
本文还有配套的精品资源,点击获取