明日方舟 UI 设计
UI STUDY
状态：🟢 现行 · 最后核对 2026-09-08
调研日期：2026-09-06 · 调查方式：联网搜索 + 本地 26 GB 官方资源逆向 + 复刻项目源码分析 配套文档：ak-official-assets.md（官方素材在哪，这份是「怎么学、怎么借鉴」）
一句话结论
方舟的「高级感」来自 材质 + 几何约束 + 字体分层，不来自透视。 透视倾斜是大屏入口层的奢侈品，手机端想要方舟味，走材质、字体、几何，以及「伪 3D」和「转场瞬态倾斜」。
一、四阶段入手路径
| 阶段 | 做什么 | 产出 |
|---|---|---|
| ① 建立眼睛 | 读三篇权威分析，读懂「舟味」为什么成立 | 能指着任意界面说出它好在哪、为什么 |
| ② 逆向拆解 | 用本地 26 GB 资源 + AssetStudio 提 spritepack / ui/pages，量真实间距/角度/色值 |
一手切图 + 量出来的参数 |
| ③ 临摹复刻 | 抄 arknights-ui（MIT，H5+CSS 复刻主界面） |
手上有能跑的方舟风格组件 |
| ④ 抽象成规范 | 把字体/字重/字距/配色/几何/动效写死成 token | 可复用 design token |
⚠️
F:\AssetStudio只有 GUI 版（AssetStudioGUI.exe），无 CLI，提取得手工操作。
二、权威资料（三篇够用，别再漫搜）
- 腾讯游戏学堂《明日方舟 UI/UX 分析——藏在好看背后的先进性》（AJ）—— 最系统，六个角度： ① Diegetic Interface 主看板观瞄投影 ② 类 Fluent Design 多元质感 ③ 扁平化后的交互空间深度 ④ 装饰字体同时表达「古典骑士精神 + 科幻军工风」 ⑤ 焦距控制与底图处理塑造统一视觉识别 ⑥ 过场衔接降低页面层级、构建场景化结构
- 杰尼龟《「舟味」从何而来·UI/UX 设计篇》PDF（janniewang.net）—— 量出了可落地的硬参数， 以及「技能图标三层编码」规则
- NGA「明日方舟的美术——字体」帖（tid=17667410）—— 字体考据，硬货
核心认知：「舟味」不是风格，是约束。对字体、字重、配色、元素、Icon 严格约束形成的一套规则， 重点在于一致，且同样的内容在过去和未来视觉表现必须一致。
三、可量化的硬参数
字体四件套
| 字体 | 用途 | 关键参数 |
|---|---|---|
| Novecento Wide | 标题英文，最常用 | 全大写，两字形六字重，线条粗、重量感 |
| Bender | 基建英文 + 全局泛用数字 | 工业/复古风，两字重 |
| 思源黑体 Noto Sans SC | 中文主体（数据/正文） | 开源 7 字重 |
| 思源宋体 Noto Serif SC | 大标题（作战/编队/基建/仓库） | font-weight 900，40~60px |
思源黑体的精确用法（杰尼龟量出来的，最值钱）：
- 干员代号 → Heavy，字距 -100
- 基础档案（左右结构）→ Normal，字距 -100
- 技能介绍（左对齐图标右侧）→ Normal，字距 0
⚠️ 大标题是宋体（Noto Serif 900）不是黑体。宋体那一层正是「古典骑士精神」的来源， 跟科幻军工风形成对撞。全用黑体会丢掉这一半味道。
配色
- 比例：大面积中性色（灰/白/黑）+ 少量功能色（高亮蓝）+ 极少量警示色（红）
- 高亮蓝承担：按钮 / 状态节点 / 激活反馈 / 信息重点 / 视觉引导
- 手法：多处背景模糊提升层级对比度
从复刻实现量出的实际色值：
| 色值 | 用途 |
|---|---|
#05a7dc |
青蓝 · 招募 |
#fdfdfb / #fff |
白 · 理智 / 编队 |
#ebeceb |
浅灰 · 基建 |
#424242 |
深灰 · 仓库 |
#e9e9e9 |
浅灰 · 情报 |
#323232 / #989898 |
主文字 / 次文字 |
几何
元素：矩形切割、数据化辅助线、工业感网格背景、参数化图形语言、工程制图式排布； 非对称构图、大面积留白、几何切割分区、文字错位排列、元素偏移式构图。 渊源：包豪斯 / 构成主义 / 瑞士国际主义。
Fluent Design 五要素在方舟的落地
| 要素 | 方舟怎么用 |
|---|---|
| Light 光效 | 手游无 hover，只用静止贴图（签到日历背光、材料奖励光圈） |
| Depth 视差 | 卡片 + 阴影 + 圆角（采购中心、基建） |
| Motion 动效 | 横向滑动、节点渐隐渐现、模块平移、按钮状态反馈、延迟加载 |
| Material 材质 | 模糊纹理 + 半透明 → 高对比组件 |
| Scale 比例 | 区块大小与颜色做明显区分 |
图标三层编码（可直接借鉴的设计思想）
技能图标 5 种颜色区分增益类型；有边框/无边框区分主动/被动； 背景图案不同区分增益/减益/爆发/生存。 即「颜色 + 边框 + 底纹」三层各自承载一维信息，互不干扰。
四、主界面侧栏浮层拆解
配套可运行 demo：ak-home-tab-demo.html（tilt / perspective / depth / opacity 实时可调）。
结构（4 个视差层 + 尘埃 canvas）
layer[data-depth="0"] → 背景（不动）
layer[data-depth="0.01"] → 角色立绘（几乎不动）
layer[data-depth="0.2"] → 左栏 left menu box
layer[data-depth="0.2"] → 右栏 right menu box
canvas#canvas-dust → 尘埃粒子
「浮」的本质 = 菜单(depth 0.2)比立绘(0.01)和背景(0)动得快，产生纵深，不是靠阴影。
三个核心机制
/* ① 对称 3D 倾斜 —— 最标志性的特征，两边往屏幕中心倒 */
.right.menu.box{ transform: perspective(30em) rotateY(-10deg) scale(.9);
float:right; margin: 0 -80px auto auto; } /* 负 margin 溢出屏幕，强化浮出 */
.left.menu.box { transform: perspective(30em) rotateY(10deg) scale(.9); }
/* 左 +10deg / 右 -10deg；scale(.9) 补偿；transform-origin: bottom right */
/* ② pointer-events 三层开关（视差层要能收鼠标） */
.layer{ pointer-events: none; } /* 视差层默认穿透 */
.menu.box{ pointer-events: initial; } /* 只有面板恢复可点 */
/* ③ 半透明材质：方舟统一 opacity .9，从不 1.0 */
右栏分段（pos-1 ~ pos-5）
pos-1 状态栏 → pos-2 理智/作战 → pos-3 编队 team + 干员 member → pos-4 采购 shop + 招募 gamble → pos-5 任务 task + 基建 infrastructure + 仓库 warehouse
其他真实参数
- 图标：全部来自
UI_HOME.png一张雪碧图，background-position+background-size: auto NNNN%（百分比相对元素高度缩放图集）。装饰图标配filter: invert(20%); opacity: .5压暗当背景。 - 细线几何：
.line-right{ width:500px; height:3px; background:#fff; }
⚠️ 踩坑
transform-style: preserve-3d 必须加在 .side 上，否则子面板 hover 的 translateZ(24px)
会被扁平化，「浮起」效果完全出不来。且 opacity / filter / overflow 是 grouping property，
会强制 flat——所以 .side 自身不能设这三个（透明度和裁剪只能放在内层 .panel 上）。
五、透视 vs 倾斜角（数学）
rotateY(θ) |
perspective(d) |
|
|---|---|---|
| 是什么 | 转多少度（元素绕 Y 轴旋转角） | 观察者站在 z = d 处（相机距离） |
| 决定 | 方向感、戏剧性 | 畸变程度、近大远小的强弱 |
| 单独用 | 只变窄（两边等高，呈平行四边形） | 完全没效果（平面无 z 位移） |
关键：θ 是因，d 是放大器。θ = 0 时 d 完全失效。
公式（元素宽 W）
z 位移 z = (W/2) · sin(θ) ← θ 只通过它起作用
近边缩放 s_near = d / (d - z)
远边缩放 s_far = d / (d + z)
近远比 ratio = s_near / s_far = (d + z) / (d - z)
当 z ≪ d 时：ratio ≈ 1 + W·sin(θ)/d → 立体感强度 = W · sin(θ) / d （元素越宽、转得越狠、站得越近，越立体）
方舟的实际落点
右栏 W = 783px，θ = 10°，d = 30em ≈ 480px（font-size 16px 时） → z = 68px，近边 ×1.165、远边 ×0.876，ratio = 1.33，落在「克制」档。 d / W = 0.61 ← 好记的经验值。
选值经验
| 目标 | θ | d | ratio | 感觉 |
|---|---|---|---|---|
| 长焦 | 10° | 60em | 1.15 | 冷静、工程制图感 |
| 方舟 | 10° | 30em | 1.33 | 克制，立体但不畸变 |
| 广角 | 10° | 14em | 1.79 | 戏剧化 |
| 强倾斜 | 20° | 30em | 1.79 | 立面感强 |
θ 区间：0–5° 几乎看不出；8–12° 方舟区间；15–20° 明显；>25° 文字可读性下降。
两个坑
perspective(30em)的 em 是元素自身的 font-size，不是根字体也不是视口。 元素 font-size 一变，透视跟着变。要可控就用 px，或确保该元素 font-size 稳定。perspective()函数 vsperspective属性（消失点不同）：- 函数形式（方舟用的，写在 transform 里）→ 每个元素各自一个消失点（在自身 transform-origin） → 左右两栏对称，各自独立倾斜
- 属性形式（设在父级）→ 所有子元素共享一个消失点 → 像同一台相机拍的，更真实但更戏剧化
- 方舟选函数形式就是为了左右对称。
六、手机端取舍
结论：主交互层不要，氛围层小剂量，材质层全要。
| 继承 ✅ | 放弃 ❌ | 替代 🔄 |
|---|---|---|
| 材质（.9 + blur） | rotateY 透视倾斜 | clip-path 切角（伪 3D） |
| 细线几何 + 冰蓝发丝线 | 陀螺仪 / 鼠标视差 | 多层阴影做「厚度」 |
| 宋体大标题（Noto Serif 900） | hover 浮起（translateZ） | 转场瞬态倾斜（静止回正） |
| 浮窗不跳页 | ||
| 按压态 scale 反馈 |
理由：
- 方舟自己只用倾斜于「主界面入口层」（6-8 个大按钮），进列表/详情立刻回平。
本 App 一打开就是聊天流，没有入口层的奢侈（与
visual-redesign.md的「呼吸感 × 聊天冲突」一致）。 - 手机端两个硬约束：无 hover 无鼠标 → 视差无触发源（陀螺仪
deviceorientation要 HTTPS + 用户授权， 隐私代价不值）；倾斜让可点区域与视觉错位，触屏命中更糟。 - 倾斜代价在小屏被放大：同样 10°，基线更短 → 文字压缩感知更强、可读性掉更多。
七、与本项目已有积累的对照
docs/visual-redesign.md + docs/dock-redesign.md 的既有决策与外部结论高度吻合：
| 已有决策 | 对应方舟结论 |
|---|---|
| 冰蓝 | 高亮蓝强调色 |
| Bender 方向工业字 | Bender（基建英文/数字） |
| 次级系统浮窗不跳页 | 过场衔接降低页面层级 |
| Diegetic 叙事锚点 | Diegetic Interface |
| 四根杠杆（材质/字体/几何/呼吸感） | 完全一致 |
仍缺的：
- [ ] 思源黑体的字重-字距组合没定死（Heavy/-100、Normal/-100、Normal/0 三档）
- [ ] 斜切几何的角度没量化（可用 10° 倾斜 / d/W≈0.6 / ratio 目标 1.3）
- [ ] 图标「三层编码」思想尚未借鉴
附录：关键数值速查
⚠️ 摘录自 arknights-ui-language.md，以它为准——同一组数值别两处手写维护（防「第二份名单」）。
| 项 | 值 |
|---|---|
| 倾斜角 θ | 10°（8–12° 区间） |
| 透视距离 d | ≈ 0.6 × 元素宽度 |
| 近远比（透视强度） | 1.33（克制档 1.22–1.40） |
| 面板不透明度 | 0.9（从不 1.0） |
| 大标题字体 | Noto Serif SC · weight 900 |
| 正文字体 | Noto Sans SC |
| 强调色 | 高亮蓝 #05a7dc（项目已定为冰蓝） |
| 主文字 / 次文字 | #323232 / #989898 |
| 图标图层 | filter: invert(20%); opacity: .5 |