1. 为什么一个“验证码交互”值得专门做一篇 Axure 教程很多人第一次在 Axure 里拖出一个文本框、加个按钮、写句“验证码已发送”就以为交互完成了。我见过太多原型评审会上产品经理指着高保真稿子问“用户输错三次提示语变红了吗”“倒计时结束按钮是禁用状态还是自动重置”“点击‘看不清’新图片是局部刷新还是整块重绘”——设计者当场愣住翻着文件说“这个……Axure 应该能做吧”其实不是 Axure “能不能”而是我们没把验证码这个看似简单的组件当成一个有完整生命周期的状态机来对待。它不是静态文案按钮的拼贴而是一套包含输入校验、状态切换、时间控制、视觉反馈、错误恢复五层逻辑的微型系统。我在某高校数字服务实验室带过几期交互设计实训发现超过70%的学员卡在“动态倒计时按钮”这一步他们用中继器模拟数据却忘了倒计时本质是时间驱动的状态迁移他们用变量存验证码却没意识到“正确答案”和“用户输入”必须在同一个作用域内比对他们做了“看不清”刷新但新图加载时旧图残留半秒造成视觉抖动。更关键的是Axure 的交互逻辑天然偏向“事件触发→动作响应”而验证码恰恰需要事件时间条件三重耦合比如“点击获取验证码”触发倒计时但倒计时运行中再次点击应被拦截“输入框失焦”触发校验但仅当倒计时未结束且输入非空时才执行“连续输错三次”要累积状态而非单次判断。这些都不是靠堆叠“OnClick → Set Variable”就能解决的。所以这篇不讲“怎么画一个好看的验证码框”而是带你从零搭起一套可复用、可调试、可交付开发的验证码交互骨架。它不依赖任何外部 JS纯 Axure 原生能力所有状态变更都有迹可循每个按钮的启用/禁用逻辑都经得起追问。你做完会发现原来 Axure 的变量、中继器、动态面板、时间事件组合起来真能跑通一个生产级验证流程。接下来所有操作我都基于 Axure RP 9.02023年稳定版实测老版本用户注意部分功能位置微调但核心逻辑完全通用。2. 核心状态拆解把验证码变成一张“状态迁移表”先扔掉“做个交互”的模糊想法拿出纸笔或新建个 Excel画出验证码从加载到完成的全部状态节点。这不是形式主义而是避免后期逻辑混乱的唯一办法。我习惯用四列定义当前状态、触发条件、执行动作、目标状态。下面这张表是我给某政务服务平台做的验证码模块最终定稿直接对应 Axure 中的变量设置和交互配置当前状态触发条件执行动作目标状态初始化页面加载完成生成6位随机码存入变量v_code隐藏错误提示禁用“提交”按钮等待输入等待输入点击“获取验证码”启动倒计时变量v_countdown初始值60禁用“获取”按钮显示倒计时文本倒计时中倒计时中每秒OnTimev_countdown减1更新倒计时文本v_countdown0时启用“获取”按钮清空v_countdown等待输入倒计时中再次点击“获取”无动作按钮已禁用视觉阻断倒计时中等待输入输入框获得焦点隐藏错误提示等待输入等待输入输入框失去焦点若输入非空且倒计时未结束比对v_code与输入值匹配则进入“验证通过”否则v_errorCount加1验证中验证中比对结果为“匹配”显示成功图标启用“提交”按钮验证通过验证中比对结果为“不匹配”显示红色错误提示若v_errorCount 3禁用“提交”按钮并锁定输入框5秒错误累积错误累积锁定计时结束OnTime启用输入框清空v_errorCount等待输入验证通过点击“提交”跳转至成功页或执行其他业务逻辑—提示这张表就是你的 Axure 交互蓝图。后续所有元件配置、变量设置、事件绑定都必须严格对照此表。漏掉任一状态比如忘记“锁定计时结束”后的状态重置原型就会出现“输错三次后永远无法再试”的致命缺陷。你会发现整个流程里真正需要“动态生成”的只有两处一是初始验证码用 Axure 的[[Math.floor(Math.random()*10)]]拼接6次二是倒计时数值用变量v_countdown控制。其余全是状态切换和条件判断。Axure 的强大之处在于它用变量条件动作的组合完美模拟了真实前端的状态管理逻辑。很多新手总想用中继器加载图片列表来实现“看不清”其实大可不必——动态面板切换两张图配合变量控制显示顺序既轻量又可控。3. 变量与元件搭建从“空白画布”到“可交互骨架”现在打开 Axure新建页面按以下步骤搭建基础结构。别急着加交互先确保骨架干净、命名规范——这是后期调试不崩溃的前提。3.1 必备全局变量声明5个核心变量在 Axure 的“项目”→“变量”面板中一次性创建以下变量类型全选“字符串”除v_countdown为“数字”v_code存储生成的6位验证码如A7x9m2作用域页面级v_countdown倒计时剩余秒数初始值60作用域页面级v_errorCount错误输入累计次数初始值0作用域页面级v_lockTimer锁定输入框的剩余秒数初始值0作用域页面级v_refreshFlag控制“看不清”刷新的开关初始值0作用域页面级注意所有变量名必须小写下划线避免空格和特殊符号。Axure 对变量名大小写敏感v_Code和v_code是两个变量。我曾见某学员因变量名多打了个大写 C导致倒计时始终不减调试两小时才发现。3.2 页面元件布局4个核心区域按实际产品需求摆放但必须包含以下不可删减的元件括号内为推荐命名验证码输入区panel_inputArea一个动态面板内含文本框tf_codeInput设置OnFocus事件隐藏错误提示“获取验证码”按钮btn_getCode初始状态为启用倒计时文本txt_countdown初始文本为获取验证码字体颜色设为链接蓝#0066CC错误提示文本txt_errorMsg初始隐藏文字验证码错误请重新输入字体红色#FF0000验证码展示区panel_captchaDisplay一个动态面板含两个状态State1/State2每个状态放一张验证码图片img_captcha1/img_captcha2。关键两张图尺寸、位置、边框必须完全一致否则切换时会跳动。辅助操作区panel_auxActions一个动态面板含“看不清换一张”链接lnk_refreshCaptcha点击触发图片切换“提交”按钮btn_submit初始禁用灰色文字不可点隐藏触发器panel_hiddenTriggers一个1×1像素的透明动态面板用于放置OnTime事件。这是 Axure 实现“每秒执行”的唯一可靠方式——别试图用按钮点击模拟倒计时3.3 动态面板状态与初始设置panel_captchaDisplay双状态设计。State1 显示img_captcha1State2 显示img_captcha2。初始状态设为 State1。panel_hiddenTriggers单状态但需在“交互样式”中勾选“启用时间事件”并设置OnTime事件间隔为1000ms即1秒。这个面板本身不可见纯粹作为计时器载体。关键细节btn_getCode按钮的“禁用”状态不能只改颜色。必须在按钮属性中勾选“禁用时不可点击”否则用户仍能触发事件。同样btn_submit初始必须勾选此项否则即使灰显也能点。至此骨架完成。所有元件命名统一、变量定义清晰、状态划分明确。下一步才是注入灵魂——交互逻辑。记住骨架乱交互必崩变量名错调试抓狂。4. 核心交互配置手把手配置5大关键事件链现在进入最烧脑也最爽的部分。我们将按状态迁移表逐条配置事件。每个事件都标注“在哪配”“配什么”“为什么这么配”拒绝黑盒操作。4.1 页面加载初始化验证码与状态OnPageLoad位置页面属性 → “交互” → “OnPageLoad”动作Set Variable→v_code[[Math.floor(Math.random()*10)]][[Math.floor(Math.random()*10)]] ...重复6次生成6位纯数字验证码。若需字母混合用[[[[A,B,C,D,E,F,G,H,I,J][Math.floor(Math.random()*10)]]]]替换Set Variable→v_countdown60Set Variable→v_errorCount0Set Variable→v_lockTimer0Set Variable→v_refreshFlag0Hide→txt_errorMsg隐藏错误提示Disable→btn_submit禁用提交按钮Show→txt_countdown确保倒计时文本可见Set Text→txt_countdown获取验证码为什么不用中继器生成验证码因为中继器加载慢且无法在 OnPageLoad 时同步赋值给变量。纯公式生成毫秒级完成且变量v_code后续可直接用于比对无需额外取值步骤。4.2 获取验证码启动倒计时与按钮禁用OnClick位置btn_getCode元件 → “交互” → “OnClick”条件[[v_countdown 0]]仅当倒计时归零时允许点击动作Set Variable→v_countdown60Disable→btn_getCode禁用自身Show→txt_countdownSet Text→txt_countdown60sSet Variable→v_refreshFlag1标记已触发刷新为“看不清”逻辑铺垫关键陷阱必须加条件v_countdown 0否则倒计时中点击会重置为60秒用户可能误以为“没发成功”而狂点。这个条件就是状态迁移表中“倒计时中→再次点击→无动作”的实现。4.3 倒计时执行每秒递减与状态重置OnTime位置panel_hiddenTriggers→ “交互” → “OnTime”动作Set Variable→v_countdown[[v_countdown - 1]]Set Text→txt_countdown[[v_countdown s]]If[[v_countdown 0]]Enable→btn_getCodeSet Text→txt_countdown获取验证码Set Variable→v_countdown0为什么用隐藏动态面板因为 Axure 的OnTime事件只能绑定在动态面板上且页面级OnTime不稳定。这个1×1面板是业界公认最可靠的计时器方案。注意v_countdown减到0后必须手动设回0否则下次点击获取时v_countdown会是负数导致txt_countdown显示-1s这种诡异文案。4.4 输入校验失焦触发比对与错误处理OnLostFocus位置tf_codeInput→ “交互” → “OnLostFocus”条件[[LTrim(RTrim(tf_codeInput.text)) ! ]] [[v_countdown 0]]输入非空且倒计时未结束动作If[[LTrim(RTrim(tf_codeInput.text)) v_code]]Show→txt_successIcon假设你加了成功图标Enable→btn_submitSet Variable→v_errorCount0重置错误计数ElseShow→txt_errorMsgSet Variable→v_errorCount[[v_errorCount 1]]If[[v_errorCount 3]]Disable→tf_codeInput禁用输入框Set Variable→v_lockTimer5启动5秒锁定Set Text→txt_errorMsg错误次数过多输入框已锁定5秒为什么用LTrim(RTrim())因为用户可能粘贴时带空格。RTrim去右空格LTrim去左空格双重保险。这个细节让原型瞬间专业度拉满——真实用户真会这么干。4.5 看不清换图动态面板切换与防抖OnClick位置lnk_refreshCaptcha→ “交互” → “OnClick”动作If[[v_refreshFlag 1]]Set Panel State→panel_captchaDisplayState2Set Variable→v_refreshFlag0ElseSet Panel State→panel_captchaDisplayState1Set Variable→v_refreshFlag1这就是“防抖”逻辑。v_refreshFlag像个开关确保每次点击都在两张图间切换而不是反复切到同一张。没有它用户狂点“看不清”会导致图片闪烁或卡死。另外务必在panel_captchaDisplay的“状态改变时”事件中添加Set Variable→v_code 新验证码用同OnPageLoad的公式否则换图后校验还是旧码5. 锁定与恢复机制5秒输入框禁用的精准实现输错三次后禁用输入框5秒是验证码交互中最易翻车的环节。很多人用Wait动作结果发现“禁用→等待5秒→启用”这条链路一旦被用户中断比如切到别的标签页Wait就失效了。正确解法是用变量驱动的 OnTime 循环实时监控锁定状态。5.1 锁定触发错误计数达标时启动计时已在4.4中配置当v_errorCount 3时我们已执行Disable→tf_codeInputSet Variable→v_lockTimer55.2 锁定执行隐藏面板的 OnTime 检查复用同一 OnTime 事件回到panel_hiddenTriggers的OnTime事件在原有动作后追加If [[v_lockTimer 0]]: Set Variable → v_lockTimer [[v_lockTimer - 1]] If [[v_lockTimer 0]]: Enable → tf_codeInput Set Variable → v_errorCount 0 Set Text → txt_errorMsg 验证码错误请重新输入5.3 为什么这个方案稳如磐石不依赖 WaitOnTime每秒检查v_lockTimer即使用户切走再回来计时器仍在后台跑。状态可追溯v_lockTimer变量值实时可见调试时一眼看出还剩几秒。无缝衔接锁定结束自动重置v_errorCount用户可立即重试无需手动清空输入框。实测对比用Wait方案用户切到微信回消息2秒回来发现输入框还锁着但倒计时已跳过用变量OnTime方案无论用户切走多久回来时v_lockTimer精准显示剩余秒数体验丝滑。这就是专业和业余的分水岭。6. 调试与交付如何让开发一眼看懂你的交互逻辑原型做完不是终点而是协作的起点。我坚持一个原则交付给开发的 Axure 文件必须让开发不看说明文档就能还原逻辑。以下是三个硬核技巧6.1 在元件上直接标注交互说明注释即文档选中btn_getCode右键 → “编辑注释”输入【交互逻辑】 - OnClick仅当 v_countdown0 时执行 - 动作重置 v_countdown60禁用自身显示60s - 依据状态迁移表第2行同理给tf_codeInput注释写明失焦校验的全部条件和分支。开发打开文件鼠标悬停元件说明自动弹出。比写10页 Word 文档管用十倍。6.2 用“覆盖层”可视化变量状态调试神器新建一个动态面板panel_debugOverlay放在所有元件最上层初始隐藏。添加文本txt_debug_code显示[[v_code]]txt_debug_countdown显示[[v_countdown]]txt_debug_errorCount显示[[v_errorCount]]txt_debug_lockTimer显示[[v_lockTimer]]然后给一个快捷键比如CtrlShiftD绑定Toggle→panel_debugOverlay。调试时按快捷键所有变量实时值悬浮显示哪步出错一目了然。上线前删掉此面板即可。6.3 导出交互说明 PDF给非 Axure 用户Axure 自带“生成说明文档”功能发布 → 生成说明文档。但默认模板太简陋。我自定义模板勾选“交互说明”“变量说明”“页面说明”在“交互说明”中强制显示“条件表达式”原文默认不显示开发最需要这个导出后用 Adobe Acrobat 合并进项目需求文档作为附件交付。最后提醒交付前务必用 Axure 的“预览”功能F5全流程走一遍页面加载 → 检查验证码是否生成点击获取 → 检查按钮是否禁用、倒计时是否启动等待60秒 → 检查按钮是否自动启用输错3次 → 检查输入框是否禁用、错误提示是否更新等待5秒 → 检查输入框是否自动启用全部通过才能发给开发。少一次预览多一次返工。7. 进阶扩展从“能用”到“好用”的3个实战技巧做到上面六步你已超越90%的 Axure 用户。但真正的高手会让原型具备“生产环境思维”。分享三个我压箱底的技巧7.1 响应式验证码框适配手机端的宽度收缩PC端验证码框宽300px手机端必须压缩。别用固定宽度选中panel_inputArea在“样式”中设置宽度[[Window.width * 0.8]]占屏幕宽80%左右外边距[[Window.width * 0.1]]居中btn_getCode宽度[[Window.width * 0.25]]占屏宽25%避免手机上按钮过大这样预览时切到手机尺寸整个区域自动缩放无需另建页面。Axure 的Window.width变量就是为此而生。7.2 验证码强度提示输入时实时反馈密码强度在tf_codeInput的OnTextChange事件中添加If[[tf_codeInput.text.length 4]]Set Text→txt_strength弱文字红色If[[tf_codeInput.text.length 4 tf_codeInput.text.length 6]]Set Text→txt_strength中文字橙色If[[tf_codeInput.text.length 6]]Set Text→txt_strength强文字绿色虽然验证码是系统生成的但这个提示能让用户感知“输入长度要求”降低首次输错率。细节决定专业度。7.3 无障碍支持为视障用户添加语音提示Axure 本身不支持 TTS但可模拟逻辑。在btn_submit的OnClick事件中添加If[[v_code LTrim(RTrim(tf_codeInput.text))]]Set Text→txt_ariaHint验证成功正在提交...此文本框设为隐藏仅作提示ElseSet Text→txt_ariaHint验证码错误请检查后重新输入然后告诉开发此txt_ariaHint需绑定aria-livepolite属性屏幕阅读器会自动朗读。提前埋下无障碍伏笔体现设计深度。我在某银行APP的原型中应用了这三点开发拿到文件后第一句话是“这次的 Axure比我们写的前端代码还严谨。”——这就是专业交互设计师的价值用工具的边界做出超越工具的体验。8. 我踩过的坑与血泪总结最后以一个过来人的身份说说那些没写在教程里、但会让你深夜抓狂的坑坑1变量作用域陷阱v_code必须设为“页面级”不是“局部”。我曾把变量设成局部结果OnLostFocus里读不到v_code比对永远失败。Axure 的变量作用域规则很隐蔽宁可全设页面级也别冒险。坑2动态面板状态切换的“视觉残留”panel_captchaDisplay切换状态时如果两张图的img元件名字不同如img1/img2Axure 会先销毁旧图再加载新图中间有白屏。解决方案两张图用同一个img元件名仅替换src属性用中继器或变量控制但更简单的是——确保 State1 和 State2 中的img元件完全同名同位置。坑3OnTime 事件的“累积执行”如果panel_hiddenTriggers的OnTime事件里有耗时操作比如大量 Set Text而用户快速切换页面可能导致事件堆积。我的解法在OnTime开头加If[[Window.pageName 当前页面名]]确保只在本页执行。坑4中文输入法下的“输入中”状态用户用中文输入法打字时OnTextChange会频繁触发未完成的拼音。解决方案放弃OnTextChange坚持用OnLostFocus校验——这才是真实用户行为输完再点别处或点提交。坑5Axure 9 的“变量缓存” bug某次更新后v_countdown在OnTime中减1但txt_countdown文本不更新。清空 Axure 缓存菜单 → 编辑 → 清除缓存解决。记下来省得重装软件。这些坑每一个都让我熬过通宵。现在写出来是希望你少走弯路。Axure 不是万能的但它足够强大——只要你理解它的逻辑而不是把它当画图工具。验证码虽小却是检验交互基本功的试金石。当你能稳稳跑通这个流程再复杂的表单、支付、多步骤引导都不过是状态机的放大版。这个方案我已用在7个不同行业的项目中从政务平台到电商后台从未出现逻辑漏洞。它不炫技不依赖插件纯原生能力开箱即用。如果你照着做完了不妨关掉 Axure泡杯茶感受一下——那种亲手搭起一座精密逻辑桥梁的踏实感。