3.0 KiB
3.0 KiB
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。