🍱 KH800 食品计时器 - UI设计原型

页面1：计时显示（正常）

DAY
02
02
H
30
M
30
S
  • 白色外圈：电量75%
  • 单击：启动/暂停
  • 双击：归零（暂停时）
  • 左右滑：翻页

页面1：计时显示（警报）

DAY
03
15
H
45
M
00
S
  • 红色外圈：超时警报
  • 呼吸动画：1秒周期
  • 已超过设定时间
  • 持续提醒用户

页面1：计时显示（充电）

⚡
DAY
01
08
H
20
M
15
S
  • 绿色外圈：充电中
  • 流动动画：充电状态
  • 顶部闪电图标
  • 最高优先级显示

页面1：计时显示（暂停）

⏸
DAY
00
05
H
12
M
33
S
  • 灰色外圈：暂停状态
  • 顶部暂停图标
  • 单击：恢复计时
  • 双击：确认归零

页面2：警报设置

!! 警报设置
+
03
−
D 天
+
12
−
H 小时
  • 天数范围：01-10可调
  • 小时范围：01-23可调
  • 上下滑动或点击+/-调整
  • 点击底部绿色按钮启动

页面3：电量信息（新增）

🔋 电量信息
85%
状态：放电中
剩余：约12小时
  • 实时电量百分比
  • 剩余时间估算
  • 充电状态检测
  • 电量条可视化

页面4：系统设置（新增）

系统设置 ⚙
屏幕亮度
息屏时间 3秒 ◀▶
声音
固件版本：v1.0.0
  • 亮度：10%-100%
  • 息屏：1s/3s/5s/10s/常亮
  • 声音开关
  • 系统版本信息

🚀 完整使用流程

1 开机后，左滑进入 页面2（警报设置）
▸上下滑动左侧区域调整天数（01-10）
▸上下滑动右侧区域调整小时（01-23）
▸也可点击 +/- 按钮调整参数
2 点击底部 ▶ 启动计时 按钮
✓自动保存警报设置
✓自动跳转回页面1（主页）
✓自动启动计时器开始倒计时
3 计时运行中...
○外圈显示电池电量（白色）
○时间持续递增：00:00:00 → 02:30:15...
○单击暂停，双击归零（暂停时）
⏰ 达到设定时间（例如3天12小时）后：
• 外圈变为红色并呼吸闪烁
• 提醒已超过保质期
• 计时器继续运行

📱 页面导航流程

页面 1
计时显示
⟷
页面 2
警报设置
⟷
页面 3
电量信息
⟷
页面 4
系统设置
🟢 启动按钮
页面2底部绿色按钮，一键启动计时
👆 单击中央
启动/暂停计时器（主页面）
👆👆 双击中央
归零重置（暂停状态）
👈 左滑
下一页（循环切换）
👉 右滑
上一页（循环切换）
👆 上滑
快速返回主页
👇 下滑
快速进入设置
🔘 长按3秒
物理按键关机
😴 3秒无操作
自动息屏（省电）