5.4 KiB
5.4 KiB
平台层 UI 去像素化刷新设计
更新时间：2026-04-19
1. 目标
本次刷新只覆盖平台层功能 UI，不改游戏内 HUD、战斗、地图、剧情面板等像素风界面。
目标有 5 个：
- 平台层正文与功能信息不再使用像素字体
- 平台层不再使用像素九宫格边框、像素图标、像素背景纹理这类平台 chrome
- 原有紫蓝深色方案沉淀为平台暗色主题
- 新参考图沉淀为平台亮色主题：白色主面板、粉橘主强调、暖白背景、高亮图卡
- 平台默认使用亮色主题，移动端保持现有布局结构不变，桌面端允许在不改变业务入口的前提下重组为控制台式平台壳层
2. 覆盖范围
本次统一按 !gameState.worldType 的平台态处理，覆盖：
- 平台首页
PlatformHomeView - 作品详情
PlatformWorldDetailView - 创作类型弹窗
PlatformCreationTypeModal - 平台创作链路中的生成页、结果页、目录页、编辑弹窗
明确不覆盖：
- 进入世界后的游戏内 UI
- 地图、战斗、剧情面板、角色面板、背包面板等像素 RPG 界面
- 世界内容本身的数据图片、角色主图、场景图等作品内容素材
说明：
- “不再引用像素素材”指平台 chrome 不再依赖像素框、像素按钮、像素关闭图标、像素底纹等 UI 资源
- 作品内容图仍可展示，但平台层不再用
image-rendering: pixelated强化像素感
3. 视觉原则
3.1 风格来源
直接对齐现有登录页和绑定手机号页的成熟样式，并吸收本次参考图的桌面端气质：
- 暗色主题：顶部与边缘的紫蓝径向高光 + 深色纵向渐变背景
- 亮色主题：暖白控制台外壳 + 粉橘主强调 + 轻紫细节高光
- 大圆角卡片
- 半透明玻璃质感
- 平台正文与功能信息统一使用
Inter + Noto Serif SC
主题基准：
- 暗色主题： 底色以深靛蓝、深紫黑为主，高光以亮紫、蓝青为主
- 亮色主题： 底色以暖白、浅粉白、浅橘白为主，强调色以高饱和粉色、橘粉色为主，局部可带少量紫色作装饰
- 平台默认主题使用亮色主题；暗色主题保留为可切换方案，不作为当前默认展示
3.2 排版
- 平台层正文、按钮、说明、功能标签统一使用非像素字体
- 主标题保留明显层级，但不再做像素描边效果
- 微型标签维持高字距英文/中文短标签，用来保留产品感和秩序感
3.3 组件约束
- 面板：使用玻璃卡片，不再用九宫格像素框
- 按钮：使用圆角胶囊按钮或渐变主按钮，不再用像素按钮框
- 图标：优先使用
lucide-react - Tab：移动端底部结构不变，但图标与底座改成非像素风；桌面端切换为左侧纵向导航轨道
- 弹窗：沿用登录页的圆角浮层和半透明遮罩，不再使用像素弹窗边框
- 桌面壳层：首页允许增加顶部工具栏、左侧导航轨、中央内容舞台与右侧趋势面板的组合
- 登录页、绑定手机号、账户弹窗、平台详情、创作生成页、结果页、编辑弹窗都必须共享同一套平台主题 token，禁止再各自写一套独立旧色板
- 平台“我的”页中的“设置”入口必须打开真正的设置面板；账号信息、设备管理、安全状态属于设置面板中的分区，不允许再把账号信息弹层直接充当设置页
- 设置面板必须支持平台亮色 / 暗色主题切换，并复用同一套平台 token 驱动登录页、首页、详情页与二三级面板
4. 交互与布局约束
- 移动端保持原有页面布局层级、区块顺序、操作入口位置不变
- 桌面端首页允许参考图示重组为“顶部工具栏 + 左侧纵向导航 + 主 Hero 卡 + 右侧趋势列表 + 下方内容卡组”
- 桌面端的重组只改变视觉排布；自
2026-04-19起平台主入口调整为“首页 / 创作 / 存档 / 我的”，四个入口的操作路径都必须保持清晰稳定 - 移动端优先，底部 tab 与主卡片点击区域不能缩小
- 不在平台 UI 面板里额外堆砌规则说明
- 所有视觉替换必须是局部补丁，不做无必要的大规模结构重写
5. 实现约束
- 平台态从
fusion-pixel-app中隔离，避免被全局像素字体覆盖 - 平台态背景不再使用
/UI/Background_fill.png - 新样式优先沉淀为平台专用 class / theme token，避免把游戏内像素 class 改坏
- 平台默认挂载亮色主题 class，旧紫蓝方案保留为暗色主题 class
- 亮色主题需要补齐统一的 overlay、progress track、status pill token，登录弹层与二三级功能面板禁止继续沿用旧深色遮罩与紫蓝强调残留
- 编辑弹窗保留业务结构与表单逻辑，只替换壳层样式
6. 验收标准
达到以下结果才算完成：
- 平台首页、详情、登录、绑定手机号、账户弹窗、创作入口、创作结果页不再出现像素字体
- 平台层按钮、面板、关闭按钮、底部 tab 不再依赖像素 UI 素材
- 平台默认展示亮色主题，暗色主题保留为独立主题方案
- 平台层二三级面板、表单、状态卡、弹窗与登录体系不再残留旧金橙 / 青蓝 / 深黑混搭方案
- 平台层世界封面与角色预览不再使用
pixelated渲染 - 游戏内像素 UI 保持原样，不出现误改
- 手机端布局保持稳定，桌面端在参考图方向下完成控制台化重组