后台私信里催更的朋友不少我先把话放前面这套基础教程我按天切成了几部分day1 讲界面搭建、母版和基础样式今天这篇正好轮到 Axure day2 基础教程完整指南也就是从会画过渡到会动的那一天。适合刚看完 day1、还不太敢碰交互的同学也适合那些拖拽已经很熟练、但一加用例就发懵的人。day2 的定位非常明确不碰复杂的函数和变量只把交互里最核心的几块硬骨头啃下来。你把这天内容吃透基本的页面跳转、Tab 切换、状态反馈、列表数据展示都能自己动手做出来。我在带新人的时候这一天也是迈过工具人和设计思考者之间那条线的关键节点。1. 先搞清楚 day2 到底要解决什么问题1.1 day1 和 day2 的分界点在哪里很多初学会有一个错觉以为 day1 学完元件拖拽、填充颜色、做交互样式原型就算入门了。真到了实际项目里才发现静态页面只能用来看根本没法拿给业务方点。业务方要的不是你画得有多精致而是这个流程走不走得通、那个状态切不切得过去。day1 和 day2 的分界就在表达逻辑这四个字上。我整理了一个很朴素的分界表方便你对照自己现在的位置能力维度day1 结束时要求day2 结束时要求页面搭建能画单页会用矩形、图片、文本布局不塌能通过交互把多个页面场景串起来母版能力会用母版做导航栏会通过母版交互做全局状态同步交互认知知道有交互这个概念没动手能独立拆解一个操作对应哪些事件和动作控件使用会用基本元件会处理动态面板、中继器这些复杂控件调试能力出问题靠重画能通过预览和用例顺序排查交互故障如果把 day1 比作学会拍照day2 就是学会把照片连成一段能讲清楚故事的短片。静态页面是素材交互才是叙事。1.2 从画图思维切换到逻辑思维这一步是 day2 最大的坎甚至比具体功能还需要花时间。画图思维的人拿到一个需求第一反应是这个页面长什么样逻辑思维的人拿到需求第一反应是用户点了这里之后会发生什么接下来又发生什么。举个例子。做个登录页画图思维会认真调输入框圆角、按钮颜色、背景渐变看起来很努力。但一交互就露馅点登录没有任何反馈错误提示不知道往哪放密码框还能明文展示。而逻辑思维的做法是先画出操作链条用户输入手机号和密码点击登录按钮前端做非空校验校验通过出现验证中提示假设验证失败出现错误信息用户重新输入错误信息消失。这套链条你想清楚了Axure 里做的每一件事都只是把链条翻译成软件能识别的事件用例动作。所以 day2 的第一个练习我都建议学生在纸上画操作链条不许开软件。链条画清楚了后面所有实操都是体力活。1.3 一套可以一直复用的交互拆解套路我在实际项目里反复用的一套拆解流程基本没变过分享给你。先定事件再定条件最后定动作。事件就是什么时候触发比如单击、双击、鼠标移入、文本改变、载入时。条件就是什么样的情况下才执行比如输入框内容为空、变量值等于某个数、面板状态是某个状态。动作就是满足条件后干什么比如设置面板状态、显示隐藏、设置文本、设置选中。这个顺序不能乱。很多新手一上来就拖动作搞了一大堆最后不知道在什么条件下触发的排查起来非常痛苦。我习惯在元件上写注释标注清楚此按钮负责什么事件、在什么场景下触发这样即使过两三个月再打开文件自己也能秒懂。2. 交互基础三件套事件、用例、动作2.1 事件不是点击而是点击之后触发的那堆判断Axure 里最常听到的词就是这个按钮加个单击事件。这句话看似没问题但很多人把它理解成了点击弹窗这就是后面出错的原因。事件本质上是一个触发器。鼠标单击时只是告诉你触发时机到了至于要干什么完全由里面挂的用例决定。同一个单击事件可以挂多个用例每个用例可以有不同的条件从上往下依次判断。条件命中的就执行没命中的就跳过这个机制有点像流水线上的一道道关卡。我要特别强调事件和用例是两码事别混在一起。一个按钮的单击事件下你可以挂两个用例第一个用例条件是输入框为空执行提示第二个用例条件是输入框不为空执行跳转。这样写出来的交互逻辑上是干净的而不是在一个用例里堆一大坨动作越堆越乱。2.2 用例和动作怎么理解更顺用例可以理解成一个完整的分支动作是这个分支里的具体步骤。一个用例里可以连续做多件事先设置按钮选中再切换面板状态最后弹一个提示框。这些动作是顺序执行的所以它们的排列顺序会直接影响结果。动作面板里最常用的几类day2 必须闭眼能找到设置面板状态切换动态面板到指定状态或前进、后退显示/隐藏控制元件出现和消失可配合动画设置文本改变文本元件的内容设置选中让元件进入选中态常用于 Tab、菜单高亮设置变量值给全局变量赋新值day2 先了解day3 重点用等待让动作延后执行模拟加载时间比如等待1000毫秒后再显示提示。动作不用全部背下来但看到英文图片或中文界面时你要能说出它大概是干什么的。工具是拿来用的不是拿来背的。2.3 初学者最容易犯的毛病用例顺序混乱这个坑我见过太多人踩了。做同一个按钮的交互时先把设置选中放前面还是先切换面板在大部分场景下结果一样但一旦涉及条件互斥顺序错了功能直接废掉。举个典型例子一个展开更多按钮你写了两个用例第一个条件是当前处于收起状态执行展开第二个条件是当前处于展开状态执行收起。如果两个用例顺序写反了或者条件是互斥的结果就会变成按钮永远只执行一条分支功能看起来像失灵了一样。我的经验是把所有互斥用例排在一起优先把边界情况放最前面比如输入为空数组为空状态为初始态这些。把最可能发生的、最普通的场景放最后兜底。这样即使前面的条件没匹配上最后总能落到一个合理的默认行为上。另外养成给用例重命名的习惯别让界面上一堆用例1用例2单独看根本不知道哪个是哪个。3. 动态面板Axure 里面最值钱的控件3.1 为什么动态面板没法跳过如果你去问一个用了五年 Axure 的人哪个控件最不能省十有八九会回答动态面板。它强大到很多老手做原型时几乎无时无刻不在用。原因在于它同时解决三件事多状态切换、内容滚动、层级管理。多状态切换就是同一个区域在不同场景下可以显示不同内容。比如底部导航切到消息内容区从首页变成消息列表这在原型里就是切状态。内容滚动是指定区域内内容可以独立滚动不用把整页撑破。层级管理是可以把浮层、弹窗、加载提示全部装进面板里通过显示和隐藏来控制。如果你不做电商类原型可能一时半会感受不到滚动的重要性。但等你拿到一个需要局部刷新的页面需求时你会发现不用动态面板几乎没法做出那种只换中间部分、不刷新整页的效果。动态面板天然就是从整页跳转进化到局部刷新的关键工具。3.2 底部 Tab 切换的完整实操状态切换我拿一个移动端底部导航举个例子这是 day2 里最经典的练习没有之一。你跟着做一遍基本就摸清动态面板的门道了。第一步先在页面上画出底部导航栏四个 Tab首页、消息、我的。再画一个内容区这个内容区要放一个动态面板命名为主内容面板。第二步双击主内容面板进入面板管理界面添加三个状态分别命名home、message、mine。每个状态里画对应页面内容不用太细致能看出区别就行。第三步回到页面层级给四个 Tab 分别加单击时事件。以首页为例单击时设置主内容面板到 home 状态同时设置首页 Tab 为选中、其他 Tab 取消选中。第四步给 Tab 元件设置选中样式。选中时改成主题色非选中用灰色。我这里有个小坑要提醒你一定要在元件属性里设置选中的样式而不是简单改默认颜色。不然切换时你会发现高亮永远不变。为什么强调选中样式要和状态切换分开做因为把当前是哪个 Tab和内容区显示什么分别表达逻辑更清楚。后面如果需求变化比如某个 Tab 要单独做红点提醒你直接在选中逻辑上加就行不会动到内容区。整个练习下来你要有意识地在脑子里形成这个对应关系按钮的选中态 用户当前所在位置面板的状态 这个位置显示的内容。两者同步才是一个完整的 Tab 交互。3.3 动态面板的层级与命名细节动态面板用得越多命名规范就越重要。很多人的文件最后乱成一锅粥不是因为操作不会而是因为元件都叫矩形1矩形2动态面板1动态面板2根本不具备辨识度。我自己的习惯是动态面板命名遵循页面位置功能的格式比如主内容面板弹窗遮罩加载提示层。状态命名用场景状态比如 home、loading、error、success。这样在人声鼎沸的多人协同文件里别人接手也能快速找到对应部件。层级上还要注意动态面板的显示层级是很高的尤其是做弹窗和浮层时务必放在页面的最上层。Axure 的层级关系有时会受兄弟元件的遮挡影响所以当弹窗被别的东西盖住时先检查它的层级是否在顶层而不是急着删了重做。4. 交互里的条件判断与状态反馈4.1 给登录页做等待错误提示的完整实操登录页是 day2 教程里我最喜欢拿来当案例的场景因为一个看似简单的登录框几乎能覆盖交互基础的所有核心输入、条件判断、状态反馈、弹层显隐。下面这个实操我建议你跟着敲一遍。先在画布上排好基础元素手机号输入框、密码输入框、登录按钮。密码输入框记得在右侧属性里勾选隐藏文本这样输入的内容会显示为圆点原型里更像回事。再放两个隐藏的动态面板一个叫加载提示一个叫错误提示。接下来绑定登录按钮的单击时事件。添加第一个用例条件是手机号输入框内容为空或密码输入框内容为空。这里要说明一下Axure 里的条件判断在用例里设置进入条件编辑器后可以选择元件文字变量值等维度。满足这个条件时动作是显示错误提示面板提示内容设为请填写完整信息。再加第二个用例条件是输入框内容不为空。动作顺序这样排先显示加载提示面板再等待 1500 毫秒然后隐藏加载提示最后显示错误提示错误文案改成账号或密码错误。这里等待是 day2 学员最容易漏掉的动作你以为点了就有结果但真实场景下总归有个请求时间加一个等待能让原型节奏更接近真实产品。做完之后预览一下你会发现几个平时注意不到的细节错误提示会在页面顶部弹出背景遮罩要挡住底部内容加载提示出现时按钮最好是不可点击状态不然用户可以连续点十几次逻辑直接被玩坏。这些细节看着小恰恰是原型专业度的分水岭。4.2 条件判断到底怎么设置最稳妥条件判断是交互里最容易出隐性问题的地方。我见过很多新手把判断条件写成了元件文字 等于 某个固定值在 demo 里能跑通一旦配合变量或者动态数据就崩。不是语法错是判断思路太死板。我自己的做法是优先判断是否存在是否为空是否可见这类二元状态而不是等值判断。比如错误提示的开关判断错误提示面板 是否可见如果是就隐藏如果不是就显示。这种写法比记录一个是否已提示的变量更直观也不容易因为变量没初始化而出错。条件里还要注意全局变量和多处引用的情况要让条件彼此互斥。比如为空和不为空是一对OK直接按顺序排但如果你写了三个用例条件分别是等于A等于B等于C那 C 一定要写成否则或者不等于A且不等于B不然第三个用例永远执行不到。4.3 真实项目里状态反馈的三种常用写法做原型做久了你会发现状态反馈无外乎三种写法day2 阶段至少要知道前两种第三种可以等熟练了再碰。第一种是显隐法通过显示和隐藏元件来实现提示和反馈。优点是简单直接适合做成错误提示、加载遮罩、弹窗。第二种是状态法通过切换动态面板状态来实现同区域的内容变化比如按钮从立即登录变成登录中…再到登录成功本质上就是切状态。第三种是变量法通过设置全局变量的值再结合文本替换或条件判断来驱动界面变化适合更复杂的场景但学习曲线陡峭。我建议 day2 的学员先把前两种练到闭眼都能写。遇到反馈需求时先问自己是要临时出现一下还是要这块区域本身变成另一个样子前者用显隐后者切状态。方法选对了代码量少一半排查问题也轻松。5. 中继器入门把重复工作交给数据5.1 中继器能解决什么实际需求很多教程把中继器放在很后面我反而觉得 day2 就应该让你见一面。原因很简单只要你的原型里会出现列表、卡片、表格这类重复样式手动画五个和画五十个的体验完全不同。中继器相当于一个微型数据库加循环渲染器你定义一套样式喂进去数据它自动把一条条记录排列出来。最常见的场景是消息列表、通讯录、商品卡片、订单记录。你只要建好数据集把字段绑定到元件上它就能按行渲染。后续数据变了刷新一下预览列表自动更新不用挨个去改元件。中继器对 day2 学员的意义不仅仅是省时间更重要的是让你理解数据驱动界面这个现代前端的基本思想。虽然 Axure 只是一个原型工具但你在中继器里建立的思维方式后面学任何前端框架都能用上。5.2 做一个团队列表的完整实操从建数据集到绑定字段我拿一个团队人员列表来演示。首先从元件库拖一个中继器到画布上默认会有三列数据你可以先不管默认样式直接双击进入中继器内部编辑。中继器内部默认有一个矩形样式的行模板你把它改成自己需要的样子。我通常改成四个元素一个头像占位、一个姓名文本、一个角色文本、一个操作按钮。每个元素都只是模板真正的数据要靠绑定。关掉中继器内部编辑回到中继器属性面板找到数据集这里才是核心。默认数据集有 Column0、Column1、Column2建议全部改名改成 name、role、avatar。然后增加几行真实数据比如张三、李四、王五角色分别是设计师、开发、测试。接下来是关键一步双击中继器打开Item Loaded事件。事件里添加动作设置文本目标选择姓名文本元件文本内容选择[[Item.name]]角色文本同理选择[[Item.role]]。这个[[Item.xx]]语法对应的就是当前行数据里的字段你在属性面板里通过插入变量或函数就能找到不需要背。很多新手在这一步会卡住因为预览时发现所有行的数据显示不出来。排查思路很简单看是不是没有绑定 Item Loaded 事件或者绑定时选错了文本元件。只要每一行的模板里都执行了设置文本数据自然会逐行填充。5.3 中继器筛选与排序的基础玩法中继器里的数据一旦多了就涉及到筛选和排序。day2 不需要学得很深但至少要会用一个筛选。最常见的需求是搜索框输入关键词列表实时过滤。先放一个文本框给它加文本改变时事件添加一个筛选动作选择要操作的中继器然后添加条件比如Item.name 包含 输入框内容。注意contains 是包含关系不是等于。这样用户每输入一个字列表就会实时过滤效果非常接近真实的前端搜索交互。排序也简单中继器属性面板里有排序设置按某字段升序或降序还能加多级排序。day2 阶段了解一下就行真正常用的是筛选。筛选的坑在于筛选动作每次执行会覆盖上一次的筛选条件所以如果需求里既要搜索又要按角色过滤就得把多个条件都放进同一个筛选动作里而不是写两次筛选。6. 常见问题与排查技巧实录6.1 常见问题速查表把过去带新人时高频遇到的故障整理成一张表照着排查大部分问题五分钟能定位。现象可能原因解决方向动态面板点了没反应没选中正确状态或者面板状态名不对检查用例的目标状态是否和实际状态名一致多个 Tab 同时高亮没有在用例里取消其他 Tab 选中每个 Tab 用例里除了设置当前项选中还要取消兄弟项选中中继器列表不显示数据没绑定 Item Loaded 事件或字段名写错双击中继器检查 Item Loaded 里的设置文本动作提示框一闪而过没有用到等待动作或顺序不对显示提示后先等待再隐藏提示登录按钮重复点击多次触发没有在点击后禁用按钮点击后先设置按钮为禁用处理完成再启用选中样式不生效只改了默认样式没设置选中样式在元件属性的交互样式里设置选中效果弹窗被其他元件遮挡层级太低把弹窗所在动态面板设为顶层这表我每次带新人都会发一份它解决的不是单点问题而是帮你建立一种故障归因的直觉看到现象能快速猜出大概率是哪一类原因而不是瞎试。6.2 排查交互的三个习惯性动作做交互排错有没有套路有而且很简单。我排错了无数遍之后总结出三个习惯性动作先做哪个后做哪个都有讲究。第一个动作看属性面板里元件的交互列表。如果事件列表是空的说明按钮根本没有绑事件问题就出在这里。如果是浅灰色的说明有事件但被禁用了。这个动作能快速排除没绑上的低级问题。第二个动作检查用例顺序和条件逻辑。点开事件看用例列表从上到下的排列逐条看条件和动作。很多时候逻辑写反了或者条件重叠肉眼扫一遍就能发现。我甚至会尝试把用例临时全部禁用再一个个启用看哪一次启用后功能才坏掉这样定位最快。第三个动作生成 HTML 文件预览而不是只在 Axure 内部预览。浏览器里的运行环境更接近真实而且你能打开控制台看脚本报错Axure 内部的预览有时候会掩盖一些状态问题。这一步很多人都忽略但它能救你一命。6.3 实操中的几段真实经验带 day2 的过程中有几个经验我觉得特别值得拿出来单独说。关于保存习惯。动态面板和中继器都是组件嵌套比较多的结构一旦软件崩溃没保存的进度往往很难找回。我个人的习惯是每完成一个模块就按一次 CtrlS版本另存为一个带日期的新文件。做原型和写代码一样版本管理越勤快翻车成本越低。关于命名习惯。刚开始你可能觉得给元件命名浪费时间等到文件里有一百个矩形的时候你就知道命名的重要性了。我的建议是不光元件要命名关键用例也要重命名比如校验输入为空校验通过后跳转这样排错的时候一眼能看出执行到哪一步。关于节奏控制。day2 内容其实挺密的动态面板、中继器、条件判断都不是一次性掌握的东西。我的带人经验是一天里集中练一个案例比如就做底部 Tab 切换反复做到完全闭眼能写再去碰中继器。贪多嚼不烂交互思想需要时间沉淀不是看了就会的。最后再讲一个小小的技巧。做 Tab 切换和动态面板联动时很多人会在每个 Tab 里重复写同样的取消选中逻辑其实你可以把公共逻辑抽到一个隐藏按钮上让其他按钮通过触发事件去调用它。这样后续改高亮样式只改一处全盘生效。原型做到后期这种抽公共逻辑的思路会帮你省下大量维护时间。day2 先把这个意识种下后面做复杂原型时你会感谢这个习惯。
