"数据驱动的精准工具" - 结合技术文档的严谨性和现代 SaaS 的优雅感
- 风格: 精致的技术极简主义(Refined Technical Minimalism)
- 特色: 等宽字体(JetBrains Mono)+ 优雅衬线字体(Crimson Pro)
- 色彩: 深色主题(#0a0a0a)+ 琥珀色强调(#fbbf24)
- 布局: 网格系统 + 数据可视化元素
-
字体组合
- 等宽字体(JetBrains Mono):营造技术感,用于导航、标签、数据
- 衬线字体(Crimson Pro):优雅精致,用于大标题
- 对比强烈,层次分明
-
色彩系统
- 主背景:#0a0a0a(极深黑)
- 卡片背景:#0f0f0f(深黑)
- 强调色:琥珀色(#fbbf24)象征"高价值"
- 功能色:绿色(Dofollow)、蓝色(免费)、紫色(付费)
-
视觉效果
- 点状网格背景
- 琥珀色光晕效果
- 渐变边框 hover 效果
- 分层阴影系统
- 动画:滑入、发光、渐变
-
布局特点
- 大量留白,呼吸感强
- 网格布局,响应式
- 卡片式设计
- 数据可视化(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- Hero 区域: 大标题 + 数据统计 + CTA 按钮
- 平台分类: 6 个分类卡片,显示数量和平均 DA
- 热门平台: 4 个精选平台卡片
- 动画: 滑入动画,分层延迟
- 筛选器: 左侧边栏,类型/权重/费用筛选
- 搜索框: 实时搜索
- 排序: 多种排序方式
- 平台卡片: 网格布局,显示详细信息
- 响应式: 桌面 3 列,平板 2 列,手机 1 列
-
独特的字体组合
- 避免了常见的 Inter、Roboto
- JetBrains Mono 营造专业技术感
- Crimson Pro 增添优雅气质
-
琥珀色主题
- 不同于常见的蓝色/紫色
- 象征"高价值"、"精选"
- 在深色背景上非常醒目
-
数据可视化
- DA/DR 数值突出显示
- 星级评分
- 标签系统(Dofollow、免费/付费、难度)
-
微交互
- Hover 效果:边框发光、渐变背景
- 加载动画:滑入、延迟
- 光晕效果:琥珀色发光
-
专业感
- 等宽字体营造技术氛围
- 精确的间距和对齐
- 一致的圆角和边框
- 框架: Next.js 14 (App Router)
- 样式: Tailwind CSS
- 字体: Google Fonts (JetBrains Mono + Crimson Pro)
- 动画: CSS Animations
- 响应式: Tailwind 响应式类
- 添加平台详情页
- 添加知识库页面
- 添加搜索功能实现
- 添加筛选逻辑实现
- 添加加载状态
- 添加错误处理
- 优化移动端体验
- 添加更多动画效果
设计版本: 1.0 创建日期: 2026-02-10 设计师: Claude (frontend-design skill)