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

移动应用设计

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 选项卡,以及两张优惠券卡片,卡片上有照片、折扣、有效期和优惠码。
优惠券分为有效和已过期两类,每张都有自己的优惠码。