跳转至

Kagari (篝火) - UI/UX 设计指南

这份文档是《审美与视觉设计指南》的延伸，专注于将美学理念转化为具体的用户界面 (UI) 和用户体验 (UX) 设计。

1. UX 核心哲学：为沉浸而设计

Kagari 的 UX 核心只有一个词：沉浸 (Immersion)。

我们的设计目标不是做一个“工具”或“应用”，而是创造一个“世界”。用户体验必须是无缝的、直观的，并且尽可能地“隐形”，让玩家忘记他们正在使用一个软件，而是完全专注于故事本身。

2. 三大 UI/UX 原则

  1. “安静”的设计 (Quiet Design):

    • 界面元素（按钮、面板、菜单）在不需要时，绝不能喧宾夺主。它们应保持低调、半透明，或在不使用时自动隐藏，让玩家的注意力始终聚焦于故事文本和AIGC插图。

  2. 氛围优先 (Atmosphere First):

    • 应用本身必须是“活的”。Kagari 不应该是一个静态的白板。它必须从启动的那一刻起，就通过动态视觉（动画）和环境音效（BGM、SFX）将玩家包裹起来。

  3. 零心智负担 (Zero Mental Load):

    • TRPG 最大的门槛之一是“记笔记”。Kagari 的 UX 必须通过“玩家 Agent”等功能，彻底消除玩家的记忆负担。所有信息（线索、人物、地点）都应被自动捕获并优雅地呈现，让玩家 100% 专注于扮演和决策。

3. 核心界面布局

Kagari 作为 PWA，主要由两大界面构成：

3.1. 启动/主屏 (The "Campfire" Screen)

这是用户打开 PWA 时看到的第一个画面。它不是一个传统的“菜单”，而是一个全屏的动态氛围场景。

  • 视觉：
    • 全屏背景： 基于 Logo 美学，实现一个“美如画”的星空背景。
    • 篝火： 屏幕中央是动态的火焰（可通过 Lottie 动画或 Shader 实现），有微妙的烟火颗粒上升。
    • 剪影： 几个黑色剪影围坐火旁，作为前景。
  • 交互：
    • 视差效果 (Parallax)： 背景、篝火、剪影应在不同图层，随设备陀螺仪（如果可能）或鼠标移动产生微妙的视差，营造深度感。
    • 菜单： “开始新游戏”、“读取进度”、“设置”等选项，应以极简文本的形式半透明地叠加在场景上，而不是用传统的 UI 按钮。
  • 声音：
    • 默认播放**“柴火燃烧”**的环境音效 (SFX)。

3.2. 游戏界面 (The "Play" Screen)

这是游戏进行时的核心界面。它被划分为几个功能区域，所有区域都遵循“安静设计”的原则。

(这是一个粗略的布局示意图)

A. 叙事窗口 (Narrative View) - [核心区域]

  • 用途： 显示 GM 的旁白、NPC 对话，以及最重要的 AIGC 插图。
  • 设计： 这是屏幕上最大、最干净的区域。
  • AIGC 插图： 当 show_image 指令被触发时，插图会淡入显示在该区域，可能作为背景，也可能在文本上方。
  • 文本流： 故事文本会像即时消息一样逐行滚动出现，营造“正在发生”的感觉。

B. 交互面板 (Interaction Panel) - [情景区域]

  • 用途： 显示玩家的选项按钮 ({"type": "options"} 指令)。
  • 设计：
    • 这是一个情景面板，只在需要玩家输入时才出现，否则完全隐藏。
    • 按钮应采用与整体美学一致的、圆润的、半透明的样式。
    • 点击选项后，该面板应平滑地淡出，让叙事窗口重新成为焦点。

C. 仪表盘 (The Dashboard) - [辅助区域]

  • 用途： 容纳所有由“玩家 Agent”自动生成的辅助信息。
  • 设计： 这是“安静设计”的重点。它可能是一个可折叠的侧边栏，或者屏幕底部的多个页签。它绝不能占用主叙事窗口的空间。
  • 组件：
    1. [人物] 页签： 以“卡片”形式列表显示所有已遇见的 NPC 及其（玩家已知的）关键信息。
    2. [地点] 页签： 显示玩家已解锁的地点。
    3. [物品] 页签： 以“网格”形式显示玩家获得的道具，鼠标悬停可查看描述。
    4. [线索] 页签： (推理游戏) 关键区域，列表显示所有证物和证言。

D. 宏观视图 (Macro View) - [全局区域]

  • 用途： 访问地图和剧情线。
  • 设计： 通常隐藏在一个全局菜单（例如一个“暂停”或“Kagari Logo”按钮）后面。
  • 地图界面 (reveal_map)：
    • 打开一个全屏模态窗口，显示“战争迷雾”下的世界地图。
    • 已揭示的区域会高亮显示。
  • 剧情线界面 (create_checkpoint)：
    • 打开一个时间轴或分支树视图。
    • 玩家可以清晰地看到自己的进度，并点击任意历史“检查点”。
    • 点击后，系统应弹出确认框：“你确定要回档到‘击败史莱姆王’吗？当前进度将丢失。”

4. 动画与过渡 (Animation & Transitions)

动画是营造“沉浸感”的粘合剂。

  • 原则： 平滑、微妙、快速。避免花哨或缓慢的动画。
  • 文本： 文本应逐字或逐行出现，而不是瞬间“闪现”。
  • 面板： 所有面板（选项、仪表盘）的出现和消失都应使用平滑的淡入淡出 (Fade) 和滑动 (Slide) 效果（例如，从底部滑入，从侧边划出）。
  • AIGC 插图： 绝不能“跳出”，必须使用交叉淡入 (Cross-Fade) 效果平滑地替换上一张图或背景。

5. 声音设计 (Sound Design)

  • 环境音 (Ambient)： 贯穿始终的“篝火燃烧”声，是应用的听觉底色。
  • BGM： 根据 GM 指令平滑地交叉淡入淡出，切换时绝不能生硬中断。
  • UI 音效：
    • 点击： 一个柔和的、清脆的“点击”声。
    • 新消息： 一个非常微妙的“气泡”声或“打字机”声，暗示新文本的出现。
    • 新线索/物品： 一个积极的、短促的“提示音”，让玩家意识到“玩家 Agent”记录了新东西。