际变 · 学生端 + 管理端 · 视觉规范

玻璃拟态 · 令牌与组件

所有页面共用一套令牌和组件，换主题只改令牌，不改结构和交互。颜色有固定含义：蓝色是主要行动，青色是进展，橙色是需要注意，红色只用于安全和不可逆操作。分数高低不用红绿评价。

色彩（按用途）

底色#E9EEF9页面底色

光斑 · 蓝rgba(125,166,255,.75)右上 260px 径向

光斑 · 青rgba(94,214,200,.55)左侧 240px 径向

光斑 · 淡紫rgba(190,170,255,.55)右下 300×260 径向

文字#0B1630标题与正文

次要文字#435070说明文字，对玻璃底 ≥ 6:1

主要行动#1D4ED8按钮、链接、选中态；白字 7:1

进展#0E968F · 字 #08675F进度条、完成标记；做文字时用深色

注意#DB861C · 字 #8F4E0A阻碍感知条、待处理

安全 / 不可逆#B42318紧急求助、删除、注销

选中底rgba(214,227,255,.85)选中选项、建议卡

分隔线rgba(120,140,190,.28)描边、分隔、空轨道

玻璃材质

磨砂玻璃（默认）

光斑透过卡片，内容仍然清楚。

不透明降级

低端安卓 WebView 或不支持时自动切换。

background: rgba(255,255,255,.56)
border: 1px solid rgba(255,255,255,.80)
backdrop-filter: blur(20px) saturate(1.4)
阴影·大: 0 12px 34px rgba(40,60,130,.13)
阴影·小: 0 4px 14px rgba(40,60,130,.07)
降级: #FFFFFF + 1px #E1E6F2，去掉 backdrop-filter

每个画板右上的 Tweaks 里都能打开“不透明降级”，直接预览低端机效果。

字体与字号

"PingFang SC", "HarmonyOS Sans SC", "MiSans", "Noto Sans SC", "Microsoft YaHei", system-ui

页面标题 30 / 700今天

流程标题 25 / 700写一句“如果……那么我……”

卡片标题 22 / 700写一张行动卡

正文 16 / 400你已经知道想改变什么，这周先把目标变成一个最小动作。

说明 13–15 / 400内容只有你自己能看到；老师只看到“已完成”。

标签栏 11 / 700今天

移动端正文不小于 16px；所有可点区域不小于 44 × 44；字号放大到 200% 时布局不截断。

圆角与间距

28 · 卡片

20 · 列表 / 选项

16 · 按钮

12 · 签到格

999 · 胶囊

页面左右边距 20 · 顶部留给系统状态栏 62 · 底部为悬浮导航预留 112
卡片内边距 18–22 · 相邻组件间距 10–18 · 分组标题上方 26
Web 管理端：侧栏 232 · 外边距 16 · 卡片圆角 20 · 表格行高 ≥ 44

底部导航 · 悬浮胶囊

今天课程练习我的

组件

按钮 · 主 / 次 / 文字

单选卡 · 未选 / 已选

选择片 · 开关 · 进度

五档签到

维度条 · 资源（青）/ 阻力（橙，单独一组）

行动准备

2.3 阻碍感知

3.8

动效与手势 · 所有页面手感一致

按压

按下缩小到 0.97，150ms。列表、选项、按钮、签到格统一。

转场

320ms，cubic-bezier(.2,.8,.2,1)。新页从右推入，旧页左移 30% 并轻微变暗。

完成

青色同心圆涟漪。系统开启“减少动态效果”时只保留对勾。

手势

任意位置右滑返回：拖过 35% 宽度或速度 > 0.45。首页左右滑切换标签。面板下拉 > 120px 关闭。先判方向再接管，滑杆不触发返回。

文案 · 推荐与避免（说明书附录 B）

场景推荐避免

测评前这不是考试，也不用于诊断。你可以跳过或稍后继续。请如实作答，否则结果无效。

画像这是你当前的练习画像，分数会随情境和时间变化。你的人际能力较差 / 属于高风险。

未完成要继续、缩短任务、申请延期，还是先暂停？连续打卡失败 / 你已落后。

没做成这次没有按计划发生，可以帮助我们调整情境或动作。挑战失败，再试一次。

退出退出研究不影响课程权益；请查看数据处理说明。退出会丢失所有进度 / 无法获得成绩。