设计或评审数字产品界面时，用 UX 最佳实践提升可用性…

适用于产品、前端、全栈和设计评审中创建或优化直观、可访问、以用户为中心的数字体验。

适用场景

解决思路

1. 用户研究：开展用户访谈以理解需求和痛点。
2. 用户研究：基于研究数据创建用户画像。
3. 用户研究：绘制用户旅程图以识别机会点。
4. 用户研究：通过可用性测试验证假设。
5. 用户研究：使用分析数据指导设计决策。
6. 信息架构：逻辑地组织内容，便于用户轻松获取。
7. 信息架构：使用清晰的标签和分类来设计导航。
8. 信息架构：实现有效的搜索功能。
9. 信息架构：创建站点地图以可视化整体结构。
10. 信息架构：开展卡片分类练习来组织内容。
11. 交互设计：创建直观、用户容易跟随的导航模式。
12. 交互设计：使用熟悉的 UI 组件以降低认知负荷。
13. 交互设计：提供清晰的行动号召（CTA）来引导用户行为。
14. 交互设计：实现响应式设计以兼容跨设备。
15. 交互设计：有选择地应用动画，使其增强体验而非分散注意力。
16. 视觉设计：建立清晰的视觉层级以引导用户注意力。
17. 视觉设计：选择能体现品牌的一致配色方案。
18. 视觉设计：策略性地运用排版以提升可读性和强调效果。
19. 视觉设计：保持足够对比度以保证可读性（WCAG 2.1 AA 标准）。
20. 视觉设计：在整个应用中保持样式一致。
21. 无障碍：遵循 WCAG 指南实现 Web 无障碍。
22. 无障碍：使用语义化 HTML 以增强屏幕阅读器兼容性。
23. 无障碍：为图片和非文本内容提供替代文本。
24. 无障碍：确保所有交互元素都可键盘导航。
25. 无障碍：使用多种辅助技术进行测试。
26. 性能优化：优化图片和资源以最小化加载时间。
27. 性能优化：对非关键资源实现懒加载。
28. 性能优化：使用代码分割来改善初始加载性能。
29. 性能优化：监控并优化 Core Web Vitals（LCP、FID、CLS）。
30. 用户反馈：为用户操作实现清晰的响应机制。
31. 用户反馈：为异步操作使用加载指示器。
32. 用户反馈：提供清晰的错误信息和恢复选项。
33. 用户反馈：实现分析以追踪用户行为和痛点。
34. 移动优先设计：先为移动设备设计，再向上扩展。
35. 移动优先设计：使用适合触控的界面元素。
36. 移动优先设计：为常见操作实现手势（滑动、捏合缩放）。
37. 移动优先设计：为重要交互元素考虑拇指可触区域。
38. 一致性：制定并遵守设计系统。
39. 一致性：在整个界面中使用一致的术语。
40. 一致性：保持重复出现元素的位置一致。
41. 一致性：确保不同版块之间的视觉一致性。
42. 测试与迭代：对关键设计决策进行 A/B 测试。
43. 测试与迭代：使用热力图和会话录制分析用户行为。
44. 测试与迭代：定期收集并纳入用户反馈。
45. 测试与迭代：基于数据和反馈持续迭代设计。
46. 文档：维护全面的样式指南。
47. 文档：记录设计模式和组件用法。
48. 文档：为复杂交互创建用户流程图。
49. 文档：保持设计资产有组织且团队可访问。
50. 响应式布局：使用相对单位（%、em、rem）而非固定像素。
51. 响应式布局：使用 CSS Grid 和 Flexbox 实现灵活布局。
52. 响应式布局：移动优先设计，然后渐进增强。
53. 内容策略：编写清晰、简洁的微文案。
54. 内容策略：使用渐进式披露来管理复杂度。
55. 内容策略：根据用户需求确定内容优先级。
56. 内容策略：保持一致的语气和语调。
57. 认知负荷管理：尽可能减少选项数量。
58. 认知负荷管理：将相关信息分组在一起。
59. 认知负荷管理：有效使用留白。
60. 认知负荷管理：提供合理的默认值。
61. 认知负荷管理：将复杂任务拆解为更小步骤。
62. 情感化设计：创建令人愉悦的微交互。
63. 情感化设计：庆祝用户的成就。
64. 情感化设计：以同理心处理错误。
65. 情感化设计：通过透明建立信任。
66. 持续跟进 UX 设计技术和行业标准。

适用边界 · 注意事项

• 不适用于没有用户界面或交互的后端服务、一次性脚本、CLI 内部工具等场景；这些原则价值有限。
• 当只需快速验证技术可行性或极早期原型时，完整用户研究、可用性测试、A/B 测试可能过重，可暂缓。
• 不能替代正式法律或合规审计；需要 WCAG、ADA 等认证时仍需专业审计。