UI 视觉重设计（明日方舟风格 + 动效）
VISUAL REDESIGN
状态：🟡 规划 · 最后核对 2026-08-20
把「iOS/微信扁平」升级到「明日方舟高端科技感」。2026-08-17 · 🟡 规划 · 讨论进行中
起点诊断：不是「简陋」，是「flat」
工程成熟度不低——间距刻度（4px 阶）、字阶 5 档、阴影三级、语义色、10 套主题、
守卫测试（test_theme_polarity / test_semantic_accents_are_legible）。
真正的问题是默认美学是 iOS/微信扁平：token 注释里写着「Apple 字体层级 / 圆角 / 动效 / 文字透明度」；圆角 16px、system-ui、低饱和实色、4px 密实间距。 这是「干净的 IM」，不是「明日方舟的高端科技感」。
方向
四个关键词：高端、呼吸感、琉璃色透明、莱茵生命。
2026-08-20 补充（与 dock 一起收敛的新决策）
底栏重做（见 dock-redesign.md）讨论时，顺手把几条全 app 级 的决策定了，从 dock 升上来记录于此：
- 色相已定「冰蓝」：冷光发丝线 + accent 用冰蓝（偏蓝，更「终端/仪表盘」）， 原「琉璃偏青还是冰蓝」的未决到此关闭。
- 技术标签字体 = 工业等距无衬线：英文 readout 层（
LEVEL/TRUST那类）用伪等距 工业字（Bender 方向），大写 + 字距，非 serif。serif 属于另一个「叙事/展示」层， 将来要做再加。 - 材质补一刀：散点（grain）+ 条纹（警戒线）：方舟最常用的底图处理。grain 填 「留白单薄」、提升对比度，中性、10 套主题通用；条纹给工业感，只点缀别铺满。
- 架构原则：次级系统用浮窗，不是 tab（同 canvas）：方舟典范是「玩家从没离开 同一张 canvas」——升级/升阶/合卡都用位移/浮窗/原位展开，不跳页。我们同理： 设置/邮箱/通知/送礼用毛玻璃浮窗呼出、不占 tab；只有主角（关系面 + 世界面）占 dock。
- Diegetic 叙事锚点：整个 app 是一块「罗德岛终端」的屏幕，chrome 都该长得像 它的一部分——只取视觉隐喻，不做字面 diegetic UI（没那个物理层，硬做是 cosplay）。
关键判断：莱茵生命的魂不在颜色，在材质
已有 [data-theme="rhine"]（冷绿皮肤 #1a241d/#2d7a4a/#4ecb71）。但「琉璃透明 +
高端」的魂是材质 / 字体 / 几何，不是调色板——这就是为什么现有 rhine 给不了
那个感觉。「琉璃透明」是个材质问题，不是调色板问题。
四根杠杆
| 杠杆 | 现在 | 莱茵生命要的 |
|---|---|---|
| 材质（琉璃透明） | chrome 有 blur(24px) saturate(130%)，但发丝线中性白、无冷光、无分层深度 |
带青/冰蓝的冷光发丝线、内层微光、更透的玻璃 |
| 字体（高端） | 纯 system-ui，没有第二套 | 技术标签层：小字距、等宽、大写 TRUST·信赖 data readout |
| 几何（明日方舟） | 圆角 16px，六边形只在蚀刻章（.hexclip） |
斜切角、角括号、细线几何，从勋章蔓延到卡片/chrome |
| 呼吸感 | 4px 阶密实 IM 间距 | 更空的负空间、更少发丝线 |
架构洞察：机制已经在（夕/青绿就是「材质主题」）
夕/青绿已经是材质主题，不只是调色板——它们改了 --chat-ground（山水）、
--card-texture（宣纸纤维）、--card-border、--faction-bar-saturate、
--chat-atmosphere。
同一套机制用在「国画」出「夕」，用在「科技琉璃」就出「莱茵生命」。缺的不是
机制，是把写死的 iOS 值提成 token：--hairline-tint（发丝线色相）、切角几何、
技术标签字体、blur 量。
两个诚实约束
- 呼吸感 × 聊天冲突：明日方舟面板敢留白是因为信息少；聊天流天生密。 呼吸感主要用在 chrome / 干员主页 / 设置 / 勋章，聊天气泡本身留不了。
- 毛玻璃有性能代价：blur 只在 chrome；扩到列表行/卡片低端安卓会卡。 只模糊静止表面，滚动区用实色+透明。
动效：缺「编排与规模」，不是「动画」
已有地基：~20 个 @keyframes（typing/messageIn/medal-slidein/operator-light…）、
转场 12px、两个缓动 token、氛围层 + 干员光（最像游戏的部分）。
缺的是时序、方向、深度——游戏感来自编排，不来自单个 keyframe 的数量。
五条铁律
- 只动
transform/opacity（GPU 合成），绝不动画height/width/top/left - CSS 能做绝不用 rAF；rAF 只留粒子/视差/canvas
- 一条
prefers-reduced-motion总闸 - 持续特效省电（blur 每帧烧 GPU，环境特效只走 transform/opacity/color）
- 聊天热路径（SSE 流 + innerHTML 渲染气泡）只留「每气泡进场」
分层
| 层 | 现在 | 缺 |
|---|---|---|
| 转场 | 12px 右进 250ms，无方向无深度无 spring | 方向/纵深/spring |
| 开屏 | 静态 flash-guard「焊宝烹饪中…」 | logo 序列 + 进度 + 错峰 |
| motion token | --ease-spring / --ease-out |
--dur-*/--spring-* 收口 ~20 keyframes |
| juice | 稀少（无按压态、无 stagger） | :active、列表错峰 |
| 环境 | 已有（氛围层/干员光/昼夜） | 谨慎加粒子/视差 |
转场（已深入讨论）
三种导航关系配三种动作：
| 关系 | 动作 |
|---|---|
| 同级 tab（消息↔联系人↔动态） | crossfade（200ms） |
| 下钻（列表→聊天/主页/设置） | push：右滑入，旧页 scale(0.98) 左退 -30% 变暗 |
| 返回 | pop：镜像 |
「呼吸感」= 纵深 scale(0.98)：离开的页不是消失，是往后退一格。
推荐参数：push/pop 320ms spring；tab 200ms ease-out；纵深 scale 0.98 起。
实现要点：
- 方向从
viewHistory推断，或给navigateTo加显式dir参数 - 离开视图要临时
.leavingclass（现在摘.active就完了，没有退场态）——唯一真正要动的 JS - ⚠️ specificity 坑：
#app[data-dir] .view的 ID 选择器会盖过.view.active， 用.view:not(.active)表达「离屏原点」，让.active永远是终点 - 离开聊天页先跑
hideSpatial()/_leaveDeepImmersive()（navigateTo:1930已有）， 甲板照片 + 氛围层要跟滑出同时收，不然露半截甲板在退场 - 硬件返回（原生桥）/浏览器返回走同一个
navigateTo才拿得到 pop 方向 prefers-reduced-motion降级成纯 crossfade
建议顺序
转场 → 开屏 → motion token 收口 → juice（按压态/stagger）→ 环境层精修 → 粒子/视差（最后）。
未决
- [ ] 转场美学方向：iOS 骨架 + 明日方舟细节（推荐）vs 更游戏化（fade-through-black/wipe）
- [ ] 四根杠杆先后：字体最便宜最立竿见影（推荐先动）vs 先定琉璃色相
- [x] 琉璃偏青还是偏冰蓝：✅ 2026-08-20 定「冰蓝」（见上方补充）
- [ ] 材质做成全局默认 vs 正交「材质 × 颜色」维度 vs 单做一套做对的莱茵生命样板