# GPU 天梯图设计文档

# 概述

设计一个现代化、视觉清晰的 GPU 天梯图页面，解决原网站字体小、样式丑陋、难以查看显卡排名的问题。

# 目标用户

  • 综合型用户：兼顾游戏和专业性能需求
  • 需要清晰的视觉排名和详细的参数对比

# 设计原则

  1. 清晰易读 - 大字体，高对比度，性能层次分明
  2. 现代简约 - 柔和渐变，大面积留白，简洁设计
  3. 功能完整 - 搜索筛选、对比、历史版本、性能基准
  4. 响应式 - 完美适配桌面端和移动端

# 页面结构

# 整体布局

┌───────────────────────────────────────────────────────┐
│  顶部导航栏                                            │
│  [🏠] GPU 天梯图 2026-05  [🔍 搜索] [📜 历史版本]    │
├──────────────┬────────────────────────────────────────┤
│              │  性能标尺  100%                        │
│  侧边栏      │  ┌─────────────────────────────────┐  │
│  [x] NVIDIA  │  │  🃏 NVIDIA GeForce RTX 4090 Ti  │  │
│  [x] AMD     │  │  100% - 旗舰级  ¥14,999        │  │
│  [x] Intel   │  ├─────────────────────────────────┤  │
│  [x] 其他    │  │  🃏 NVIDIA GeForce RTX 4090     │  │
│              │  │  95% - 旗舰级   ¥12,999        │  │
│  价格范围    │  ├─────────────────────────────────┤  │
│  [ ] ¥0-1000 │  │  🃏 ...                         │  │
│  [x] ¥1000-  │  │  🃏 ...                         │  │
│  [x] ¥2000-  │  │  🃏 ...                         │  │
│  [x] ¥4000-  │  └─────────────────────────────────┘  │
│  [x] ¥8000+  │  ↓ 滚动加载更多                       │
│              │                                         │
│  性能层级    │                                         │
│  [x] 旗舰级  │                                         │
│  [x] 高端级  │                                         │
│  [x] 中等级  │                                         │
│  [x] 入门级  │                                         │
│              │                                         │
├──────────────┴────────────────────────────────────────┤
│  底部对比栏 (已选: 2)  [📊 开始对比]  [✕ 清空]      │
│  [RTX 4090 Ti] [RTX 4090]                             │
└───────────────────────────────────────────────────────┘

# 响应式布局

移动端 (< 768px):

  • 侧边栏收起为抽屉式，通过右上角按钮打开
  • 显卡卡片宽度 100%
  • 对比栏固定在底部

平板端 (768px - 1024px):

  • 侧边栏宽度 200px
  • 卡片布局自适应

桌面端 (> 1024px):

  • 侧边栏宽度 280px
  • 最大内容宽度 1200px 居中

# 视觉设计

# 色彩方案

层级 渐变色彩 说明
旗舰级 #9d4edd → #7b2cbf 紫色渐变，顶级性能
高端级 #4cc9f0 → #4361ee 蓝色渐变，高端产品
中等级 #95d5b2 → #40916c 绿色渐变，性价比之选
入门级 #ffe066 → #ffd000 黄色渐变，入门产品

辅助颜色：

  • 背景：#f8f9fa → #e9ecef 浅灰渐变
  • 文字主色：#212529
  • 文字辅色：#6c757d
  • 边框：#dee2e6
  • 悬停：rgba(0,0,0,0.05)

# 字体规格

元素 字体大小 字重 颜色
显卡型号 20px 700 (bold) #212529
性能分数 18px 600 层级色
价格 16px 500 #40916c
辅助信息 14px 400 #6c757d

# 显卡卡片设计

┌─────────────────────────────────────────┐
│  🃏 NVIDIA GeForce RTX 4090 Ti         │ │
│  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 100% │ │
│  🏷️ 旗舰级     💰 ¥14,999             │ │
│  📅 2024-01    [+] 添加对比           │ │
└─────────────────────────────────────────┘
  • 圆角：12px
  • 阴影：0 4px 12px rgba(0,0,0,0.08)
  • 内边距：20px
  • 悬停效果：阴影加深 + 轻微上移 2px

# 数据结构

# GPU 数据 (gpu-data.json)

{
  "version": "2026-05",
  "lastUpdated": "2026-05-13",
  "source": "https://www.mydrivers.com/zhuanti/tianti/gpu/",
  "gpus": [
    {
      "id": "nvidia-rtx-4090-ti",
      "name": "NVIDIA GeForce RTX 4090 Ti",
      "brand": "NVIDIA",
      "model": "RTX 4090 Ti",
      "performanceScore": 100,
      "tier": "flagship",
      "price": 14999,
      "releaseDate": "2024-01",
      "power": 600,
      "memory": "24GB GDDR6X",
      "benchmarks": {
        "gaming": 100,
        "rendering": 100,
        "aiCompute": 100,
        "games": {
          "Cyberpunk 2077": 100,
          "Alan Wake 2": 100
        }
      }
    },
    {
      "id": "nvidia-rtx-4090",
      "name": "NVIDIA GeForce RTX 4090",
      "brand": "NVIDIA",
      "model": "RTX 4090",
      "performanceScore": 95,
      "tier": "flagship",
      "price": 12999,
      "releaseDate": "2022-10",
      "power": 450,
      "memory": "24GB GDDR6X",
      "benchmarks": {
        "gaming": 95,
        "rendering": 93,
        "aiCompute": 90,
        "games": {
          "Cyberpunk 2077": 95,
          "Alan Wake 2": 94
        }
      }
    }
  ],
  "history": [
    {
      "version": "2025-12",
      "url": "gpu-data-2025-12.json",
      "label": "2025年12月版"
    },
    {
      "version": "2025-06",
      "url": "gpu-data-2025-06.json",
      "label": "2025年6月版"
    }
  ]
}

# Tier 映射

const tierMap = {
  'flagship': { label: '旗舰级', color: 'purple' },
  'high-end': { label: '高端级', color: 'blue' },
  'mid-range': { label: '中等级', color: 'green' },
  'entry-level': { label: '入门级', color: 'yellow' }
}

# 核心功能

# 1. 搜索与筛选

搜索框：

  • 支持按显卡型号模糊搜索
  • 实时过滤结果

品牌筛选：

  • NVIDIA、AMD、Intel、其他
  • 支持多选

价格范围：

  • ¥0-1000、¥1000-2000、¥2000-4000、¥4000-8000、¥8000+
  • 支持多选

性能层级：

  • 旗舰级、高端级、中等级、入门级
  • 支持多选

# 2. 对比功能

交互流程：

  1. 点击显卡卡片上的 [+] 按钮添加到对比栏
  2. 底部对比栏显示已选显卡（最多 5 个）
  3. 点击 [📊 开始对比] 打开对比弹窗
  4. 对比弹窗横向展示显卡详细参数
  5. 支持从对比栏移除显卡

对比内容：

  • 性能分数
  • 价格
  • 功耗
  • 显存
  • 发布日期
  • 游戏跑分
  • 渲染性能
  • AI 算力

# 3. 历史版本

功能说明：

  • 顶部导航栏右侧下拉选择历史版本
  • 选择后加载对应时期的数据
  • 显示该版本的日期标签

# 4. 性能基准

展示方式：

  • 点击显卡卡片展开详细信息
  • 显示游戏跑分表格
  • 显示渲染/AI 算力柱状图
  • 显示功耗、显存等参数

# 5. 性能标尺

设计：

  • 右侧显示垂直性能标尺（0-100%）
  • 每个显卡卡片对齐对应的分数位置
  • 标尺有刻度标记（25%、50%、75%、100%）

# 文件结构

docs/.vuepress/public/
├── gpu-ladder/
│   ├── index.html          # 主页面
│   └── data/
│       ├── gpu-data.json       # 当前数据
│       ├── gpu-data-2025-12.json
│       └── gpu-data-2025-06.json

# 技术实现要点

  1. 纯 HTML/JS/CSS - 无需构建工具，直接可运行
  2. 数据分离 - 数据存 JSON，便于更新
  3. 无外部依赖 - 或使用轻量级库（如 Vue 3 CDN）
  4. 本地存储 - 保存用户的筛选偏好
  5. 懒加载 - 滚动时加载更多显卡（数据量大时）

# 后续可扩展功能

  • 价格趋势图表
  • 用户评论/评分
  • 购买链接聚合
  • 功耗对比图表
  • 导出对比图片
  • 分享链接

设计完成日期： 2026-05-13

  • MIT Licensed | Copyright © 2024 小皮咖