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

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

Case 017移动应用设计

Helps On

一款葡萄牙语应用,用来请求保洁、电工等家庭服务,配有钱包、优惠券和 PRO 方案。屏幕上的姓名和金额均为示例数据。

我的职责
产品流程与界面设计
项目状态
界面设计 · Figma 存档
Helps On 的演示封面,来自原始设计文件。
演示封面,来自原始文件。

01

我的贡献

Helps On 是一款葡萄牙语应用,用来请求各种服务,从保洁、电工到更换淋浴器。每项请求的周围,是付款所需要的东西:钱包、已保存的银行卡、优惠券和 PRO 方案。

Figma 文件里有 58 个手机画框、几轮线框图和一条用户流程,还涵盖注册、证件和人脸采集,以及支付状态。这里我展示的是首页、钱包和优惠券。

首页,包含三条请求的列表、标题 Meus atalhos,以及一张深色的大卡片 Minhas solicitações,卡片上带有 Novas atualizações 标签。
钱包页面,示例余额为 R$ 300,00,另有 Adicionar saldo 按钮、保存的银行卡(卡号已掩码)、优惠券横幅和近期流水。
逐页浏览设计中的页面,不是录屏:首页、钱包和优惠券。 首页把最近的请求和大尺寸的快捷卡片放在一起。 钱包把余额、银行卡和优惠券放在同一个页面里。

02

会自己报告状态的快捷入口

首页把一份简短的请求列表和 Meus atalhos 下的一排大卡片放在一起。每张卡片写明一个去处,并带一个小状态标签,比如 Novas atualizações,或有效银行卡的数量,这样不用点开任何东西,就能看出哪里有变化。下一张卡片从右边缘探出一角,说明这一排还有后面的内容。

Meus cupons 页面,带有 Ativos 和 Expirados 选项卡,以及两张优惠券卡片,卡片上有照片、折扣、有效期和优惠码。
优惠券分为有效和已过期两类,每张都有自己的优惠码。

03

余额在前,其余在后

钱包页面一打开,先是余额和一个实心按钮 Adicionar saldo,旁边是更低调的账单选项。接下来依次是已保存的银行卡、优惠券和近期流水,这样可用余额始终在最上面,历史记录往下一滑就到。

优惠券有单独的页面,分成 Ativos 和 Expirados 两组。每张卡片上方是一张照片,下面依次是服务、折扣、有效期和优惠码,最后以 Detalhes do cupom 收尾。

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

频道 17 移动应用设计

Helps On

一款葡萄牙语应用,用来请求保洁、电工等家庭服务,配有钱包、优惠券和 PRO 方案。屏幕上的姓名和金额均为示例数据。

我的职责
产品流程与界面设计
项目状态
界面设计 · Figma 存档
Helps On 的演示封面,来自原始设计文件。
演示封面,来自原始文件。

家庭服务,钱包就在旁边

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

我的贡献

Helps On 是一款葡萄牙语应用,用来请求各种服务,从保洁、电工到更换淋浴器。每项请求的周围,是付款所需要的东西:钱包、已保存的银行卡、优惠券和 PRO 方案。

Figma 文件里有 58 个手机画框、几轮线框图和一条用户流程,还涵盖注册、证件和人脸采集,以及支付状态。这里我展示的是首页、钱包和优惠券。

逐页浏览设计中的页面,不是录屏:首页、钱包和优惠券。
首页,包含三条请求的列表、标题 Meus atalhos,以及一张深色的大卡片 Minhas solicitações,卡片上带有 Novas atualizações 标签。
首页把最近的请求和大尺寸的快捷卡片放在一起。

会自己报告状态的快捷入口

首页把一份简短的请求列表和 Meus atalhos 下的一排大卡片放在一起。每张卡片写明一个去处,并带一个小状态标签,比如 Novas atualizações,或有效银行卡的数量,这样不用点开任何东西,就能看出哪里有变化。下一张卡片从右边缘探出一角,说明这一排还有后面的内容。

钱包页面,示例余额为 R$ 300,00,另有 Adicionar saldo 按钮、保存的银行卡(卡号已掩码)、优惠券横幅和近期流水。
钱包把余额、银行卡和优惠券放在同一个页面里。

余额在前,其余在后

钱包页面一打开,先是余额和一个实心按钮 Adicionar saldo,旁边是更低调的账单选项。接下来依次是已保存的银行卡、优惠券和近期流水,这样可用余额始终在最上面,历史记录往下一滑就到。

优惠券有单独的页面,分成 Ativos 和 Expirados 两组。每张卡片上方是一张照片,下面依次是服务、折扣、有效期和优惠码,最后以 Detalhes do cupom 收尾。

Meus cupons 页面,带有 Ativos 和 Expirados 选项卡,以及两张优惠券卡片,卡片上有照片、折扣、有效期和优惠码。
优惠券分为有效和已过期两类,每张都有自己的优惠码。