跳到主要内容

Liquid Glass Hydration

Water Reminder App UI Template

Dewdrop is a hydration-tracking app design with a frosted liquid-glass look, built for founders and designers shipping a water reminder product.

Water reminder app home screen with a living-glass vessel filled to 58 percent and Log Water button
Water reminder app log-a-drink sheet with drink type cards and portion stepper
Water reminder app reminders screen with interval, time window, and sip pace selector

探索各界面

预览 water reminder 移动应用设计,可在 Sleek 中完整编辑。

Water reminder app home screen with a living-glass vessel filled to 58 percent and Log Water button
Water reminder app log-a-drink sheet with drink type cards and portion stepper
Water reminder app reminders screen with interval, time window, and sip pace selector
Insights第 4 屏
History第 5 屏
Profile第 6 屏

关于 Water Reminder App

Dewdrop is a water reminder app UI built around a "Liquid Glass Hydration" aesthetic: a soft mist-white base, deep-aqua ink, and a cyan-to-teal gradient reserved for water fills and primary actions. Surfaces read as frosted-glass panels floating over a faint water wash, with wide tonal capsule buttons and a floating pill dock at the bottom. The signature is a tall living-glass vessel on the home screen that fills with cyan water as intake is logged, with a percentage floating inside.

The template ships six connected screens that form a complete hydration flow: a Today home with the living glass at 58% and a "Log Water" button, a Log a Drink sheet for choosing water, coffee, herbal tea, or sparkling with portion steppers, a Smart Nudges schedule for reminder intervals and sip pace, an Insights view with a goal ring and hydration-by-hour bars, a History screen with weekly bars and a 12-day streak, and a Profile with weight goal, daily goal, units, and Apple Health sync.

Use it in Sleek and make it yours: restyle the palette, edit any screen with AI by describing the change, and add the flows your product needs. Then export it to code, copy it into Figma, or hand a prompt to an AI agent to build it for real, a far faster start than a blank canvas.

包含的界面

01

Today

A home screen with the oversized "1,450 / 2,500 ml" intake number above a living-glass vessel filled to 58%, plus a cyan-to-teal "Log Water" capsule. The at-a-glance daily progress that keeps users sipping.

02

Log a Drink

A sheet asking "What are you sipping on?" with drink cards for Water, Coffee, Herbal Tea, and Sparkling, each tagged with a hydration multiplier, plus a portion stepper and a "Confirm Log" button. Makes logging any drink quick and accurate.

03

Smart Nudges

A reminder schedule with an Active Hours toggle, interval (every 90 min) and time window controls, a Sip Pace selector (Chilled, Steady, Intense), and a timeline of upcoming nudges. The heart of the water reminder experience.

04

Insights

A "Your Insights" view with a hydration goal ring at 58%, logged and remaining figures, and a hydration-by-hour bar chart. Surfaces patterns like drinking most before noon.

05

History

A trends screen with a 12-day streak badge, a 2,180 ml daily average, weekly bars for the last 7 days, and a monthly report link. Shows long-term hydration habits at a glance.

06

Profile

A profile with the user's name and Premium tier, a health profile for weight goal, daily goal, and units, plus Apple Health sync and reminder sound settings. Where users tune their hydration targets.

核心功能

  • Liquid Glass Hydration aesthetic: mist white, deep aqua, cyan-to-teal fills
  • Signature living-glass vessel that fills as intake is logged
  • Frosted-glass panels with soft 28px corners and no hard shadows
  • Floating pill navigation dock with a glowing active icon
  • Drink logger with hydration multipliers and portion steppers
  • Smart reminder scheduling with interval, window, and sip-pace controls
  • Insights goal ring and hydration-by-hour bar chart
  • History view with weekly bars, daily average, and streak badge

适合谁

Founders validating a hydration or water-tracking app MVP
Product designers needing a polished water reminder UI starting point
Indie developers building a wellness or habit-tracking app
Health-tech teams prototyping a daily-intake experience

你可以做什么

  • Launch an MVP for a water reminder or hydration app
  • Mock up screens for an investor or stakeholder pitch
  • Hand a consistent hydration UI off to developers
  • Explore a redesign of an existing wellness tracker

如何使用此模板

  1. 1

    打开模板

    浏览各界面并预览完整设计,看看是否契合你的想法。

  2. 2

    使用此模板

    一键在 Sleek 中打开你自己的完全可编辑副本。

  3. 3

    用 AI 编辑

    只需描述你想要的效果,就能重设配色、改布局、增删界面。

  4. 4

    导出并上线

    导出设计或交给开发者,继续推进上线。

有问必答。 开始之前你需要了解的一切。

How do I build a water reminder app from this template?
Click "Use this template" to open it in Sleek as your own editable project, then shape it by describing the changes you want: restyle the palette, edit any screen, and add the flows your product needs. You start from six complete screens instead of a blank canvas, so you reach a working water reminder app UI far faster.
What screens are included in this water reminder app UI template?
Six connected screens: Today with the living-glass vessel, a Log a Drink sheet, a Smart Nudges reminder schedule, an Insights view with a goal ring, a History trends screen, and a Profile. Together they cover the core flow of a real hydration app, from logging a drink to tracking streaks.
Can I customize the hydration tracking UI?
Yes. Use the template in Sleek and edit any screen by chatting with the AI: change the cyan-to-teal palette, adjust the living-glass vessel, swap drink types, or rework the reminder schedule. There's no manual redraw; you describe the change and it's applied.
Is this water reminder app template free to use?
You can open and explore the design for free, then use it in your own Sleek project to build on it. Editing and exporting follow Sleek's standard plans.
Can I export the design to code or Figma?
Yes. Sleek exports your design as code, copies straight into Figma with no plugin, or hands you a ready-made prompt that an AI agent like Claude Code or Cursor can use to build it into a real, working app.
Does the template support logging drinks other than water?
It does. The Log a Drink sheet includes Water, Coffee, Herbal Tea, and Sparkling, each with a hydration multiplier and a portion stepper. You can add or rename drink types in Sleek to fit your product.

还有其他问题?请发邮件至 support@sleek.design。

开始设计你的 water reminder 应用

在 Sleek 中使用并改成你的:重设配色、用 AI 编辑任意界面,再导出为代码或 Figma。