logo
31

响应式与可访问性

⏱️ 16分钟

响应式与可访问性:从“能看”到“能用”

模块目标

让页面在不同设备、不同用户场景下都可用。


响应式的最小标准

  • 手机端可读:字号、行高、间距合理
  • 关键操作可点击:按钮尺寸和间距足够
  • 内容不溢出:无横向滚动条、无遮挡

设计顺序建议

  • Mobile First:先做移动端,再增强到桌面端
  • Breakpoint 少而精:避免过度碎片化

基础可访问性清单

  • 图片有 alt
  • 表单控件有对应 label
  • 颜色对比足够
  • 键盘可访问关键功能

本模块 Lab 练习建议

做完每个 Lab 后至少切一次手机视图,检查:

  • 文本是否可读
  • 交互是否可触达
  • 布局是否稳定

迁移任务

选一个已完成页面,做一版“移动端可用性巡检报告”:

  • 发现 3 个问题
  • 给出 3 个修复点
  • 说明每个修复对体验的影响