31
响应式与可访问性
响应式与可访问性:从“能看”到“能用”
模块目标
让页面在不同设备、不同用户场景下都可用。
响应式的最小标准
- 手机端可读:字号、行高、间距合理
- 关键操作可点击:按钮尺寸和间距足够
- 内容不溢出:无横向滚动条、无遮挡
设计顺序建议
- Mobile First:先做移动端,再增强到桌面端
- Breakpoint 少而精:避免过度碎片化
基础可访问性清单
- 图片有
alt - 表单控件有对应
label - 颜色对比足够
- 键盘可访问关键功能
本模块 Lab 练习建议
做完每个 Lab 后至少切一次手机视图,检查:
- 文本是否可读
- 交互是否可触达
- 布局是否稳定
迁移任务
选一个已完成页面,做一版“移动端可用性巡检报告”:
- 发现 3 个问题
- 给出 3 个修复点
- 说明每个修复对体验的影响