构建或评审现代 Web UI 时，用于提升可访问性…

适用于创建或审查用户界面，遵循现代 Web 标准来提升可访问性、性能与用户体验。

适用场景

解决思路

1. 建立清晰的视觉层级，引导用户注意力。
2. 选择能体现品牌的一致配色方案（向用户询问品牌指南）。
3. 有效运用排版以提升可读性和强调效果。
4. 保持足够的对比度以确保可读性（符合 WCAG 2.1 AA 标准）。
5. 确保整个应用样式一致。
6. 创建直观的导航模式。
7. 使用熟悉的 UI 组件以降低认知负荷。
8. 提供明确的行动号召（CTA）以引导用户行为。
9. 实现响应式设计以实现跨设备兼容。
10. 谨慎使用动画，使其增强体验而非分散注意力。
11. 遵循 WCAG 指南以实现 Web 无障碍。
12. 使用语义化 HTML 以增强屏幕阅读器兼容性。
13. 为图像和非文本内容提供替代文本。
14. 确保所有交互元素可通过键盘访问。
15. 使用多种辅助技术进行测试。
16. 优化图像和资源以缩短加载时间。
17. 对非关键资源实现懒加载。
18. 使用代码分割以提升首屏加载性能。
19. 监控 Core Web Vitals (LCP, FID, CLS)。
20. 提供清晰的操作确认机制。
21. 为异步操作显示加载指示器。
22. 提供有用的错误信息并包含恢复指引。
23. 通过分析工具跟踪用户行为。
24. 按逻辑组织内容以提升可发现性。
25. 使用清晰的标签和一致的分类。
26. 实现有效的搜索功能。
27. 创建可视化的结构图。
28. 优先为移动设备设计，再向上扩展。
29. 使用适合触摸的界面元素。
30. 为常见操作实现手势（滑动、双指缩放）。
31. 为重要的交互元素考虑拇指可触区域。
32. 开发并维护设计系统。
33. 在界面间使用一致的术语。
34. 以可预测的方式定位重复出现的元素。
35. 确保不同区块之间的视觉一致性。
36. 对关键设计决策进行 A/B testing。
37. 通过热力图和会话录制分析用户行为。
38. 定期收集用户反馈。
39. 根据数据迭代设计。
40. 使用相对单位（%、em、rem）而非固定像素。
41. 使用 CSS Grid 和 Flexbox 实现灵活布局。
42. 针对不同屏幕尺寸调整排版以提升可读性。
43. 确保交互元素足够大以便触摸（最小 44x44 pixels）。
44. 在可行时使用 CSS animations 而非 JavaScript。
45. 为首屏内容实现 critical CSS。
46. 设计移动友好的导航模式（例如 hamburger menu）。
47. 确保键盘和屏幕阅读器可访问性。
48. 实现响应式表单布局并选择合适的输入类型。
49. 包含内联验证和清晰的错误消息。
50. 使用浏览器开发者工具测试响应式效果。
51. 在真实设备上测试，而不仅是模拟器。
52. 跨设备类型进行可用性测试。
53. 持续跟进响应式设计技术和行业标准。

适用边界 · 注意事项

• 当项目已有严格且不可更改的品牌/设计系统规范时，不宜直接套用这些通用建议，而应优先遵循既有规范。
• 当产品没有图形用户界面（如纯后端 API、CLI 工具、嵌入式无 UI 系统）时，大部分 UI 设计实践不适用。
• 当团队无法进行用户测试、A/B testing 或数据采集时，依赖这些验证手段的条目应谨慎使用或暂时跳过。