# GameGroup UI/UX 设计规范

**项目名称**: GameGroup 前端系统
**文档版本**: v1.0
**更新时间**: 2026-01-28

---

## 📋 目录

- [1. 设计理念](#1-设计理念)
- [2. 视觉风格](#2-视觉风格)
- [3. 色彩系统](#3-色彩系统)
- [4. 字体系统](#4-字体系统)
- [5. 间距系统](#5-间距系统)
- [6. 组件规范](#6-组件规范)
- [7. 动效规范](#7-动效规范)
- [8. 响应式设计](#8-响应式设计)
- [9. 无障碍设计](#9-无障碍设计)
- [10. 设计资源](#10-设计资源)

---

## 1. 设计理念

### 1.1 核心价值

**活力与专业并重**
- GameGroup作为游戏社群平台,既要体现游戏的活力与趣味性,又要保持管理工具的专业性与可靠性
- 设计风格融合游戏化元素与现代UI设计,创造独特的视觉语言

**用户为中心**
- 简洁直观的操作流程
- 清晰的信息层级
- 即时的反馈机制
- 一致的交互体验

**性能优先**
- 快速加载
- 流畅动画
- 高效交互

### 1.2 设计关键词

- **活力**: 充满动感,富有生命力
- **简洁**: 去除冗余,聚焦核心
- **直观**: 一目了然,易于理解
- **有趣**: 愉悦体验,富有惊喜

---

## 2. 视觉风格

### 2.1 风格定位

**游戏化现代风格**

融合以下设计元素:
- **游戏UI影响**: 动态卡片、徽章系统、进度条、成就展示
- **现代扁平化**: 清晰的视觉层次,适度的阴影和渐变
- **微交互动画**: 悬停效果、过渡动画、状态反馈
- **高对比度**: 确保可读性和视觉冲击力

### 2.2 设计原则

#### 层次分明
- 使用卡片容器分割内容
- 利用阴影和z轴创建深度
- 明确的视觉层级引导

#### 留白充足
- 组件之间保持合理间距
- 避免信息过载
- 提升阅读舒适度

#### 一致性
- 统一的视觉语言
- 可预测的交互模式
- 规范的设计系统

---

## 3. 色彩系统

### 3.1 主色调 (Primary Colors)

```css
/* 主色 - 游戏紫 */
--color-primary-50: #f5f3ff;
--color-primary-100: #ede9fe;
--color-primary-200: #ddd6fe;
--color-primary-300: #c4b5fd;
--color-primary-400: #a78bfa;
--color-primary-500: #8b5cf6;  /* 主色 */
--color-primary-600: #7c3aed;
--color-primary-700: #6d28d9;
--color-primary-800: #5b21b6;
--color-primary-900: #4c1d95;

/* 强调色 - 活力橙 */
--color-accent-50: #fff7ed;
--color-accent-100: #ffedd5;
--color-accent-200: #fed7aa;
--color-accent-300: #fdba74;
--color-accent-400: #fb923c;
--color-accent-500: #f97316;  /* 强调色 */
--color-accent-600: #ea580c;
--color-accent-700: #c2410c;
--color-accent-800: #9a3412;
--color-accent-900: #7c2d12;
```

### 3.2 中性色 (Neutral Colors)

```css
/* 深色模式 */
--color-gray-50: #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-200: #e5e7eb;
--color-gray-300: #d1d5db;
--color-gray-400: #9ca3af;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-700: #374151;
--color-gray-800: #1f2937;
--color-gray-900: #111827;

/* 浅色模式 */
--color-text-primary: #1f2937;
--color-text-secondary: #6b7280;
--color-text-tertiary: #9ca3af;
--color-bg-primary: #ffffff;
--color-bg-secondary: #f9fafb;
--color-bg-tertiary: #f3f4f6;
--color-border: #e5e7eb;
```

### 3.3 功能色 (Semantic Colors)

```css
/* 成功 - 绿色 */
--color-success-50: #f0fdf4;
--color-success-100: #dcfce7;
--color-success-500: #22c55e;
--color-success-700: #15803d;

/* 警告 - 黄色 */
--color-warning-50: #fffbeb;
--color-warning-100: #fef3c7;
--color-warning-500: #eab308;
--color-warning-700: #a16207;

/* 错误 - 红色 */
--color-error-50: #fef2f2;
--color-error-100: #fee2e2;
--color-error-500: #ef4444;
--color-error-700: #b91c1c;

/* 信息 - 蓝色 */
--color-info-50: #eff6ff;
--color-info-100: #dbeafe;
--color-info-500: #3b82f6;
--color-info-700: #1d4ed8;
```

### 3.4 游戏主题色

用于游戏相关的特殊标识和游戏化元素:

```css
/* 游戏类型颜色 */
--game-moba: #8b5cf6;      /* MOBA - 紫色 */
--game-fps: #ef4444;       /* FPS - 红色 */
--game-rpg: #22c55e;       /* RPG - 绿色 */
--game-strategy: #3b82f6;  /* 策略 - 蓝色 */
--game-racing: #f97316;    /* 竞速 - 橙色 */
--game-sports: #eab308;    /* 体育 - 黄色 */
--game-card: #ec4899;      /* 卡牌 - 粉色 */
--game-puzzle: #06b6d4;    /* 益智 - 青色 */
```

### 3.5 使用规范

#### 色彩搭配原则
- **主色占比**: 60% - 用于主要操作、品牌标识
- **中性色占比**: 30% - 用于背景、文本
- **强调色占比**: 10% - 用于重点突出、引导注意

#### 对比度要求
- 文本与背景对比度 ≥ 4.5:1 (WCAG AA标准)
- 重要元素对比度 ≥ 7:1 (WCAG AAA标准)

---

## 4. 字体系统

### 4.1 字体家族

```css
/* 主字体 - 思源黑体 (中文) + Inter (英文/数字) */
--font-family-base: "Source Han Sans CN", "Inter", -apple-system,
  BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
  "Noto Sans", sans-serif;

/* 代码字体 */
--font-family-mono: "JetBrains Mono", "Fira Code", "Courier New",
  monospace;

/* 数字字体 - 用于数据显示 */
--font-family-number: "Inter", "Roboto Mono", monospace;
```

### 4.2 字体大小

```css
/* 标题 */
--font-size-h1: 2.5rem;    /* 40px */
--font-size-h2: 2rem;      /* 32px */
--font-size-h3: 1.5rem;    /* 24px */
--font-size-h4: 1.25rem;   /* 20px */
--font-size-h5: 1.125rem;  /* 18px */
--font-size-h6: 1rem;      /* 16px */

/* 正文 */
--font-size-large: 1rem;       /* 16px */
--font-size-base: 0.875rem;    /* 14px */
--font-size-small: 0.75rem;    /* 12px */
--font-size-xs: 0.625rem;      /* 10px */
```

### 4.3 字重

```css
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
```

### 4.4 行高

```css
--line-height-tight: 1.25;
--line-height-normal: 1.5;
--line-height-relaxed: 1.75;
```

### 4.5 使用规范

| 元素 | 字体大小 | 字重 | 行高 |
|------|---------|------|------|
| 页面标题 | H1 (40px) | Bold (700) | 1.25 |
| 区块标题 | H2 (32px) | Semibold (600) | 1.25 |
| 卡片标题 | H4 (20px) | Semibold (600) | 1.5 |
| 正文内容 | Base (14px) | Normal (400) | 1.5 |
| 辅助文字 | Small (12px) | Normal (400) | 1.5 |

---

## 5. 间距系统

### 5.1 间距尺度

采用4px基准的间距系统:

```css
--spacing-0: 0;
--spacing-1: 0.25rem;  /* 4px */
--spacing-2: 0.5rem;   /* 8px */
--spacing-3: 0.75rem;  /* 12px */
--spacing-4: 1rem;     /* 16px */
--spacing-5: 1.25rem;  /* 20px */
--spacing-6: 1.5rem;   /* 24px */
--spacing-8: 2rem;     /* 32px */
--spacing-10: 2.5rem;  /* 40px */
--spacing-12: 3rem;    /* 48px */
--spacing-16: 4rem;    /* 64px */
--spacing-20: 5rem;    /* 80px */
```

### 5.2 使用场景

| 场景 | 间距值 | 用途 |
|------|--------|------|
| 组件内边距 | spacing-4 (16px) | 按钮内边距、卡片内边距 |
| 组件间距 | spacing-6 (24px) | 卡片之间的间距 |
| 区块间距 | spacing-8 (32px) | 页面区块之间的间距 |
| 页面边距 | spacing-6 (24px) | 内容与页面边缘的间距 |
| 紧凑间距 | spacing-2 (8px) | 标签、徽章等小元素 |

---

## 6. 组件规范

### 6.1 按钮 (Button)

#### 主要按钮 (Primary)
```css
/* 样式 */
background: var(--color-primary-500);
color: white;
border-radius: 8px;
padding: 10px 20px;
font-weight: 600;
transition: all 0.2s;

/* 悬停 */
background: var(--color-primary-600);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);

/* 点击 */
transform: translateY(0);
```

#### 次要按钮 (Secondary)
```css
background: transparent;
color: var(--color-primary-500);
border: 2px solid var(--color-primary-500);
border-radius: 8px;
padding: 10px 20px;
font-weight: 600;
```

#### 文字按钮 (Text)
```css
background: transparent;
color: var(--color-primary-500);
padding: 8px 12px;
font-weight: 500;

/* 悬停 */
background: var(--color-primary-50);
```

#### 尺寸规范
- **Large**: 48px高度, 16px字体
- **Medium**: 40px高度, 14px字体 (默认)
- **Small**: 32px高度, 12px字体

### 6.2 卡片 (Card)

```css
/* 基础卡片 */
background: var(--color-bg-primary);
border-radius: 12px;
padding: var(--spacing-6);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: all 0.3s;

/* 悬停效果 */
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
```

#### 卡片类型
- **基础卡片**: 标准卡片样式
- **可点击卡片**: 带悬停效果
- **游戏卡片**: 带封面图和标签

### 6.3 输入框 (Input)

```css
/* 样式 */
border: 2px solid var(--color-border);
border-radius: 8px;
padding: 10px 14px;
font-size: 14px;
transition: all 0.2s;

/* 聚焦状态 */
border-color: var(--color-primary-500);
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
outline: none;

/* 错误状态 */
border-color: var(--color-error-500);
```

### 6.4 徽章 (Badge)

```css
/* 基础样式 */
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 9999px;
font-size: 12px;
font-weight: 600;

/* 类型 */
.badge-primary { background: var(--color-primary-100); color: var(--color-primary-700); }
.badge-success { background: var(--color-success-100); color: var(--color-success-700); }
.badge-warning { background: var(--color-warning-100); color: var(--color-warning-700); }
.badge-error { background: var(--color-error-100); color: var(--color-error-700); }
```

### 6.5 头像 (Avatar)

```css
/* 尺寸 */
.avatar-xs { width: 24px; height: 24px; }
.avatar-sm { width: 32px; height: 32px; }
.avatar-md { width: 40px; height: 40px; }
.avatar-lg { width: 56px; height: 56px; }
.avatar-xl { width: 80px; height: 80px; }

/* 样式 */
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--color-border);
```

### 6.6 进度条 (Progress)

```css
/* 容器 */
height: 8px;
background: var(--color-bg-tertiary);
border-radius: 9999px;
overflow: hidden;

/* 进度 */
height: 100%;
background: linear-gradient(90deg, var(--color-primary-400), var(--color-primary-600));
border-radius: 9999px;
transition: width 0.3s;
```

### 6.7 标签 (Tag)

用于游戏标签、技能标签等:

```css
/* 样式 */
display: inline-flex;
align-items: center;
padding: 6px 12px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
background: var(--color-bg-tertiary);
color: var(--color-text-secondary);
gap: 4px;

/* 游戏类型标签 - 不同颜色 */
.tag-moba { background: var(--game-moba); color: white; }
.tag-fps { background: var(--game-fps); color: white; }
```

---

## 7. 动效规范

### 7.1 动画时长

```css
--duration-fast: 150ms;
--duration-base: 200ms;
--duration-slow: 300ms;
--duration-slower: 500ms;
```

### 7.2 缓动函数

```css
/* 标准 */
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);

/* 进入 */
--ease-in: cubic-bezier(0.4, 0, 1, 1);

/* 离开 */
--ease-out: cubic-bezier(0, 0, 0.2, 1);

/* 弹性 */
--ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
```

### 7.3 常用动效

#### 淡入淡出 (Fade)
```css
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
```

#### 滑动 (Slide)
```css
@keyframes slideInUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
```

#### 缩放 (Scale)
```css
@keyframes scaleIn {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
```

#### 骨架屏加载 (Skeleton)
```css
@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-tertiary) 25%,
    var(--color-bg-secondary) 50%,
    var(--color-bg-tertiary) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}
```

### 7.4 微交互

#### 按钮点击
```css
button:active {
  transform: scale(0.98);
}
```

#### 卡片悬停
```css
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}
```

#### 链接下划线动画
```css
.link {
  position: relative;
}

.link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-primary-500);
  transition: width var(--duration-base);
}

.link:hover::after {
  width: 100%;
}
```

---

## 8. 响应式设计

### 8.1 断点系统

```css
/* 断点 */
--breakpoint-xs: 0px;       /* 手机竖屏 */
--breakpoint-sm: 640px;     /* 手机横屏 */
--breakpoint-md: 768px;     /* 平板竖屏 */
--breakpoint-lg: 1024px;    /* 平板横屏 / 小笔记本 */
--breakpoint-xl: 1280px;    /* 桌面 */
--breakpoint-2xl: 1536px;   /* 大屏幕 */
```

### 8.2 响应式策略

#### 移动优先
从最小屏幕开始设计,逐步增强:

```css
/* 移动端 (默认) */
.container {
  padding: 16px;
}

/* 平板及以上 */
@media (min-width: 768px) {
  .container {
    padding: 24px;
  }
}

/* 桌面 */
@media (min-width: 1024px) {
  .container {
    padding: 32px;
    max-width: 1200px;
    margin: 0 auto;
  }
}
```

#### 隐藏元素
```css
/* 移动端隐藏 */
.hidden-mobile {
  display: none;
}

@media (min-width: 768px) {
  .hidden-mobile {
    display: block;
  }
}

/* 桌面端隐藏 */
.hidden-desktop {
  display: block;
}

@media (min-width: 1024px) {
  .hidden-desktop {
    display: none;
  }
}
```

### 8.3 布局适配

#### 导航栏
- **移动端**: 底部导航栏或汉堡菜单
- **平板**: 侧边栏
- **桌面**: 顶部导航 + 侧边栏

#### 网格系统
```css
/* 移动: 1列 */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* 平板: 2列 */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 桌面: 3-4列 */
@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
```

---

## 9. 无障碍设计

### 9.1 键盘导航

- **Tab顺序**: 逻辑清晰的焦点顺序
- **焦点可见**: 明确的焦点样式
- **快捷键**: 支持常用操作快捷键

```css
/* 焦点样式 */
*:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}
```

### 9.2 屏幕阅读器

```html
<!-- 语义化HTML -->
<button aria-label="关闭对话框">
  <span aria-hidden="true">×</span>
</button>

<!-- 图标 + 文字 -->
<button>
  <svg aria-hidden="true">...</svg>
  <span>保存</span>
</button>
```

### 9.3 色盲友好

不仅依赖颜色传达信息:
- 使用图标 + 颜色
- 添加文字说明
- 提供高对比度模式

---

## 10. 设计资源

### 10.1 设计工具

- **Figma**: 主要设计工具
- **Iconify**: 图标库
- **Coolors**: 配色方案生成
- **Type Scale**: 字体比例计算

### 10.2 图标系统

推荐使用以下图标库:
- **Heroicons**: 简洁现代
- **Lucide Icons**: 统一风格
- **Phosphor Icons**: 丰富选择

图标尺寸:
- **XS**: 16px
- **SM**: 20px
- **MD**: 24px (默认)
- **LG**: 32px
- **XL**: 48px

### 10.3 图片规范

#### 头像
- **尺寸**: 200x200px最小
- **格式**: JPG/WebP
- **质量**: 80%以上

#### 游戏封面
- **尺寸**: 16:9比例
- **最小宽度**: 640px
- **格式**: WebP优先

#### 截图
- **尺寸**: 原始分辨率
- **格式**: WebP/PNG
- **压缩**: 无损或有损80%

---

## 11. 组件示例

### 11.1 用户卡片

```vue
<template>
  <div class="user-card">
    <div class="user-card__avatar">
      <img :src="user.avatar" :alt="user.username" />
    </div>
    <div class="user-card__info">
      <h4 class="user-card__name">{{ user.nickname || user.username }}</h4>
      <p class="user-card__role">{{ roleText }}</p>
      <div class="user-card__badges">
        <Badge v-if="user.isMember" type="primary">会员</Badge>
        <Badge v-if="isOnline" type="success">在线</Badge>
      </div>
    </div>
  </div>
</template>

<style scoped>
.user-card {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: white;
  border-radius: 12px;
  transition: all 0.2s;
}

.user-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.user-card__avatar img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.user-card__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.user-card__role {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 4px;
}
</style>
```

### 11.2 游戏卡片

```vue
<template>
  <div class="game-card" @click="handleClick">
    <div class="game-card__cover">
      <img :src="game.coverUrl" :alt="game.name" />
      <div class="game-card__overlay">
        <Button type="primary" size="small">查看详情</Button>
      </div>
    </div>
    <div class="game-card__content">
      <div class="game-card__tags">
        <Tag
          v-for="tag in game.tags"
          :key="tag"
          :type="getGameTagType(tag)"
        >
          {{ tag }}
        </Tag>
      </div>
      <h4 class="game-card__title">{{ game.name }}</h4>
      <p class="game-card__players">
        {{ game.minPlayers }}-{{ game.maxPlayers }}人
      </p>
    </div>
  </div>
</template>
```

---

## 12. 总结

本设计规范确保:
- ✅ **视觉一致性**: 统一的设计语言
- ✅ **开发效率**: 规范化的组件库
- ✅ **用户体验**: 直观友好的交互
- ✅ **品牌识别**: 独特的视觉风格
- ✅ **可维护性**: 系统化的设计系统

---

**文档维护**: 随产品迭代持续更新
**最后更新**: 2026-01-28
**设计负责**: Frontend Team