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

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

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

ÉOS Energia

一个葡萄牙语的共享太阳能平台,同一套仪表盘结构分别适配管理员、生产者和消费者,另有网站的移动端菜单。

我的职责
产品流程与界面设计
项目状态
界面设计 · Figma 存档
一块 3D 太阳能板,太阳从它的电池片上滑过。
为这面项目墙制作的 3D 物件。

01

我的贡献

ÉOS Energia 是一个葡萄牙语的太阳能电站平台,共享能源的理念就写在它自己的 Logo 里。同一个仪表盘为三种角色各做了一版:Administrador、Produtor 和 Consumidor。

设计文件还涵盖个人资料、文档、发票、图表和合同的浮层,以及登录和预注册表单。这些页面上的数字均为示例数据。

滚动浏览设计稿:落地页,从承诺到数字。
白底上的 ÉOS Energia Logo,附有标语 Energia compartilhada,旁边是斜向排列的太阳能板与天空照片,以及一个装框的管理员仪表盘。
管理员仪表盘,配上 ÉOS Energia 品牌和它的太阳能场景。

02

同一个框架,三个起点

三个视图共用左侧菜单、中间的总览和右侧的动态栏。框架固定之后,角色之间的差别体现在填进去的内容上:顶部筛选器对管理员按生产者筛选,对另外两个角色按电站筛选,菜单则随各角色能做的事而变化。

管理员在 Gerenciar 下有 Usuários。生产者和消费者有 Faturas,以及 Arquivos 下的 Contrato 和 Documentos,这样账户相关的文件就放在数字旁边。

管理员仪表盘,有生产者筛选器,收入、CO² 信用、发电量和用电量的卡片,电站占用率仪表图,用电量与发电量图表,以及右侧的动态栏。
管理员视图按生产者筛选,并增加了用户管理。

03

各角色先看什么

对管理员和生产者来说,第一个区块汇集了收入、CO² 信用、发电量和用电量,旁边是电站占用率的仪表图,下方对比用电量和发电量。其中一张黄色卡片标出最先要看的数字,其余几张保持浅色。

消费者视图用节省金额和 CO² 减排量取代收入,去掉仪表图,并增加一张电站表格,列出温度、发电量和状态标签,如 Em operação 或 Em construção。结构依然熟悉,但问题从电站赚了多少,变成了账户省了多少、名下的电站运行得怎么样。

消费者仪表盘,有节省金额、CO² 减排量和用电量的卡片,同样的图表,以及带彩色状态标签的电站表格。
消费者视图展示节省金额,以及带状态的电站表格。
生产者仪表盘,卡片和仪表图与管理员视图相同,有电站筛选器,以及含 Faturas、Contrato 和 Documentos 的菜单。
生产者视图保留布局,并在菜单里加入发票、合同和文档。

04

平台外围的网站

文件里还保留了落地页的多个版本。在手机上,它的菜单把主要链接和 Mais 分组分开,最后以黄色按钮 Falar com um consultor 收尾,再加一条给已有账户的文字链接。

白色的手机菜单,有 ÉOS Energia Logo、一个关闭图标、三个主要链接、含五个链接的 Mais 分组、一个黄色的顾问按钮和一条文字链接。
手机上的网站菜单以一个黄色按钮收尾,用来和顾问沟通。
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 完整案例

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

ÉOS Energia

一个葡萄牙语的共享太阳能平台,同一套仪表盘结构分别适配管理员、生产者和消费者,另有网站的移动端菜单。

我的职责
产品流程与界面设计
项目状态
界面设计 · Figma 存档
一块 3D 太阳能板,太阳从它的电池片上滑过。
为这面项目墙制作的 3D 物件。

一个仪表盘,从三个角度读太阳能

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

我的贡献

ÉOS Energia 是一个葡萄牙语的太阳能电站平台,共享能源的理念就写在它自己的 Logo 里。同一个仪表盘为三种角色各做了一版:Administrador、Produtor 和 Consumidor。

设计文件还涵盖个人资料、文档、发票、图表和合同的浮层,以及登录和预注册表单。这些页面上的数字均为示例数据。

滚动浏览设计稿:落地页,从承诺到数字。
白底上的 ÉOS Energia Logo,附有标语 Energia compartilhada,旁边是斜向排列的太阳能板与天空照片,以及一个装框的管理员仪表盘。
管理员仪表盘,配上 ÉOS Energia 品牌和它的太阳能场景。

同一个框架,三个起点

三个视图共用左侧菜单、中间的总览和右侧的动态栏。框架固定之后,角色之间的差别体现在填进去的内容上:顶部筛选器对管理员按生产者筛选,对另外两个角色按电站筛选,菜单则随各角色能做的事而变化。

管理员在 Gerenciar 下有 Usuários。生产者和消费者有 Faturas,以及 Arquivos 下的 Contrato 和 Documentos,这样账户相关的文件就放在数字旁边。

管理员仪表盘,有生产者筛选器,收入、CO² 信用、发电量和用电量的卡片,电站占用率仪表图,用电量与发电量图表,以及右侧的动态栏。
管理员视图按生产者筛选,并增加了用户管理。

各角色先看什么

对管理员和生产者来说,第一个区块汇集了收入、CO² 信用、发电量和用电量,旁边是电站占用率的仪表图,下方对比用电量和发电量。其中一张黄色卡片标出最先要看的数字,其余几张保持浅色。

消费者视图用节省金额和 CO² 减排量取代收入,去掉仪表图,并增加一张电站表格,列出温度、发电量和状态标签,如 Em operação 或 Em construção。结构依然熟悉,但问题从电站赚了多少,变成了账户省了多少、名下的电站运行得怎么样。

消费者仪表盘,有节省金额、CO² 减排量和用电量的卡片,同样的图表,以及带彩色状态标签的电站表格。
消费者视图展示节省金额,以及带状态的电站表格。
生产者仪表盘,卡片和仪表图与管理员视图相同,有电站筛选器,以及含 Faturas、Contrato 和 Documentos 的菜单。
生产者视图保留布局,并在菜单里加入发票、合同和文档。

平台外围的网站

文件里还保留了落地页的多个版本。在手机上,它的菜单把主要链接和 Mais 分组分开,最后以黄色按钮 Falar com um consultor 收尾,再加一条给已有账户的文字链接。

白色的手机菜单,有 ÉOS Energia Logo、一个关闭图标、三个主要链接、含五个链接的 Mais 分组、一个黄色的顾问按钮和一条文字链接。
手机上的网站菜单以一个黄色按钮收尾,用来和顾问沟通。