# 专业页面评审标准

## 核心评审维度速查

| 维度 | 关键问题 | 核心检查项 | 子维度 |
|------|----------|------------|--------|
| **1. 战略目标** | 页面为什么存在？ | 业务对齐、价值主张、用户问题 | 业务关联、用户定位、价值传达 |
| **2. 用户体验** | 用户能顺利完成任务吗？ | 信息层级、交互路径、视觉设计、状态覆盖 | 视觉设计、交互体验、信息架构、无障碍访问 |
| **3. 功能内容** | 功能是否完整？ | 核心功能、内容质量、异常处理、可用性测试 | 功能完整性、内容准确性、异常处理、可用性 |
| **4. 数据度量** | 效果可衡量吗？ | 埋点设计、KPI关联、A/B测试、数据监控 | 监控体系、实验设计、数据驱动、效果验证 |
| **5. 技术性能** | 技术可行吗？ | 加载速度、兼容性、安全性、可访问性 | 性能优化、安全合规、兼容适配、技术选型 |
| **6. 市场竞品** | 与竞品相比如何？ | 差异化、用户习惯、合规性、市场定位 | 竞争分析、用户研究、合规风险、市场机会 |
| **7. 迭代运营** | 易于维护吗？ | 模块化、扩展性、运营成本、技术债务 | 系统架构、运维成本、扩展能力、技术负债 |

---

## 详细评分标准

### 1. 战略目标（10分）

**评分标准：**

| 分数 | 标准 | 具体表现 |
|------|------|----------|
| 9-10 | 目标清晰，与业务高度对齐，价值主张明确 | 页面目标与业务KPI直接关联，目标用户精准定义，价值主张一句话能说清，有明确成功指标 |
| 7-8 | 目标基本清晰，与业务关联但不够紧密 | 页面目标与业务有关联但不直接，目标用户定义较宽泛，价值主张需要解释，成功指标模糊 |
| 5-6 | 目标模糊，业务关联弱 | 页面目的不明确，与业务关系间接，目标用户不清晰，价值主张难理解，无成功指标 |
| 1-4 | 目标缺失，与业务脱节 | 页面无明确目的，与业务无关，价值主张缺失，无法衡量效果 |

**详细检查清单：**

#### 业务关联性（4分）
- [ ] 页面服务于明确的业务KPI或目标
- [ ] 与整体产品/业务战略保持一致
- [ ] 有明确的投资回报率（ROI）预期
- [ ] 解决了真实的用户问题或业务需求

#### 用户定位（3分）
- [ ] 目标用户群体定义清晰
- [ ] 用户核心诉求明确且真实存在
- [ ] 用户画像包含关键特征和使用场景
- [ ] 考虑了不同用户群体的差异化需求

#### 价值传达（3分）
- [ ] 价值主张能用一句话清晰表达
- [ ] 页面首屏能快速传达核心价值
- [ ] 用户能快速理解"为什么用这个页面"
- [ ] 有明确的成功定义和衡量标准

### 2. 用户体验（10分）

**评分标准：**

| 分数 | 标准 | 具体表现 |
|------|------|----------|
| 9-10 | 信息层级清晰，交互流畅，视觉设计专业，状态完整，异常处理完善 | 视觉焦点明确，交互路径高效，色彩系统完整，无障碍达标，所有状态都有处理 |
| 7-8 | 体验基本顺畅，视觉设计合格，有小瑕疵 | 主要体验流程顺畅，但存在细节问题，色彩使用基本合理，部分状态处理不完善 |
| 5-6 | 存在明显体验问题，视觉设计不足，影响任务完成 | 信息层级混乱，交互逻辑不清，色彩搭配有问题，无障碍缺失，影响核心任务 |
| 1-4 | 体验差，视觉设计混乱，阻塞用户完成任务 | 用户无法完成任务，视觉设计误导用户，严重无障碍问题，基本体验缺失 |

**详细检查清单：**

#### 视觉设计（4分） - **新增详细颜色审查**
- [ ] **视觉焦点唯一性**：页面有明确的视觉焦点，用户第一眼看到关键信息
- [ ] **信息层级≤3级**：信息结构清晰，主次分明，不超过三级
- [ ] **色彩系统完整**：参见[color-review.md](color-review.md)中的六层审查框架
  - 技术合规层：对比度达标（文字4.5:1，大文本3:1），色盲友好，响应式适配
  - 美学设计层：色彩风格统一，搭配和谐，比例合理（60-30-10规则）
  - 功能体验层：功能色区分明确（品牌色1-2个，功能色2-3个，中性色3-4个）
  - 品牌战略层：品牌色使用一致，符合目标用户偏好
  - 技术实现层：使用CSS变量管理颜色，支持主题切换
  - 业务适配层：颜色策略与页面类型匹配，有A/B测试优化空间
- [ ] **排版专业**：字体大小合理（中文≥14px，英文≥13px），行高适宜（1.4-1.6倍），对齐一致

#### 交互体验（3分）
- [ ] **核心任务路径最短**：用户完成主要任务步骤最少化
- [ ] **交互状态完整**：空状态、加载态、错误态、成功态、边界态都有设计
- [ ] **反馈及时明确**：操作反馈≤50ms，loading显示阈值≥300ms
- [ ] **手势交互支持**：移动端支持常见手势（滑动、长按、捏合）

#### 信息架构（2分）
- [ ] **信息密度合理**：同一屏信息点5-10个，间距16-24px
- [ ] **导航清晰**：用户知道自己在哪，能去往哪里
- [ ] **内容组织逻辑**：信息分组合理，相关性强的内容在一起

#### 无障碍访问（1分）
- [ ] **键盘导航支持**：所有功能可通过键盘操作
- [ ] **屏幕阅读器兼容**：ARIA标签完整，语义化HTML
- [ ] **可访问性基础**：文字可放大，颜色不单独传达信息

### 3. 功能内容（10分）

**评分标准：**

| 分数 | 标准 | 具体表现 |
|------|------|----------|
| 9-10 | 功能完整，内容精准，文案清晰，异常处理完善 | 所有承诺功能都实现，内容无错误，文案易于理解，所有异常情况都有处理 |
| 7-8 | 功能基本完整，内容有小问题，异常处理一般 | 核心功能完整，但辅助功能缺失，内容有小错误，部分异常未处理 |
| 5-6 | 功能缺失或内容质量差，影响使用 | 重要功能缺失，内容错误较多，文案难理解，异常处理不足 |
| 1-4 | 核心功能缺失或内容错误，无法使用 | 页面基本功能无法使用，内容大量错误，无异常处理 |

**详细检查清单：**

#### 功能完整性（4分）
- [ ] **承诺功能全部实现**：所有对外承诺的功能都完整实现
- [ ] **功能优先级合理**：核心功能突出，次要功能不喧宾夺主
- [ ] **功能可用性**：所有功能都能正常使用，无死链或错误
- [ ] **功能一致性**：相同功能在不同位置表现一致

#### 内容准确性（3分）
- [ ] **内容无错误**：文字、数字、链接等内容准确无误
- [ ] **文案清晰易懂**：语言简洁明了，无歧义，符合用户认知
- [ ] **内容时效性**：信息及时更新，无过时内容
- [ ] **多语言支持**：支持主要用户群体的语言（如需）

#### 异常处理（2分）
- [ ] **输入验证**：表单输入有合理验证和提示
- [ ] **错误恢复**：出错后能方便恢复或重新开始
- [ ] **网络异常**：网络中断有明确提示和恢复方案
- [ ] **数据异常**：数据错误或缺失时有合理显示

#### 可用性测试（1分）
- [ ] **核心任务可完成**：目标用户能独立完成核心任务
- [ ] **新手友好**：首次用户能快速上手
- [ ] **效率评估**：熟练用户能高效完成任务

### 4. 数据度量（10分）

**评分标准：**

| 分数 | 标准 | 具体表现 |
|------|------|----------|
| 9-10 | 埋点完整，KPI关联清晰，可A/B验证，监控完善 | 关键行为全埋点，与业务KPI直接关联，支持多变量测试，实时监控异常 |
| 7-8 | 有基本埋点，度量不够精细，监控一般 | 主要功能有埋点，与KPI关联但不直接，支持基础A/B测试，有基础监控 |
| 5-6 | 埋点缺失，难以衡量效果，监控不足 | 只有少量埋点，与KPI关联弱，无法进行有效测试，监控不完善 |
| 1-4 | 无度量设计，无法衡量效果 | 完全没有埋点，与业务脱节，无监控机制 |

**详细检查清单：**

#### 监控体系（4分）
- [ ] **核心指标埋点**：关键用户行为全量埋点
- [ ] **漏斗分析支持**：关键转化路径可完整追踪
- [ ] **实时监控**：关键指标有实时监控和告警
- [ ] **数据准确性**：埋点数据准确可靠，无重复或丢失

#### 实验设计（3分）
- [ ] **A/B测试支持**：支持页面级的A/B测试
- [ ] **多变量测试**：支持同时测试多个变量
- [ ] **实验科学性**：样本量计算合理，统计显著性考虑
- [ ] **快速迭代**：实验周期短，能快速验证假设

#### 数据驱动（2分）
- [ ] **KPI关联明确**：每个埋点都与业务KPI关联
- [ ] **决策支持**：数据能支持产品决策
- [ ] **用户洞察**：通过数据能发现用户行为模式
- [ ] **效果评估**：能准确评估功能上线效果

#### 效果验证（1分）
- [ ] **成功标准明确**：有明确的成功验证标准
- [ ] **归因分析**：能分析效果归因
- [ ] **ROI计算**：能计算投资回报率
- [ ] **长期追踪**：能追踪长期效果变化

### 5. 技术性能（10分）

**评分标准：**

| 分数 | 标准 | 具体表现 |
|------|------|----------|
| 9-10 | 加载快，兼容性好，安全性高，可访问性完善 | Core Web Vitals优秀，全平台兼容，安全漏洞少，无障碍达标 |
| 7-8 | 性能可接受，兼容性一般，安全性基本达标 | 核心性能指标达标，主流平台兼容，无严重安全漏洞，基本无障碍 |
| 5-6 | 存在性能问题或兼容性问题，安全性有风险 | 加载慢或交互延迟，部分平台不兼容，有安全风险，无障碍不足 |
| 1-4 | 严重的性能或技术问题，安全性差 | 页面无法正常使用，兼容性差，安全漏洞多，无障碍严重缺失 |

**详细检查清单：**

#### 性能优化（4分）
- [ ] **Core Web Vitals达标**：
  - LCP（最大内容绘制）≤2.5秒
  - FID（首次输入延迟）≤100毫秒  
  - CLS（累积布局偏移）≤0.1
- [ ] **加载性能**：首屏加载≤3秒，完全加载≤5秒
- [ ] **资源优化**：图片压缩，代码分割，懒加载
- [ ] **缓存策略**：合理使用浏览器缓存和CDN

#### 安全合规（3分）
- [ ] **输入安全**：所有用户输入都有验证和过滤
- [ ] **数据安全**：敏感数据加密传输和存储
- [ ] **认证授权**：合理的认证和权限控制
- [ ] **合规性**：符合GDPR、CCPA等数据隐私法规

#### 兼容适配（2分）
- [ ] **浏览器兼容**：支持Chrome、Safari、Firefox、Edge等主流浏览器
- [ ] **设备兼容**：支持手机、平板、桌面等不同设备
- [ ] **分辨率适配**：支持从手机到4K屏幕的不同分辨率
- [ ] **网络环境**：在慢速网络下也能基本可用

#### 技术选型（1分）
- [ ] **技术栈合理**：选择的技术栈适合业务需求
- [ ] **可维护性**：代码结构清晰，易于维护
- [ ] **扩展性**：技术架构支持未来扩展
- [ ] **技术债务**：技术债务可控，有偿还计划

### 6. 市场竞品（10分）

**评分标准：**

| 分数 | 标准 | 具体表现 |
|------|------|----------|
| 9-10 | 有差异化优势，符合用户习惯，合规完善，市场定位清晰 | 有明显的竞争优势，完全符合用户使用习惯，无合规风险，市场定位精准 |
| 7-8 | 与竞品持平，无明显优势，合规基本达标 | 功能与竞品相当，基本符合用户习惯，无重大合规问题，市场定位较清晰 |
| 5-6 | 与竞品有差距，用户习惯适配不足 | 功能或体验落后竞品，部分设计不符合用户习惯，有合规风险 |
| 1-4 | 明显落后于竞品，用户习惯冲突，合规问题严重 | 全面落后竞品，设计违背用户习惯，有严重合规风险 |

**详细检查清单：**

#### 竞争分析（4分）
- [ ] **差异化优势**：有明确的竞争优势或独特卖点
- [ ] **竞品对标**：了解主要竞品的优势和劣势
- [ ] **市场定位**：在市场中位置清晰，不与其他产品过度重叠
- [ ] **竞争策略**：有明确的竞争应对策略

#### 用户研究（3分）
- [ ] **用户习惯符合**：设计符合目标用户的使用习惯
- [ ] **心智模型匹配**：界面设计与用户心智模型一致
- [ ] **学习成本低**：用户不需要重新学习就能使用
- [ ] **文化适配**：考虑不同文化背景用户的差异

#### 合规风险（2分）
- [ ] **法律合规**：符合相关法律法规要求
- [ ] **行业标准**：符合所在行业的规范和标准
- [ ] **伦理考量**：设计符合伦理道德标准
- [ ] **隐私保护**：充分保护用户隐私

#### 市场机会（1分）
- [ ] **市场需求**：满足真实的市场需求
- [ ] **增长潜力**：有明确的增长空间和路径
- [ ] **趋势把握**：把握行业发展趋势
- [ ] **创新程度**：有一定的创新性

### 7. 迭代运营（10分）

**评分标准：**

| 分数 | 标准 | 具体表现 |
|------|------|----------|
| 9-10 | 模块化设计，易扩展，运营成本低，技术债务少 | 高度模块化，轻松支持新功能，运营效率高，技术债务可控 |
| 7-8 | 基本可维护，扩展性一般，运营成本可控 | 代码结构较清晰，扩展需要一定工作，运营成本合理，技术债务一般 |
| 5-6 | 维护成本高，扩展困难，运营效率低 | 代码耦合度高，扩展困难，运营成本高，技术债务多 |
| 1-4 | 难以维护，无法扩展，运营成本高 | 代码混乱，几乎无法扩展，运营成本高昂，技术债务严重 |

**详细检查清单：**

#### 系统架构（4分）
- [ ] **模块化设计**：功能模块边界清晰，耦合度低
- [ ] **组件复用**：通用组件高度复用
- [ ] **设计系统**：有统一的设计规范和技术实现
- [ ] **架构清晰**：系统架构文档完整，易于理解

#### 运维成本（3分）
- [ ] **部署便捷**：部署流程自动化，一键部署
- [ ] **监控完善**：系统运行状态全面监控
- [ ] **故障恢复**：故障时能快速定位和恢复
- [ ] **资源效率**：资源使用效率高，成本可控

#### 扩展能力（2分）
- [ ] **新功能支持**：能较容易地添加新功能
- [ ] **规模扩展**：支持用户量和数据量的增长
- [ ] **国际化支持**：支持多语言和多地区
- [ ] **定制化能力**：支持不同客户的定制需求

#### 技术负债（1分）
- [ ] **债务识别**：清楚识别现有技术债务
- [ ] **偿还计划**：有明确的技术债务偿还计划
- [ ] **预防机制**：有机制预防新债务产生
- [ ] **影响评估**：技术债务对业务的影响可控

---

## 总分评级

| 总分 | 评级 | 建议 |
|------|------|------|
| 60-70 | 优秀 | 保持并强化优势，关注细节优化 |
| 45-59 | 良好 | 针对性改进，重点优化短板维度 |
| 30-44 | 一般 | 系统性改进，重新审视核心问题 |
| <30 | 需改进 | 重新设计，优先解决致命问题 |

---

## 截图评审特有维度

### 视觉层级深度扫描

**六层视觉审查框架：**

```
1. 技术合规层：对比度、色盲友好、响应式
2. 美学设计层：色彩风格、搭配和谐、视觉节奏  
3. 功能体验层：功能色区分、信息传达、认知负荷
4. 品牌战略层：品牌一致性、用户适配、行业惯例
5. 技术实现层：CSS变量、主题支持、维护扩展
6. 业务适配层：场景化策略、A/B测试、竞品对比
```

**详细检查项参见：[color-review.md](color-review.md)**

### 信息密度智能分析

**量化评估标准：**

| 密度级别 | 信息点数量 | 平均间距 | 用户感受 | 建议 |
|----------|------------|----------|----------|------|
| **过密** | >10个/屏 | <12px | 压迫感，难以聚焦 | 减少信息点，增加留白 |
| **适中** | 5-10个/屏 | 16-24px | 舒适，信息清晰 | 保持现状 |
| **过疏** | <5个/屏 | >40px无功能 | 空洞，缺乏内容 | 增加内容或调整布局 |

### 交互状态完整性检查

**必查的七种状态：**

1. **初始状态** - 页面首次加载时的表现
2. **加载状态** - 数据加载中的反馈
3. **空状态** - 无数据时的展示
4. **成功状态** - 操作成功后的确认
5. **错误状态** - 操作失败时的处理
6. **边界状态** - 极端情况（超长文本、大量数据）
7. **过渡状态** - 状态切换时的动画

---

## 执行层检查清单（交付前必过）

### 战略层
- [ ] 页面目标与业务KPI关联明确
- [ ] 目标用户定义清晰，有用户画像
- [ ] 价值主张一句话能说清
- [ ] 有明确的成功指标和验证方法

### 体验层
- [ ] 视觉焦点唯一且明确
- [ ] 信息层级≤3级，主次分明
- [ ] 核心任务路径最短化
- [ ] 七种交互状态全部覆盖
- [ ] 颜色审查通过六层框架检查

### 执行层
- [ ] 间距符合4px基准（4/8/12/16/24/32/48/64）
- [ ] 字体大小合理：中文≥14px，英文≥13px
- [ ] 点击反馈≤50ms，loading显示阈值≥300ms
- [ ] 相同功能视觉表达统一
- [ ] Core Web Vitals达标（LCP≤2.5s, FID≤100ms, CLS≤0.1）

### 数据层
- [ ] 关键行为全埋点
- [ ] 埋点与KPI关联清晰
- [ ] 支持A/B测试
- [ ] 有实时监控和告警

### 输出层
- [ ] 三套方案完整（渐进/重塑/理想）
- [ ] 优先级排序明确（影响度×努力度矩阵）
- [ ] 度量指标可验证
- [ ] 有明确的执行计划和时间节点

---

## 新增维度文档

### 1. 专业颜色审查框架
详细内容参见：[color-review.md](color-review.md)

### 2. 排版与字体审查指南
详细内容参见：[typography-review.md](typography-review.md)

### 3. 交互与动画审查标准
详细内容参见：[interaction-review.md](interaction-review.md)

### 4. 无障碍访问审查清单
详细内容参见：[accessibility-review.md](accessibility-review.md)

### 5. 安全性与合规审查指南
详细内容参见：[security-review.md](security-review.md)

### 6. 性能与优化审查标准
详细内容参见：[performance-review.md](performance-review.md)

---

## 使用方法

1. **快速评审**：使用核心七维度速查表和快速检查清单
2. **深度评审**：使用详细评分标准和检查清单
3. **专项评审**：参考新增维度文档进行专业审查
4. **交付验收**：使用执行层检查清单确保质量

---

**文档版本：** v2.0  
**更新说明：** 深化了各维度的审查标准，新增颜色审查框架，增加了可扩展性  
**最后更新：** 2026年3月17日  
**适用对象：** 产品经理、设计师、开发者、测试人员、运营人员