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

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

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

AMIE Client Portal

为 Cullen Cleaning Services 设计的门户,界面上显示为 CORE by CCS 和 AMIE Client Portal,有一个汇总场地、报价、工单和审核评分的仪表盘。表格里的各行都是占位文字。

我的职责
界面设计
项目状态
网页门户 · Figma 存档
笔记本电脑上显示客户门户的入口页,旁边是品牌的叶片标志。
文件的演示封面。

01

我的贡献

AMIE Client Portal 让客户在一个地方跟进 Cullen Cleaning Services 提供的清洁服务,使用的是 CORE by CCS 的品牌标识。Figma 文件涵盖登录、双重验证、仪表盘和审核列表。

仪表盘,带有近乎黑色的侧边栏和 CORE 标志。活跃场地、未结报价、未结工单和审核评分四个计数器位于顶部,下方是按月统计审核的绿色折线图、按周显示未结报价的条带,以及清洁状态和支持工单的表格,表格行里是占位文字。
仪表盘:计数器、审核趋势和占位行。

02

先看四个数字,再看细节

仪表盘开头是四个计数器:活跃场地、未结报价、未结工单和审核平均分。下面是一张折线图,按月追踪审核情况,旁边是按周显示未结报价的条带;两张表格分别跟踪清洁状态和支持工单。这些列表里的各行还是占位文字,所以这是页面布局,不是填好内容的页面。

满版的森林照片,上面有 CORE by CCS 标志、AMIE Client Portal 标签,以及一行文案“Your custom built portal to overview of your cleaning services from Cullen Cleaning Services”。这次导出里没有出现表单。
门户的入口面板,导出时不含登录卡片。

03

深色栏里的长菜单

一条近乎黑色的侧边栏容纳了整个系统,从员工和场地管理,到审核工具、耗材、工作排班、健康与安全、地图、报告和工单。旁边的内容区保持白色,配以柔和的绿色卡片,同一种绿色也用来标出选中的日期和已完成的状态。

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 完整案例

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

AMIE Client Portal

为 Cullen Cleaning Services 设计的门户,界面上显示为 CORE by CCS 和 AMIE Client Portal,有一个汇总场地、报价、工单和审核评分的仪表盘。表格里的各行都是占位文字。

我的职责
界面设计
项目状态
网页门户 · Figma 存档
笔记本电脑上显示客户门户的入口页,旁边是品牌的叶片标志。
文件的演示封面。

场地、报价、工单和审核,集中在一个仪表盘里

来自原始 Figma 文件的画面。登录页上的电话号码已移除,含有具名人物的画面未收录。

我的贡献

AMIE Client Portal 让客户在一个地方跟进 Cullen Cleaning Services 提供的清洁服务,使用的是 CORE by CCS 的品牌标识。Figma 文件涵盖登录、双重验证、仪表盘和审核列表。

仪表盘,带有近乎黑色的侧边栏和 CORE 标志。活跃场地、未结报价、未结工单和审核评分四个计数器位于顶部,下方是按月统计审核的绿色折线图、按周显示未结报价的条带,以及清洁状态和支持工单的表格,表格行里是占位文字。
仪表盘:计数器、审核趋势和占位行。

先看四个数字,再看细节

仪表盘开头是四个计数器:活跃场地、未结报价、未结工单和审核平均分。下面是一张折线图,按月追踪审核情况,旁边是按周显示未结报价的条带;两张表格分别跟踪清洁状态和支持工单。这些列表里的各行还是占位文字,所以这是页面布局,不是填好内容的页面。

满版的森林照片,上面有 CORE by CCS 标志、AMIE Client Portal 标签,以及一行文案“Your custom built portal to overview of your cleaning services from Cullen Cleaning Services”。这次导出里没有出现表单。
门户的入口面板,导出时不含登录卡片。

深色栏里的长菜单

一条近乎黑色的侧边栏容纳了整个系统,从员工和场地管理,到审核工具、耗材、工作排班、健康与安全、地图、报告和工单。旁边的内容区保持白色,配以柔和的绿色卡片,同一种绿色也用来标出选中的日期和已完成的状态。