方舟终端视觉语言（一套语言

状态：🟢 现行 · 定稿 2026-09-08 定位：UE 游戏 + Flutter 终端共享的 design token 与视觉语言权威。 两面各有专文：UE 主界面（完整版） 见 ue-home-screen.md · Flutter 终端（妥协版） 见 flutter-ui-design.md。 学理依据：arknights-ui-study.md（怎么学）、ak-official-assets.md（素材在哪）、 ak-home-tab-demo.html（动手拆）。

一句话

方舟的「高级感」来自 材质 + 几何约束 + 字体分层，不来自透视。透视倾斜是「大屏入口层」的奢侈品， 只属于 UE 主界面；手机端（Flutter）用「伪 3D」切角 + 转场瞬态倾斜替代。

一套语言 · 两个面

方舟终端视觉语言（本文：色板 / 字体 / 几何 / 材质 / 图标三层编码）
├─ UE 主界面（PC · 游戏本体）  → 完整版：3D 透视倾斜 + 浮层 + 立绘视差   [ue-home-screen.md]
└─ Flutter 终端（手机 · 伴侣）  → 妥协版：clip-path 切角 + 转场瞬态倾斜   [flutter-ui-design.md]

共享五块：色板 / 字体 / 几何 / 材质 / 图标。透视倾斜是分水岭——UE 要、Flutter 不要。 「外壳 dock」「气泡头部」是 Flutter 特有，不在本文（见 Flutter 专文）。

已定决策（共享部分）

分水岭（各面自决，不在本文）：透视倾斜 —— UE 主界面要（ue-home-screen.md）， Flutter 终端不要（flutter-ui-design.md）。

色板

比例：大面积中性色（灰/白/黑）+ 少量功能色（高亮蓝）+ 极少量警示色（红）。 手法：面板统一 opacity .9（方舟从不 1.0），多处背景模糊提升层级对比度。

⚠️ 蓝值历史（防「第二份名单」）：项目曾有三个蓝——#2f81f7（roadmap 误用，已废）、 #4a9fd4（demo 里 .rodi 一键换色，已废）、#6cc9ea（dock 旧冰蓝）。现在唯二有效： #05a7dc（主）+ #6cc9ea（发丝线）。别再引入新蓝。

字体

字重-字距档（杰尼龟量出，落到本项目）：

⚠️ 大标题是宋体（Noto Serif 900）不是黑体——宋体那一层是「古典骑士精神」的来源， 跟科幻军工风对撞。全用黑体会丢掉一半味道。

几何

共享的几何词汇，两面都用：

• 斜切：单角切右上，--cut: 10px。激活高亮块用 clip-path 切角（Flutter 用 ClipPath，UE 用斜切贴图/顶点）。
• 六边形：方舟签名形状。干员头像框、图标都用六边形（头像用 ClipPath/六边形贴图裁）。
• 细线几何：发丝线（3px 白/青冷光），分隔与激活指示。
• 「伪 3D」：靠切角 + 多层阴影做「厚度」，不依赖透视（Flutter 端用；UE 端有真透视，伪 3D 只做点缀）。

⚠️ 透视倾斜是分水岭，完整做法见 ue-home-screen.md。 Flutter 端不用 rotateY，用「转场瞬态倾斜」替代（见 flutter-ui-design.md）。

材质

• 浅面板压深底：方舟首页最标志性的手法（白/灰面板叠在深色背景上），聊天页/主界面都值得用。
• grain 散点：低密度噪声，填「留白单薄」，中性、通用。Flutter 里用自定义 shader 或重复噪点图， 别用全屏 filter: contrast()（烧 GPU）；UE 里用噪声贴图叠加。
• 条纹（警戒线）：粗条纹工业感，只点缀（分隔/激活），别铺满。
• 面板 opacity .9：方舟统一手法，从不 1.0。

图标三层编码（借鉴思想）

技能图标用「颜色 + 边框 + 底纹」三层各自承载一维信息，互不干扰：

• 颜色 → 增益类型 · 边框有无 → 主动/被动 · 底纹 → 增益/减益/爆发/生存

本项目的图标可借这条：一层信息一个维度，别把多维信息压进一个形状。

快速数值速查