舟味设计
ZHOU FLAVOR DESIGN
明日方舟实证设计系统 · 分页演示
第一部分：六大布局模板 ｜ 第二部分：六种动效行为
design-system.md · components.md · tutorial.md · self-check.md · animation.md
ZHOU-FLAVOR-DESIGN
T1 简历卡参考：海沫干员介绍 · 信息行/星级chip/三栏能力区用途：产品/人物/版本简介页
T2 品牌KV参考：寒武纪 NO FEAR OF / EPOQUE · 巨型几何+右侧白panel用途：标题定调、品牌宣言
T3 主界面参考：游戏主界面浮窗系统 · 大数字panel+青色操作条用途：能力总览、dashboard
T4 关卡地图参考：WD-3 纸面等高线图 · OPERATION节点+双描边路线用途：章节路线、目录
T5 毛玻璃弹窗参考：精炼溶剂详情 · 强模糊背景聚焦白卡用途：单项能力聚焦
T6 专题页参考：主题曲破碎日冕 · 全灰阶+白框画卡用途：版本专题、收尾
行为一 · 横移淡入
SLIDE-IN FADE
新信息块自右 20~40px 滑入并淡入。对应游戏内"升级"动画。信息出现一律用这个，不用上浮。
来源官方截图 ×26 逐张实证
思维信息设计 · 界面思维
模板6 大布局 · 简介到收尾
350ms · cubic-bezier(.25,.1,.25,1) · 一帧 2px overshoot（机械咬合）
行为二 · 人物位移
SUBJECT DISPLACEMENT
主体元素在画布内挪位腾出空间，新信息原地填充——对应"升阶/合卡/查看背景故事"。换布局不换幕。
舟味设计
「先列信息，再想画面。」
标题挪位让出的空间，由内容卡原地补上——观众始终在同一个 canvas 里。
500ms（布局重组档）· 位移走直线，模拟机械导轨
行为三 · 毛玻璃覆盖
FROSTED GLASS COVER
背景模糊加深，白卡聚焦；关闭后模糊消退、下层原地未动——玩家"窥"见下层，从未离开页面。
来源官方截图 ×26 逐张实证
思维信息设计 · 界面思维
模板6 大布局 · 简介到收尾
防 AI 味六条测试：克制 / 信息 / 界面 / 景深 / 字体 / 去科技风。任何一条不过就回改。
面板 350ms（落位 1.35 回弹曲线）· 模糊层 500ms
行为四 · 数值向右展开
EXPAND RIGHT
数字/文本从锚点向右展开（width 0→auto），不是淡入——对应"查看属性详情"。数据强调专用。
6大布局模板 · 简介到收尾
信息设计 · 界面思维 ＋ 全局统一缓动，四档时长 200/350/500/800ms
350ms · max-width 0→auto + overflow hidden
行为五 · 镜头联动
CAMERA LINKAGE
换"景"时整体透视微移，UI 随镜头展开——运镜与动效绑定（终末地将其推到极致）。配合视差分层。
镜头 800ms · scale 1.0→1.045 + translate · 浮窗随镜头滑入
行为六 · 呼吸感粒子
AMBIENT PARTICLES
呼吸感来自尘埃与光效（面板光线变化、飘散尘埃），不是元素漂移；理想状态响应输入。移动鼠标拂开尘埃。
26 颗 · r 0.8~2.6 · 上飘 · 鼠标 95px 内拂开 · 透明度呼吸闪烁
交付前
过 self-check.md 六条测试：
克制 · 信息 · 界面 · 景深 · 字体 · 去科技风
任何一条不过就回改，不许带病交付。
ZHOU-FLAVOR-DESIGN · SELF-CHECK