### 原子化设计系统

#### 颜色规范

主色调：

- 主色：#4A7CFF（明亮蓝色）- 代表活力与互动

- 辅助色：#FFB344（温暖橙色）- 代表友好与社交

功能色：

- 成功色：#36B37E（绿色）

- 警告色：#FFAB00（橙色）

- 错误色：#FF5630（红色）

- 信息色：#00B8D9（青色）

中性色：

- 文本主色：#172B4D（深蓝灰）

- 文本次要色：#5E6C84（中灰）

- 文本提示色：#97A0AF（浅灰）

- 背景色：#F4F5F7（超浅灰）

- 分割线：#DFE1E6（浅灰）

透明度变体：

- 100%: 完全不透明

- 80%: 主要UI元素

- 60%: 次要UI元素

- 40%: 辅助信息

- 20%: 背景效果
#### 排版系统

字体：

- 主要字体：微软雅黑（Windows）/ PingFang SC（Mac/iOS）/ Noto Sans SC（Android）

- 备用字体：系统默认无衬线字体

字号：

- 超大标题：36px（仅用于欢迎页面）

- 大标题：24px（主要页面标题）

- 中标题：18px（卡片标题、模块标题）

- 小标题：16px（次要标题）

- 正文：14px（主要内容文字）

- 辅助文字：12px（说明、提示等）

- 极小文字：10px（版权信息等）

行高：

- 紧凑：1.2

- 标准：1.5

- 宽松：1.8

字重：

- 粗体：600（标题、重点内容）

- 常规：400（正文、普通内容）

- 细体：300（辅助信息）
### 组件库设计

基础组件：

1. 按钮：

- 主要按钮（Primary）

- 次要按钮（Secondary）

- 文本按钮（Text）

- 图标按钮（Icon）

1. 输入框：

- 单行输入框

- 多行输入框

- 搜索框

- 数字输入框

1. 选择器：

- 单选框组

- 复选框组

- 下拉选择器

- 滑块

1. 提示组件：

- 轻提示（Toast）

- 对话框（Dialog）

- 气泡提示（Tooltip）

- 徽标（Badge）
业务组件：

1. 游戏卡片：展示游戏封面、名称、类型、人数等信息

2. 用户头像组：聚合展示多个用户头像

3. 游戏倒计时：带动画效果的倒计时组件

4. 进度指示器：游戏进行阶段指示

5. 成就徽章：显示用户获得的成就

6. 邀请码展示：美观的邀请码/二维码展示

### 页面设计规范

页面布局：

- 主导航区：底部标签栏（首页、游戏、社交、我的）

- 内容区：采用卡片式布局，留有充分留白

- 操作区：主要操作按钮位于屏幕底部安全区内

交互设计原则：

- 单手操作友好：重要操作区域位于拇指可触及范围内

- 即时反馈：所有操作都有明确的视觉或触觉反馈

- 容错设计：关键操作提供确认机制，避免误触

- 渐进式引导：复杂功能分步引导，降低学习成本

动效设计：

- 轻量级：以轻快、流畅为主，避免过度动画

- 功能性：动效应服务于功能，提升可用性

- 一致性：相似操作采用一致的动效逻辑
### 无障碍设计（符合WCAG 2.1标准）

感知性：

- 所有非文本内容提供文本替代

- 色彩对比度符合AA级标准（4.5:1）

- 内容可在不同方向上查看（不丢失信息）

- 避免纯色彩传递信息，配合使用形状、文本等

可操作性：

- 所有功能可通过键盘操作

- 可调整动画速度或关闭动画

- 提供充分的操作时间

- 避免闪烁内容（低于3次/秒）

可理解性：

- 一致的导航和操作模式

- 清晰的错误提示和修正建议

- 直观的操作流程，减少认知负担

兼容性：

- 支持屏幕阅读器

- 具有良好的语义化结构

- 适配不同设备和屏幕尺寸