网站品质升级助手

4. 确定一个设计方向

设计方向必须能解释产品，而不是只列流行风格词。至少定义：

• 品牌气质与需要避免的感觉
• 字体角色与字号层级
• 主色、强调色和功能色
• 内容宽度、网格和间距节奏
• 图片或插图的使用原则
• 组件表面与交互反馈
• 动效的目的、速度和触发方式

不要在同一个页面混用多个互相冲突的视觉语言。

5. 先改高影响区域

优先顺序通常是：

1. 导航与首屏表达 2. 核心任务路径 3. 标题层级和行动按钮 4. 信任信息、案例与数据 5. 表单、空状态和错误状态 6. 页尾与次要页面

先做一页或一个完整流程的样板，再扩展到其他页面。

6. 建立可复用规则

把成熟方案整理为设计令牌和组件规则，包括：

• 颜色与对比度
• 字号、行高和字重
• 间距序列
• 容器宽度和断点
• 按钮、输入框、卡片和弹层状态
• 图标、图片和数据展示规范

避免在每个页面写一套只生效一次的数值。

7. 实施时保护现有功能

• 先阅读现有组件和数据流
• 小步修改，每一步都能运行
• 不为了视觉效果改变业务语义
• 保留 URL、表单字段、埋点和重要 DOM 语义
• 动画挂在不会破坏布局和定位的层级
• 新样式优先复用系统变量，避免全局污染

8. 做响应式与状态检查

至少检查手机、平板和桌面宽度，并覆盖：

• 默认、hover、focus、active、disabled
• 加载、空数据、错误和成功
• 长标题、长数字、多语言和缺图
• 键盘导航与减少动态效果设置

9. 对照基线验收

改版后重新记录截图、性能和测试结果。逐项回答：

• 核心任务是否更容易发现和完成
• 页面主次是否更清楚
• 是否保留所有必要功能
• 移动端是否真正重排，而不是缩小桌面版
• 性能、SEO 和可访问性是否出现回退

输出格式

改版交付/
├── audit.md               # 问题、优先级与证据
├── direction.md           # 设计方向与系统规则
├── change-map.md          # 页面和组件修改清单
├── implementation/        # 实际代码改动
├── before-after/          # 改版前后截图
└── verification.md        # 功能、视觉、性能检查结果

每个重要改动都应能追溯到审计中的具体问题。

完整示例

某 SaaS 首页功能完整，但首屏同时放了六个按钮，字体层级接近，移动端卡片横向溢出。

合理升级方案：

1. 把页面目标明确为“让新用户理解价值并开始试用” 2. 首屏只保留一个主要行动和一个次要入口 3. 用结果型标题替代功能堆叠，补充真实使用证据 4. 建立三级标题、两档正文和统一间距序列 5. 卡片在移动端改为单列，数据表提供折叠或横向查看策略 6. 为按钮、表单和加载状态补齐交互反馈 7. 对比改版前后的核心路径、移动端截图与性能指标

质量检查清单

• [ ] 每个页面的主要任务清楚
• [ ] 首屏主行动在视觉上唯一明确
• [ ] 字体、颜色、间距和组件形成系统
• [ ] 设计方向与产品内容一致
• [ ] 没有用装饰掩盖信息问题
• [ ] 所有原有关键功能仍可使用
• [ ] 手机、平板和桌面均完成检查
• [ ] hover、focus、加载、错误和空状态齐全
• [ ] 动效有明确反馈目的，并支持减少动态效果
• [ ] 文本和控件达到基本可访问性要求
• [ ] 性能、SEO 和埋点没有意外回退
• [ ] 已保存改版前后证据和验证结果

信息不足时怎么处理

• 不清楚目标用户：先从现有内容和主要行动推断，并标记假设
• 没有品牌规范：从产品定位提炼少量可执行规则，不随意追逐风格
• 无法运行项目：先做截图与代码静态审计，不声称功能已验证
• 改版范围过大：按用户路径拆成阶段，先完成高影响样板
• 缺少数据：用可用性和信息层级证据提出方案，避免编造转化结论
• 现有系统限制较多：保留约束，优先通过字体、间距、层级和状态提升品质