网页应用与仪表盘设计
Orka. 从全部设备到一次读数
一个葡萄牙语的管理仪表盘,面向会上报水质读数的设备,有总览、可筛选的列表,以及每台设备的详情页。
- 我的职责
- 界面设计
- 项目状态
- 界面设计 · Figma 存档
来自原始 Figma 设计文件的页面,使用示例数据。
我的贡献
Orka 是一个葡萄牙语的桌面端管理仪表盘,用来管理设备、用户以及设备所属的公司。设备会上报 pH、ORP 和温度等水质读数。
三个页面撑起了整体结构:总览、设备列表和单台设备的详情。页面上的每个数值都是示例数据。
先看总数,近期事件在旁
总览的开头是四张蓝色卡片,分别是设备、高级版设备、公司和用户。它们下方有两张图表,分别按方案拆分设备、按权限级别拆分用户,还有一张折线图,展示全年新增设备的变化。
通知单独占一栏,所以像 pH 接近限值、设备没有信号这样的事件,就留在这个页面上,不用跳到别的页面。同一个页面的底部还有这份列表的简短版本。
从列表到单台设备
这份列表是为快速扫读而做的。Tab 把全部、免费和高级版设备分开,每一行把最新读数、状态、方案、公司和警报放在同一行里。温度会随数值高低变色,警报显示为带数字的三角形,所以异常一眼就能看到。
详情页面沿用总览的顺序,只是针对单台设备:当前读数放在大卡片里,逆变器数值放在一条颜色更浅的行里,接着是每项读数变化的图表,并标出最小值和最大值。pH 仪表图把区间标成不可接受、可接受和理想三档,这就把一个数字变成了一个判断。




