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

移动应用设计

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:月历上的阶段颜色,以及所选日期的备注。示例数据。