罗德岛通讯与技术部

Flutter 终端

FLUTTER TERMINAL

手机没有入口层的奢侈(一打开就是聊天流),也没有 hover/鼠标触发视差。所以这一面的取舍如下。

状态:🟢 现行 · 定稿 2026-09-08 定位:Flutter 手机客户端(替代 PWA,通讯终端等价物,经中继连回 PC 本地后端)的终端 UI 权威——「一套语言」的妥协版。 后端拓扑:PC 优先(手机 → 中继 → PC 跑记忆+LLM·用户 Key),服务器只中继不存数据。见 game-decisions.md。 共享的色板/字体/几何/材质/图标在 arknights-ui-language.md(先读那个); UE 主界面(完整版,保留 3D 透视倾斜)见 ue-home-screen.md

依据:arknights-ui-study.mddock-redesign.md(web dock 已实施的样板)。

这一面与 UE 的区别

方舟终端视觉语言只有一个,但「透视倾斜」在两端不同:

UE 主界面(PC) Flutter 终端(手机)
透视倾斜 ✅ 要(10°,ratio 1.33) ❌ 不要
替代 相机真透视 clip-path 切角 + 转场瞬态倾斜
载体 3D 场景 + 浮层 纯 2D 聊天流

手机没有入口层的奢侈(一打开就是聊天流),也没有 hover/鼠标触发视差。所以这一面的取舍如下。


外壳 dock(4 格)

[ 消息 ] [ 干员 ] [ 动态 ]  │  [ 泰拉 ]
  关系面(她的世界)      发丝线    世界面(泰拉)
tab 中文主标 英文微标
消息 消息 MESSAGES
干员 干员 OPERATORS
动态 动态 MOMENTS
世界面 泰拉 TERRA
  • 泰拉先留「等权但异质」空位,为将来经济系统占坑(「第四根支柱该等权」,见 dock-redesign)。
  • 激活态 = 顶部发丝线 + 斜切高亮块 + 图标描边→填充(双重信号都不重)。
  • 次级系统(设置/深聊/群聊/送礼)一律浮窗,不进 tab——方舟交互最典范:玩家从没离开同一张 canvas。

气泡头部(每个新说话人的第一条)

╭──────────────────────────────╮
│  ⬡  阿米娅                   │  ← 六边形官方头像 + 中文主标(思源黑体 Heavy)
│       AMIYA                  │  ← 英文代号微标(Novecento 大写 + 字距)
│  ─────────────────────────   │  ← 冷光发丝线(#6cc9ea)
│   「博士,今天也拜托了。」      │
╰──────────────────────────────╯
  • 只在「每个新说话人的第一条」带身份条:1v1 里即开场第一条;群聊里换人说话再亮一次身份。
  • 之后的消息只剩纯气泡,头像和名字不再重复——跟 dock 的「安静轨道」一个道理。
  • 六边形头像 = 「A 为主 B 点缀」里官方素材(B)第一次落进 UI 的地方:官方头像用 ClipPath 裁六边形。

Flutter 端取舍(关键)

结论:主交互层不要,氛围层小剂量,材质层全要。

继承 ✅ 放弃 ❌ 替代 🔄
材质(.9 + blur) rotateY 透视倾斜 clip-path 切角(伪 3D)
细线几何 + 冰蓝发丝线 陀螺仪 / 鼠标视差 多层阴影做「厚度」
宋体大标题(Noto Serif 900) hover 浮起(translateZ) 转场瞬态倾斜(静止回正)
浮窗不跳页
按压态 scale 反馈

待定(下一轮设计轴)

  • [ ] 面板材质如何落到聊天页(聊天流没有入口层的奢侈)
  • [ ] 字号字重精确档(标题/正文/微标三级的具体 px)
  • [ ] 动效细节(转场 + 指示器 spring 滑动)
  • [ ] 图标「三层编码」具体落到哪几处