ux-mobile-responsiveness-audit

移动端适配审查技能

此技能的工作方式（请先阅读）

这是一项评估型技能——它会依据移动端／触控标准审查现有成果，不会生成内容。标记问题是安全的，因此此技能会自动运行，并设计为在目标面向移动端或响应式场景时，由生成型技能作为验证步骤调用（组件系列、屏幕和流程在涉及移动端时都会交由此技能审查）。

此技能负责本项目中的移动端／触控适配问题。为避免与同级审查重复，它会将以下问题交由其他审查处理：

• WCAG 对比度、屏幕阅读器／辅助技术、键盘操作、替代文本、字幕 → 交由无障碍审查。此技能评判的是实际触控的人体工学和布局适配，而非辅助技术兼容性或对比度计算。
• 视觉构图——层级、间距美感、强调效果 → 交由美学审查。
• 可用性、流程和交互逻辑 → 交由启发式审查。
• 内容结构／导航方案 → 交由信息架构审查；字号层级 → ux-typography。

**适用性判断：**仅当目标需要在移动端使用或适配不同断点时，才适用此审查。如果设计明确仅面向桌面端（例如不支持移动端的复杂内部管理工具），请说明这一点并跳过审查——不要凭空编造移动端问题。

范围纪律。直接调用此技能时（用户明确指定了此审查），只审查此处关注的问题——不要纳入同级审查。只有在编排器（ux-design-review）或生成型技能依据 docs/orchestration-policy.md 调用时，才会与其他审查视角并行运行；此时它属于B 级——按需提供（仅限移动端平台）。明确指定的范围始终优先。

---

此技能相较于默认行为的变化

默认情况下，对于“是否适合移动端？”这类问题，往往只会得到模糊的回答——“把按钮做大一些”“应该做成响应式”——没有阈值、没有严重程度，也没有系统性检查。此技能会确保：

1. 每个问题都指出违反的原则（重排、触控目标尺寸、拇指可达范围等），并给出具体阈值（44pt / 48dp、≥8dp 间距、正文 ≥16px）。
2. 根据问题是否会妨碍用户在设备上完成任务、是否会增加操作阻力或仅影响精致度来评定严重程度。
3. 给出具体修复方案，而非“针对移动端进行优化”。
4. 系统性检查全部七个方面，确保能发现“小型点击目标”之外的问题——例如锁定屏幕方向、键盘类型错误、手势操作陷入死路、布局无法重排等。

---

检查框架——检查内容及违规表现

逐项检查，并标明原则、严重程度和修复方案。

1. 视口适配与重排

布局必须适配视口——采用流式网格、弹性图片，并让内容能够重排和重新组织——而不是将固定宽度的桌面布局压缩到小屏幕上。（响应式 = 一个带断点的流式布局；自适应 = 每个断点使用不同的布局。两种方式都可以；未做适配才是问题。）

**在以下情况下标记：**出现横向滚动或内容被屏幕边缘截断；固定宽度（px）的容器无法缩小；桌面布局缩小后过于细小；常见断点之间的元素相互重叠或碰撞；图片未按比例缩放；窄屏上仍保留多栏布局，而没有改为纵向堆叠。

• ❌ 在宽 390px 的手机上显示 1200px 的内容框架 → 用户必须双指缩放并横向滚动才能阅读。
• ✅ 内容重排为单列流式布局；图片按比例缩放；内容宽度不超出视口。

2. 方向适配能力

用户会竖屏和横屏使用设备。核心功能必须在竖屏和横屏下都能正常使用；方向变化应当有明确目的，而不是导致功能异常。

**以下情况需要标记：**旋转屏幕后布局崩坏、内容被裁切或出现大片空白；没有充分理由却将核心功能锁定在单一方向；键盘操作较多或播放视频的页面被强制设为竖屏，而横屏体验更佳；自动旋转打断当前任务。

• ❌ 旋转到横屏后，提交按钮被挤到无法滚动到的屏幕下方。
• ✅ 竖屏为主要设计方向；横屏时布局会重新排列，且所有必要操作仍可触达。

3. 触控目标尺寸与间距

手指和拇指的操作并不精准。触控目标必须足够大、间距足够，才能可靠点击——尤其是相邻且操作结果相反的按钮（保存与删除）。

**以下情况需要标记：**交互目标小于平台最低尺寸——iOS 44×44pt、Material 48×48dp（WCAG 下限为 24px，但实际应以平台最低尺寸为准）；可点击元素之间的间距小于 ~8dp/16px；屏幕角落的目标与中央目标尺寸相同（角落更难触及，建议更大，约 12mm，而中央约 7mm）；破坏性操作和确认操作尺寸很小且彼此相邻。

• ❌ 一排 28px 的图标按钮，间距仅 2px；“删除”按钮紧挨着“保存”按钮。
• ✅ 触控目标不小于 44pt/48dp，间距不小于 8dp，为角落和操作相反的按钮留出更大尺寸。

4. 拇指可触及性与单手操作

人们会单手操作手机，而且更喜欢屏幕中央区域；手会遮挡界面，握持姿势也会不断变化。

**以下情况需要标记：**主要操作被放在难以触及的顶部角落；破坏性操作放在容易误触的拇指活动区；关键内容紧贴屏幕顶部；底部没有留白，导致内容无法滚动到便于操作的中央区域；按钮只放在屏幕右侧边缘。

• ❌ 主要 CTA 固定在右上角；“删除账户”按钮放在底部中央的拇指舒适区。
• ✅ 主要操作位于拇指可触及范围内（下方中央区域／底部面板）；对破坏性操作加以防护，或将其移出误触区域；内容可滚动到中央区域。

5. 移动端输入体验

在移动端输入速度慢且容易出错（约 41% 的人用双拇指打字）。应根据数据类型匹配输入方式，并尽量减少手动输入。

**以下情况需要标记：**本可使用情境化键盘却使用通用键盘（电话号码／PIN 码没有数字键盘、电子邮件没有针对“@”优化的键盘、网址没有 URL 键盘）；姓名、地址、电子邮件、支付信息没有自动填充／自动补全；可用选择控件（选择器、单选按钮、切换开关）却使用自由文本字段；长表单没有分步骤；可用时没有 OTP 自动填充／银行卡扫描功能。

• ❌ 电话号码字段打开完整的 QWERTY 键盘；输入地址时必须从头手动填写，且没有自动填充。
• ✅ 数字使用数字键盘，电子邮件使用电子邮件键盘；自动填充和选择控件可减少输入。

6. 手势安全性与可发现性

手势不可见，因此在可发现性、一致性和无障碍方面都有局限。手势应当作为操作的补充，绝不能成为唯一的操作方式。

**以下情况需要标记：**关键操作只能通过隐藏手势触发（边缘滑动菜单、长按），且没有可见控件；使用非标准手势重新定义系统惯例；需要复杂的多指手势（这会排除运动能力或灵活性受限的用户）；在触摸开始时而非触摸结束且仍位于目标范围内时触发操作（容易误触）。

• ❌ 删除项目的唯一方式是无法被发现的向左滑动，没有其他按钮可用。
• ✅ 滑动手势作为快捷方式，与可见控件并列提供；只要求使用简单且符合惯例的手势。

7. 移动端可读性与内容优先级

在户外和移动中使用的小屏幕需要清晰易读的文字，以及严格优先呈现在首屏的内容——针对移动端调整内容，而不是单纯缩小桌面版。

以下情况请标记： 正文小于 16px；移动端行长不在约 30–40 个字符范围内；小字号使用展示字体；屏幕试图展示所有内容，而没有优先呈现主要任务；次要或第三级功能挤占首屏，而不是放在首屏以下或菜单中；移动版与桌面版像是两款不同的产品（模式、颜色、控件不一致）。

• ❌ 12px 正文、首屏有四个相互争抢注意力的 CTA、仅适用于桌面端的配色方案。
• ✅ ≥16px 正文、首先呈现一个明确的主要操作、次要操作延后展示，并与桌面版产品保持一致。

权衡说明： 移动端倾向于使用更少、更大的元素（触控目标、文字、一个主要操作），而产品负责人则希望展示更多内容。应以设备的实际情况为准——空间有限且触控不精确——并通过渐进式披露呈现额外内容，而不是把内容塞得满满当当。如果某项修复会与无障碍审查冲突（例如目标尺寸、手势替代方案），只说明一次，并将 AT/WCAG 相关表述交由无障碍审查负责。

---

严重程度评级

严重程度	含义
严重	在目标设备上无法使用——内容被截断／需要水平滚动、触控目标过小而无法可靠点击、关键操作只能通过无法发现的手势完成，或核心功能被限制在无法使用的方向。发布前必须修复。
重大	用户不应承受的显著阻碍——触控目标低于平台最低标准但仍可点击、主要操作超出拇指可及范围、键盘类型错误、正文小于 16px，或布局在常见断点处重排不佳。
轻微	明显的细节问题——间距略显紧凑、横屏布局不够理想、内容稍显过密、角落区域的触控目标未放大。

评级应依据在实际设备上完成任务所受的影响，而不是修复难易程度。即使只需一行代码就能更改键盘类型，如果这会阻碍快速输入，仍可评为重大。

---

审查输出格式

## Mobile Responsiveness Audit — [Screen / Component]
Context: [device class / breakpoints · orientation · primary task, if known]

### Critical
- [Issue] — what's wrong → fix. (Principle: …)
### Major
- …
### Minor
- …
### Working well ✓
- …

**Top 3 priorities:** the highest-impact fixes for the target device.

最后列出优先级最高的 3 项——调用方的生成器会据此采取行动。

---

如何做好审查

1. 明确背景——设备类别（手机／平板／响应式网页）、涉及的断点、预期方向，以及屏幕的主要任务。只有结合设备和最重要的操作，才能判断触控操作是否符合人体工学。
2. 确认是否适用——如果确实仅面向桌面端，就跳过，不要凭空捏造问题。
3. 检查全部七个方面——与默认审查相比，全面性才是价值所在；不要只检查触控目标尺寸。
4. 使用阈值——44pt／48dp 触控目标、≥8dp 间距、≥16px 正文、约 30–40 个字符的行长——确保问题可核查，而非凭感觉判断。
5. 将对比度／AT／键盘问题交由无障碍审查，构图问题交由美学审查，流程问题交由启发式审查——不要在这里重复评估。
6. 确定优先级，不要罗列清单——根据问题是否会阻碍用户在设备上完成任务来评级。

---

常见的正确与错误做法

❌ 错误做法	✅ 正确做法
“让它适配屏幕” / “按钮太小”	指出设计原则 + 阈值（44pt/48dp，≥16px）+ 修复方法
将所有小问题一视同仁	根据问题是否会阻碍用户在设备上完成任务来评估；列出最重要的 3 项
将桌面布局缩小后直接用于手机	重新排布为流动的单列布局；所有内容的宽度都不超过视口
将核心功能限制为仅支持一种屏幕方向	竖屏和横屏下都能执行必要操作
28px 的点击目标，间距仅 2px	点击目标 ≥44pt/48dp，间距 ≥8dp，并放大圆角
主要 CTA 放在顶部角落；将删除操作放在拇指活动区域	主要操作应在拇指可触及范围内；对破坏性操作设置保护措施，或将其放在不易触及的位置
手机号输入框使用完整 QWERTY 键盘	使用与输入内容相匹配的键盘；启用自动填充；优先选择而非输入
通过滑动操作隐藏执行操作的唯一途径	手势只能补充可见控件，绝不能取而代之
重新推导 WCAG 对比度或屏幕阅读器问题	交由无障碍审计处理
只报告点击目标尺寸	检查全部七个方面；注明设计原则和阈值

---

学习来源（Uxcel）

• 响应式设计与自适应设计
• 移动端布局设计
• 移动界面设计
• 平台适配与缩放
• 确保移动端无障碍访问
• 移动端专属功能与交互