868 lines
18 KiB
Markdown
868 lines
18 KiB
Markdown
# 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
|