Skip to content

DESIGN.md

Latest commit

 

History

History
224 lines (169 loc) · 6.07 KB

DESIGN.md

File metadata and controls

224 lines (169 loc) · 6.07 KB

Design System — Topic Hub

Product Context

  • What this is: 多平台热搜聚合器，实时抓取微博、知乎、B站、GitHub等平台的热门话题
  • Who it's for: 内容创作者、数据分析师、普通用户追踪全网热点
  • Space/industry: 数据仪表板 / 内容聚合 / 社交媒体监控
  • Project type: Web 应用仪表板，数据密集型界面

Aesthetic Direction

  • Direction: 编辑数据感 (Editorial Data-Driven)
  • Decoration level: 有目的性 (Intentional)
  • Mood: 专业、冷静、高效。深色背景让内容发光，垂直热力条赋予数据直观感受。

设计哲学： 热搜数据本身是"热"的，但界面需要保持"冷"的理性，让用户专注于内容而非装饰。编辑风格赋予内容尊严感，数据感保证功能性。

Typography

角色 字体 用途
Display/Hero Plus Jakarta Sans 页面标题、品牌标识
Body (EN) Inter 英文正文、UI标签
Body (ZH) Noto Sans SC 中文正文、话题标题
Data/Numbers JetBrains Mono 热度值、排名、时间戳

字号比例：

Token 值 用途
Hero 48px/3rem 页面主标题
H1 32px/2rem 区块标题
H2 24px/1.5rem 卡片标题
H3 20px/1.25rem 小标题
Body 16px/1rem 正文内容
Small 14px/0.875rem 辅助文字、按钮
Tiny 12px/0.75rem 时间戳、标签

Color

策略： 受限但精致 (Restrained)

深色模式 (默认)

角色 色值 用途
背景主色 #0F172A (Slate-900) 页面背景
表面色 #1E293B (Slate-800) 卡片、面板
高表面 #334155 (Slate-700) 悬停状态、头部
主色 #4F46E5 (Indigo-600) 链接、按钮、当前状态
主色悬停 #4338CA (Indigo-700) 按钮悬停
文字主色 #F8FAFC (Slate-50) 标题、正文
文字次色 #94A3B8 (Slate-400) 辅助信息
文字弱化 #64748B (Slate-500) 时间戳、元数据
边框 #334155 (Slate-700) 分隔线、卡片边框

热力渐变

用于热度可视化，从热到冷：

  • 高热 #DC2626 (Red-600) — 1000万+
  • 中热 #F59E0B (Amber-500) — 100-1000万
  • 低热 #10B981 (Emerald-500) — <100万

语义色

角色 色值 用途
成功 #10B981 正向指标
警告 #F59E0B 提醒、中等热度
错误 #EF4444 错误状态
信息 #3B82F6 提示信息

浅色模式

  • 背景: #FFFFFF
  • 表面: #F8FAFC
  • 高表面: #F1F5F9
  • 文字主色: #0F172A
  • 文字次色: #475569
  • 边框: #E2E8F0

Spacing

Base unit: 4px

Token 值 用途
xs 4px 图标间距
sm 8px 紧凑元素间
md 16px 标准间距
lg 24px 区块内间距
xl 32px 区块间间距
2xl 48px 大区块分隔
3xl 64px 页面级间距

密度: 紧凑 (Compact) — 热搜列表需要高密度展示

Layout

策略: 网格规范 (Grid-disciplined)

  • 容器最大宽度: 1200px
  • 栅格: 12列，间距 24px
  • 话题卡片: 单列全宽，保证扫描流畅
  • 响应式断点:
    • Mobile: < 640px
    • Tablet: 640px - 1024px
    • Desktop: > 1024px

Border Radius

Token 值 用途
sm 4px 小元素、标签
md 8px 按钮、输入框
lg 12px 卡片、面板
full 9999px 圆形元素

Motion

策略: 有目的性 (Intentional)

动效原则：

  • 动效服务于理解，而非装饰
  • 快速响应 (150-300ms)
  • 一致的缓动函数
场景 时长 缓动 描述
悬停状态 150ms ease-out 卡片上浮、边框高亮
入场动画 200ms ease-out 列表项依次淡入 (stagger 50ms)
页面过渡 300ms ease-in-out 内容交叉淡入
数字变化 300ms ease-out 热力值颜色过渡
骨架屏 800ms ease-in-out 无限循环脉冲

Components

Button

Primary:   bg-primary (#4F46E5) + white text
Secondary: bg-surface (#1E293B) + border + primary text
Ghost:     transparent + secondary text

Topic Card

布局: grid (60px rank | 1fr content | 120px heat | 100px time)
背景: surface
边框: 1px solid border
悬停: bg-elevated

Heat Bar

垂直条: 4px width, 高度根据热度变化
高热: 32px + red
中热: 24px + amber
低热: 16px + emerald

Platform Badge

布局: inline-flex, gap 6px
圆点: 6px circle, primary color
文字: small size, secondary color

Design Decisions

安全选择 (符合类别惯例)

  1. 清晰的列表布局 — 用户期望扫描式阅读热搜
  2. 热度可视化 — 用颜色/数字直观显示热门程度
  3. 平台标识 — 清晰的来源区分（微博、知乎等）
  4. 时间戳 — 数据新鲜度对热搜至关重要

风险选择 (让产品独特)

  1. 垂直热度条 — 而非简单的数字

    • 其他产品用数字，我们用视觉热度条 + 数字
    • 收益：更直观的"热"感

  2. 深色模式优先 — 新闻/数据类产品很少这样做

    • 收益：长时间浏览更舒适，"暗夜看热点"的场景契合

  3. 前三名特殊样式 — 火焰图标 + 加大字号

    • 收益：中式美学，前三名有荣誉感

Implementation Notes

Tailwind CSS 配置

// tailwind.config.js
colors: {
  background: '#0F172A',
  surface: '#1E293B',
  elevated: '#334155',
  primary: {
    DEFAULT: '#4F46E5',
    hover: '#4338CA',
  },
  heat: {
    high: '#DC2626',
    medium: '#F59E0B',
    low: '#10B981',
  }
}

字体加载

<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Created: 2026-03-21 by /design-consultation