Tempo跨端设计规范
Tempo四端共享同一套产品气质：安静、轻盈、克制，但不冷淡。视觉规则先保证任务和时间信息清楚，再使用平台原生材料表达层级。平台差异只体现在系统导航、窗口、触控和桌面交互，不应发展成四套互不相关的界面。
设计基线
| 维度 | 共享规则 |
|---|---|
| 圆角 | 内容层复用 10 / 16 / 18 / 24 与胶囊令牌；分组内容卡片使用 18，同一层级不得另造半径；系统表面使用系统圆角 |
| 间距 | 以 4 为基准，常用 4 / 8 / 12 / 16 / 20 / 28；设置和工具复用同一分组导航行 |
| 字体 | 使用系统字体；标题、正文、辅助信息最多三级字重，不用颜色替代层级 |
| 颜色 | 日间背景 #F3F4F5、卡片 #FFFFFF、正文 #1A1C1F、强调 #339CFF；深色使用 #0B0B0B 中性黑底与低亮灰材料；危险操作使用独立警示色 |
| 图标 | 优先单色系统符号或同笔画 SVG；不使用五颜六色的功能图标 |
| 材料 | 玻璃只用于导航、浮层和悬浮控件；内容列表使用稳定纯色，避免“玻璃套玻璃” |
| 动效 | 快速反馈 140ms，标准过渡 220ms，强调过渡 360ms；位移、透明度和圆角共用一个进度源 |
页面结构
- 移动端使用紧凑居中标题、轻量列表和单一新增入口，避免巨大静态标题挤占内容。顶部状态栏与正文背景连续。
- “今天”顶部只保留一个日期语义：当天显示“今天”，相邻日期显示“昨天/明天”，其他日期显示星期；月份单独作为辅助信息。
- 日历固定在任务层上方。任务列表滚到顶部后继续下拉才展开日历；上推时先收起日历，再滚动任务。
- 已完成任务保留下沉并显示删除线。左滑直接删除或迁移日期，删除后显示短时撤销，不弹二次确认。
- 设置使用逐级进入，不把同步、AI 或高级选项一次铺满首页。
- RSS 首页使用一个紧凑筛选区；文章之间通过留白、标题层级和细分隔线区分。阅读页优先正文，网页模式主动隐藏站点导航和无关页脚。
- 番茄钟顶部切换器保持窄而居中，计时环占据页面视觉中心；运行后只显示暂停、停止与必要状态。
平台行为
iOS
- 底部使用系统 UITabBar，顶部保持原生玻璃按钮；设置和工具转场复用 React Navigation 原生栈，浮层使用系统 sheet、menu 等能力。
- iOS 26 及以上使用系统 Liquid Glass；旧系统降级为单层材质，不手工叠加第二层玻璃。
- 灵动岛紧凑态只显示模式与剩余时间；展开态显示进度、当前阶段、今日目标和最近专注热力，不堆叠长文本。
- 主屏幕和锁屏小组件只读 App Group 快照，复杂编辑通过 deep link 返回主应用。
Android
- 保留 Android 返回手势、通知和增量更新路径，视觉层级与 iOS 一致，但不仿制 iOS 导航控件。
- 任务、日历、番茄钟、RSS、天气和每日一句使用同一圆角与间距标尺。
Windows
- 默认是低遮挡的圆形计时球，始终可读剩余时间。
- 点击后沿可用屏幕方向平滑展开为横向计时胶囊，再按需展开纵向今日任务；鼠标经过不触发大幅形变。
- 展开/收起由原生窗口边界动画和应用内部动画共同完成，禁止瞬移、闪烁或一帧完成。
macOS
- 主应用遵循 macOS 窗口和菜单习惯；桌面小组件与 Windows 浮窗共享信息密度，但使用 WidgetKit/system material。
- 小组件的圆角、字体层级和数据语义与 iOS 一致。
数据状态
- 加载时保留页面骨架，避免整个界面跳空。
- 离线编辑立即反映到本机；同步状态只在失败或用户主动查看时突出显示。
- 空状态说明下一步可以做什么，不使用过度装饰插画占据主要空间。
- 删除撤销、同步失败、更新可用等临时提示必须自动消失，并避开底部导航和新增按钮。
评审清单
每次修改界面至少确认：
- 四端的圆角、间距、字号层级和强调色仍属于同一套系统。
- 没有重复标题、无效按钮、双层玻璃或为筛选单独占用整行的大控件。
- 长列表、动态字体、深浅模式和窗口缩放下内容不截断。
- 动画由一个连续状态驱动，不同时使用互相竞争的滚动与手势状态。
- 预览图由当前提交的真实应用生成，且四个平台记录的是同一 Git SHA。