305 lines
7.3 KiB
Markdown
305 lines
7.3 KiB
Markdown
|
# 🎨 VPS Price - 专业设计系统总结
|
|||
|
|
|
|||
|
|
基于 UI/UX Pro Max 设计智能分析，为 VPS 价格对比网站生成的专业设计系统。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 📊 设计系统概览
|
|||
|
|
|
|||
|
|
### 🎯 产品定位
|
|||
|
|
- **类型**: 云服务器价格对比工具
|
|||
|
|
- **目标用户**: 开发者、企业 IT、个人站长
|
|||
|
|
- **核心价值**: 快速对比多家云厂商 VPS 价格和配置
|
|||
|
|
|
|||
|
|
### 🎨 设计风格：Trust & Authority（信任与权威）
|
|||
|
|
|
|||
|
|
**为什么选择这个风格？**
|
|||
|
|
- ✅ 适合技术产品和专业服务
|
|||
|
|
- ✅ 强调数据准确性和可信度
|
|||
|
|
- ✅ 符合 B2B/企业级产品调性
|
|||
|
|
- ✅ WCAG AAA 级别无障碍访问
|
|||
|
|
|
|||
|
|
**风格特征：**
|
|||
|
|
- 专业的深色调配色
|
|||
|
|
- 清晰的数据展示
|
|||
|
|
- 权威的视觉层次
|
|||
|
|
- 简洁的交互设计
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 🎨 配色方案
|
|||
|
|
|
|||
|
|
### 主色调（Professional Navy + Blue）
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
/* 主色 - 深海军蓝 */
|
|||
|
|
--primary: #0F172A; /* 导航栏、标题 */
|
|||
|
|
|
|||
|
|
/* 次要色 - 中性灰蓝 */
|
|||
|
|
--secondary: #334155; /* 副标题、辅助文本 */
|
|||
|
|
|
|||
|
|
/* CTA 色 - 专业蓝 */
|
|||
|
|
--cta: #0369A1; /* 按钮、链接、强调元素 */
|
|||
|
|
|
|||
|
|
/* 背景色 - 浅灰白 */
|
|||
|
|
--background: #F8FAFC; /* 页面背景 */
|
|||
|
|
|
|||
|
|
/* 文本色 - 深黑 */
|
|||
|
|
--text: #020617; /* 正文文本 */
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 语义化颜色
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
/* 成功/价格 */
|
|||
|
|
--success: #10B981; /* 价格高亮 */
|
|||
|
|
|
|||
|
|
/* 警告 */
|
|||
|
|
--warning: #F59E0B; /* 提示信息 */
|
|||
|
|
|
|||
|
|
/* 错误 */
|
|||
|
|
--error: #EF4444; /* 错误状态 */
|
|||
|
|
|
|||
|
|
/* 信息 */
|
|||
|
|
--info: #3B82F6; /* 信息提示 */
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 📝 字体系统
|
|||
|
|
|
|||
|
|
### 字体配对：Space Grotesk + DM Sans
|
|||
|
|
|
|||
|
|
**为什么选择这个组合？**
|
|||
|
|
- ✅ 现代科技感，适合 SaaS/技术产品
|
|||
|
|
- ✅ 优秀的可读性
|
|||
|
|
- ✅ 支持中英文混排
|
|||
|
|
- ✅ Google Fonts 免费使用
|
|||
|
|
|
|||
|
|
### 字体使用规则
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
/* 标题字体 - Space Grotesk */
|
|||
|
|
font-family: 'Space Grotesk', 'Noto Sans SC', sans-serif;
|
|||
|
|
/* 用于：Logo、大标题、数据标签 */
|
|||
|
|
|
|||
|
|
/* 正文字体 - DM Sans */
|
|||
|
|
font-family: 'DM Sans', 'Noto Sans SC', sans-serif;
|
|||
|
|
/* 用于：正文、按钮、表单 */
|
|||
|
|
|
|||
|
|
/* 等宽字体 - JetBrains Mono */
|
|||
|
|
font-family: 'JetBrains Mono', monospace;
|
|||
|
|
/* 用于：价格、代码、数据 */
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 字号层级
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
/* 移动端优先 */
|
|||
|
|
--text-xs: 0.75rem; /* 12px - 辅助文本 */
|
|||
|
|
--text-sm: 0.875rem; /* 14px - 小文本 */
|
|||
|
|
--text-base: 1rem; /* 16px - 正文（最小） */
|
|||
|
|
--text-lg: 1.125rem; /* 18px - 大正文 */
|
|||
|
|
--text-xl: 1.25rem; /* 20px - 小标题 */
|
|||
|
|
--text-2xl: 1.5rem; /* 24px - 标题 */
|
|||
|
|
--text-3xl: 1.875rem; /* 30px - 大标题 */
|
|||
|
|
--text-4xl: 2.25rem; /* 36px - 主标题 */
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 🎭 关键视觉效果
|
|||
|
|
|
|||
|
|
### 1. Badge Hover Effects（徽章悬停效果）
|
|||
|
|
- 厂商标签悬停时轻微放大
|
|||
|
|
- 添加阴影增强层次感
|
|||
|
|
- 过渡时间：200ms
|
|||
|
|
|
|||
|
|
### 2. Metric Pulse Animations（数据脉冲动画）
|
|||
|
|
- 价格数字加载时的脉冲效果
|
|||
|
|
- 仅在数据更新时触发
|
|||
|
|
- 尊重 `prefers-reduced-motion`
|
|||
|
|
|
|||
|
|
### 3. Smooth Stat Reveal（平滑数据展示）
|
|||
|
|
- 表格数据逐行淡入
|
|||
|
|
- 延迟递增：每行 +50ms
|
|||
|
|
- 总时长不超过 500ms
|
|||
|
|
|
|||
|
|
### 4. Certificate Carousel（信任标识轮播）
|
|||
|
|
- 可选：展示云厂商官方认证
|
|||
|
|
- 自动轮播，可暂停
|
|||
|
|
- 移动端友好
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 📐 布局模式：Comparison Table + CTA
|
|||
|
|
|
|||
|
|
### 页面结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
1. Hero Section（英雄区）
|
|||
|
|
- 主标题 + 副标题
|
|||
|
|
- 简短价值主张
|
|||
|
|
- 可选：快速筛选入口
|
|||
|
|
|
|||
|
|
2. Problem Intro（问题引入）
|
|||
|
|
- 说明对比的必要性
|
|||
|
|
- 突出核心优势
|
|||
|
|
|
|||
|
|
3. Comparison Table（对比表格）★ 核心
|
|||
|
|
- 多厂商价格对比
|
|||
|
|
- 实时筛选功能
|
|||
|
|
- 响应式设计
|
|||
|
|
|
|||
|
|
4. Pricing（可选）
|
|||
|
|
- 如果有付费功能
|
|||
|
|
- 清晰的定价层级
|
|||
|
|
|
|||
|
|
5. CTA（行动号召）
|
|||
|
|
- 引导用户下一步操作
|
|||
|
|
- 联系方式/订阅
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### CTA 位置策略
|
|||
|
|
- **表格内**：每行右侧"查看官网"按钮
|
|||
|
|
- **表格下方**：整体 CTA（如：订阅更新、联系咨询）
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## ✅ 设计检查清单
|
|||
|
|
|
|||
|
|
### 视觉质量
|
|||
|
|
- [x] 使用 SVG 图标（Heroicons/Lucide），不用 emoji
|
|||
|
|
- [x] 所有可点击元素添加 `cursor: pointer`
|
|||
|
|
- [x] 悬停状态有明确视觉反馈
|
|||
|
|
- [x] 过渡动画 150-300ms
|
|||
|
|
- [x] 文本对比度 ≥ 4.5:1
|
|||
|
|
|
|||
|
|
### 交互体验
|
|||
|
|
- [x] 表格支持横向滚动（移动端）
|
|||
|
|
- [x] 筛选器实时响应
|
|||
|
|
- [x] 加载状态有骨架屏
|
|||
|
|
- [x] 错误状态有友好提示
|
|||
|
|
- [x] 键盘导航可用
|
|||
|
|
|
|||
|
|
### 响应式设计
|
|||
|
|
- [x] 测试断点：375px, 768px, 1024px, 1440px
|
|||
|
|
- [x] 移动端字体 ≥ 16px
|
|||
|
|
- [x] 触摸目标 ≥ 44x44px
|
|||
|
|
- [x] 表格在移动端可滚动
|
|||
|
|
|
|||
|
|
### 性能优化
|
|||
|
|
- [x] 图片使用 WebP + srcset
|
|||
|
|
- [x] 字体使用 font-display: swap
|
|||
|
|
- [x] 尊重 prefers-reduced-motion
|
|||
|
|
- [x] 避免布局偏移（CLS）
|
|||
|
|
|
|||
|
|
### 无障碍访问
|
|||
|
|
- [x] 所有图片有 alt 文本
|
|||
|
|
- [x] 表单有 label 标签
|
|||
|
|
- [x] 聚焦状态清晰可见
|
|||
|
|
- [x] 语义化 HTML 标签
|
|||
|
|
- [x] ARIA 标签适当使用
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 🚫 避免的反模式
|
|||
|
|
|
|||
|
|
### 1. 混乱的定价展示
|
|||
|
|
- ❌ 不要：隐藏真实价格
|
|||
|
|
- ❌ 不要：复杂的计算公式
|
|||
|
|
- ✅ 要：清晰的月付价格
|
|||
|
|
- ✅ 要：统一的货币单位
|
|||
|
|
|
|||
|
|
### 2. 缺少信任信号
|
|||
|
|
- ❌ 不要：没有数据来源说明
|
|||
|
|
- ❌ 不要：过时的价格信息
|
|||
|
|
- ✅ 要：标注数据更新时间
|
|||
|
|
- ✅ 要：链接到官方网站
|
|||
|
|
|
|||
|
|
### 3. AI 风格的紫粉渐变
|
|||
|
|
- ❌ 不要：使用 AI 产品常见的紫色/粉色渐变
|
|||
|
|
- ❌ 不要：过度使用霓虹色
|
|||
|
|
- ✅ 要：使用专业的蓝色系
|
|||
|
|
- ✅ 要：保持商务风格
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 🎯 实施优先级
|
|||
|
|
|
|||
|
|
### P0 - 必须实现（核心体验）
|
|||
|
|
1. ✅ 响应式表格布局
|
|||
|
|
2. ✅ 实时筛选功能
|
|||
|
|
3. ✅ 清晰的价格展示
|
|||
|
|
4. ✅ 移动端适配
|
|||
|
|
5. ✅ 加载状态反馈
|
|||
|
|
|
|||
|
|
### P1 - 应该实现（提升体验）
|
|||
|
|
1. ✅ 平滑动画效果
|
|||
|
|
2. ✅ 悬停状态反馈
|
|||
|
|
3. ✅ 骨架屏加载
|
|||
|
|
4. ✅ 错误状态处理
|
|||
|
|
5. ⬜ 数据排序功能
|
|||
|
|
|
|||
|
|
### P2 - 可以实现（锦上添花）
|
|||
|
|
1. ⬜ 价格趋势图表
|
|||
|
|
2. ⬜ 收藏对比功能
|
|||
|
|
3. ⬜ 分享功能
|
|||
|
|
4. ⬜ 暗色模式
|
|||
|
|
5. ⬜ 多语言支持
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 📚 参考资源
|
|||
|
|
|
|||
|
|
### 设计系统文档
|
|||
|
|
- 完整设计系统：`design-system/vps-price-comparison/MASTER.md`
|
|||
|
|
- 页面特定规则：`design-system/vps-price-comparison/pages/`
|
|||
|
|
|
|||
|
|
### 字体资源
|
|||
|
|
- Google Fonts: https://fonts.google.com/share?selection.family=DM+Sans:wght@400;500;700|Space+Grotesk:wght@400;500;600;700
|
|||
|
|
- 中文字体：Noto Sans SC（Google Fonts）
|
|||
|
|
|
|||
|
|
### 图标库
|
|||
|
|
- Heroicons: https://heroicons.com/
|
|||
|
|
- Lucide Icons: https://lucide.dev/
|
|||
|
|
- Simple Icons（品牌 Logo）: https://simpleicons.org/
|
|||
|
|
|
|||
|
|
### 无障碍指南
|
|||
|
|
- WCAG 2.1: https://www.w3.org/WAI/WCAG21/quickref/
|
|||
|
|
- WebAIM 对比度检查: https://webaim.org/resources/contrastchecker/
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 🎨 当前实现状态
|
|||
|
|
|
|||
|
|
### ✅ 已完成
|
|||
|
|
- [x] 深色主题优化
|
|||
|
|
- [x] 渐变视觉效果
|
|||
|
|
- [x] 响应式布局
|
|||
|
|
- [x] 加载动画
|
|||
|
|
- [x] 交互反馈
|
|||
|
|
|
|||
|
|
### 🔄 待优化（基于新设计系统）
|
|||
|
|
- [ ] 切换到浅色背景（#F8FAFC）
|
|||
|
|
- [ ] 更新字体为 Space Grotesk + DM Sans
|
|||
|
|
- [ ] 调整配色为专业蓝色系
|
|||
|
|
- [ ] 添加信任标识
|
|||
|
|
- [ ] 优化移动端表格体验
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 📝 下一步行动
|
|||
|
|
|
|||
|
|
1. **评估当前设计**：对比现有深色主题 vs 新设计系统
|
|||
|
|
2. **用户测试**：收集用户对配色和布局的反馈
|
|||
|
|
3. **渐进式优化**：可以保留深色主题，添加浅色主题切换
|
|||
|
|
4. **数据验证**：确保价格数据准确性和更新频率
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
**设计系统版本**: v1.0
|
|||
|
|
**生成时间**: 2026-02-09
|
|||
|
|
**设计工具**: UI/UX Pro Max Design Intelligence
|
|||
|
|
**适用范围**: VPS 价格对比网站前端界面
|