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

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

Case 015移动应用设计

DossApp

一款葡萄牙语的住宅安保应用,住户可以申请核查或护送,保安在自己的一侧接收这些申请。屏幕上的姓名、日期和价格均为示例内容。

我的职责
产品流程与界面设计
项目状态
界面设计 · Figma 存档
一辆 3D 小型安保摩托车,警灯在闪烁。
为这面项目墙制作的 3D 物件。

01

我的贡献

DossApp 是一款葡萄牙语应用,提供围绕住所的按需安保服务,一端面向住户,另一端面向服务提供者。核查是请保安去确认某件事,比如大门有没有锁好。护送则是派一名保安陪同住户抵达。

Figma 里的工作涵盖两端,有线框图、用户流程和原型页面,另有一个单独的文件,放着为应用商店上架准备的带说明截图。

设计稿页面的串联演示,并非录屏:首页、历史记录和服务提供者一侧。
两个深色的应用页面并排:住户首页,以及一个 Cobertura 页面,里面有正在赶来的保安和四步时间线。
住户首页,旁边是一个正被跟踪的护送申请。

02

每种颜色对应什么操作

在深色页面上,颜色完成了大部分区分工作。两种日常申请是最大的两个区块,Solicitar Verificação 是浅灰色,Solicitar Cobertura 是品牌黄。Emergência 单独拿出来,是唯一的红色元素,旁边是那个问题“Precisando de uma ajuda mais urgente?”,所以紧急通道不会和日常操作混在一起。账户、车辆、家庭成员等其余功能留在下方,排成一个安静的图标网格。

住户首页,有方案卡片、Solicitar Verificação 和 Solicitar Cobertura 两个区块、红色的 Emergência 按钮,以及六个图标组成的网格。
服务提供者首页,在线状态旁有一个开关,有 Cobertura 和 Verificações 两个区块、红色的 Emergência 按钮,以及含 Clientes 的图标网格。
Histórico 页面,有 Todos、Cobertura 和 Verificação 三个筛选项,以及三条示例记录,包含日期、时间、保安和申请类型。
首页把日常申请和紧急通道分开。 保安一侧保留布局,更换内容。 历史记录按日期、保安和类型列出每个申请。

03

申请之后,现在发生了什么

申请并不止于那个按钮。护送页面会写出正在赶来的保安是谁,并显示四个步骤 Criada、Enviada、Em andamento 和 Concluído,当前步骤加粗,顶部有 Cancelar。接着,地图页面用不同的颜色画出保安和住户的路线,两条路线向住家汇合。

核查就是一段聊天,和最初的提问连在一起。在示例里,保安回了一张挂锁的照片,再发出一条解决请求,由住户标记为已解决,这样保安就能腾出手去做别的事。

带说明文字的商店展示图,里面是一个聊天页面:住户问大门是否锁好,保安回了一张挂锁的照片,下方出现一条解决请求。
核查就是一段聊天,从提问到解决。

04

保安一侧的同一个页面

服务提供者的首页沿用住户首页的布局,所以应用的两端看起来是一个样子。变的是内容:一个开关取代了方案标签,两个大区块变成 Cobertura 和 Verificações,图标网格里多了 Clientes 和 Notificações。在住户一侧,Histórico 仍是一份简单的记录,可按类型筛选,每条记录一张卡片,包含日期、保安和申请。

带说明文字的商店展示图,里面是一张 Campinas 的深色地图,两条路线分别标着 João 和 Você,在一个住家标记附近汇合。
地图跟随保安和住户一起走向住家。
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 完整案例

频道 15 移动应用设计

DossApp

一款葡萄牙语的住宅安保应用,住户可以申请核查或护送,保安在自己的一侧接收这些申请。屏幕上的姓名、日期和价格均为示例内容。

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

在 Dribbble 上查看

一辆 3D 小型安保摩托车,警灯在闪烁。
为这面项目墙制作的 3D 物件。

两种申请,一个红色按钮

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

我的贡献

DossApp 是一款葡萄牙语应用,提供围绕住所的按需安保服务,一端面向住户,另一端面向服务提供者。核查是请保安去确认某件事,比如大门有没有锁好。护送则是派一名保安陪同住户抵达。

Figma 里的工作涵盖两端,有线框图、用户流程和原型页面,另有一个单独的文件,放着为应用商店上架准备的带说明截图。

设计稿页面的串联演示,并非录屏:首页、历史记录和服务提供者一侧。
两个深色的应用页面并排:住户首页,以及一个 Cobertura 页面,里面有正在赶来的保安和四步时间线。
住户首页,旁边是一个正被跟踪的护送申请。

每种颜色对应什么操作

在深色页面上,颜色完成了大部分区分工作。两种日常申请是最大的两个区块,Solicitar Verificação 是浅灰色,Solicitar Cobertura 是品牌黄。Emergência 单独拿出来,是唯一的红色元素,旁边是那个问题“Precisando de uma ajuda mais urgente?”,所以紧急通道不会和日常操作混在一起。账户、车辆、家庭成员等其余功能留在下方,排成一个安静的图标网格。

住户首页,有方案卡片、Solicitar Verificação 和 Solicitar Cobertura 两个区块、红色的 Emergência 按钮,以及六个图标组成的网格。
首页把日常申请和紧急通道分开。
服务提供者首页,在线状态旁有一个开关,有 Cobertura 和 Verificações 两个区块、红色的 Emergência 按钮,以及含 Clientes 的图标网格。
保安一侧保留布局,更换内容。

申请之后,现在发生了什么

申请并不止于那个按钮。护送页面会写出正在赶来的保安是谁,并显示四个步骤 Criada、Enviada、Em andamento 和 Concluído,当前步骤加粗,顶部有 Cancelar。接着,地图页面用不同的颜色画出保安和住户的路线,两条路线向住家汇合。

核查就是一段聊天,和最初的提问连在一起。在示例里,保安回了一张挂锁的照片,再发出一条解决请求,由住户标记为已解决,这样保安就能腾出手去做别的事。

Histórico 页面,有 Todos、Cobertura 和 Verificação 三个筛选项,以及三条示例记录,包含日期、时间、保安和申请类型。
历史记录按日期、保安和类型列出每个申请。
带说明文字的商店展示图,里面是一个聊天页面:住户问大门是否锁好,保安回了一张挂锁的照片,下方出现一条解决请求。
核查就是一段聊天,从提问到解决。

保安一侧的同一个页面

服务提供者的首页沿用住户首页的布局,所以应用的两端看起来是一个样子。变的是内容:一个开关取代了方案标签,两个大区块变成 Cobertura 和 Verificações,图标网格里多了 Clientes 和 Notificações。在住户一侧,Histórico 仍是一份简单的记录,可按类型筛选,每条记录一张卡片,包含日期、保安和申请。

带说明文字的商店展示图,里面是一张 Campinas 的深色地图,两条路线分别标着 João 和 Você,在一个住家标记附近汇合。
地图跟随保安和住户一起走向住家。