43 lines
3.0 KiB
Markdown
43 lines
3.0 KiB
Markdown
# Warframe 主题美术重构发现
|
||
|
||
## 用户纠正
|
||
|
||
- “参考”不等于只提取颜色，也不等于把原图替换掉。
|
||
- 用户要的是完整主题：图片必须真实显示并参与空间构图，界面组件也必须继承画作的视觉语言。
|
||
- 简单把几张图并排放置同样不合格；需要连续构图、明确主次和组件级主题表达。
|
||
|
||
## 四张图的可用构图信息
|
||
|
||
- 原始荒野图：暖灰、焦土橙、黑色角色剪影，主体居中且披风向左展开；适合作为最大主画面，
|
||
保留人物完整轮廓，允许轻微裁切上下边框但不能切断头部和武器。
|
||
- 红色群像：太阳位于中上部，四个角色集中在中下部，左右有蓝色闪电和青色能量；适合做
|
||
横向战场切片，裁切范围以 18%–82% 高度为主，保留太阳和中央角色。
|
||
- 冷蓝近景：单角色几乎填满纵向画幅，肩部橙红能量点是天然焦点；适合做窄幅前景切片，
|
||
`object-position` 稍偏上，不能裁掉头肩轮廓。
|
||
- The Sacrifice：暗青黑背景、群像围绕纵向金色中轴，底部自带标题；适合做深景基底和
|
||
暗金骨架来源，完整展示时保留底部标题，窄切片时只取金色中轴和上半群像。
|
||
|
||
## 设计方向
|
||
|
||
- 欢迎态建立一个连续的 `welcome-visual` 舞台，四张图用不规则网格、遮罩和层级共同组成
|
||
视觉锚点，不使用四张独立卡片的相册布局。
|
||
- 文案放在独立黑曜石表面，利用暗金竖向骨架与冷青能量短线连接视觉舞台，不直接压在
|
||
高细节画面上。
|
||
- 组件语言采用细边骨架、切角、双层边缘和克制能量光；正文气泡保持实色，避免重回费眼。
|
||
- 使用本地资源避免 Displate 热链失效；图片下载前的临时副本已在 `/tmp` 验证可读。
|
||
|
||
## 首轮真实浏览器复核
|
||
|
||
- 当前环境实际存在 Snap 内的 Firefox 二进制；绕过 `/usr/bin/firefox` 的 Snap 包装层后，
|
||
可以对本地临时预览页执行 1440×900、1024×768、390×844 的真实截图，不再只做静态推算。
|
||
- 首次集成暴露出确定性 DOM/CSS 契约错误：HTML 使用孤立 `--wasteland` 等类，CSS 使用
|
||
`.warframe-shard--wasteland`，导致图层没有尺寸和位置；已修正为完整 BEM 类名。
|
||
- 1440×900 最终构图显示四张图、侧栏、文本板和输入区，已经形成暗金骨架、冷青能量与
|
||
赤红战场的连续视觉场，不再是单图或纯换色。
|
||
- 原 980px 断点在 1024px 扣除 280px 侧栏和消息 padding 后会导致两列最小宽度溢出；
|
||
已将堆叠断点提前到 1060px。
|
||
- 1024/390 首帧截图处于 `warframeShardReveal` 的 opacity=0 阶段，说明首屏约 0.6 秒会先显示
|
||
黑色骨架再显示图片；需要用禁用动画的临时预览再次检查最终响应式状态，并评估是否缩短首屏延迟。
|
||
- 本地服务对 PNG 返回 `image/png`，但三张新增 JPEG 初次返回 `application/octet-stream`；
|
||
浏览器截图证明仍能解码，但为避免严格客户端/代理不稳定，静态 MIME 映射需补 `.jpg/.jpeg`。
|