iBoard V0.2 · 界面设计

打卡 / 日历 / 清单 —— 移动端静态高保真原型(设计基线 420 × 820,适配 375~430px)

版本 V0.2(0.2.0)分支 dev-0.2antd-mobile 风格 底部 4 Tab(打卡默认)时区 Asia/Shanghai文档日期 2026-10-22

1 设计规范Design Tokens

沿用项目既有 :root 变量(src/styles/globals.css),本模块不引入新主题。

语义色

#1677ff主色 / 今日 / 链接
#00b578完成 / 进度条
#ffc53d部分完成 / 粒子
#a855f7超额完成
#ff8f1f连续天数 / 超额徽标
#ff3141危险操作
#f5f5f5页面底色
#f7fbf8已完成卡片底
日历·全部完成 日历·部分完成 日历·超额

布局与圆角

视口420 × 820(375~430 自适应) NavBar 高45px TabBar 高72px(含安全区) 页面内边距左右 12px 卡片圆角10px 卡片间距10px 纵向 卡片阴影0 1px 2px rgba(0,0,0,.04) 环形尺寸58 × 58,环宽 6px 最小点按区≥ 40 × 40

字号层级

18 / 700日期标题「10月22日」
17 / 600NavBar 标题「打卡」
16 / 700环形中心数字 / 弹窗标题
15 / 600打卡项名 / 清单标题
13 / 400正文 / 日历日期数字
12 / 400次要信息 / 操作链接
11 / 400备注 / 周期范围 / 徽标

2 主界面三个子视图(SwipeTabs 左右滑动切换)

10月22日 周四
已完成 2 / 4
+ 新建
0/2
喝水
每天 2 次连续 12
今日
打卡
编辑归档
1/3
健身
每周 3 次连续 5
10-19 ~ 10-25
打卡
撤销编辑归档
读书
每月 12 次连续 3
10-01 ~ 10-31
再打一次
撤销编辑归档
+1
吃药
每天 1 次连续 30
今日超额 1
再打一次
撤销编辑归档
打卡
宏观
监控
我
2.1 打卡视图 · 今天默认进入

头部日期 + 完成数;未完成卡片排在前面。环形中心未达标显示 done/target,达标显示对勾(每天 1 次打完即刻闭合);超额在右上角显示 +n。点环或「打卡」按钮均可打卡,卡片底部提供撤销 / 编辑 / 归档。

打卡
日历
清单
‹2026年10月› 回到今天
昨天
今天
明天
一二三四五六日
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
本月完成率 82%
今天 · 2026-10-22
喝水 每天 2 次 · 当日 2/2 已达标
健身 每周 3 次 · 当日 0/1 打卡
读书 每月 12 次 · 当日 1/1 已达标
吃药 每天 1 次 · 当日 2/1 已达标
打卡
宏观
监控
我
2.2 日历视图 · 今天选中

周一起始月历 + 「昨天 / 今天 / 明天」快捷分段;日期下方状态点:绿=全部完成、黄=部分完成、紫=超额、无点=未完成或未来。今天用主色数字并选中高亮,未来日期数字弱化。下方为该日明细,可直接打卡;底部展示本月完成率。

打卡
日历
清单
进行中
已归档
+ 新建
出差 · 杭州出差
8/12›
身份证 / 证件×
手机充电器 + 充电宝×
笔记本电脑 + 电源×
耳机×
换洗衣物×
洗漱包×
常用药×
车票 / 机票 / 酒店确认×
雨伞×
工牌 / 名片×
报销单据×
现金零钱×
添加检查项
添加
全选全不选复制 存为模板归档删除
回老家 · 国庆回老家
0/12›
打卡
宏观
监控
我
2.3 清单视图 · 展开态

卡片头部常显标题、场景标签、进度条与 8/12;点击展开逐条勾选(勾选后绿色圆底、文字加删除线并弱化)。底部可继续添加检查项,并提供全选 / 全不选 / 复制 / 存为模板 / 归档 / 删除。收起态只保留头部一行。

10月22日 周四
已完成 2 / 4
+ 新建
0/2
喝水
每天 2 次
今日
打卡
编辑归档
新建打卡项
例如:喝水 / 健身 / 读书
每天
每周
每月
每年
−1+
补充说明
保存
取消
打卡
宏观
监控
我
2.4 新建 / 编辑打卡项(底部弹层)

名称 ≤20 字;周期四选一(每天 / 每周 / 每月 / 每年);目标次数用 Stepper,最小 1;颜色 7 色预设;备注可选。编辑态标题变为「编辑打卡项」并回填当前值。

10月22日 周四
已完成 3 / 4
+ 新建
吃药
每天 1 次连续 30
今日
再打一次
撤销编辑归档
1/3
健身
每周 3 次
10-19 ~ 10-25
打卡
撤销编辑归档
打卡
宏观
监控
我
2.5 达标瞬间 · 完成特效

环形闭合 + 对勾缩放入场(0.32s);同时 14 颗粒子沿圆周扩散(26~58px,交替主色与金色)+ 主色光环脉冲(0.7s),总时长 ≤900ms,pointer-events:none 不阻塞后续操作;并触发 18ms 轻震动。特效恒开(V0.2 设计变更:头部不再有开关)。

打卡
日历
清单
‹2026年10月›回到今天
昨天
今天
明天
一二三四五六日
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
本月完成率 82%
明天 · 2026-10-23计划(不可打卡)
喝水每天 2 次 · 当日 0/2待办
健身每周 3 次 · 当日 0/1待办
读书每月 12 次 · 当日 0/1待办
吃药每天 1 次 · 当日 0/1待办
打卡
宏观
监控
我
2.6 日历 · 明天(计划,只读)

未来日期不允许打卡:标题右侧显示「计划(不可打卡)」徽标,条目右侧只显示「待办」文案而不渲染按钮,月历上未来日期数字弱化且不打点。昨天视图则相反——可补打最近 7 天内的漏打卡。

打卡
日历
清单
进行中
已归档
+ 新建
出差 · 杭州出差
12/12›
回老家 · 国庆回老家
0/12›
打卡
宏观
监控
我
2.7 清单全部完成(12/12)

进度条 100%、计数变为 12/12、卡片底色转 #f7fbf8,并播放与打卡一致的完成特效。清单完成后用户通常选择「归档」或「复制」复用。

10月22日 周四
已完成 0 / 0
+ 新建
○

还没有打卡项

创建第一个打卡项
打卡
宏观
监控
我
2.8 空态

三个视图均具备加载中 / 空态 / 错误(带重试)三态。空态给出明确引导按钮。V0.2 设计变更:打卡页头部不再有「特效开 / 特效关」开关,完成特效与触感反馈恒开,没有任何关闭入口。

油价
经济数据
策略研究
经济文章
报警3
新闻
央行开展 5000 亿元 MLF 操作,中标利率持平
本月 MLF 净投放 2000 亿元,市场流动性保持合理充裕…
妙想财经2026-10-22#1
9 月社零同比增长 3.2%,服务消费延续回暖
餐饮收入增速回升至 5.1%,可选消费分化明显…
妙想财经2026-10-21#2
美联储会议纪要偏鹰,美元指数小幅走强
点阵图显示年内或仍有一次降息空间,但分歧加大…
妙想财经2026-10-21#3
OPEC+ 维持减产节奏,国际油价日内涨逾 1%
布伦特原油重回 78 美元上方,化工链成本端承压…
妙想财经2026-10-20#4
打卡
宏观
监控
我
2.9 宏观 · 原「首页」报警/新闻并入设计变更

「首页」Tab 取消,报警与新闻成为宏观的第 5、6 个子 Tab(/macro/alerts、/macro/news),共 6 个子 Tab 可横向滚动,当前项底部有 3px 主色指示条;报警数量以红色角标挂在子 Tab 上。新闻详情改为 /macro/news/:id,底部「宏观」保持高亮。

C
Cheney
qian.huang@sunyard.com
前端升级 (OTA)
当前版本v0.2.0 · 20261022.1530
运行资源内置
开发版本
按版本号判新:仅当服务端版本号更高时才提示更新
检查更新
立即升级
打卡
宏观
监控
我
2.10 我的 · OTA「开发版本」关闭(默认)新功能

开关默认关闭 = 按版本号判新:取服务端 latest.json 的 version(如 0.2.0-ota),与当前运行版本按数字字段逐段比较,更高才提示更新。用于生产,避免旧分支被重建(sequence 变大但版本更小)把设备拉回旧版。开关值保存在设备端 localStorage.iboard_ota_dev_mode。

C
Cheney
qian.huang@sunyard.com
前端升级 (OTA)
当前版本v0.2.0 · 20261022.1530
运行资源内置
开发版本
按 build sequence 判新:每次构建都算新版本,便于开发联调
新版本v0.2.0-ota (288 KB)
立即升级
回滚
打卡
宏观
监控
我
2.11 我的 · OTA「开发版本」打开

开关打开 = 按 build sequence 判新:走 hotswap 插件的 checkUpdate(),只要服务端 sequence 比本地大就算新版本——每次 CI 构建 sequence 都会变(默认取时间戳),所以任何一次提交都能推到设备上,适合开发联调。切换开关会清空上一次的检查结果,避免上一种口径的结论误导。

3 组件状态定义Component States

3.1 环形进度(尺寸 58,环宽 6,r=26,周长 163.4)

状态条件环形中心卡片底按钮
未开始done = 0仅灰底环0/2白打卡(主色)
进行中0 < done < target按 done/target 填充(45°…330°)1/3白打卡(主色)
已达标done = target闭合整圈对勾(主色)#f7fbf8再打一次(灰)
超额done > target闭合 + 右上角 +n 橙标对勾#f7fbf8再打一次(灰)
每日 1 次达标target = 1 且已打卡直接整圈闭合,不做渐增生长期对勾#f7fbf8再打一次

环形进度 = 周期完成度(done / n);日历日标记 = 当日份额(当日次数 / 日均期望),两者口径不同,互不影响。

3.2 日历日期

状态判定视觉
全部完成 full所有打卡项当日次数 ≥ 日均期望,且无超额绿色圆点
超额 over全部达标且存在任一打卡项当日次数 > 期望紫色圆点
部分完成 partial有完成但未全部完成黄色圆点
无 empty无记录 / 当天无打卡项 / 未来日期不显示圆点
今天date = today数字主色加粗
选中用户点击主色实心底,数字与圆点转白
非本月 / 未来月份不符 / date > today数字弱化(#c8c8c8 / #b0b0b0)

3.3 清单检查项

状态勾选框文字触发
未完成1.5px 灰边圆圈,对勾透明#333点击圆圈或文字切换
已完成绿底绿边,白色对勾显现(0.2s)#a0a0a0 + 删除线同上,写 doneAt
整单完成—进度条 100%、卡片转绿最后一项勾选时播放特效

4 交互与动效Motion

动效时长曲线 / 实现说明
环形增长450mscubic-bezier(.4,0,.2,1),stroke-dashoffset 过渡12 点方向顺时针增长
对勾入场320msscale(.4) → 1 + 透明度达标瞬间出现
完成粒子≤900ms14 颗粒子按角度 --a、距离 --d 扩散,交错 40ms 延迟不阻塞点击
光环脉冲700ms主色圆环放大淡出与粒子同时开始
触感反馈18msnavigator.vibrate(18)WebView 不支持则静默跳过
进度条填充400mswidth 过渡清单勾选后更新
视图切换—SwipeTabs 跟手横滑与既有模块一致

4.1 打卡时序

用户点环 / 点「打卡」 └─ 前端乐观更新:done+1,重算 percent / completed / over,环形立即增长 └─ POST /api/checkin/habits/:id/check ├─ 200 → 用服务端 item 覆盖本地;若 completed → 触发特效 + 震动 ├─ 400 → 回滚 + Toast(未来日期 / 超出 7 天补打窗口) ├─ 409 → 视为已打卡,刷新一次(幂等) └─ 网络失败 → 回滚 + Toast「打卡失败」

5 适配与可达性

项约定
视口设计稿 420×820;375~430px 内元素不换行、不裁切;底部 TabBar 4 项每项 ≥ 44px 可点宽度
安全区TabBar 使用 antd-mobile safeArea,页面底部留出 tabbar-h + safe-bottom
动效特效恒开(V0.2 设计变更,无开关):单次 ≤900ms、pointer-events:none,不阻塞连续打卡;不再响应 prefers-reduced-motion
大字号卡片采用 grid 自适应列宽,文字超长换行不截断;名称限制 20 字、检查项 40 字
深色模式V0.2 沿用现有浅色主题,暂不适配

本文档为静态设计稿,不含脚本逻辑;实现对应 src/pages/checkin/*.jsx、src/components/RingProgress.jsx 与样式段(src/styles/globals.css)。接口与数据口径见《设计文档.md》与《数据库设计文档.md》。