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

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

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

Rei do Pitaco

一个博彩产品等候名单的注册流程:选择进入方式,分几个简短步骤填写资料,并确认邮箱。

我的职责
产品流程与界面设计
项目状态
界面设计 · Figma 存档
黑色圆盘上的 Rei do Pitaco 标志。
Logo。

01

我的贡献

2022 年 3 月到 10 月,我在 Rei do Pitaco 担任产品设计师,参与它的梦幻体育游戏,以及一款新博彩产品的上线。这份工作包括 UX 和 UI 设计、交互设计、可用性测试、启发式评估、用户体验研究和产品探索。

这个案例讲的是博彩产品的等候名单,从规划到登录后的区域。它背后的用户研究是另一个案例,需凭访问码查看。

滚动浏览设计稿:等候名单页面,从奖励一直到积分规则。
手机页面,有一张穿黄色球衣的足球球迷照片、Rei do Pitaco Betting 标志、两个注册按钮,以及用于登录或找回密码的链接。
深色手机页面,要求输入 CPF,空的输入框带红色描边,显示必填项错误,下方有一条说明,另有上一步和下一步按钮。
录自 Figma 原型。注册流程,一次一个问题。示例邮箱已做模糊处理。 注册的第一个页面把新账号和已有账号分开。 身份这一步在原处显示错误,输入框保持为空。

02

先梳理上线,再动手画

工作从结构开始:一份等候名单的站点地图,加上一条分四个阶段的主流程。注册把人带进来,KYC 确认对方是谁,推荐和分享带来更多人,积分显示他们排在哪里。之后的每个页面,都必须服务于其中一个阶段。

深色手机页面,有全名、出生日期、密码和确认密码的输入框,两个确认复选框,以及上一步和下一步按钮。
深色手机页面,有标志、一条说明邮件已发送的消息、一个绿色的重新发送按钮和一个描边的关闭按钮。
最后一步收集账号信息和两项确认。所示日期为示例。 注册之后,流程要求确认邮箱,并提供重新发送邮件的选项。

03

两种进入方式,一次一步

第一个页面把两种情况分开:创建新账号,或使用已有的 Rei do Pitaco 账号。回来的用户在这两个按钮下方有各自的链接,一个用来登录,另一个用来找回密码。

之后的每一步结构都一样:顶部是标志,接着是一个标题和这一步要填的输入框,底部是上一步和下一步,中间夹着三个进度点。CPF 这一步会在原处显示必填项错误,下方有一条说明,告诉用户这个号码之后不能更改。最后一步结束后,流程只剩一条消息和两个操作:重新发送邮件,或者关闭。

主流程:注册、KYC、推荐与分享、积分。
主流程,分四个阶段。

04

把奖励讲清楚的等候名单

落地页只用一句话宣布这款新的博彩产品:“O betting do Rei vem aí!”,再配一个操作:留下邮箱,加入等候名单。页面下方的所有内容,回答的都是为什么值得这样做,首先是超过 R$ 1 百万的奖励。

接下来依次是奖励档位、积分规则和一个简短的常见问题,页面先把钱的问题交代清楚,再向用户提别的要求。

等候名单的站点地图。
这份等候名单的站点地图。

05

注册之后,是一个倒计时

进入登录后的区域,上线始终摆在眼前:剩余天数、奖励阶梯,以及账号的验证状态。文件里同时有已验证和未验证两个版本,所以中途停下的人能看到还缺什么。

注册流程每个页面只问一件事:先是邮箱,再是姓名和出生日期,然后是 CPF,并用一条简单的说明解释为什么需要这个号码。

登录后的区域,有排名位置、积分和验证清单。
未验证账号的登录后区域。示例姓名和奖励已隐藏。
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 完整案例

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

Rei do Pitaco

一个博彩产品等候名单的注册流程:选择进入方式,分几个简短步骤填写资料,并确认邮箱。

我的职责
产品流程与界面设计
项目状态
界面设计 · Figma 存档
黑色圆盘上的 Rei do Pitaco 标志。
Logo。

步骤简短的等候名单

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

我的贡献

2022 年 3 月到 10 月,我在 Rei do Pitaco 担任产品设计师,参与它的梦幻体育游戏,以及一款新博彩产品的上线。这份工作包括 UX 和 UI 设计、交互设计、可用性测试、启发式评估、用户体验研究和产品探索。

这个案例讲的是博彩产品的等候名单,从规划到登录后的区域。它背后的用户研究是另一个案例,需凭访问码查看。

录自 Figma 原型。注册流程,一次一个问题。示例邮箱已做模糊处理。

先梳理上线,再动手画

工作从结构开始:一份等候名单的站点地图,加上一条分四个阶段的主流程。注册把人带进来,KYC 确认对方是谁,推荐和分享带来更多人,积分显示他们排在哪里。之后的每个页面,都必须服务于其中一个阶段。

主流程:注册、KYC、推荐与分享、积分。
主流程,分四个阶段。
等候名单的站点地图。
这份等候名单的站点地图。

两种进入方式,一次一步

第一个页面把两种情况分开:创建新账号,或使用已有的 Rei do Pitaco 账号。回来的用户在这两个按钮下方有各自的链接,一个用来登录,另一个用来找回密码。

之后的每一步结构都一样:顶部是标志,接着是一个标题和这一步要填的输入框,底部是上一步和下一步,中间夹着三个进度点。CPF 这一步会在原处显示必填项错误,下方有一条说明,告诉用户这个号码之后不能更改。最后一步结束后,流程只剩一条消息和两个操作:重新发送邮件,或者关闭。

手机页面,有一张穿黄色球衣的足球球迷照片、Rei do Pitaco Betting 标志、两个注册按钮,以及用于登录或找回密码的链接。
注册的第一个页面把新账号和已有账号分开。
深色手机页面,要求输入 CPF,空的输入框带红色描边,显示必填项错误,下方有一条说明,另有上一步和下一步按钮。
身份这一步在原处显示错误,输入框保持为空。
深色手机页面,有全名、出生日期、密码和确认密码的输入框,两个确认复选框,以及上一步和下一步按钮。
最后一步收集账号信息和两项确认。所示日期为示例。
深色手机页面,有标志、一条说明邮件已发送的消息、一个绿色的重新发送按钮和一个描边的关闭按钮。
注册之后,流程要求确认邮箱,并提供重新发送邮件的选项。

把奖励讲清楚的等候名单

落地页只用一句话宣布这款新的博彩产品:“O betting do Rei vem aí!”,再配一个操作:留下邮箱,加入等候名单。页面下方的所有内容,回答的都是为什么值得这样做,首先是超过 R$ 1 百万的奖励。

接下来依次是奖励档位、积分规则和一个简短的常见问题,页面先把钱的问题交代清楚,再向用户提别的要求。

滚动浏览设计稿:等候名单页面,从奖励一直到积分规则。

注册之后,是一个倒计时

进入登录后的区域,上线始终摆在眼前:剩余天数、奖励阶梯,以及账号的验证状态。文件里同时有已验证和未验证两个版本,所以中途停下的人能看到还缺什么。

注册流程每个页面只问一件事:先是邮箱,再是姓名和出生日期,然后是 CPF,并用一条简单的说明解释为什么需要这个号码。

登录后的区域,有排名位置、积分和验证清单。
未验证账号的登录后区域。示例姓名和奖励已隐藏。