简介公司员工后台管理界面的Axure9高保真原型设计资料包面向需要搭建企业级内部管理系统原型的产品经理、交互设计师与开发人员。原型覆盖员工信息管理、工作流审批、考勤休假、培训发展、绩效薪酬及报表分析等核心模块并包含请假报销、加班申请、绩效指标设定等具体业务场景的页面布局与交互流程可帮助团队快速梳理需求、验证操作路径、统一界面规范。压缩包大小5.62MB内部文件清单未随资源单独列出下载后可用Axure9直接打开源文件查看页面母版、动态面板与交互设置。已有2502人学习下载适合用于需求评审、UI走查或作为员工管理系统原型的起步参考。借助动态面板切换、数据绑定思路和界面设计示例读者可快速掌握高保真原型的搭建逻辑结合自身业务扩展模块节省从零设计后台的时间。1. 交付一套高保真后台真正的难点不在画框而在状态切换员工后台管理界面设计这个题材直接用 Axure 9 做成高保真原型本质上是在项目开发之前先把产品逻辑“冻结”下来。很多团队做过类似的尝试最后原型沦为静态示意图评审时大家点头开发一接手就发现按钮点了没反应、表格不能翻页、审批流走不通。问题不在 Axure 本身而在于设计者对“高保真”的理解停留在视觉层忽略了交互状态和数据结构。真正可落地的员工后台原型必须把员工信息管理、工作流审批、考勤休假、报表分析这几个核心模块的状态流转先定义清楚。本文给出的做法是用动态面板管理页面切换用中继器模拟数据增删改查用全局变量维护当前登录用户和权限级别再配合母版统一导航结构。这套方案对产品经理、UX 设计师和刚转行的后台开发都适用——前者用来向客户演示后者可以直接把交互规则作为开发依据。读完你至少能复现一个员工列表的筛选、分页、编辑全流程以及一条请假申请从提交到审批通过的状态变化。2. 动态面板和中继器是后台原型的两根支柱2.1 中继器不是表格是带数据行为的数据集视图Axure 9 里最容易被低估的组件就是中继器Repeater。从外表看它渲染出来是一张表格但它的数据模型远不止于此。每一行对应数据集里的一条记录列对应字段而最关键的是它内置了数据操作的接口——你可以用 Add Rows、Update Rows、Delete Rows、Set Selected 等交互动作来操作这些数据。换句话说中继器本身就是一个微型数据库虽然它跑在原型里但行为逻辑和真实后台的 CRUD 很像。构建员工信息管理模块时我会先定义数据集字段然后在中继器属性面板中填入字段名和初始值。数据集字段建议按真实系统的最小表结构来设计这样后期演示报表分析模块时可以直接复用。字段不必贪多但关键维度要齐字段类型说明emp_id文本员工编号主键emp_name文本姓名emp_dept文本部门emp_role文本职位hire_date日期入职日期emp_status文本在职/离职用于筛选填入中文值时注意不要用 Excel 直接粘贴容易带出换行符导致显示错位。我一般会先粘贴到记事本清洗一遍再黏进数据集。布局上让中继器横向铺开列表字段。表头我用普通文本组件固定在中继器上方不放进中继器内——中继器自带表头会导致行移动时表头跟着走很不自然。列宽要与中继器单元格列宽保持一致简单办法是先给中继器加一个默认样式再在表头用相同字号和间距复刻。2.1.1 中继器筛选用文本框条件过滤数据员工信息管理的核心操作是筛选。Axure 的中继器支持筛选条件不需要写任何代码在交互面板里配置即可。我先放一个下拉框选项为“全部部门 / 技术部 / 市场部 / 人事部”再放一个搜索文本框。对于下拉框创建一个“筛选”用例条件如果 部件文字 当前组件值 等于 技术部动作添加筛选选中中继器匹配列为 emp_dept匹配方式为“等于”匹配值为[[Item.emp_dept]]这里的[[Item.emp_dept]]是特殊语法在中继器的筛选上下文中Item.emp_dept指向当前行的部门字段。这个语法很关键理解它才能做更多复杂条件组合比如既按部门又按在职状态筛选。匹配值可以写具体值也可以写表达式当筛选条件不止一个时Axure 默认取交集这与 SQL 的 AND 语义一致对后台逻辑还原来说足够真实。搜索框的模糊匹配稍有不同。给文本框添加“文本改变时”用例匹配方式选择“包含”匹配值为[[Item.emp_name]]同时要把搜索框值作为比较对象。更稳妥的做法是在文本框的“文本改变时”里设定一个局部变量var searchText LVAR1然后用这个变量作为条件的基准值这样中文输入时不会出现拼音残留导致的误匹配。提示对中继器做多条件筛选时先建一个“清除筛选”按钮再分别单独添加筛选动作这样逻辑清晰出现想不到的数据问题时也容易定位是哪一条筛选条件出了问题。2.2 动态面板后台页面的状态机后台管理系统的页面切换大致分两类左侧导航切换主内容区以及弹窗/抽屉式的临时页面。用动态面板管理这两类状态最合适因为动态面板本质上是一个容器你可以在里面放多个 State每个 State 对应一个独立页面状态切换时只改变 State不需要重新加载页面。员工后台管理有四个一级导航仪表盘、员工管理、审批中心、报表分析。我会创建一个动态面板命名为“main_content”四个 State 分别对应这四个页面。左侧导航菜单的每个菜单项添加“单击时”用例动作设置为“设置面板状态”选择 main_content目标 State 指向对应页面。这样页面切换非常快运行时不闪烁和真实后台的 SPA 体验很接近。动态面板还需要处理二级导航。比如审批中心下有请假审批、报销审批、加班审批三个子页这些子页不要做嵌套动态面板——嵌套结构复杂到后期自己都分不清。我会在审批中心这个 State 内部再放一个子动态面板同样用切换 State 的方式处理。这样每个主页面保持独立子页面的状态变更不会串到别的页面去。2.2.1 弹窗表单用动态面板做三层结构新增员工的表单弹窗是高频交互我把它做成一个单独的动态面板命名为“dialog_emp_edit”默认隐藏。弹窗由三种状态组成空白遮罩层白色弹窗背景 表单区域表单校验提示区域打开弹窗时先把动态面板设为“显示”再设置状态到“编辑模式”这样每次打开都是干净的界面。关闭弹窗时只做隐藏不做状态重置是否清空表单取决于具体场景——新增后关闭需要清空编辑后关闭要保留原数据我会用一个全局变量来控制弹窗的用途var dialogMode add // 或 edit在新增按钮和编辑按钮的用例开头给 dialogMode 赋值弹窗内的保存按钮再根据 dialogMode 决定执行“添加行”还是“更新行”。用这种方式弹窗状态管理在原型层面是闭环的。评审时演示新增员工、重复提交、取消操作都心中有数开发拿到原型也能准确判断表单回显和重置逻辑。这里体现的是状态驱动设计思维对后台界面的需求准确表达很重要。3. 员工列表的增删改查与分页在 Axure 中的完整实现员工信息管理页面要做的事情很明确展示列表、按条件搜索、新增员工、编辑员工、删除员工。看起来简单但真正做起来有几个细节容易让原型露馅最典型的是翻页——很多原型就做一页 10 条数据点下一页没反应评审时客户一定会点这个。3.1 用中继器实现增删改查新增员工的基本流程是点击“新增”按钮弹出表单填写姓名、部门、职位点击保存列表新增一条记录。中继器的 Add Rows 动作可以完成这一步。给保存按钮添加用例先执行“添加行”目标中继器为“employee_list”配置字段值用表单输入框的文本获取。字段绑定示例emp_id[[Math.floor(Math.random()*1000000)]]用表达式生成随机主键emp_name[[LVAR1]]LVAR1 是姓名输入框的值这里用到数学表达式的好处是每次新增都生成一个唯一的员工编号避免相同主键引发界面表现异常。如果对 Axure 的表达式语法不熟也可以手动输入一个固定值但演示多次新增时就会暴露编号重复的问题。编辑的通用做法是“行内编辑 弹窗编辑”二选一。行内编辑在中继器单元格里放文本框视觉清爽但做起来麻烦因为中继器是数据驱动渲染行内组件的值绑定需要动态设置。弹窗编辑相对容易维护我会在编辑按钮的用例中先为当前行绑定一个焦点[[Item.emp_id]]然后用“更新行”动作把表单里修改后的值写回当前行。更新行时匹配条件选择 emp_id 等于[[Item.emp_id]]这样只更新点击的那一行不会出现所有行一起被修改的情况。删除员工用“删除行”动作匹配条件同样是 emp_id。为了避免误删我在删除按钮上挂了一个确认弹窗点击删除时先弹出“确认删除该员工”点确定再真正执行删除。这是后台管理工具的常规逻辑删数据的行为必须可撤回或可确认。3.2 分页的模拟策略与每页条数切换分页要还原真实后台的交互体验重点在于页码点击后列表内容随之变化。Axure 对分页没有专门组件普遍方案是“中继器数据切片”。思路是中继器数据集保持不变用“添加筛选”动作限制当前显示数据的起始行和结束行。具体步骤在数据集里增加一个字段row_index值是数据行的序号从 1 开始递增。创建两个全局变量pageNum和pageSizepageSize 通过下拉框设置10、20、50。添加筛选条件row_index大于(pageNum-1)*pageSize且小于等于pageNum*pageSize。点击“下一页”按钮时先执行pageNumpageNum1再触发一次筛选。代码大概是这样的// 下一页按钮的用例 var nextPage pageNum 1 pageNum nextPage然后在同样的用例里调用筛选动作条件与上面一致。这里要把 pageSize 也纳入条件判断因为每页条数一改分页计算结果立即变化。页码显示我用一个文本组件展示“当前第 [[pageNum]] 页 / 共 [[Math.ceil(totalRows/pageSize)]] 页”totalRows 定义为全局变量在页面加载时取中继器的数据总行数。注意边界条件第一页时“上一页”按钮应该置灰最后一页时“下一页”按钮不能点击。我给这两个按钮设置“禁用”交互用条件判断页面范围。没有做边界处理的分页原型点到最后会越界这和真实系统行为不符开发还会觉得演示者不关注细节。3.3 导航菜单高亮与权限控制模拟高保真原型在某些程度上要体现权限差异。比如普通员工登录后看不到薪酬福利部门主管能看到本部门员工但无法查看全公司薪资。Axure 通过全局变量模拟登录身份然后在导航菜单和页面内容上做条件判断。我建一个全局变量currentUserRole在登录页输入账号密码后设置对该变量赋值。点击某个导航菜单时先通过条件判断当前角色是否有权限访问如果权限不足跳转到一个“无权限”页面而不是什么都不发生——真实后台系统通常给出权限提示页。导航高亮做法是动态面板的状态管理。每个菜单项对应一个底色高亮状态点击菜单时同时更新两个内容主内容区和菜单本身的选中态。很多人把菜单做成普通矩形选中态做不出来换背景色也做得生硬交互稿的效果先放一边但一致性和可点击区域的反馈一定要有否则开发验收时会要求你补充交互说明。4. 审批流与报表分析模块的状态建模员工后台管理系统的灵魂不在列表而在审批流。请假、报销、加班三类审批各自都有“提交 - 直属主管审批 - HR 复核 - 完成 / 驳回”这类多级流程。Axure 里做多级审批不能只做一个静态页面要把审批状态变化做出来。4.1 用全局变量记录审批节点我用全局变量approvalStatus表示当前审批节点取值可以是submitted、manager_approved、hr_confirmed、rejected。页面上的审批按钮根据这个变量决定显示什么文案、可不可点。比如submitted阶段页面显示“待主管审批”主管按钮可点击点击后approvalStatus变为manager_approved页面刷新显示“待 HR 复核”。实现上依然是动态面板的力量为每个状态单独做一个视觉状态再配合条件判断切换 State。比起直接修改文本内容这种方式更直观而且演示时可以清楚地看到每个节点的变化。4.1.1 审批按钮的权限回退审批动作模拟时要加一个合理性判断当前登录用户如果本身就是申请人就不能审批自己的申请。做法是在审批按钮的用例里加一个条件currentUserEmpID ! record.emp_id。如果相等点击弹出“不能审批自己的申请”。这个细节做到位开发评审时基本不会对审批流做业务逻辑的追问。4.2 报表分析用中继器聚合数据报表分析模块较多呈现的是图表和汇总表格。Axure 9 自带的图表支持有限我的做法是用中继器纵向罗列指标数据再叠加简单的柱状图——用矩形的宽度映射数值大小。在员工后台里最实用的报表是“部门人数分布”和“月度考勤异常次数”。部门人数分布的做法中继器每一行一个部门部门人数通过公式计算。Axure 没有完整的聚合函数需要手动汇总后填入数据集或者在加载时用变量的方式累加。手动汇总多用于原型演示阶段因为数据量不大比搭复杂的函数实用。// 页面加载时统计部门人数 var techCount 0 var marketCount 0 var hrCount 0 for each row in employee_list: if row.emp_dept 技术部 then techCount techCount 1 if row.emp_dept 市场部 then marketCount marketCount 1 if row.emp_dept 人事部 then hrCount hrCount 1这段逻辑在 Axure 里是用多个条件判断累加实现的没有 for 循环语法但效果一致。矩形柱子的宽度设置成变量乘以固定系数这样员工数量大的部门柱子自然就长汇报时很直观。数据不是真实的但演示价值足够。4.3 审批流页面的加载性能优化后台原型页面多、动态面板多容易越做越卡。加载变慢时先检查中继器的筛选是否在每个用例里都执行了一次无效计算特别是“文本改变时”这个事件每次输入都触发筛选本地数据量不大无所谓但会明显感觉到输入卡顿。解决办法是在输入框的文本框事件上加防抖失去焦点后或者用户按下回车时才刷新列表。另一个影响性能的点是动态面板的嵌套过深。我会限制动态面板嵌套不超过两层超过就拆分成独立页面用链接跳转。Axure 的页面跳转会重置全局变量需要注意当前登录状态会丢失所以拆分前必须用全局变量缓存用户信息到子页面后再用“页面加载时”用例恢复。5. 从原型到开发交付母版规范与验收检查高保真原型在进入开发前要做的不是继续美化界面而是把规范和可复用资产整理好。5.1 母版定义一致的后台管理界面后台页面的头部、侧边栏导航、底部状态栏这些跨页面公共区域用母版Master制作是最合理的。Axure 的母版相当于前端的公共组件一处修改全部页面同步生效避免后期微调时逐个页面编辑。创建三个母版header_master放系统标题、用户头像、退出登录sidebar_master放导航菜单footer_master放版权或操作提示。母版里可以放交互事件比如退出登录按钮的点击事件放在母版里每个引用它的页面都生效不需要在每页重复设置。5.2 命名规范与标注检查交付原型给开发前我会检查三个细节。动态面板名称、中继器名称全局唯一不要出现“动态面板 1”“矩形 2”这种默认命名否则交互说明引用时无法对照。所有的全局变量要有一份清单列出变量名、含义、可取值、初始值这个比在原型里写注释更直接。最后是流程串联测试从登录、进入员工管理、新增员工、发起请假、审批、查看报表完整走一遍特别留意弹窗关闭后焦点是否回到正确的页面。开发拿到 Axure 原型后最头疼的是不知道每条交互背后的逻辑边界。我把关键交互用表格的方式附在原型说明页里字段包括交互名称、触发方式、条件分支、动作描述交互名称触发事件条件分支动作结果筛选员工列表下拉框选项改变部门等于全部时不筛选中继器显示全部新增员工保存保存按钮点击dialogMode add添加行刷新列表审批通过通过按钮点击当前用户非申请人审批状态置为 manager_approved这份表格同步给设计和前端的同事每个人维护和使用同一个语言体系。原型工具本身不是标准答案标准答案是团队对交互状态的理解有一个稳定共识。最后一章要落到一个具体技巧。我会建议对员工后台管理界面设计原型做一次“反向测试”以普通员工身份走一遍全流程再以管理员身份走一遍对比同一个功能两者的界面差异。这样做一次能发现权限漏洞和流程断点比单纯按脚本测更接近真实使用路径。本文还有配套的精品资源点击获取 Axure 9高保真员工后台原型：动态面板与中继器实现状态流转
简介公司员工后台管理界面的Axure9高保真原型设计资料包面向需要搭建企业级内部管理系统原型的产品经理、交互设计师与开发人员。原型覆盖员工信息管理、工作流审批、考勤休假、培训发展、绩效薪酬及报表分析等核心模块并包含请假报销、加班申请、绩效指标设定等具体业务场景的页面布局与交互流程可帮助团队快速梳理需求、验证操作路径、统一界面规范。压缩包大小5.62MB内部文件清单未随资源单独列出下载后可用Axure9直接打开源文件查看页面母版、动态面板与交互设置。已有2502人学习下载适合用于需求评审、UI走查或作为员工管理系统原型的起步参考。借助动态面板切换、数据绑定思路和界面设计示例读者可快速掌握高保真原型的搭建逻辑结合自身业务扩展模块节省从零设计后台的时间。1. 交付一套高保真后台真正的难点不在画框而在状态切换员工后台管理界面设计这个题材直接用 Axure 9 做成高保真原型本质上是在项目开发之前先把产品逻辑“冻结”下来。很多团队做过类似的尝试最后原型沦为静态示意图评审时大家点头开发一接手就发现按钮点了没反应、表格不能翻页、审批流走不通。问题不在 Axure 本身而在于设计者对“高保真”的理解停留在视觉层忽略了交互状态和数据结构。真正可落地的员工后台原型必须把员工信息管理、工作流审批、考勤休假、报表分析这几个核心模块的状态流转先定义清楚。本文给出的做法是用动态面板管理页面切换用中继器模拟数据增删改查用全局变量维护当前登录用户和权限级别再配合母版统一导航结构。这套方案对产品经理、UX 设计师和刚转行的后台开发都适用——前者用来向客户演示后者可以直接把交互规则作为开发依据。读完你至少能复现一个员工列表的筛选、分页、编辑全流程以及一条请假申请从提交到审批通过的状态变化。2. 动态面板和中继器是后台原型的两根支柱2.1 中继器不是表格是带数据行为的数据集视图Axure 9 里最容易被低估的组件就是中继器Repeater。从外表看它渲染出来是一张表格但它的数据模型远不止于此。每一行对应数据集里的一条记录列对应字段而最关键的是它内置了数据操作的接口——你可以用 Add Rows、Update Rows、Delete Rows、Set Selected 等交互动作来操作这些数据。换句话说中继器本身就是一个微型数据库虽然它跑在原型里但行为逻辑和真实后台的 CRUD 很像。构建员工信息管理模块时我会先定义数据集字段然后在中继器属性面板中填入字段名和初始值。数据集字段建议按真实系统的最小表结构来设计这样后期演示报表分析模块时可以直接复用。字段不必贪多但关键维度要齐字段类型说明emp_id文本员工编号主键emp_name文本姓名emp_dept文本部门emp_role文本职位hire_date日期入职日期emp_status文本在职/离职用于筛选填入中文值时注意不要用 Excel 直接粘贴容易带出换行符导致显示错位。我一般会先粘贴到记事本清洗一遍再黏进数据集。布局上让中继器横向铺开列表字段。表头我用普通文本组件固定在中继器上方不放进中继器内——中继器自带表头会导致行移动时表头跟着走很不自然。列宽要与中继器单元格列宽保持一致简单办法是先给中继器加一个默认样式再在表头用相同字号和间距复刻。2.1.1 中继器筛选用文本框条件过滤数据员工信息管理的核心操作是筛选。Axure 的中继器支持筛选条件不需要写任何代码在交互面板里配置即可。我先放一个下拉框选项为“全部部门 / 技术部 / 市场部 / 人事部”再放一个搜索文本框。对于下拉框创建一个“筛选”用例条件如果 部件文字 当前组件值 等于 技术部动作添加筛选选中中继器匹配列为 emp_dept匹配方式为“等于”匹配值为[[Item.emp_dept]]这里的[[Item.emp_dept]]是特殊语法在中继器的筛选上下文中Item.emp_dept指向当前行的部门字段。这个语法很关键理解它才能做更多复杂条件组合比如既按部门又按在职状态筛选。匹配值可以写具体值也可以写表达式当筛选条件不止一个时Axure 默认取交集这与 SQL 的 AND 语义一致对后台逻辑还原来说足够真实。搜索框的模糊匹配稍有不同。给文本框添加“文本改变时”用例匹配方式选择“包含”匹配值为[[Item.emp_name]]同时要把搜索框值作为比较对象。更稳妥的做法是在文本框的“文本改变时”里设定一个局部变量var searchText LVAR1然后用这个变量作为条件的基准值这样中文输入时不会出现拼音残留导致的误匹配。提示对中继器做多条件筛选时先建一个“清除筛选”按钮再分别单独添加筛选动作这样逻辑清晰出现想不到的数据问题时也容易定位是哪一条筛选条件出了问题。2.2 动态面板后台页面的状态机后台管理系统的页面切换大致分两类左侧导航切换主内容区以及弹窗/抽屉式的临时页面。用动态面板管理这两类状态最合适因为动态面板本质上是一个容器你可以在里面放多个 State每个 State 对应一个独立页面状态切换时只改变 State不需要重新加载页面。员工后台管理有四个一级导航仪表盘、员工管理、审批中心、报表分析。我会创建一个动态面板命名为“main_content”四个 State 分别对应这四个页面。左侧导航菜单的每个菜单项添加“单击时”用例动作设置为“设置面板状态”选择 main_content目标 State 指向对应页面。这样页面切换非常快运行时不闪烁和真实后台的 SPA 体验很接近。动态面板还需要处理二级导航。比如审批中心下有请假审批、报销审批、加班审批三个子页这些子页不要做嵌套动态面板——嵌套结构复杂到后期自己都分不清。我会在审批中心这个 State 内部再放一个子动态面板同样用切换 State 的方式处理。这样每个主页面保持独立子页面的状态变更不会串到别的页面去。2.2.1 弹窗表单用动态面板做三层结构新增员工的表单弹窗是高频交互我把它做成一个单独的动态面板命名为“dialog_emp_edit”默认隐藏。弹窗由三种状态组成空白遮罩层白色弹窗背景 表单区域表单校验提示区域打开弹窗时先把动态面板设为“显示”再设置状态到“编辑模式”这样每次打开都是干净的界面。关闭弹窗时只做隐藏不做状态重置是否清空表单取决于具体场景——新增后关闭需要清空编辑后关闭要保留原数据我会用一个全局变量来控制弹窗的用途var dialogMode add // 或 edit在新增按钮和编辑按钮的用例开头给 dialogMode 赋值弹窗内的保存按钮再根据 dialogMode 决定执行“添加行”还是“更新行”。用这种方式弹窗状态管理在原型层面是闭环的。评审时演示新增员工、重复提交、取消操作都心中有数开发拿到原型也能准确判断表单回显和重置逻辑。这里体现的是状态驱动设计思维对后台界面的需求准确表达很重要。3. 员工列表的增删改查与分页在 Axure 中的完整实现员工信息管理页面要做的事情很明确展示列表、按条件搜索、新增员工、编辑员工、删除员工。看起来简单但真正做起来有几个细节容易让原型露馅最典型的是翻页——很多原型就做一页 10 条数据点下一页没反应评审时客户一定会点这个。3.1 用中继器实现增删改查新增员工的基本流程是点击“新增”按钮弹出表单填写姓名、部门、职位点击保存列表新增一条记录。中继器的 Add Rows 动作可以完成这一步。给保存按钮添加用例先执行“添加行”目标中继器为“employee_list”配置字段值用表单输入框的文本获取。字段绑定示例emp_id[[Math.floor(Math.random()*1000000)]]用表达式生成随机主键emp_name[[LVAR1]]LVAR1 是姓名输入框的值这里用到数学表达式的好处是每次新增都生成一个唯一的员工编号避免相同主键引发界面表现异常。如果对 Axure 的表达式语法不熟也可以手动输入一个固定值但演示多次新增时就会暴露编号重复的问题。编辑的通用做法是“行内编辑 弹窗编辑”二选一。行内编辑在中继器单元格里放文本框视觉清爽但做起来麻烦因为中继器是数据驱动渲染行内组件的值绑定需要动态设置。弹窗编辑相对容易维护我会在编辑按钮的用例中先为当前行绑定一个焦点[[Item.emp_id]]然后用“更新行”动作把表单里修改后的值写回当前行。更新行时匹配条件选择 emp_id 等于[[Item.emp_id]]这样只更新点击的那一行不会出现所有行一起被修改的情况。删除员工用“删除行”动作匹配条件同样是 emp_id。为了避免误删我在删除按钮上挂了一个确认弹窗点击删除时先弹出“确认删除该员工”点确定再真正执行删除。这是后台管理工具的常规逻辑删数据的行为必须可撤回或可确认。3.2 分页的模拟策略与每页条数切换分页要还原真实后台的交互体验重点在于页码点击后列表内容随之变化。Axure 对分页没有专门组件普遍方案是“中继器数据切片”。思路是中继器数据集保持不变用“添加筛选”动作限制当前显示数据的起始行和结束行。具体步骤在数据集里增加一个字段row_index值是数据行的序号从 1 开始递增。创建两个全局变量pageNum和pageSizepageSize 通过下拉框设置10、20、50。添加筛选条件row_index大于(pageNum-1)*pageSize且小于等于pageNum*pageSize。点击“下一页”按钮时先执行pageNumpageNum1再触发一次筛选。代码大概是这样的// 下一页按钮的用例 var nextPage pageNum 1 pageNum nextPage然后在同样的用例里调用筛选动作条件与上面一致。这里要把 pageSize 也纳入条件判断因为每页条数一改分页计算结果立即变化。页码显示我用一个文本组件展示“当前第 [[pageNum]] 页 / 共 [[Math.ceil(totalRows/pageSize)]] 页”totalRows 定义为全局变量在页面加载时取中继器的数据总行数。注意边界条件第一页时“上一页”按钮应该置灰最后一页时“下一页”按钮不能点击。我给这两个按钮设置“禁用”交互用条件判断页面范围。没有做边界处理的分页原型点到最后会越界这和真实系统行为不符开发还会觉得演示者不关注细节。3.3 导航菜单高亮与权限控制模拟高保真原型在某些程度上要体现权限差异。比如普通员工登录后看不到薪酬福利部门主管能看到本部门员工但无法查看全公司薪资。Axure 通过全局变量模拟登录身份然后在导航菜单和页面内容上做条件判断。我建一个全局变量currentUserRole在登录页输入账号密码后设置对该变量赋值。点击某个导航菜单时先通过条件判断当前角色是否有权限访问如果权限不足跳转到一个“无权限”页面而不是什么都不发生——真实后台系统通常给出权限提示页。导航高亮做法是动态面板的状态管理。每个菜单项对应一个底色高亮状态点击菜单时同时更新两个内容主内容区和菜单本身的选中态。很多人把菜单做成普通矩形选中态做不出来换背景色也做得生硬交互稿的效果先放一边但一致性和可点击区域的反馈一定要有否则开发验收时会要求你补充交互说明。4. 审批流与报表分析模块的状态建模员工后台管理系统的灵魂不在列表而在审批流。请假、报销、加班三类审批各自都有“提交 - 直属主管审批 - HR 复核 - 完成 / 驳回”这类多级流程。Axure 里做多级审批不能只做一个静态页面要把审批状态变化做出来。4.1 用全局变量记录审批节点我用全局变量approvalStatus表示当前审批节点取值可以是submitted、manager_approved、hr_confirmed、rejected。页面上的审批按钮根据这个变量决定显示什么文案、可不可点。比如submitted阶段页面显示“待主管审批”主管按钮可点击点击后approvalStatus变为manager_approved页面刷新显示“待 HR 复核”。实现上依然是动态面板的力量为每个状态单独做一个视觉状态再配合条件判断切换 State。比起直接修改文本内容这种方式更直观而且演示时可以清楚地看到每个节点的变化。4.1.1 审批按钮的权限回退审批动作模拟时要加一个合理性判断当前登录用户如果本身就是申请人就不能审批自己的申请。做法是在审批按钮的用例里加一个条件currentUserEmpID ! record.emp_id。如果相等点击弹出“不能审批自己的申请”。这个细节做到位开发评审时基本不会对审批流做业务逻辑的追问。4.2 报表分析用中继器聚合数据报表分析模块较多呈现的是图表和汇总表格。Axure 9 自带的图表支持有限我的做法是用中继器纵向罗列指标数据再叠加简单的柱状图——用矩形的宽度映射数值大小。在员工后台里最实用的报表是“部门人数分布”和“月度考勤异常次数”。部门人数分布的做法中继器每一行一个部门部门人数通过公式计算。Axure 没有完整的聚合函数需要手动汇总后填入数据集或者在加载时用变量的方式累加。手动汇总多用于原型演示阶段因为数据量不大比搭复杂的函数实用。// 页面加载时统计部门人数 var techCount 0 var marketCount 0 var hrCount 0 for each row in employee_list: if row.emp_dept 技术部 then techCount techCount 1 if row.emp_dept 市场部 then marketCount marketCount 1 if row.emp_dept 人事部 then hrCount hrCount 1这段逻辑在 Axure 里是用多个条件判断累加实现的没有 for 循环语法但效果一致。矩形柱子的宽度设置成变量乘以固定系数这样员工数量大的部门柱子自然就长汇报时很直观。数据不是真实的但演示价值足够。4.3 审批流页面的加载性能优化后台原型页面多、动态面板多容易越做越卡。加载变慢时先检查中继器的筛选是否在每个用例里都执行了一次无效计算特别是“文本改变时”这个事件每次输入都触发筛选本地数据量不大无所谓但会明显感觉到输入卡顿。解决办法是在输入框的文本框事件上加防抖失去焦点后或者用户按下回车时才刷新列表。另一个影响性能的点是动态面板的嵌套过深。我会限制动态面板嵌套不超过两层超过就拆分成独立页面用链接跳转。Axure 的页面跳转会重置全局变量需要注意当前登录状态会丢失所以拆分前必须用全局变量缓存用户信息到子页面后再用“页面加载时”用例恢复。5. 从原型到开发交付母版规范与验收检查高保真原型在进入开发前要做的不是继续美化界面而是把规范和可复用资产整理好。5.1 母版定义一致的后台管理界面后台页面的头部、侧边栏导航、底部状态栏这些跨页面公共区域用母版Master制作是最合理的。Axure 的母版相当于前端的公共组件一处修改全部页面同步生效避免后期微调时逐个页面编辑。创建三个母版header_master放系统标题、用户头像、退出登录sidebar_master放导航菜单footer_master放版权或操作提示。母版里可以放交互事件比如退出登录按钮的点击事件放在母版里每个引用它的页面都生效不需要在每页重复设置。5.2 命名规范与标注检查交付原型给开发前我会检查三个细节。动态面板名称、中继器名称全局唯一不要出现“动态面板 1”“矩形 2”这种默认命名否则交互说明引用时无法对照。所有的全局变量要有一份清单列出变量名、含义、可取值、初始值这个比在原型里写注释更直接。最后是流程串联测试从登录、进入员工管理、新增员工、发起请假、审批、查看报表完整走一遍特别留意弹窗关闭后焦点是否回到正确的页面。开发拿到 Axure 原型后最头疼的是不知道每条交互背后的逻辑边界。我把关键交互用表格的方式附在原型说明页里字段包括交互名称、触发方式、条件分支、动作描述交互名称触发事件条件分支动作结果筛选员工列表下拉框选项改变部门等于全部时不筛选中继器显示全部新增员工保存保存按钮点击dialogMode add添加行刷新列表审批通过通过按钮点击当前用户非申请人审批状态置为 manager_approved这份表格同步给设计和前端的同事每个人维护和使用同一个语言体系。原型工具本身不是标准答案标准答案是团队对交互状态的理解有一个稳定共识。最后一章要落到一个具体技巧。我会建议对员工后台管理界面设计原型做一次“反向测试”以普通员工身份走一遍全流程再以管理员身份走一遍对比同一个功能两者的界面差异。这样做一次能发现权限漏洞和流程断点比单纯按脚本测更接近真实使用路径。本文还有配套的精品资源点击获取