congsh/gamegroup_fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 初始化项目脚手架

Browse Source
This commit is contained in:
UGREEN USER
2026-01-28 14:35:43 +08:00
commit 1377b18790
31 changed files with 13898 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

867
doc/design/02-UI-UX设计规范.md Normal file
View File

@@ -0,0 +1,867 @@
# 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