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

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

Case 019移动应用设计

Boater

一款葡萄牙语的租船与游船行程应用,把想租船的人和广告发布者连接起来。屏幕上的预订、人物和价格均为示例内容。

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

01

我的贡献

Boater 是一个葡萄牙语平台,按它自己欢迎文字里的话说,是把有意租船的人和广告发布者连接起来。Figma 文件里有 52 个手机端 Frame,外加变体,分成两部分:租船人的流程,从搜索和预订到登船登记和聊天;以及广告发布者专区,有自己的个人资料和预订。这里我跟随租船人的视角。

设计稿页面的串联演示,并非录屏:从首页到已确认的预订。

02

下一趟行程占据屏幕顶部

预订临近时,首页顶部会出现一张深色卡片,写着订了什么、日期、剩余时间,以及一个按钮 Fazer check-in。发现区从卡片下方开始,有 Para você 和 Explorar 两个 Tab,以及展示最热搜索地点的大幅照片卡片。同一个页面,既服务即将登船的人,也服务还在挑选的人。

深色背景上的白色 Boater Logo,旁边是两部手机:一部是新手引导页面,山间湖面上有一艘船,标题为 Passeios de A a Z;另一部是首页,有地点和热门行程。
新手引导,以及带有地点和热门行程的一个首页版本。

03

谁来掌舵

信息页面给船长单独设了一个 Tab,和船上的设施分开。里面有姓名和一段简短的简介,经验、行程和评分三个数字,证件的核验日期,以及一份认证清单。这个人物和这些数字都是示例内容。这样的结构说明了用意:人们既能看船提供什么,也能查到是谁在驾驶。

首页,深色卡片显示下一次预订,倒计时 30 分钟,并带有 Fazer check-in 按钮,下方是 Angra dos Reis 搜索最多的地点的照片卡片。
铺满屏幕的海与小岛照片,上面有白色 Boater Logo、消息 Sua reserva foi criada! 和 Ver Reservas 按钮。
Capitão da Embarcação Tab 下的信息页面,深色卡片里是示例船长的简介和统计数据,其后是一份认证清单。
下一次预订和登船登记放在发现区之上。 创建完成的预订指向 Reservas Tab。 船长有自己的个人资料,包括经验和认证。

04

到最后,界面让位给大海

应用的大部分是白底配深色卡片。创建预订后,页面换成一张铺满屏幕的海景照片,上面有 Logo、一句简短的确认和一个按钮 Ver Reservas,点开可以看预订状态所在的位置。另一个页面沿用这张照片,放上一张行程贴士卡片和唯一的 Fechar 按钮。

调暗的海景照片,上面有 Boater Logo、标题 Aproveite seu passeio!、一张白色的贴士和建议卡片,以及 Fechar 按钮。
行程的贴士和建议。
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 完整案例

频道 19 移动应用设计

Boater

一款葡萄牙语的租船与游船行程应用,把想租船的人和广告发布者连接起来。屏幕上的预订、人物和价格均为示例内容。

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

从选船到登船

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

我的贡献

Boater 是一个葡萄牙语平台,按它自己欢迎文字里的话说,是把有意租船的人和广告发布者连接起来。Figma 文件里有 52 个手机端 Frame,外加变体,分成两部分:租船人的流程,从搜索和预订到登船登记和聊天;以及广告发布者专区,有自己的个人资料和预订。这里我跟随租船人的视角。

设计稿页面的串联演示,并非录屏:从首页到已确认的预订。
深色背景上的白色 Boater Logo,旁边是两部手机:一部是新手引导页面,山间湖面上有一艘船,标题为 Passeios de A a Z;另一部是首页,有地点和热门行程。
新手引导,以及带有地点和热门行程的一个首页版本。

下一趟行程占据屏幕顶部

预订临近时,首页顶部会出现一张深色卡片,写着订了什么、日期、剩余时间,以及一个按钮 Fazer check-in。发现区从卡片下方开始,有 Para você 和 Explorar 两个 Tab,以及展示最热搜索地点的大幅照片卡片。同一个页面,既服务即将登船的人,也服务还在挑选的人。

首页,深色卡片显示下一次预订,倒计时 30 分钟,并带有 Fazer check-in 按钮,下方是 Angra dos Reis 搜索最多的地点的照片卡片。
下一次预订和登船登记放在发现区之上。

谁来掌舵

信息页面给船长单独设了一个 Tab,和船上的设施分开。里面有姓名和一段简短的简介,经验、行程和评分三个数字,证件的核验日期,以及一份认证清单。这个人物和这些数字都是示例内容。这样的结构说明了用意:人们既能看船提供什么,也能查到是谁在驾驶。

铺满屏幕的海与小岛照片,上面有白色 Boater Logo、消息 Sua reserva foi criada! 和 Ver Reservas 按钮。
创建完成的预订指向 Reservas Tab。
Capitão da Embarcação Tab 下的信息页面,深色卡片里是示例船长的简介和统计数据,其后是一份认证清单。
船长有自己的个人资料,包括经验和认证。

到最后,界面让位给大海

应用的大部分是白底配深色卡片。创建预订后,页面换成一张铺满屏幕的海景照片,上面有 Logo、一句简短的确认和一个按钮 Ver Reservas,点开可以看预订状态所在的位置。另一个页面沿用这张照片,放上一张行程贴士卡片和唯一的 Fechar 按钮。

调暗的海景照片,上面有 Boater Logo、标题 Aproveite seu passeio!、一张白色的贴士和建议卡片,以及 Fechar 按钮。
行程的贴士和建议。