(Mobile-First · Touch-First · Platform-Respectful)
技能概述
mobile-design 技能遵循"触摸优先、电池意识、平台尊重、离线能力"的理念。核心法则:移动不是小型桌面。操作规则:优先考虑约束,其次才是美学。
下载地址:https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/mobile-design
移动可行性与风险指数(MFRI)
在设计或实现任何移动功能或屏幕之前,评估可行性:
| 维度 | 问题 |
|---|---|
| 平台清晰度 | 目标平台(iOS / Android / 两者)是否明确定义? |
| 交互复杂性 | 手势、流程或导航有多复杂? |
| 性能风险 | 是否涉及列表、动画、重状态或媒体? |
| 离线依赖 | 功能是否在没有网络的情况下中断或降级? |
| 无障碍风险 | 是否影响运动、视觉或认知无障碍? |
工作前强制思考
⛔ 停止:假设前询问(必需)
如果以下任何一项未明确说明,必须在继续之前询问:
- 平台: iOS、Android还是两者?
- 框架: React Native、Flutter还是原生?
- 导航: 标签页、堆栈、抽屉?
- 离线: 是否必须离线工作?
- 设备: 仅手机还是也包括平板?
- 受众: 消费者、企业、无障碍需求?
AI移动反模式(硬禁令)
🚫 性能罪(不可协商)
| ❌ 永远不要 | 原因 | ✅ 始终 |
|---|---|---|
| ScrollView用于长列表 | 内存爆炸 | FlatList / FlashList / ListView.builder |
| 内联renderItem | 重新渲染所有行 | useCallback + memo |
| 索引作为key | 重新排序错误 | 稳定ID |
| JS线程动画 | 卡顿 | 原生驱动 / GPU |
🚫 触摸与UX罪
| ❌ 永远不要 | 原因 | ✅ 始终 |
|---|---|---|
| 触摸目标<44–48px | 错过点击 | 最小触摸目标 |
| 仅手势操作 | 排除用户 | 按钮回退 |
| 无加载状态 | 感觉损坏 | 明确反馈 |
平台统一与分歧矩阵
统一
- 业务逻辑
- 数据模型
- API契约
- 验证
分歧
- 导航行为
- 手势
- 图标
- 排版
平台默认值
| 元素 | iOS | Android |
|---|---|---|
| 字体 | SF Pro | Roboto |
| 最小触摸 | 44pt | 48dp |
| 返回 | 边缘滑动 | 系统返回 |
| 工作表 | 底部工作表 | 对话框/工作表 |
最佳实践
- 主要CTA位于拇指区域
- 破坏性操作推远
- 无悬停假设
- 手指≠光标
- 准确性低
- 到达比精度更重要
