做后台管理系统或者SaaS产品原型多角色登录是绕不开的一个坎。产品经理给客户演示时经常要现场切换“管理员”“普通用户”“审核员”几个身份如果原型里只有一个登录入口、一条主页链接演示就会卡壳。用Axure做一套多角色登录原型把角色选择、登录判断、权限菜单串起来整个交互演示会提升一个档次。这篇文章就是我实际搭建时的完整记录适合刚接触Axure的初级产品经理也适合想沉淀团队模板的交互设计师照着做基本能复现。1. 需求拆解与整体设计思路1.1 多角色登录原型到底要解决什么问题先想清楚一件事原型里的多角色登录不是为了炫技而是为了把“角色差异”讲清楚。真实项目中管理员能看到用户管理、系统设置、财务报表普通用户只能看到个人中心、订单记录审核员夹在中间看的是待审批列表。如果你只给客户看一套界面客户很难想象“其他人登录后长什么样”。多角色登录原型就是把这些差异提前变成可视化的演示素材。更深一层多角色登录还承担着“流程闭环”的职责。登录不只是“填个账号点个按钮”它牵扯到输入校验、角色识别、页面跳转、登录态保持、退出重置。这五个环节缺一个演示时就会露怯。比如退出登录后如果不重置变量重新登录时菜单权限还是上一次的角色状态客户当场就会觉得“这个原型是不是有bug”。另外这套东西沉淀下来之后不只是登录模块能用。角色变量、权限菜单显隐、页面按角色分流这些逻辑几乎可以复用到后台系统里的每一个需要权限控制的页面。所以投入几个小时做好它后面能省下大量重复工作。1.2 三种实现方案怎么选做多角色登录方案上有很多选择我试过三种各有各的坑方案做法优点缺点适用场景方案A多页面直接跳转登录页一个管理员主页一个用户主页一个按角色条件跳转结构最清晰文件树里一眼看懂调试方便页面文件多后续改页面名时要同步所有跳转链接容易漏大多数演示原型、团队共享模板方案B动态面板切换主页主页面内放一个动态面板不同角色显示不同状态演示时没有页面跳转的割裂感动效更顺滑动态面板嵌套深了之后状态管理容易乱找元件麻烦追求演示流畅度、单页应用风格的高保真原型方案C中继器模拟真实登录用中继器存账号密码角色登录时校验数据再跳转最接近真实系统能演示“错误密码”“账号不存在”搭建成本最高中继器筛选逻辑对新手不友好内网demo、需要跟开发对齐登录接口的场合我个人最推荐方案A搭配全局变量。原因很直接Axure文件最怕的是“改一处漏三处”方案A的页面结构直白每个主页独立菜单权限直接在各自页面上做不用跨层级去找动态面板的状态。方案B更适合内容型单页产品后台管理类系统用方案A团队协作时的沟通成本最低。1.3 整个流程的核心设计原则动手之前先定几个原则后面所有交互都围绕它们展开。第一登录状态必须用全局变量保存不要用页面内的局部元件状态。页面跳转后局部状态会丢全局变量是Axure里唯一能在页面间稳定传递数据的方式。第二条件判断要写“判断什么、满足后做什么、结束用例”这个顺序不能乱。Axure的交互用例是顺序执行的第一个满足的条件会吃掉这次点击后面不再执行。第三角色选择控件的设计会影响后面所有判断逻辑的写法。下拉框最简单单选框次之tab切换最像真实系统但工作量最大。先想清楚演示场合再决定不要一上来就搞复杂的。2. 核心元件准备与变量规划2.1 登录页需要哪些元件把元件先列清楚再动手拖拽能少走很多弯路。这里以“管理员、普通用户”两个角色为例实际项目里加第三四个角色就是复制条件的事。元件命名建议类型用途说明用户名输入框txtUsername文本框接收账号输入密码输入框txtPassword文本框接收密码可设置输入类型为密码角色下拉框selRole下拉列表选择当前登录角色登录按钮btnLogin按钮触发登录交互错误提示文本txtError文本默认隐藏校验失败时显示当前用户标识labUser文本主页顶部展示当前登录用户元件命名这块我强烈建议统一规范。我的习惯是“元件类型前缀语义名”文本框用txt开头按钮用btn开头下拉框用sel开头文本用lab开头动态面板用pnl开头。全部用小驼峰英文命名不要用中文。原因有两个一是Axure在条件面板里列出元件时英文名一眼能认出类型二是团队协作时别人拿到你的文件看名字就知道这是什么元件不会出现“那个蓝色框是啥”这种问题。2.2 全局变量规划全局变量是整套登录逻辑的心脏。在Axure菜单栏找到“项目 - 全局变量”这里可以添加和管理变量。我用到的变量有这么几个变量名类型默认值作用role字符串guest记录当前角色admin代表管理员user代表普通用户userName字符串空记录登录用户名用于主页欢迎语loginStatus字符串out记录登录状态in为已登录out为未登录变量默认值这里有个细节role的默认值建议设为guest而不是直接设为某个具体角色。原因是这样可以保证未登录状态下主页的权限菜单全部隐藏不会出现“还没登录就看到管理员菜单”的尴尬情况。loginStatus这个变量是我后来加上去的因为发现单纯判断role还不够退出后如果role重置了判断逻辑会出问题多一个状态变量更稳妥。全局变量是全局共享的页面之间跳转数据不丢。但有个边界要清楚浏览器刷新F5后全局变量会重置为默认值。这是Axure原型机制决定的演示时遇到刷新重新走一遍登录流程就行。2.3 角色选择控件怎么设计角色选择的交互形态决定了演示体验也决定了条件判断的写法。最省事的是下拉框。拖一个下拉列表元件进来在属性面板的“选项”里添加“管理员”和“普通用户”。下拉框的好处是只占一行界面干净但也确实有点“开发后台设置”的感觉客户演示时体验一般手机上操作也不顺手。更接近真实系统的做法是tab切换。用动态面板做两个状态的tab状态一显示“管理员”选中状态二显示“普通用户”选中。tab的视觉反馈更直观点起来有“选身份”的感觉比下拉框高级不少。如果只有两个角色也可以用两个复选框或单选框元件判断时用“元件选中状态”作为条件。效果直接但是角色多了以后页面会显得杂乱。我的建议原型草稿阶段用下拉框正式给客户演示的高保真版本用tab切换。两种形态的变量写入是一样的tab切换只是把“下拉框选中项文字”换成了“动态面板当前状态”核心逻辑不受影响。3. 分步实操与关键交互实现3.1 第一步搭建登录页结构新建一个Axure项目把第一个页面重命名为login这就是登录页。如果项目里原本有page1这种默认页面直接删掉或者改名都行保持文件树干净。在login页面上画一个居中登录卡片。卡片里放用户名输入框、密码输入框、角色下拉框、登录按钮。底部提前放一个txtError错误提示文本默认隐藏。卡片外或者页面背景写一句标题“某某系统”衬托出这是登录场景。然后分别选中每个元件在右侧属性面板里修改“元件名称”。记住前面说的命名规范txtUsername、txtPassword、selRole、btnLogin、txtError。这一步别偷懒后面写条件判断时元件名错了条件面板里根本找不到排查会很痛苦。输入框的提示文字我用的是Axure自带的“提示”属性不是直接把文字打进去。这个区别太重要了实际踩坑的人不计其数。在属性面板的设置里文本框有一个“提示”字段填“请输入用户名”这样的话。它展示出来是灰色占位符但不算元件文字本身判空时才不会误判。3.2 第二步配置全局变量在菜单栏找到“项目 - 全局变量”打开全局变量配置面板。依次添加role、userName、loginStatus三个变量按照表里的默认值填好。有个容易忽略的地方变量名是大小写敏感的role和Role是两个完全不同的变量。命名时统一用全小写或小驼峰团队里保持一致。我自己就吃过亏一个文件里rolename和userName混着写后面排查条件不生效的时候才发现大小写搞错了。配置好之后可以先在任意页面放一个文本框用[[role]]和[[userName]]这种占位符语法看看变量值能不能显示出来。Axure会在预览时自动替换变量为实际值相当于一个快速调试通道。3.3 第三步登录按钮交互用例选中btnLogin在右侧交互面板点击“新建交互”选择“单击”事件。接下来开始写条件用例这是整套原型里最核心的部分。按照Axure交互用例的规则一个用例可以带条件多个用例按顺序执行满足条件的用例执行完后会“结束”不再执行后面的用例。所以登录按钮的用例逻辑是顺序匹配的用例1条件 如果 txtUsername 文字 等于 空 且 txtPassword 文字 等于 空 则显示 txtError 文本为“请输入用户名和密码” 等待2000毫秒 隐藏 txtError 结束 用例2条件 否则如果 selRole 选中项文字 等于 “管理员” 则设置变量 userName txtUsername 文字 设置变量 role “admin” 设置变量 loginStatus “in” 打开页面 adminHome 结束 用例3条件 否则如果 selRole 选中项文字 等于 “普通用户” 则设置变量 userName txtUsername 文字 设置变量 role “user” 设置变量 loginStatus “in” 打开页面 userHome 结束 用例4无条件 否则 显示 txtError 文本为“请选择登录角色” 等待2000毫秒 隐藏 txtError 结束这里有几个细节要说清楚。第一用例1里的“且”连接了两个判空条件只有用户名和密码都为空才提示。实际项目里更严谨是用户名空、密码空分开提示但原型阶段合并提示能省一次条件判断演示效果也够用。第二“选中项文字”和“选中项值”要分清。下拉框的属性面板里每个选项可以分别设置“选项文字”和“选项值”。判断时我用的是“选中项文字”因为选项文字是中文可读性好。如果你用“选中项值”那判断条件就得用英文值比如等于“admin”。两种写法都能跑但不要混用。第三“设置变量值”这个动作的位置很关键。必须在“打开页面”之前完成。不然变量还没写入新页面载入后再去读role就还是默认值guest角色菜单死活显示不出来这类问题的排查很麻烦。第四打开页面时我用的是“在当前窗口打开”。Axure的“打开”动作里有个选项叫“新窗口打开/当前窗口打开”。原型演示建议用当前窗口浏览器里不会刷出一大堆页面标签页。正式发布到Axure云或者导出HTML后当前窗口打开的行为跟真实系统更像。3.4 第四步主页的角色感展示管理员主页adminHome和普通用户主页userHome我建议做成两个独立页面而不是一个页面塞两套内容。独立页面的好处是后续谁负责哪个模块打开文件就能分清楚。在两个主页顶部都放一个labUser文本用来显示当前登录用户。在这里用Axure的变量占位符写法把labUser的文字直接设置为“欢迎你[[userName]]”。预览时Axure会自动把[[userName]]替换成变量里的值。这个是Axure原生支持的文本变量插值不需要任何额外动作。接下来是菜单权限。adminHome页面上放“用户管理”“系统设置”“数据报表”三个菜单项userHome页面上放“个人中心”“我的订单”“消息通知”。两个页面各放各的菜单不仅权限区分明确而且不需要做“显示/隐藏”的复杂判断。如果你坚持“一个主页方案”比如用动态面板切换那菜单显隐就要做条件判断。以“用户管理”菜单为例选中该菜单元件在交互面板添加“载入时”或页面特定触发条件用例条件 如果 全局变量 role 等于 “admin” 则显示 用户管理菜单 结束 否则 隐藏 用户管理菜单 结束这个条件要写在菜单元件上触发时机建议是“页面载入时”加上“登录按钮成功之后的事件”两处都执行一遍。因为页面载入时和登录成功是两条不同的触发路径只写一处就会出现“登录后菜单没刷新”的情况。3.5 第五步退出登录退出登录这个动作看着不起眼但最容易被人忘掉。在主页右上角放一个“退出登录”按钮选中后添加“单击”交互用例无条件 设置变量 userName 空 设置变量 role guest 设置变量 loginStatus out 打开页面 login 结束这里的核心逻辑是退出时一定要把变量重置回初始状态。之前说过全局变量在浏览器刷新时才重置正常演示流程不会刷新浏览器所以你退出后不重置变量下次登录“普通用户”会被上次的admin角色残留影响。我曾经在一个演示版原型里翻过这个车演示到第三轮客户要再看一遍普通用户界面我退出后用普通用户重新登录结果菜单还是管理员那套现场改不了文件只能强行圆过去。后来规范了退出登录逻辑再没出过这种问题。3.6 用动态面板做角色tab切换的变体如果要做高保真tab切换版思路是在登录页放一个动态面板里面设置两个状态状态一放“管理员tab”状态二放“普通用户tab”。两个tab元件点击时动态面板切换到对应状态同时把当前状态记录到一个局部变量或者全局变量里。登录判断条件随之改变用例条件 如果 角色tab动态面板 当前状态 等于 “管理员状态” 则设置变量 role “admin” 打开页面 adminHome 结束这个判断用的不是下拉框选中项而是动态面板的“当前状态”。其他逻辑完全不变。tab切换版的视觉反馈比下拉框自然很多但代价是动态面板状态值要严格命名状态名两个tab不能长得像不然条件判断容易混乱。4. 常见问题与排查技巧实录4.1 登录按钮点了没反应这是最常见的翻车现场。第一反应先检查按钮上有没有热区或者透明元件盖着。页面里有时候为了排版拖了一个透明矩形当底图结果把按钮盖住了点击全落在矩形上。选中那个透明矩形右键“置于底部”就能解决。其次是条件用例有没有保存。Axure的交互面板里用例左侧如果有黄色感叹号说明用例里有错误。点击感叹号会看到具体报错比如变量名不存在、元件被删除等等。看到感叹号不要慌顺着提示改就行。排查的时候可以在用例最前面加一个无条件的“显示txtError为‘进入登录逻辑’”动作。预览一看如果文本显示了说明按钮点击事件本身没问题是后面条件写错了如果文本也没显示说明按钮压根没接到事件。4.2 用户名判空永远不成立这个坑我见得太多了。新手习惯在文本框里直接打字写“请输入用户名”当占位符结果这串字算是元件文字判空时“txtUsername 等于 空”永远不成立因为里面存着“请输入用户名”这六个字。正确做法是一定用属性面板里的“提示”功能而不是手动打字进去。Axure的“提示”是占位符不算元件文字不会参与判空逻辑。已经手动打字的就把它删掉改成配置提示属性。另外判空条件里Axure的条件选择器里要选“元件文字”不要选“焦点”或者“选中状态”。焦点是获取键盘焦点的状态跟内容空不空完全无关写进条件里就是逻辑错乱。4.3 下拉框取不到角色下拉框判断取不到角色通常是三个原因。第一用了“选中项值”但值没填。下拉框选项属性里“选项文字”是展示给用户看的中文“管理员”“选项值”是真正的数据值。如果你只填了选项文字没填选项值那用“选中项值”判断时结果永远是undefined。解决方案要么用“选中项文字”要么去把选项值填上。第二选项文字里有本不可见的空格。比如从文档里复制“管理员”时带了一个空格看起来一样判断时就不相等。解法是条件里直接用等号匹配如果老是不成立试试重新手打一遍选项文字。第三判断逻辑里写的是“等于 管理员”但实际是“等于 管理员 ”因为有缩进。Axure条件面板对空格很敏感建议把选项文字规范化所有下拉框选项不要带任何空格。4.4 页面跳转后变量丢失或菜单显示不对页面跳转后变量丢失的常见原因有三个。一全局变量名写错。比如设置变量时写的是userName条件判断里写的是username。前面说过变量名是大小写敏感的这种事肉眼很难发现。我建议把项目中所有用到的全局变量列出来打印在一个页面上用[[role]]、[[userName]]这样的占位符直接显示出来一眼就能看到值是否符合预期。二条件判断在“打开页面”之后才设置变量。Axure的脚本是顺序执行的如果你先写了“打开页面”再写“设置变量”新页面已经加载完了变量还没写入等页面读取role时自然是旧值。必须“设置变量 - 打开页面”的顺序写。三菜单显隐只在页面载入时判断了一次但登录动作发生后没有重新触发判断。可以在登录成功用例里把菜单对应的显示/隐藏动作也加上。Axure没有“全局事件”机制只能用复制用例的方式在不同触发点重复执行同样的逻辑。4.5 常见问题排查速查表现象可能原因排查方法按钮点击无响应热区遮挡、用例未保存、条件错误查看黄色感叹号加无条件显示文本来验证判空不成立占位符直接打字进文本框改用属性面板“提示”功能角色取不到用了选中项值但值未填改为判断“选中项文字”菜单权限不生效变量名大小写不一致用占位符输出变量检查实际值退出后仍是管理员权限退出时未重置变量退出用例里重设role和loginStatus5. 进阶扩展从登录原型到权限体系5.1 从“固定角色”升级为“可配置权限”基础的多角色登录只能演示两三种固定角色。真实后台系统里角色可能有七八种权限点更是几十个。你可以在此基础上做“角色权限管理”的演示层。思路是在一个“用户管理”页面里放一个角色列表旁边是权限勾选列表。管理员点击某个角色行右边勾选对应权限点。这里不需要真的把所有权限逻辑写死而是用“当前选中角色的权限数组”概念把勾选结果存到全局变量里用字符串拼接出一个权限集合比如“user:add,user:delete,report:view”。判断某个菜单是否显示就判断对应权限字符串里有没有某个关键字。Axure没有原生的contains判断但可以通过“不等于空”的变通方式设置一个变量permission把目标字符串写入再用“[[]]”语法做文本判断。这部分相对硬核适合已经熟练基础交互的人去挑战。5.2 用中继器模拟真实账号密码登录如果演示对象是开发团队或者需要验证登录流程的完整性用中继器做数据匹配比固定角色更有说服力。操作上不复杂建一个中继器列分别设为username、password、role。往里面添加几条演示数据。登录按钮点击时用中继器的“选中行”功能筛选出用户名匹配的行再检查该行密码是否一致一致就把该行role列的值赋给全局变量role同时打开对应主页。中继器筛选这个功能在Axure里被很多人忽略但其实它很适合做原型阶段的“假数据逻辑”。它的坑在于每次筛选结果只留下匹配行如果不小心把筛选条件写在“载入时”会影响后续所有读取。建议把筛选动作只在登录按钮的用例里触发其他时候不要动中继器。用这个方案你能演示“账号不存在”“密码错误”这些更细的分支登录功能的完成度直接提高一个档次。代价是搭建时间翻倍需要自己权衡。5.3 把多角色登录模板沉淀到团队做一次不叫本事把整个流程规范整理成可复用的模板才是真正划得来的投资。新建一个Axure文件把登录页、管理员主页、普通用户主页这些结构固定下来变量命名、元件命名全部规范好然后导出为.rplib团队元件库文件。后续团队里任何人做后台原型直接拉这个模板文件进去改两个小时的工作量能压缩到二十分钟。有一点非常关键模板里必须写清楚变量命名规范和条件判断规范。我之前因为偷懒模板只做了页面和元件没写规则文档结果同事用的时候变量名随便起最后文件里五个变量存的全是用户的杂乱命名改起来心态崩溃。从那时起我每个模板文件的第一页都会放一份“使用说明”把全局变量表、命名规范、交互逻辑用例的分支图全部列出来拿给谁都能直接上手。这套多角色登录原型做完之后你会发现它本质上不是一个登录页而是一个权限演示框架。凡是后台管理系统里的角色差异、菜单权限、登录流程都能基于这套框架延展。项目时间紧就做基础版时间充裕就升级中继器验证逻辑有了框架打底怎么调整都不慌。