每日大赛91相关信息太杂？用经验总结把夜间模式列个检查表
最近在维护“每日大赛91”的夜间模式时，发现信息来源分散、问题反复出现：有人抱怨对比度不够，有人反馈图片看不清，还有人在特殊机型上遇到闪烁。把这些常见痛点和解决经验整理成一份实操性强的检查表，可以大幅提升上线效率和体验一致性。下面是一套基于产品、设计、前端和 QA 多年实战的夜间模式检查清单，照着走一遍，能快速定位问题并降低回归成本。
适用对象
- 产品经理、设计师、前端工程师、QA
- 用于功能评审、设计交付、开发实现、回归测试与上线监控
总体原则（一句话） 保持信息层次清晰、视觉对比稳定、交互行为一致、兼顾可访问性与性能。
视觉与配色
- 基色与文本对比：正文、次要文本、链接、标签都要满足 WCAG 对比度（正文至少 4.5:1；大字号可放宽）。检查按钮文本与按钮背景对比。
- 语义色系对应：错误、警告、成功、信息色在夜间也要有明确区分，不可仅靠亮度差。
- 中性色管理：黑与灰的选择会影响层次感，避免纯 #000 做背景（可偏灰，例如 #0B0B0F），用不同灰度区分卡片与背景。
- 强调色与饱和度：避免高饱和彩色在纯黑背景下刺眼，适当降低饱和度或加入柔和外发光。
- 视觉一致性表：列出所有 UI 元素的昼/夜色值对照表（背景、卡片、边框、文本、placeholder、icon、阴影）。
图像、图标与插画
- 彩色图片处理：检视图片在暗色背景下的可读性，必要时提供暗色版、半透明黑色遮罩或亮度自适应逻辑。
- 图标替换：给关键图标提供夜间版本（线性与轮廓图标在深色背景上需加描边或填充）。
- 插画方案：若使用插画，准备深色/浅色两套资源或统一滤镜策略。
- 图片加载策略：避免直接把白色背景的图片放到深背景上，考虑自动裁剪或加边框。
交互与控件
- 输入框与占位符：占位符颜色在夜间需比正文更淡但仍可读；输入焦点、错误提示、禁用态必须明显。
- 按钮/开关：交互态（hover、pressed、disabled）要有足够区分，开关切换动画要平滑且颜色变化明确。
- 模态、弹窗、下拉：弹窗背景应有遮罩层并维持层级对比；下拉/提示位置在夜间不能丢失边界。
- 滚动条与光标：确保文本光标、选中文本在暗背景仍可见，复制粘贴选择颜色可视化良好。
系统偏好与切换逻辑
- 自动与手动优先级：支持系统暗色优先（prefers-color-scheme），同时提供页面内手动切换并记忆用户选择。
- 切换即时生效：切换后整个页面风格应平滑过渡，避免闪烁或短暂白屏。
- 初次加载策略：在首屏渲染前决定主题，避免先渲染浅色再切换为暗色（闪屏问题）。
可访问性（A11y）
- 对比度测试：使用工具批量检测色值，标注不合格项并优先修复。
- 屏幕阅读器：夜间模式不应改变语义顺序或隐藏重要信息，检查 ARIA 状态显示一致。
- 键盘导航：确保焦点样式在暗色主题下明显，所有交互控件可被键盘访问。
- 动画与闪烁：提供减少动画选项，避免高对比闪烁诱发不适。
性能与电池
- GPU 合理利用：避免大量阴影、模糊与过度 GPU 拉伸导致耗电或卡顿，优先使用合成友好的 CSS。
- 资源切换成本：暗色/亮色资源切换不要每次都重新加载大图，利用缓存或预加载机制。
- 动画节流：夜间模式下同样要考虑帧率，复杂动画在低端机需降级。
内容与第三方组件
- 广告与嵌入：第三方广告或 iframe 常常没有暗色支持，要有后备样式或容器遮罩。
- Markdown/富文本：用户生成内容中带白底图片或代码块需处理（强制卡片样式或滤镜）。
- 第三方 SDK：梳理外部组件是否支持暗色，列出不支持项并评估替代方案或覆盖样式。
QA 测试清单（回归用）
- 关键路径测试：登录、报名、题目阅读、提交、评分页面在暗色下逐项验证。
- 设备覆盖：至少测试 iOS/Android 主流机型、Windows/macOS、常见浏览器的暗色表现。
- 场景测试：网络慢、离线、切换系统设置、夜间手动切换、不同语言环境。
- 边界情况：深色模式下截图打印、分享卡片、生成 PDF 等导出行为检查。
上线后监控
- 用户反馈渠道：在页面显著位置提供意见入口，快速收集夜间模式专属问题。
- 日志与崩溃：细化日志，记录主题切换、资源错误、第三方加载失败等事件。
- A/B 指标观察：观察留存、使用时长、错误率在开启夜间模式后的变化。
常见坑与快速修复技巧
- 白屏闪烁：初次渲染前先读取用户偏好或使用服务器渲染主题类名，避免切换渲染。
- 图片反差低：对图片统一加上深色遮罩或显示卡片背景色。
- 第三方样式覆盖失效：用容器化策略（frame/iframe 或 CSS scope）避免全局覆盖冲突。
- 占位符不可读：给占位符设置特殊颜色变量，单独测试每种表单状态。
结语 把夜间模式当成一次全栈优化工程：设计、前端实现、无障碍与 QA 都要联动。把上面的检查表变成标准化流程或 PR 模板，可以大大减少上线反复和用户抱怨。需要我把这份清单转成可直接用于项目的 Review Checklist（例如按角色拆分的核查表或 PR 模板）吗？我可以按你项目结构细化。
