ddrwode/vps_web

Template

Fork 0

Files

ddrwode 540db103a8 哈哈

2026-02-09 16:52:28 +08:00

7.3 KiB

Raw Blame History

🎨 VPS Price - 专业设计系统总结

基于 UI/UX Pro Max 设计智能分析，为 VPS 价格对比网站生成的专业设计系统。

📊 设计系统概览

🎯 产品定位

类型: 云服务器价格对比工具
目标用户: 开发者、企业 IT、个人站长
核心价值: 快速对比多家云厂商 VPS 价格和配置

🎨 设计风格：Trust & Authority（信任与权威）

为什么选择这个风格？

✅ 适合技术产品和专业服务
✅ 强调数据准确性和可信度
✅ 符合 B2B/企业级产品调性
✅ WCAG AAA 级别无障碍访问

风格特征：

专业的深色调配色
清晰的数据展示
权威的视觉层次
简洁的交互设计

🎨 配色方案

主色调（Professional Navy + Blue）

/* 主色 - 深海军蓝 */
--primary: #0F172A;      /* 导航栏、标题 */

/* 次要色 - 中性灰蓝 */
--secondary: #334155;    /* 副标题、辅助文本 */

/* CTA 色 - 专业蓝 */
--cta: #0369A1;          /* 按钮、链接、强调元素 */

/* 背景色 - 浅灰白 */
--background: #F8FAFC;   /* 页面背景 */

/* 文本色 - 深黑 */
--text: #020617;         /* 正文文本 */

语义化颜色

/* 成功/价格 */
--success: #10B981;      /* 价格高亮 */

/* 警告 */
--warning: #F59E0B;      /* 提示信息 */

/* 错误 */
--error: #EF4444;        /* 错误状态 */

/* 信息 */
--info: #3B82F6;         /* 信息提示 */

📝 字体系统

字体配对：Space Grotesk + DM Sans

为什么选择这个组合？

✅ 现代科技感，适合 SaaS/技术产品
✅ 优秀的可读性
✅ 支持中英文混排
✅ Google Fonts 免费使用

字体使用规则

/* 标题字体 - 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;
/* 用于：价格、代码、数据 */

字号层级

/* 移动端优先 */
--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（如：订阅更新、联系咨询）

✅ 设计检查清单

视觉质量

使用 SVG 图标（Heroicons/Lucide），不用 emoji
所有可点击元素添加 cursor: pointer
悬停状态有明确视觉反馈
过渡动画 150-300ms
文本对比度 ≥ 4.5:1

交互体验

表格支持横向滚动（移动端）
筛选器实时响应
加载状态有骨架屏
错误状态有友好提示
键盘导航可用

响应式设计

测试断点：375px, 768px, 1024px, 1440px
移动端字体 ≥ 16px
触摸目标 ≥ 44x44px
表格在移动端可滚动

性能优化

图片使用 WebP + srcset
字体使用 font-display: swap
尊重 prefers-reduced-motion
避免布局偏移（CLS）

无障碍访问

所有图片有 alt 文本
表单有 label 标签
聚焦状态清晰可见
语义化 HTML 标签
ARIA 标签适当使用

🚫 避免的反模式

1. 混乱的定价展示

❌ 不要：隐藏真实价格
❌ 不要：复杂的计算公式
✅ 要：清晰的月付价格
✅ 要：统一的货币单位

2. 缺少信任信号

❌ 不要：没有数据来源说明
❌ 不要：过时的价格信息
✅ 要：标注数据更新时间
✅ 要：链接到官方网站

3. AI 风格的紫粉渐变

❌ 不要：使用 AI 产品常见的紫色/粉色渐变
❌ 不要：过度使用霓虹色
✅ 要：使用专业的蓝色系
✅ 要：保持商务风格

🎯 实施优先级

P0 - 必须实现（核心体验）

✅ 响应式表格布局
✅ 实时筛选功能
✅ 清晰的价格展示
✅ 移动端适配
✅ 加载状态反馈

P1 - 应该实现（提升体验）

✅ 平滑动画效果
✅ 悬停状态反馈
✅ 骨架屏加载
✅ 错误状态处理
⬜ 数据排序功能

P2 - 可以实现（锦上添花）

⬜ 价格趋势图表
⬜ 收藏对比功能
⬜ 分享功能
⬜ 暗色模式
⬜ 多语言支持

📚 参考资源

设计系统文档

完整设计系统：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/

🎨 当前实现状态

✅ 已完成

深色主题优化
渐变视觉效果
响应式布局
加载动画
交互反馈

🔄 待优化（基于新设计系统）

切换到浅色背景（#F8FAFC）
更新字体为 Space Grotesk + DM Sans
调整配色为专业蓝色系
添加信任标识
优化移动端表格体验

📝 下一步行动

评估当前设计：对比现有深色主题 vs 新设计系统
用户测试：收集用户对配色和布局的反馈
渐进式优化：可以保留深色主题，添加浅色主题切换
数据验证：确保价格数据准确性和更新频率

设计系统版本: v1.0 生成时间: 2026-02-09 设计工具: UI/UX Pro Max Design Intelligence 适用范围: VPS 价格对比网站前端界面

7.3 KiB Raw Blame History Unescape Escape