Hidratasport

一款训练与营养追踪应用，界面上显示为 Hidrata，包含宏量营养素、训练、补剂和 AI 分析，另有介绍它的落地页。所有数字均为示例数据。

我的职责: 产品流程与界面设计
项目状态: 界面设计 · Figma 存档

我的贡献

Hidratasport 在界面上显示为 Hidrata，是一款葡萄牙语应用，服务于训练和营养。应用文件按流程分组，从首次使用和付费墙，一路到首页、训练、记录、排行榜和个人资料；另一个文件放着落地页。这里我展示应用日常使用的页面，以及介绍它们的落地页。

滚动浏览设计稿：落地页，从手中的应用到 PRO 方案。

落地页首屏和 Hidrata 标志。

同一个早晨的两个版本

文件里并排保留着一个较早的首页和一个较新的首页，二者的差别在于优先级的调整。较早的版本以补水图表和当日总量开头。较新的版本把数据同步放在最前，接着是蛋白质、脂肪、碳水和卡路里的宏量营养素环，对照各自的每日目标；页面其余部分则改成一天的时间线，带有 Pós-treino 之类的标签。

跑步详情页面，有距离和时间卡片、地图上的路线、配速、心率和卡路里，以及对比本次与上次训练的图表。 — 训练页面：路线、配速、心率和一张对比图表。首页依次是数据同步、宏量营养素环和当天的时间线。按日或按周的活动汇总，带有 AI 分析横幅。

训练页面：路线、配速、心率和一张对比图表。首页依次是数据同步、宏量营养素环和当天的时间线。按日或按周的活动汇总，带有 AI 分析横幅。

一次跑步，分层阅读

训练页面开头是两张大卡片，分别放距离和时间，然后是地图上的路线，旁边是配速、心率和卡路里。再往下，一张图表把本次训练叠在上一次训练之上，线条上还有标记点。AI 分析有单独的 Tab，所以基础数据保持清爽。

活动页面的视野更宽：柱状图上方是按日或按周的训练、距离和时间汇总，有新的 AI 分析时还会出现一条横幅。

两部手机并排，分别标着 Versão anterior 和 Nova versão，对比带图表的较早首页和带宏量营养素环的较新首页。 — Figma 文件中，较早的首页和较新的版本并排。

靠展示来讲清楚的落地页

落地页开头是“Treine com inteligência. Performe com precisão.”，以应用的蓝色为底，标题下方是手机里的首页。往下依次是主要功能、应用如何融入日常安排、“Mais do que dados: contexto”下的真实页面，以及邀请朋友解锁 PRO 模式的三个步骤。

完整的落地页：蓝色首屏上手机展示着应用，往下是功能卡片、使用方式板块、应用页面和分三步的 PRO 板块。 — 完整的落地页，从首屏到 PRO 步骤。