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

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

Case 009移动应用设计

DoBetrBoy

一款面向伴侣的应用,记录生理周期的各个阶段、她想吃的东西,以及一些安慰她的小点子。首页的阶段圆环、想吃清单和一个收录支持性话语的资料库,各自回答一个实际问题。

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

01

我的贡献

DoBetrBoy 是一款面向伴侣的应用。它会追踪她处在生理周期的哪个阶段,记下她想吃什么,还收集了一些安慰她的小办法。我围绕一个简单的问题设计了它的页面:今天做点什么会有帮助?

屏幕上的每个日期、阶段和备注都是示例数据。

首页,有一条一周日期条、一个分成生理周期四个阶段并带图例的圆环,圆环中央是文字 Period in 15 days,另有一张卡片,上面是一张睡着的脸,写着她正处于黄体期,可能需要稍微休息一下。
Comforting Library 卡片,上面是句子“You don't have to fix everything. Just being there already means a lot”,配有一幅两人拥抱的插图,以及返回、分享和下一条按钮。
录自 Figma 原型。从周期圆环到日历、想吃清单和个人资料页。 首页:今天处在周期中的位置,下方有一条简短的提示。示例数据。 Comforting Library:一次一句话,可直接分享。

02

一眼看清今天

首页开头是一个分成四个阶段的圆环,圆环上有一个标出今天的标记,中央是两行字:日期,以及距离下次经期的天数。圆环上方是一条一周日期条,下方是图例,所以图表不需要另外解释。

圆环下方有一张卡片,把阶段变成一句简短的提示:“She is in the Luteal phase”,接着是“She might need a little rest”。措辞保持试探的口吻,是建议,而不是对她感受的断言。

Craving list 页面,有一张 AI Assistant 卡片、List 和 Suggestions 两个选项卡,以及按 Sweets 和 Strange mix 分组的清单项,例如巧克力蛋糕和珍珠奶茶。
Cycle Calendar 显示一个月,其中四天用阶段颜色高亮,下方是一张写有所选日期备注的卡片。
Craving list:带复选框的分组条目,外加一个提供点子的 AI 助手。 Cycle Calendar:月历上的阶段颜色,以及所选日期的备注。示例数据。

03

小而实用的心意

应用的其余部分把这些信息变成可以做的事。Craving list 把条目分进 Sweets、Strange mix 等分区,每一项都有复选框,AI Assistant 卡片则提出可以生成更多点子。Cycle Calendar 把圆环的颜色带到整月的日历上,并在日历下方放着所选日期的备注。

Comforting Library 是最安静的页面:一次只有一句话和一幅插图,另有用来返回、翻到下一条或分享的按钮。

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

频道 09 移动应用设计

DoBetrBoy

一款面向伴侣的应用,记录生理周期的各个阶段、她想吃的东西,以及一些安慰她的小点子。首页的阶段圆环、想吃清单和一个收录支持性话语的资料库,各自回答一个实际问题。

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

伴侣视角的生理周期追踪

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

我的贡献

DoBetrBoy 是一款面向伴侣的应用。它会追踪她处在生理周期的哪个阶段,记下她想吃什么,还收集了一些安慰她的小办法。我围绕一个简单的问题设计了它的页面:今天做点什么会有帮助?

屏幕上的每个日期、阶段和备注都是示例数据。

录自 Figma 原型。从周期圆环到日历、想吃清单和个人资料页。
首页,有一条一周日期条、一个分成生理周期四个阶段并带图例的圆环,圆环中央是文字 Period in 15 days,另有一张卡片,上面是一张睡着的脸,写着她正处于黄体期,可能需要稍微休息一下。
首页:今天处在周期中的位置,下方有一条简短的提示。示例数据。

一眼看清今天

首页开头是一个分成四个阶段的圆环,圆环上有一个标出今天的标记,中央是两行字:日期,以及距离下次经期的天数。圆环上方是一条一周日期条,下方是图例,所以图表不需要另外解释。

圆环下方有一张卡片,把阶段变成一句简短的提示:“She is in the Luteal phase”,接着是“She might need a little rest”。措辞保持试探的口吻,是建议,而不是对她感受的断言。

Comforting Library 卡片,上面是句子“You don't have to fix everything. Just being there already means a lot”,配有一幅两人拥抱的插图,以及返回、分享和下一条按钮。
Comforting Library:一次一句话,可直接分享。
Craving list 页面,有一张 AI Assistant 卡片、List 和 Suggestions 两个选项卡,以及按 Sweets 和 Strange mix 分组的清单项,例如巧克力蛋糕和珍珠奶茶。
Craving list:带复选框的分组条目,外加一个提供点子的 AI 助手。

小而实用的心意

应用的其余部分把这些信息变成可以做的事。Craving list 把条目分进 Sweets、Strange mix 等分区,每一项都有复选框,AI Assistant 卡片则提出可以生成更多点子。Cycle Calendar 把圆环的颜色带到整月的日历上,并在日历下方放着所选日期的备注。

Comforting Library 是最安静的页面:一次只有一句话和一幅插图,另有用来返回、翻到下一条或分享的按钮。

Cycle Calendar 显示一个月,其中四天用阶段颜色高亮,下方是一张写有所选日期备注的卡片。
Cycle Calendar:月历上的阶段颜色,以及所选日期的备注。示例数据。