congsh/gamegroup_fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
1377b18790136f21f58d2700e49acf109b160f1d
gamegroup_fe/doc/design/02-UI-UX设计规范.md
UGREEN USER 1377b18790 feat: 初始化项目脚手架
2026-01-28 14:35:43 +08:00

18 KiB
Raw Blame History

GameGroup UI/UX 设计规范

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

📋 目录

1. 设计理念

1.1 核心价值

活力与专业并重

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

用户为中心

  • 简洁直观的操作流程
  • 清晰的信息层级
  • 即时的反馈机制
  • 一致的交互体验

性能优先

  • 快速加载
  • 流畅动画
  • 高效交互

1.2 设计关键词

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

2. 视觉风格

2.1 风格定位

游戏化现代风格

融合以下设计元素:

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

2.2 设计原则

层次分明

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

留白充足

  • 组件之间保持合理间距
  • 避免信息过载
  • 提升阅读舒适度

一致性

  • 统一的视觉语言
  • 可预测的交互模式
  • 规范的设计系统

3. 色彩系统

3.1 主色调 (Primary Colors)

/* 主色 - 游戏紫 */
--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)

/* 深色模式 */
--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)

/* 成功 - 绿色 */
--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 游戏主题色

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

/* 游戏类型颜色 */
--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 字体家族

/* 主字体 - 思源黑体 (中文) + 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 字体大小

/* 标题 */
--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 字重

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

4.4 行高

--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基准的间距系统:

--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)

/* 样式 */
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)

background: transparent;
color: var(--color-primary-500);
border: 2px solid var(--color-primary-500);
border-radius: 8px;
padding: 10px 20px;
font-weight: 600;

文字按钮 (Text)

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)

/* 基础卡片 */
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)

/* 样式 */
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)

/* 基础样式 */
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)

/* 尺寸 */
.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)

/* 容器 */
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)

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

/* 样式 */
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 动画时长

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

7.2 缓动函数

/* 标准 */
--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)

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

滑动 (Slide)

@keyframes slideInUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

缩放 (Scale)

@keyframes scaleIn {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

骨架屏加载 (Skeleton)

@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 微交互

按钮点击

button:active {
  transform: scale(0.98);
}

卡片悬停

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

链接下划线动画

.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 断点系统

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

8.2 响应式策略

移动优先

从最小屏幕开始设计,逐步增强:

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

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

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

隐藏元素

/* 移动端隐藏 */
.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 布局适配

导航栏

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

网格系统

/* 移动: 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顺序: 逻辑清晰的焦点顺序
  • 焦点可见: 明确的焦点样式
  • 快捷键: 支持常用操作快捷键
/* 焦点样式 */
*:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

9.2 屏幕阅读器

<!-- 语义化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 用户卡片

<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 游戏卡片

<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

Reference in New Issue View Git Blame Copy Permalink