🏮 《同福客栈挂机游戏》美术风格与 UI 交互规范白皮书 (v1)

说明：本规范整合了项目现有的美术风格指南、移动端竖屏规则书、移动端竖屏 UI 迭代规范以及 Web 横屏 UI 迭代规范，作为后续所有 UI 迭代、美术补图、切图、AI 出图及资产验收的唯一约束标准。

💖 核心设计哲学：同福客栈是一个有爱的家

在进行任何 UI 交互与美术风格设计时，我们必须始终围绕并贯彻以下核心设计语言：

1. 多周目江湖闯荡与养成经营： 玩家以“上帝视角”进入同福客栈，不仅是在经营一家客栈，更是在这片市井江湖中，陪伴、培养每一个鲜活的 NPC。
2. 参与故事，了解爱恨情仇： 游戏的核心驱动力是“人”与“故事”。UI 界面和美术资产不应是冷冰冰的数值面板，而应成为玩家参与角色故事、感受他们喜怒哀乐的媒介。
3. “这里不仅仅是客栈，这里是一个有爱的家”： 这是我们最核心的灵魂。同福客栈是江湖浪子们的避风港。每一个角色（无论是主角还是稀客）都是有血有肉的家人，每一个故事都带有温度。
   • 视觉上：要通过暖木色调、生活痕迹、细节器物来烘托“家”的温馨与烟火气。
   • 交互上：要突出角色之间的羁绊、互动与情感回馈，让玩家在每一次点击、每一次对账、每一次日常琐事中，都能感受到角色的生命力与人情味。

第一部分：美术风格规范

1. 美术定位

• 核心气质：“带江湖味的客栈经营轻喜剧”。
• 视觉调性：写实人物基底 + 轻喜剧表情关系 + 暖木色客栈空间 + 市井烟火气 + 手作感道具图标。
• 题材边界：聚焦于客栈经营、七侠镇日常与轻江湖。坚决杜绝修仙、玄幻、重甲战争、赛博国潮或现代摄影棚妆造。

2. 资产风格细则

• 人物头像：
  • 核心：写实五官、轻戏剧化表情、强身份识别（发髻、头巾、粗布围裙等）。
  • 构图：1:1 比例（兼容 96x96 / 48x48），正面或四分之三侧脸胸像，背景虚化。
  • 光线：客栈暖灯、窗边暖光、室内烛火为主，保留脸部阴影层次。
• 场景底图：
  • 核心：木结构 + 灯火 + 器物生活痕迹。
  • 构图：16:9 比例（1920x1080），中央和中下区域预留 UI 玩法层，左右边缘留白。
  • 模块划分：
    • 大堂：柜台、桌位、通行动线清晰，暖木空间。
    • 后厨：灶台、案板、锅具，火气与烟火味，拒绝脏乱。
    • 后院：水井、柴垛、晾晒痕迹，客栈后勤感，拒绝精致园林。
    • 账房：账册、算盘、小灯、木桌，安静的管理感。
• 道具图标：
  • 核心：单个物件插画、透明底、轻手绘质感、道具即功能。
  • 规格：256x256 画布，主体占 70% - 82%。
  • 材质：木（算盘/招牌）、纸（账单/菜谱）、铜（铜钱/令牌）、布（包袱/抹布）、陶（碗/罐）。

3. 核心配色方案

• 客栈木棕：#5A3A27（空间底色）
• 灯火金棕：#C69045（主气氛、高亮）
• 朱砂暖红：#A74935（局部高亮、点缀）
• 靛布灰蓝：#465969（服装、次要背景）
• 宣纸米白：#E6D7BF（纸张、文字底色）
• 夜色墨褐：#231B18（夜间、暗部）

第二部分：UI 交互规范 (Design Tokens)

为了保证移动端竖屏（360px 宽度基线）与 Web 横屏（1280px+）的视觉一致性，统一使用以下 Tokens：

1. 间距 (Spacing Tokens)

• space-1 (4px)：最小间距（图标与文字、Chip 内边距）。
• space-2 (8px)：基础间距（按钮内边距、列表项、表格行）。
• space-3 (12px)：轻量分隔（卡片内段落、组块之间）。
• space-4 (16px)：标准间距（Section 间距、Sheet 内容间距）。
• safe-bottom (env(safe-area-inset-bottom))：底部系统安全区适配。

2. 圆角 (Radius Tokens)

• radius-1 (4px)：极小圆角（标签、微型 Chip）。
• radius-2 (8px)：默认圆角（普通卡片、列表项、按钮）。
• radius-3 (12px)：中层圆角（Sheet、抽屉、浮层）。
• radius-4 (16px)：大容器圆角（Modal 弹窗、Web 模块壳）。
• radius-pill (9999px)：胶囊圆角（状态条、筛选 Chip）。

3. 字体与字号 (Typography Tokens)

• 字体族：
  • 品牌/标题：Noto Serif SC / Playfair Display（国风题名气质）
  • 正文：Noto Serif SC（阅读感）
  • 数值/辅助 UI：Inter（现代清晰）
• 字号阶梯：
  • text-title (16px)：主标题（竖屏标题、模块标题）。
  • text-body (13px / 14px)：正文（说明、列表正文、日志）。
  • text-caption (12px)：次级说明（时间、状态、辅助信息）。
  • text-micro (10px / 11px)：极短状态（徽章、角标、极短单位）。严禁作为常规正文。
  • text-metric (18px)：核心数值（铜钱、声望等关键指标）。

4. 层级 (Z-index Tokens)

• z-base (0)：基础内容层。
• z-header (20)：顶部状态层（HUD 顶栏）。
• z-dock (40)：底部交互层（主动作、Dock、轮盘入口）。
• z-sheet (50)：底部 Sheet 层（模块抽屉、事件弹窗）。
• z-modal (60)：模态层（确认框、大弹窗）。
• z-toast (70)：临时提示层（Toast、警报广播）。

第三部分：双端适配与交互规则

📱 移动端竖屏规则 (360x780 基线)

1. 一屏闭环，零滚动：首页严禁页面级纵向滚动。所有长列表、管理模块必须收纳进 Sheet、抽屉或二级页。
2. 黄金比例布局：
   • 顶部 15%：HUD 顶栏（店名、铜钱、声望、清洁、安防）。
   • 中部 40%：大堂沙盘（8 张桌子必须 4x2 网格首屏完整可见，不使用装饰大图）。
   • 中下部 20%：江湖消息摘要（常驻 3-4 行，点击展开全文）。
   • 底部 25%：主动作栏 + 轮盘浮窗（右下角安全区，可拖拽但必须 clamp 在屏内）。
3. 智能主动作：底部只保留 1 个主动作 + 2 个次动作。主动作根据当前状态自动决策，优先级为：飞贼点穴 -> 洒扫清洁 -> 叫客入座 -> 催菜/翻台 -> 对账。
4. 触控友好：any 按钮和可点卡片的最小触达高度固定为 44px。

💻 Web 横屏规则 (1280px+ 基线)

1. 双栏分工：左侧为核心经营视口（InnCourt），右侧为控制台（可折叠/展开/隐藏）。
2. 无限画布交互：核心视口支持鼠标滚轮缩放（Zoom）、按住拖拽平移（Pan）及一键复位（Reset）。
3. 渐进式信息披露：卡片默认只展示核心属性与决策动作。解释性文案、计算公式、历史说明一律收纳进统一的 Tooltip 或侧边抽屉。
4. 卡片高效率：食谱、行囊等模块在桌面端采用响应式 Grid 网格或 Row 横向布局，提高单屏信息密度。

第四部分：文本与消息分级规范

1. 动态文案标准化：所有动态拼接的文本（如房号、资源、奖励）必须通过统一的 Formatter 生成，严禁在 JSX 中直接拼接，确保括号成对、标点统一。
2. 防溢出约束：
   • 所有 Flex 子项必须补齐 min-width: 0。
   • 单行文本溢出使用 text-overflow: ellipsis。
   • 中文长词使用 word-break: keep-all; overflow-wrap: anywhere;，严禁将中文文案压成单字竖列。
3. 消息分级分流：
   • P0（紧急）：全局 Toast / 顶部广播，第一时间抢占注意力。
   • P1（常规）：单条摘要，淡入淡出，不抢焦点。
   • P2（历史）：收纳进日志 Drawer，支持筛选与搜索。

第五部分：UI 与美术验收清单

1. 美术资产验收

• [ ] 同福辨识度：资产是否一眼属于“同福客栈”而不是通用古风？
• [ ] 色调统一：是否保留暖木色、市井气和轻喜剧基调？
• [ ] 画风一致：是否与现有 tongfu-main-banner、tongfu-pack-02 保持同一世界观？
• [ ] 题材合规：是否避免了仙侠、宫廷、玄幻、赛博、日漫化漂移？
• [ ] 材质日常：服装和道具是否以布、木、铜、纸、陶等日常材质为主？
• [ ] 小尺寸可读：图标在小尺寸（如 24x24）下是否仍能保持高识别度？

2. UI 交互验收

• [ ] 无横向溢出：在 360px 宽度下完全无横向滚动条。
• [ ] 无截断遮挡：底部导航 and 主动作不压住系统安全区，无文字重叠或截断。
• [ ] 字号合规：主信息不低于 13px，微字号（10px/11px）仅用于徽章或极短状态。
• [ ] 长文本换行：长文本不出现单字截断，中文长词优先换行，不压成单字竖列。
• [ ] 动态文本规范：动态文本括号成对完整，数值单位统一。
• [ ] 圆角与层级统一：同级组件圆角一致，z-index 严格遵循 Token 规范。
• [ ] 竖屏无页面滚动：360x780 竖屏首页无页面级纵向滚动条，8 桌完整可见。