设计原型说明

🎨 设计理念

核心概念

"数据驱动的精准工具" - 结合技术文档的严谨性和现代 SaaS 的优雅感

美学方向

• 风格: 精致的技术极简主义（Refined Technical Minimalism）
• 特色: 等宽字体（JetBrains Mono）+ 优雅衬线字体（Crimson Pro）
• 色彩: 深色主题（#0a0a0a）+ 琥珀色强调（#fbbf24）
• 布局: 网格系统 + 数据可视化元素

设计特点

1. 字体组合

   • 等宽字体（JetBrains Mono）：营造技术感，用于导航、标签、数据
   • 衬线字体（Crimson Pro）：优雅精致，用于大标题
   • 对比强烈，层次分明

2. 色彩系统

   • 主背景：#0a0a0a（极深黑）
   • 卡片背景：#0f0f0f（深黑）
   • 强调色：琥珀色（#fbbf24）象征"高价值"
   • 功能色：绿色（Dofollow）、蓝色（免费）、紫色（付费）

3. 视觉效果

   • 点状网格背景
   • 琥珀色光晕效果
   • 渐变边框 hover 效果
   • 分层阴影系统
   • 动画：滑入、发光、渐变

4. 布局特点

   • 大量留白，呼吸感强
   • 网格布局，响应式
   • 卡片式设计
   • 数据可视化（DA/DR、评分）

📁 文件结构

design-prototype/
├── app/
│   ├── layout.tsx          # 根布局，字体配置
│   ├── page.tsx            # 首页
│   ├── globals.css         # 全局样式
│   └── platforms/
│       └── page.tsx        # 平台列表页
├── package.json
├── tailwind.config.js
└── tsconfig.json

🚀 运行方式

cd design-prototype
npm install
npm run dev

访问 http://localhost:3000

📄 页面说明

首页 (/)

• Hero 区域: 大标题 + 数据统计 + CTA 按钮
• 平台分类: 6 个分类卡片，显示数量和平均 DA
• 热门平台: 4 个精选平台卡片
• 动画: 滑入动画，分层延迟

平台列表页 (/platforms)

• 筛选器: 左侧边栏，类型/权重/费用筛选
• 搜索框: 实时搜索
• 排序: 多种排序方式
• 平台卡片: 网格布局，显示详细信息
• 响应式: 桌面 3 列，平板 2 列，手机 1 列

🎯 设计亮点

1. 独特的字体组合

   • 避免了常见的 Inter、Roboto
   • JetBrains Mono 营造专业技术感
   • Crimson Pro 增添优雅气质

2. 琥珀色主题

   • 不同于常见的蓝色/紫色
   • 象征"高价值"、"精选"
   • 在深色背景上非常醒目

3. 数据可视化

   • DA/DR 数值突出显示
   • 星级评分
   • 标签系统（Dofollow、免费/付费、难度）

4. 微交互

   • Hover 效果：边框发光、渐变背景
   • 加载动画：滑入、延迟
   • 光晕效果：琥珀色发光

5. 专业感

   • 等宽字体营造技术氛围
   • 精确的间距和对齐
   • 一致的圆角和边框

🔧 技术栈

• 框架: Next.js 14 (App Router)
• 样式: Tailwind CSS
• 字体: Google Fonts (JetBrains Mono + Crimson Pro)
• 动画: CSS Animations
• 响应式: Tailwind 响应式类

📝 后续优化

1. 添加平台详情页
2. 添加知识库页面
3. 添加搜索功能实现
4. 添加筛选逻辑实现
5. 添加加载状态
6. 添加错误处理
7. 优化移动端体验
8. 添加更多动画效果

---

设计版本: 1.0 创建日期: 2026-02-10 设计师: Claude (frontend-design skill)