拖动浏览,滚动或双指缩放。打开帮助查看键盘操作。

Yan
开放
合作
聊聊吧
Yan Fontão Boring view
All work

Case 045网页应用与仪表盘设计

Orka

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

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

01

我的贡献

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

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

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

02

先看总数,近期事件在旁

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

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

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

03

从列表到单台设备

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

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

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

使用说明

Yan Fontão
轻点
打开一个屏幕
点击
打开一个屏幕
拖动
浏览项目墙
滚轮
鼠标缩放,触控板移动,双指缩放
− +
拉远查看整面项目墙,或拉近
方向键
在案例中:↑↓ 切换案例,←→ 切换媒体。在项目墙上:移动
空格
打开或返回
Enter
打开
Esc Backspace
返回
Home
回到中心,再回到开场
PgUp PgDn
上一个或下一个频道
Tab
依次浏览项目和链接
R
随机项目
0–9
输入频道号,1–61
?
本页
快捷键

项目墙背景音乐

文件已为网页压缩并统一音量。

开放
合作
聊聊吧

给 Yan 发消息

告诉我你是谁,我会尽快回复。

000

关于 Yan

你好,我是 Yan

产品设计师/ 设计工程师

大多数产品都会在设计和代码之间丢掉一些东西。我的不会:我研究问题、设计产品,并亲手把界面上线,所以你批准的,正是用户最终拿到的。

  • 2018开始软件开发
  • UI + code设计与实现

合作过 Motorola · Ambev Tech · Rei do Pitaco · OneTool · CESAR

巴西 · 可远程、混合或驻场

Yan Fontão 的坐姿肖像:穿绿色毛衣、戴眼镜,手持麦克风。
开放
合作
聊聊吧
开放
合作
聊聊吧
000

加密频道

受保密协议约束

请输入访问码

向 Yan 索取访问码 ↗
开放
合作
聊聊吧
YAN FONTÃO 完整案例

频道 45 网页应用与仪表盘设计

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 和总览页面。