跳到正文
TV view聊聊吧
中文
全部作品

网页应用与仪表盘设计

Orka. 从全部设备到一次读数

一个葡萄牙语的管理仪表盘,面向会上报水质读数的设备,有总览、可筛选的列表,以及每台设备的详情页。

我的职责
界面设计
项目状态
界面设计 · Figma 存档
为这面项目墙合成的 Orka 样机,画面取自项目的真实页面。
为这面项目墙用项目真实页面合成的样机。

来自原始 Figma 设计文件的页面,使用示例数据。

我的贡献

Orka 是一个葡萄牙语的桌面端管理仪表盘,用来管理设备、用户以及设备所属的公司。设备会上报 pH、ORP 和温度等水质读数。

三个页面撑起了整体结构:总览、设备列表和单台设备的详情。页面上的每个数值都是示例数据。

录制自 Figma 原型。从总览到一台设备,再到报告和设置。
Orka 总览,有侧边栏、四张蓝色的总数卡片、设备和用户的环形图、通知栏,以及新增设备的折线图。
总览把总数、分布和近期事件放在同一个页面。

先看总数,近期事件在旁

总览的开头是四张蓝色卡片,分别是设备、高级版设备、公司和用户。它们下方有两张图表,分别按方案拆分设备、按权限级别拆分用户,还有一张折线图,展示全年新增设备的变化。

通知单独占一栏,所以像 pH 接近限值、设备没有信号这样的事件,就留在这个页面上,不用跳到别的页面。同一个页面的底部还有这份列表的简短版本。

Equipamentos 列表,有 Tab、筛选和搜索,各行编号为 EQ-001 到 EQ-011,显示读数、状态、方案、公司和警报。
颜色和警报图标让异常在扫读列表时一眼可见。
设备 EQ-001 的详情,有蓝色的读数卡片、一行逆变器数值、折线图、pH 仪表图和水量图表。
单台设备:先是当前读数,再是每项读数的变化。

从列表到单台设备

这份列表是为快速扫读而做的。Tab 把全部、免费和高级版设备分开,每一行把最新读数、状态、方案、公司和警报放在同一行里。温度会随数值高低变色,警报显示为带数字的三角形,所以异常一眼就能看到。

详情页面沿用总览的顺序,只是针对单台设备:当前读数放在大卡片里,逆变器数值放在一条颜色更浅的行里,接着是每项读数变化的图表,并标出最小值和最大值。pH 仪表图把区间标成不可接受、可接受和理想三档,这就把一个数字变成了一个判断。

白色背景上,一个大号的蓝色 Orka Logo 旁边是一台深色笔记本电脑,屏幕上是总览页面。
演示 Frame,有 Orka Logo 和总览页面。