基于Axure+墨刀设计的电梯管理系统云台ERP的中保真原型图
目录
项目概述
桌面端设计(产品总监角度)
1.登陆页面
登陆页面的交互
2.首页
首页的交互
3.云端仪表盘
仪表盘交互的设计
4. 云端监控
5.资源管理中心
6.维保管理
7.电梯信息管理中心
移动端页面的设计(普通维修工视角)
移动端登录
移动端首页
移动端工作台页面
消息中心与工时中心
移动端个人中心
总结:
项目概述
本项目是站在市场业务需求、部门职能、企业信息化管理等多个角度出发的桌面端+移动端的全国级别的电梯管理系统云台中保真原型图,耗时约4天时间(5.29-6.2),桌面端的角色为产品总监(中层),移动端的角色为部门职工(普通员工),下面我首先展示桌面端的设计思路。
桌面端设计(产品总监角度)
1.登陆页面
登陆页面的设计如上图,登陆的方式有两种,一种是传统的账号吗密码的方式,另一种是手机号快捷登录,点击“手机号快捷登录”按钮可以在同一个页面内进行跳转
在该页面中重新点击“使用账号密码登录”即可跳转回原来的账号密码登录页面
登陆页面的交互
1.登陆页面存在的交互主要是鼠标移动到登陆按钮上则进行加深处理(如下图)
2.还有上述我提到的点击“手机号快捷登录”跳转和“使用账号密码跳转”这两个交互
3.最后一个是当我门鼠标移动到右上角的“首页”的时候可以完成首页的跳转
2.首页
首页的整体的设计如下图,首页的框架我采用的是传统的“抽屉式”+“标题栏”的方式,左侧的抽屉设置了鼠标移动变色等基本的样式;右侧的标题栏内的“当前位置”我设置成了面包屑的交互,点击可以进行面包屑的显示与隐藏,因为公司规模较大,在首页我还设置了位置的相关内容,可以切换不同地区,对不同地区的电梯进行“一键远控”等。
首页的交互
首页的全部可交互的热区如上图所示(绿色边框高亮的表示存在交互)
1.轮播图
首页设置了基础的轮播图,切换到首页的时候回自动进行轮播
2.抽屉
左侧的抽屉当我门鼠标移动上去的时候会进行不同样式的显示,且我们点击之后就可以完成相应的跳转(如下图所示)
3.首页卡片的设置
当我们鼠标移动到对应的卡片上的时候我们能够看到的尺寸发生了变化,移开的时候卡片会恢复原样,这样的交互是为了在信息过载场景中形成视觉驻留点,降低认知负荷的同时强化情感化体验,最终实现用户注意力引导、操作反馈明确性与界面美学的系统性优化。
4.可自定义的快捷业务导航
原理第3个交互师一样的,鼠标移动上去同样会产生尺寸的变化,移出的时候尺寸恢复
当触发「快捷管理常用业务」交互时所唤起的自定义窗口,本质上是基于用户行为数据的智能界面重构系统。该模块通过动态捕捉不同角色的业务操作频次,运用个性化信息架构技术,实现首页功能入口的智能重组与优先级排序
5.首页文档快览模块的设计
在该模块中用户可以快捷的访问不同的文件,例如电梯维修类文件、操作指南类文件、企业活动类文件、排班表等文件......让所有员工可以第一时间了解到企业的讯息,鼠标移动上去时同样会产生交互(出现描边和阴影表示选中)
3.云端仪表盘
云端仪表盘页面我们可以查看电梯的相关信息和员工、资金的相关信息(但是为了区分不同的权限,资金的部分我设置成了“无权访问”的提示信息),电梯的页面设计如下
员工的页面设计如下
资金的页面设置如下
仪表盘交互的设计
1.日期的选择
可以选择不同类型的日期从而看到短期内或者长期内的数据变化
2.卡片的交互
用户在移动到不同的卡片上的时候会出现不同的样式的变化,用户可以根据样式的变化清晰的看到自己所在的位置
3.图表交互
鼠标单击图表的对应的组合部分,该部分会从总图表中分离出来且鼠标移动上去的时候显示对应的提示信息(如下图1-图2)


剩余的卡片在鼠标移动上去的时候都会显示对应的信息(如下图3-图6)




4.员工卡片散点图设计
员工卡片的散点图信息中存在工种人数-工种薪资之间的对比图像
移动到下方的提示信息,图像中对应的元素尺寸会变大且存在外阴影的样式变化(下图中选择紫色的“电梯项目经理”的时候图像中对应的位置尺寸会发生变化)
点击提示信息图像中的对应元素会消失且提示信息变成“灰色” (如下图,还是以“电梯项目经理”为例)
4. 云端监控
云端监控主要是负责中台员工快捷管理电梯监控即时发生的情况,出现紧急问题时可以第一时间进行上报
右侧浮动的窗口中存放的与电梯监控相关的功能,这样做的目的就是在保证不影响中台人员查看实时情况的同时兼顾更多的可选功能,只有我们鼠标移动上去的时候功能才会显现
主要的功能有:选择区域、故障申报、监控视图的切换
点击不同的视图可以切换不同的电梯监控布局
九宫格布局如下
列表布局如下
5.资源管理中心
资源管理中心主要涉及对企业内外的相关资源的管理,本来我是设计在“抽屉”的二级标题中的,但是为了界面的“小而美”我融合到了一个界面中进行设计,主要包含的功能点是“订单管理”、“库存管理”、“客户管理”和“人员培训管理”,上图为资源管理的首页(订单管理),剩余的相关的页面如下
库存管理界面
站在桌面中台的角度,可以对电梯的库存信息进行查看,下图我继承了出入库可视化图表、库存管理卡片和库管表单于一体,功能强大页面商务、高效。
客户管理页面
在客户管理页面中可以检查到公司在国内不同区域的客户运营状态和客户的信息管理,面向B端的ERP为了更好的区分不同职能的权限我仅设置了客户区域数量的总揽而更详细的客户管理需要更高的权限去查看
人员培训管理页面
检查不同工种的培训工作对于企业管理中台中也是必要的,我设置了对应的图表对不同工种的新老结构进行了可视化的分析,以及哪些资深职工可以带领哪些新员工的汇总都记录其中。
6.维保管理
维保管理界面涵盖了AI智能预警、维保相关数据分析和故障申报页面,维保管理中心的首页设计如下,电梯智能预警表示在中台中我们可以完成人工+AI的7*24小时不间断的检测不同区域的监控的状态、如果出现形如火灾、梯门损怀、电梯运行状态异常等情况可以实时进行检测并及时联机相关人员维修救援,防止出现重大电梯灾害
数据分析页面
涵盖电梯维保的数据分析视图有多种,默认设定了电梯常见问题环形图和成本消息分析图表,如果想查看不同的维保信息可以点击下方的按钮进行切换即可实时查看。
故障申报页面
当后台工作人员看到电梯出现问题可以立刻填写对应的表单,或者将该该表单发送到手机端进行填写,这样方便对应区域的电梯维修人员第一时间收集信息,对出现问题的电梯进行抢修,填写完成之后到达“确认信息”页面
确认无误之后到达“提交成功”页面
7.电梯信息管理中心
为了方便工作人员了解一部电梯的详细的运行状况和维保状况,我设计了针对于单台电梯的“信息管理”页面,该页面可以看到电梯实时的重要信息和一部电梯的全部的信息
当我们鼠标点击到“关于本电梯更多设备信息”或者“关于本电梯更多维保信息”上的时候
会弹出如下的窗口,该窗口标识了对应的电梯的所有的参数,点击返回则关闭该窗口
移动端页面的设计(普通维修工视角)
移动端涵盖的页面主要是以一个维修工个体的角度展开,涵盖了登录页面、首页、消息与工时记录、工作台、个人中心、视频学习页面等多个功能,页面的汇总如下
移动端登录
移动端登录采用的是流行的账号密码或者手机号验证的登录方式进行登录
移动端首页
在职工的首页中进行了必要功能的设计,方便出现问题的时候职工可以快速高效的第一时间到达任务现场进行维修,且设计了相关的轮播图,在移动端追求高效的同时提高员工看视频的兴趣
在首页的“视频学习”的相关功能中,员工可以通过学习电梯的相关视频丰富自己的阅历和提高自身技能的熟练度,学习视频我设计成了当前主流的“面积不均卡片”,这样除了提高员工的学习兴趣之外还能提高移动端的商务程度、流行性等。
移动端的“全部菜单”中单击可以完成跳转,跳转到工作台页面
移动端工作台页面
在工作台页面员工可以快速的看到当前需要维修的电梯的数量和保养的电梯的数量等信息,还可以完成常用的基础功能和其他的辅助功能
消息中心与工时中心
我将消息中心和工时中心继承到了一个页面中,用户点击不同的按钮可以完成快捷切换
消息中心的页面设计如下,在该页面中用户可以查看所有人给他发送的消息,更重要的是可以与中台人员进行联动,中台人员申报问题之后如果用户的IP位置有问题的故障电梯处系统会自动派单给维修人员,维修人员不管是在首页、消息中心或者工作台中都可以看到需要维修的电梯的信息和位置
用户完成了电梯的维修之后会计入工时,用户可以在“消息——工时记录”中进行查看,这样就完成了一个小的“闭环”,系统派单给维修工,维修工及时抢修,工时计入到“工时记录”页面。
移动端个人中心
在该页面中可以查看个人的所有的信息,绝大部分的信息都是可以在移动端进行编辑的,在该页面中还可以完成账号的管理等操作。
总结:
本次电梯管理系统页面设计,以双端协同与全角色覆盖为核心,深度融合用户体验与功能实用性,旨在打造高效、智能的管理平台。
在双端设计层面,充分考量移动端与 PC 端的设备特性与使用场景差异。移动端聚焦便捷性与即时性,采用轻量化交互设计,员工可通过手机随时随地查看电梯运行状态、提交故障报修,利用 GPS 定位与消息推送功能,实现快速响应与精准服务;PC 端则强化数据处理与综合管理能力,通过大屏可视化呈现多维度数据报表、设备运行参数,支持管理员进行系统配置、权限分配、数据分析等复杂操作,以提升管理效率。
从员工使用角度出发,针对不同角色需求定制专属功能模块。普通员工可便捷获取电梯等候时间、楼层指引等信息,简化乘梯流程;维保人员能实时接收维修任务,上传维护记录,实现全流程数字化管理;管理人员则通过数据看板掌握全局运行态势,依据实时数据优化调度策略、预判设备故障,为决策提供有力支撑。此外,系统设计遵循人性化原则,采用简洁直观的界面布局与流畅的操作逻辑,降低学习成本,确保各岗位员工高效使用,全方位满足电梯管理的多样化需求,推动电梯管理向智能化、精细化方向迈进。