UI 设计规范

AI World Sim 的完整界面设计规范。统一所有 UI 组件、交互、视觉风格。

设计原则

1. 暗黑像素风 — 深色背景 + 像素字体 + 像素阴影，整体氛围沉稳而有温度
2. 可读性优先 — 文字在所有条件下必须清晰可读
3. 宁静美学 — 不闪烁、不激进，动画克制优雅
4. 玩家是观察者 — UI 以阅读为主，输入极少
5. 移动友好 — 支持平板，v1 不支持手机

风格定位

• 风格：暗黑像素风（Dark Pixel Art）
• 参考游戏：Stardew Valley、Eastward、Animal Crossing、RimWorld
• Tile：32×32 px
• 视角：俯视角 Top Down
• 光源：统一左上 45°

调色板

变量	色值	用途
--bg-primary	#0b1220	主背景（深蓝黑）
--bg-secondary	#1a2332	面板背景
--bg-tertiary	#243044	卡片/悬浮背景
--text-primary	#f1f5f9	主文字（亮白）
--text-secondary	#cbd5e1	次文字
--text-muted	#94a3b8	弱化文字
--accent	#7c9885	主强调色（森林绿）
--accent-warm	#f4a460	暖强调色（琥珀/金币）
--grass	#7cba3d	草地/成功/在线
--water	#5b9bd5	水面/信息
--wood	#8b5a2b	木质/边框/分割线
--red	#cd5c5c	警告/低血
--purple	#9370db	涌现事件
--cyan	#20b2aa	位置/标注
--border	rgba(255,255,255,0.1)	边框

字体

用途	字体	大小	粗细
标题	Zpix（中文）/ Press Start 2P（英文）	16px	700
正文	Zpix / Inter, system-ui	14px	400
日记	Zpix / Lora, serif	14px	400
代码	JetBrains Mono, monospace	13px	400

像素字体 Zpix 是项目核心字体，用于所有 UI 文字，保证像素风一致性。 正文 fallback 到 Inter 系统字体，日记用 Lora 衬线体增加文学感。

圆角与阴影

• 圆角：4px（像素风小圆角）
• 阴影：3px 3px 0 rgba(90,62,40,0.3)（像素阴影）
• 边框：1px solid --wood

---

主要 UI 面板

1. 世界状态栏（顶部）

┌─────────────────────────────────────────────────────────┐
│ 🕐 Day 47, 18:32 · Autumn · Year 1   ☁️ Overcast    🟢 │
└─────────────────────────────────────────────────────────┘

• 显示：游戏内时间、季节、天气、在线状态
• 高度：48px
• 背景：--bg-secondary

2. 世界地图（中央）

Canvas 像素风世界地图，由 PixiJS 渲染。

• 核心交互区域
• 支持拖拽平移、滚轮缩放（0.5x ~ 3x）
• 点击建筑/NPC 触发右侧面板

3. NPC 面板（右侧，点击 NPC 触发）

┌─────────────────────────────┐
│ 👤 Margaret Caldwell         │
│ Age 58 · Retired Librarian   │
│                              │
│ HP ████████░░ 80/100         │
│ 📍 Currently: The Pub        │
│ 😊 Content                   │
│                              │
│ ─── Latest Diary ───         │
│                              │
│ "It rained most of the       │
│  morning..."                 │
│                              │
│ [Read full diary →]          │
│ [Leave suggestion]           │
└─────────────────────────────┘

信息层级：

1. 头像 + 名字 + 职业 + 年龄
2. HP 条（像素风格进度条）
3. 当前位置 + 情绪状态（emoji + 文字）
4. 最新日记摘要
5. 操作按钮

情绪状态图标：

• 😊 开心 / 😢 难过 / 😠 生气 / 😴 疲劳 / 💤 熟睡 / 💖 恋爱 / 🤔 思考

4. 建筑面板（右侧，点击建筑触发）

┌─────────────────────────────┐
│ 🍞 Bakery                    │
│ Open: 06:00–14:00            │
│                              │
│ 👤 Currently inside:         │
│  • Anna Schmidt (Baker)      │
│  • Lukas Schmidt (Helper)    │
│                              │
│ 📊 Today's visits: 24        │
└─────────────────────────────┘

5. 日记阅读面板（模态框/全屏）

┌─────────────────────────────────────────┐
│ 📖 Margaret's Diary — Day 47            │
│                                         │
│ "It rained most of the morning. I       │
│  stayed at the pub and read a book.     │
│  Lukas came by around noon, we talked   │
│  about the new library project..."      │
│                                         │
│                              [Close]    │
└─────────────────────────────────────────┘

• 日记文字用衬线体（Lora / Zpix）
• 背景用 --bg-tertiary，营造"翻阅笔记本"的感觉
• 支持翻页（如果日记很长）

6. 建议输入框（模态框）

┌─────────────────────────────┐
│ 💬 Suggest something to       │
│    Margaret                   │
│                              │
│ ┌──────────────────────────┐ │
│ │ There's a flower stall   │ │
│ │ near the bakery.         │ │
│ └──────────────────────────┘ │
│                              │
│ [Cancel]      [Send]         │
└─────────────────────────────┘

• 输入框：暗色背景，像素边框
• 按钮：像素风格，hover 上浮 2px

---

布局

Desktop（> 1024px）

┌──────────────────────────────────────────────┐
│  Top Bar (Time / Weather / Status)            │
├────────────┬─────────────────────┬────────────┤
│            │                     │            │
│  Minimap   │   World Map         │  Side      │
│  (left)    │   (center)          │  Panel     │
│            │                     │  (right)   │
└────────────┴─────────────────────┴────────────┘

Tablet（640–1024px）

• 侧面板变为底部抽屉（Bottom Sheet）
• 小地图隐藏，用全屏地图替代

页面结构

• 顶部：Header（标题 + 登录/注册）
• 中间：WorldBar（世界状态）
• 内容：Tab 切换（MAP / CHARS / EVENTS）
• 底部：导航栏（5 个按钮）

---

核心组件清单

组件	说明
WorldBar	世界状态栏（时间/季节/LIVE）
WorldMap	Canvas 像素风世界地图
CharCard	角色卡片（HP 条/职业/年龄/情绪）
EventList	事件流（游戏内时间排序）
DiaryPanel	日记阅读面板
SuggestionForm	玩家建议输入
LocationPanel	建筑信息面板
AuthPanel	登录/注册面板
CreatePanel	创建角色面板
MiniMap	小地图（左侧面板）

---

动画

面板过渡

.panel-enter-active,
.panel-leave-active {
  transition: all 200ms ease;
}

.panel-enter-from {
  opacity: 0;
  transform: translateX(20px);
}

特效

• 闪烁动画（blink 1.5s）
• 淡入动画（fadeIn 0.3s）
• 悬停上浮（hover-lift 2px）
• 像素阴影（pixel-shadow）

---

空状态

每个面板都优雅处理"无数据"状态。

┌─────────────────────────────┐
│ 📖                          │
│ Margaret hasn't written      │
│ any diary entries yet.       │
│                              │
│ Check back tomorrow.         │
└─────────────────────────────┘

---

无障碍

键盘

• ✅ Tab 遍历所有可交互元素
• ✅ Enter/Space 激活按钮
• ✅ Escape 关闭面板
• ✅ 方向键平移摄像机

屏幕阅读器

• ✅ 所有图标有 aria-label
• ✅ 所有图片有 alt

色彩

• ✅ 所有状态指示器同时使用图标 + 文字
• ✅ 正文对比度 ≥ 4.5:1

---

玩家输入

v1 输入极少，玩家是观察者而非操控者：

操作	触发方式
查看 NPC	点击精灵
查看建筑	点击建筑
阅读日记	点击"Read full diary"
提交建议	点击"Leave suggestion" + 表单
平移摄像机	拖拽地图
缩放	滚轮

---

工具链

Aseprite → TexturePacker → PNG + JSON → PixiJS

---

🔗 相关文档：Art Bible · TileSet · Sprite · Frontend — PixiJS