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

网页应用与仪表盘设计

É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 分组、一个黄色的顾问按钮和一条文字链接。
手机上的网站菜单以一个黄色按钮收尾,用来和顾问沟通。