7.8 KiB
7.8 KiB
平台层 UI 去像素化刷新设计
更新时间：2026-04-20
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 - 左上角品牌区允许使用专用像素字标组件或直接使用
Fusion Pixel文本，但仅限品牌 logo，不向正文、按钮、标签扩散 - 品牌 logo 只能复用游戏现有
Fusion Pixel，不允许再引入第二套像素字体文件
主题基准：
- 暗色主题： 底色以深靛蓝、深紫黑为主，高光以亮紫、蓝青为主
- 亮色主题： 底色以暖白、浅粉白、浅橘白为主，强调色以高饱和粉色、橘粉色为主，局部可带少量紫色作装饰
- 平台默认主题使用亮色主题；暗色主题保留为可切换方案，不作为当前默认展示
3.2 排版
- 平台层正文、按钮、说明、功能标签统一使用非像素字体
- 左上角
叙世 / GENARRATIVE品牌字标允许单独做成像素化 logo GENARRATIVE与叙世都优先直接使用游戏内同款Fusion Pixel- 品牌字标默认保持正常像素字观感，禁止再叠双层粗阴影或手动加粗到影响识别
- 品牌字标直接使用字体文件内原字形，不额外做运行时描字、轮廓拼字或伪粗体处理
- 主标题保留明显层级，但不再做像素描边效果
- 微型标签维持高字距英文/中文短标签，用来保留产品感和秩序感
3.3 组件约束
- 面板：使用玻璃卡片，不再用九宫格像素框
- 按钮：使用圆角胶囊按钮或渐变主按钮，不再用像素按钮框
- 图标：优先使用
lucide-react - Tab：移动端底部结构不变，但图标与底座改成非像素风；桌面端切换为左侧纵向导航轨道
- 弹窗：沿用登录页的圆角浮层和半透明遮罩，不再使用像素弹窗边框
- 桌面壳层：首页允许增加顶部工具栏、左侧导航轨、中央内容舞台与右侧趋势面板的组合
- 登录页、绑定手机号、账户弹窗、平台详情、创作生成页、结果页、编辑弹窗都必须共享同一套平台主题 token，禁止再各自写一套独立旧色板
- 创作中心、Agent 工作台、草稿详情抽屉、资产工坊、启动弹窗、生成弹窗这类二三级平台面板必须显式挂载平台主题壳层或平台 remap 容器，禁止直接在局部面板里写死旧深色 modal 底和旧输入框底色
- 平台“我的”页中的“设置”入口必须打开真正的设置面板；账号信息、设备管理、安全状态属于设置面板中的分区，不允许再把账号信息弹层直接充当设置页
- 设置面板必须支持平台亮色 / 暗色主题切换，并复用同一套平台 token 驱动登录页、首页、详情页与二三级面板
- 首页移动端底部 Tab 与桌面侧边导航的图标底座、图标颜色、文字状态必须全部由平台 token 驱动；暗色主题下不得出现过浅底座和错误文字色，亮色主题下不得残留旧灰蓝 inactive 状态
- 首页、存档页、作品详情这类平台主导航与局部 Tab 的 active fill、active shadow、icon shell fill 必须全部来自主题 token；暗色主题禁止继续复用亮色主题的粉橘高光、白色 active 底座
- 创作链路中的吸顶返回栏、目录 Tab 条、搜索工具条也必须走平台亮暗主题 token；暗色主题禁止继续写死暖白渐变或浅粉背景作为顶部衬底
- “我的”页账号主卡必须跟随平台亮 / 暗主题联动，不允许继续写死浅色渐变卡面与
slate系按钮
4. 交互与布局约束
- 移动端保持原有页面布局层级、区块顺序、操作入口位置不变
- 桌面端首页允许参考图示重组为“顶部工具栏 + 左侧纵向导航 + 主 Hero 卡 + 右侧趋势列表 + 下方内容卡组”
- 桌面端的重组只改变视觉排布；自
2026-04-19起平台主入口调整为“首页 / 创作 / 存档 / 我的”，四个入口的操作路径都必须保持清晰稳定 - 移动端优先，底部 tab 与主卡片点击区域不能缩小
- 不在平台 UI 面板里额外堆砌规则说明
- 所有视觉替换必须是局部补丁，不做无必要的大规模结构重写
5. 实现约束
- 平台态从
fusion-pixel-app中隔离，避免被全局像素字体覆盖 - 品牌区禁止新增额外像素字体包；平台层只允许保留现有
public/fusion-pixel.ttf这一份像素字体资源 - 平台态背景不再使用
/UI/Background_fill.png - 新样式优先沉淀为平台专用 class / theme token，避免把游戏内像素 class 改坏
- 平台默认挂载亮色主题 class，旧紫蓝方案保留为暗色主题 class
- 亮色主题需要补齐统一的 overlay、progress track、status pill token，登录弹层与二三级功能面板禁止继续沿用旧深色遮罩与紫蓝强调残留
- 亮色主题下平台壳层与各个 Tab 页的 page stage 必须以暖白底为主，禁止继续让高饱和深粉底或旧深色底透成页面主背景
- 亮色主题下平台主内容区、page stage、移动端底部 Tab 容器都必须使用接近实色的暖白底，禁止继续用高透明度浅色层叠在深底上造成整体发灰
- 平台态中仍保留旧 Tailwind 深色类的历史组件，必须通过平台 remap 容器或平台专用 class 统一收口，不能放任
bg-[#111318]、bg-black/*、bg-white/*这类旧类在亮色主题下直接裸露 - 编辑弹窗保留业务结构与表单逻辑，只替换壳层样式
6. 验收标准
达到以下结果才算完成：
- 除左上角品牌像素字标外，平台首页、详情、登录、绑定手机号、账户弹窗、创作入口、创作结果页不再出现像素字体
- 平台层按钮、面板、关闭按钮、底部 tab 不再依赖像素 UI 素材
- 平台默认展示亮色主题，暗色主题保留为独立主题方案
- 平台层二三级面板、表单、状态卡、弹窗与登录体系不再残留旧金橙 / 青蓝 / 深黑混搭方案
- 平台层世界封面与角色预览不再使用
pixelated渲染 - 游戏内像素 UI 保持原样，不出现误改
- 手机端布局保持稳定，桌面端在参考图方向下完成控制台化重组