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

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

Case 006移动应用设计

TerasApp

一款用于农场 TERAS IoT 温度传感器的移动应用:配对设备、读取最新温度、跟踪传感器记录、导出报告。所有读数都是示例数据。

我的职责
产品流程与界面设计
项目状态
界面设计 · Figma 存档
黑色圆盘上的 TerasApp 标志。
Logo。

01

我的贡献

TerasApp 是 TERAS 温度传感器的葡萄牙语配套应用。每个传感器都有一个名字,比如示例中的“Caldeira da fazenda 1”,整个应用围绕三项检查来设计:最新读数、传感器的状态,以及过去七天温度的变化情况。

Figma 文件保留了完整的链条:从低保真线框图(新手引导、登录、首页、配对、设备),到包含 31 个移动端画面的原型,以及背后的组件。这里我着重展示承载这三项检查的页面。

录制自 Figma 原型。登录、搜索附近的传感器,以及两台新设备加入列表。
深色背景上三个倾斜的页面:设备仪表盘、带电量和温度图表的报告页,以及设置页。
通过仪表盘、报告和设置来看同一个传感器。

02

读数放在最前面

设备页面一开始是一张深色卡片,里面有传感器的名称、上次更新的时间和温度,这是页面上唯一对比强烈的区块。往下依次是记录间隔,以及存在内存和应用里的记录,然后是信号和电量。从上往下读,页面从数字一路走向数字背后传感器的状态。

Caldeira da fazenda 1 的设备页面:深色卡片显示 Sensor TMP1 及其温度,往下是传感器记录、信号和电量。
报告页面:红色柱状图显示最近七天的温度范围,另有一个 Exportar e salvar 按钮。
首页:TERAS 标志、一个 Procurar dispositivos 按钮和三张设备卡片,其中一张因为没有信号而变灰。
设备页面以最新读数开头。 报告用图表显示最近七天的温度范围。 首页列出每个已连接的传感器,并显示它的状态和信号。

03

七天的温度,放进一张图

Relatórios 用红色柱子显示最近七天的温度范围,对照着固定在 50 和 100 °C 的两条线。点选一根柱子,会弹出一个深色提示框,显示该点的最小值、最大值和平均值,所以图表在有人需要细节之前一直保持干净。图表可以添加和移除,报告可以导出并保存,过往的导出记录会保存在历史里。

报告页面的两个版本,用一支手绘箭头连在一起:静止状态的图表,以及同一张图表在弹出深色提示框、显示最小值、最大值和平均值时的样子。
点选一根柱子,就会显示最小值、最大值和平均值。

04

找到传感器,并照看好它

首页把已连接的设备排成卡片,显示状态、温度和信号,没有信号的传感器会变灰。Procurar dispositivos 通向一个配对列表,列表里把每个传感器的信号标为 Forte、Médio 或 Fraco。设置页汇集了存储、电量、设备名称和记录间隔,并把两个具有破坏性的操作,也就是清除本地记录和断开传感器,放在页面最末尾,配上红色图标。

排成密集斜向网格的应用页面:新手引导、登录、设备列表、配对、设备仪表盘、报告、设置和导出确认。
应用从新手引导到导出报告的全过程。
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 完整案例

频道 06 移动应用设计

TerasApp

一款用于农场 TERAS IoT 温度传感器的移动应用:配对设备、读取最新温度、跟踪传感器记录、导出报告。所有读数都是示例数据。

我的职责
产品流程与界面设计
项目状态
界面设计 · Figma 存档

在 Dribbble 上查看

黑色圆盘上的 TerasApp 标志。
Logo。

一个农场传感器,用手机就能读懂

来自 Figma 和 Dribbble 上原始设计的页面,使用示例数据。

我的贡献

TerasApp 是 TERAS 温度传感器的葡萄牙语配套应用。每个传感器都有一个名字,比如示例中的“Caldeira da fazenda 1”,整个应用围绕三项检查来设计:最新读数、传感器的状态,以及过去七天温度的变化情况。

Figma 文件保留了完整的链条:从低保真线框图(新手引导、登录、首页、配对、设备),到包含 31 个移动端画面的原型,以及背后的组件。这里我着重展示承载这三项检查的页面。

录制自 Figma 原型。登录、搜索附近的传感器,以及两台新设备加入列表。
深色背景上三个倾斜的页面:设备仪表盘、带电量和温度图表的报告页,以及设置页。
通过仪表盘、报告和设置来看同一个传感器。

读数放在最前面

设备页面一开始是一张深色卡片,里面有传感器的名称、上次更新的时间和温度,这是页面上唯一对比强烈的区块。往下依次是记录间隔,以及存在内存和应用里的记录,然后是信号和电量。从上往下读,页面从数字一路走向数字背后传感器的状态。

Caldeira da fazenda 1 的设备页面:深色卡片显示 Sensor TMP1 及其温度,往下是传感器记录、信号和电量。
设备页面以最新读数开头。
报告页面:红色柱状图显示最近七天的温度范围,另有一个 Exportar e salvar 按钮。
报告用图表显示最近七天的温度范围。

七天的温度,放进一张图

Relatórios 用红色柱子显示最近七天的温度范围,对照着固定在 50 和 100 °C 的两条线。点选一根柱子,会弹出一个深色提示框,显示该点的最小值、最大值和平均值,所以图表在有人需要细节之前一直保持干净。图表可以添加和移除,报告可以导出并保存,过往的导出记录会保存在历史里。

首页:TERAS 标志、一个 Procurar dispositivos 按钮和三张设备卡片,其中一张因为没有信号而变灰。
首页列出每个已连接的传感器,并显示它的状态和信号。
报告页面的两个版本,用一支手绘箭头连在一起:静止状态的图表,以及同一张图表在弹出深色提示框、显示最小值、最大值和平均值时的样子。
点选一根柱子,就会显示最小值、最大值和平均值。

找到传感器,并照看好它

首页把已连接的设备排成卡片,显示状态、温度和信号,没有信号的传感器会变灰。Procurar dispositivos 通向一个配对列表,列表里把每个传感器的信号标为 Forte、Médio 或 Fraco。设置页汇集了存储、电量、设备名称和记录间隔,并把两个具有破坏性的操作,也就是清除本地记录和断开传感器,放在页面最末尾,配上红色图标。

排成密集斜向网格的应用页面:新手引导、登录、设备列表、配对、设备仪表盘、报告、设置和导出确认。
应用从新手引导到导出报告的全过程。