移动端页面布局与交互设计

要解决的问题

很多团队把移动端当成"缩小的桌面"：沿用桌面的信息密度、复杂的手势与导航，结果在真实使用场景中集体翻车——用户单手操作、网络不稳、电量偏低、随时被打断。

这类问题的根源不是美学，而是假设：默认功能都能联网、默认性能预算和桌面一样宽松、默认交互可以被 AI 的"通用默认值"带过。

这个技能如何工作

Mobile Feasibility & Risk Index（MFRI）
在动手设计或实现任何移动端功能与页面前，先按五个维度评分（1–5）：Platform Clarity、Interaction Complexity、Performance Risk、Offline Dependence、Accessibility Risk，再合成 -10 → +10 的风险分。

| MFRI | 含义 | 必须做的动作 |
| --- | --- | --- |
| 6–10 | 安全 | 正常推进 |
| 3–5 | 中等 | 增加性能与 UX 验证 |
| 0–2 | 高风险 | 简化交互或架构 |
| 负分 | 不可行 | 重设计或更换方案 |

平台规范前置
在读平台规范文件之前，不允许产出 UI 设计。iOS 与 Android 有各自的输入模型、导航结构、动效曲线与系统组件；跳过这一步，后面所有的"好看"都建立在错误地基上。

AI 反模式硬禁止
技能把常见错误写成不可协商的红线：

• 性能类：长列表不要用 ScrollView（内存爆炸），改用 FlatList / FlashList / ListView.builder；renderItem 用 useCallback + memo 稳定化；key 用稳定 ID 而非数组索引；动画交给原生驱动 / GPU，不挤 JS 线程；生产环境剥掉 console.log。
• 触屏与 UX 类：可点区域不小于 44pt / 48dp；危险操作走系统确认或撤销，而不是弹窗吓人；表单聚焦态明确；高对比度；尊重系统字号；动效可降级。

最终法则
用户是分心的、会被打断的、没耐心的。为这个现实设计，否则应用会在无声中失败。

适用边界与注意点

• 仅在任务明确属于上述移动端设计与实现范围时使用。
• 不能替代环境相关的验证、测试与专家评审；真机性能、网络降级、权限策略仍需按项目落地验证。
• 若目标平台、成功标准、输入信息或安全边界缺失，应停止并先澄清，而不是给出泛化答案。

获取使用帮助和更多实用 Skill，请关注公众号「简诗 AI」，或在 SkillHub 搜索「简诗 AI」