用途
User Preference Respect 是一个面向界面设计与前端实现的技能，目标是让界面检测并响应操作系统层面的用户偏好设置。这些偏好是用户主动设定的，忽略它们等于覆盖用户自己的无障碍决定。该技能适用于实现深色模式、减少动态效果、高对比度、文字缩放等场景。
主要能力
技能围绕以下几类系统偏好展开，并给出对应的处理方式：
prefers-reduced-motion
含义：用户会因动态效果感到不适或受到伤害。
处理方式：
- 禁用所有装饰性动画
- 将滑动/淡入淡出过渡替换为即时状态切换
- 保留必要的动态效果（如加载指示器），但进行简化
- 禁用视差、滚动触发动画和自动播放
- 绝不覆盖此偏好
检测方式：@media (prefers-reduced-motion: reduce)
prefers-contrast
含义：用户需要更强的视觉区分度。
处理方式：
- 将对比度提高到 WCAG 最低要求之上
- 用实线边框替换细微阴影和渐变
- 让焦点指示器更粗、更明显
- 移除透明和模糊效果
- 增加交互元素的边框宽度
检测方式：@media (prefers-contrast: more)
prefers-color-scheme
含义：用户偏好浅色或深色界面。
处理方式：
- 提供真正的深色模式（而非简单反色）
- 确保所有内容在两种模式下都清晰可读
- 在两种模式下测试图片、图表、图标和插图
- 深色模式不要使用纯黑（#000），改用深灰（#1a1a1a）以减轻眼睛疲劳
- 注意：深色模式不只是审美问题，它能减轻眼疲劳，并帮助部分对光敏感的人
检测方式：@media (prefers-color-scheme: dark)
forced-colors
含义：用户启用了 Windows 高对比度或类似功能。
处理方式：
- 不要对抗系统的颜色覆盖
- 确保边框和轮廓能定义交互元素（系统会剥离你的颜色）
- 使用在强制颜色模式下会变为可见的透明边框
- 测试所有交互元素是否仍可区分
- 不要仅依赖背景色来表示状态
检测方式：@media (forced-colors: active)
prefers-reduced-transparency
含义：用户觉得透明元素难以阅读。
处理方式：
- 用纯色背景替换半透明背景
- 移除毛玻璃/背景模糊效果
- 确保覆盖层完全不透明
检测方式：@media (prefers-reduced-transparency: reduce)
实现原则
渐进增强
- 先构建无障碍版本
- 将动态效果、透明度和视觉装饰作为增强项添加
- 当检测到某项偏好时，你是在移除增强项，而不是降低体验
不要询问，而是检测
- 当操作系统已有相应设置时，不要让用户在你的应用里重新配置无障碍选项
- 自动检测并响应
- 如果你提供额外设置，它们应叠加在系统偏好之上，而不是替代系统偏好
测试每一种偏好
- 分别启用每一种偏好进行测试
- 测试组合情况（减少动态效果 + 高对比度 + 深色模式）
- 验证界面在每种状态下都完整可用
- 自动化测试可以检查媒体查询是否存在，手动测试则验证其是否真正生效
评估清单
- prefers-reduced-motion 被检测到，且所有装饰性动态停止
- prefers-contrast 被检测到，且视觉对比度提高
- prefers-color-scheme 被检测到，且主题切换
- forced-colors 模式不会破坏交互元素
- 多种偏好的组合能协同工作
- 没有任何偏好被覆盖或忽略
适用场景
适用于需要遵循无障碍设计规范的界面开发，尤其是涉及深色模式、动态效果控制、高对比度支持和系统颜色覆盖等场景。
限制
资料未提供该技能的具体安装方式、依赖环境、支持的平台或框架、收费信息及使用步骤，这些内容暂未提供。