ZHOU-FLAVOR-DESIGN · EVIDENCE-BASED SKILL
舟味设计
ZHOU FLAVOR DESIGN
把明日方舟官方 UI 与平面语言复刻为可复用设计系统：先列信息、再谈画面；组件直接抄、不重新发明；交付前过自检。
「先列信息，再想画面。」
五条判断标准 §0
01克制黑白灰低饱和基座，亮色只做小面积点睛，绝不整面高饱和。
02信息设计骨架chip 标签、大数字配小注释、细下划线信息行、层级分明的 panel。
03工业质感三件套半调点网格 / 等高线 / 警戒斜纹，按场合使用，通常一图 0~1 种。
04景深毛玻璃强模糊背景 + 白色浮窗 + 投影，多层 canvas 而非单层平面。
05字体系统思源黑体 Heavy 负字距大标题 + 宋体衬线装饰 + 等宽/外语字点缀。
设计令牌 §1 常量
基座近黑
#141517深底蓝黑
#171B26基座浅灰
#E9EAEC品牌青
#2FA6DE警戒红
#E14A4A警戒黄
#F2C14E描边灰
#C9CCD1正文灰
#6A6F78规则：亮色小面积（青 ≤4 处、红 ≤3 处且 ≤32px）；阴影用 feDropShadow dy6/std10；颗粒 ≤0.12。字距：中文大字负字距（-4~-8），拉丁副标宽字距（+8~+12）。
六大布局模板 templates/ · 可直接起稿
V2_01
V2_02
V2_03
V2_04
V2_05
V2_06组件库 components.md · 直接抄
OPERATION
当前选中
边框字段标签
来源官方截图 ×26 逐张实证
思维信息设计 · 界面思维
6
大数字 panel · 900 负字距
全页唯一大面积亮色
信息骨架chip·信息行·大数字，各司其职
布局模板六大模板覆盖全部场景，直接起稿
动效 · 同一画布 animation.md
核心原则：永远不换画布。底层场景持续存在，信息层在上面进出——禁止整幕黑/白场重来。
- 横移淡入新信息块自右 20~40px 滑入，350ms，一帧 2px 顿挫
- 人物位移主体挪位腾出空间，新信息原地填充（500ms）
- 背景不变只替换前景层，底层完全静止
- 毛玻璃覆盖背景模糊加深聚焦，关闭后下层原地未动
- 数值向右展开width 0→auto + clip，不是淡入
- 镜头联动整体透视微移 scale 1.0→1.03，UI 随镜头展开
统一缓动 cubic-bezier(.25,.1,.25,1) · 时长四档 200 / 350 / 500 / 800ms · 呼吸感来自尘埃光效（响应输入），不是元素漂移
打开分页动效演示 →
反面清单 防 AI 味
整面高饱和撞色
大标题正字距
单层平面海报构图
抽象粒子铺满当科技感
深色底 + 六边形 + 四角括号 + 等宽字 = 假科技 HUD
霓虹发光、玻璃拟态重高光
均质装饰、无信息层级
每张图叠满条纹与网格