关于
移动优先、触控优先、尊重平台规范的移动端设计指南。
name: mobile-design description: "（移动优先 · 触摸优先 · 尊重平台）" risk: unknown source: community date_added: "2026-02-27"
移动设计系统
（移动优先 · 触摸优先 · 尊重平台）
理念： 触摸优先。电池意识。尊重平台。离线能力。 核心法则： 移动端不是缩小的桌面端。 操作规则： 先考虑约束，再考虑美学。
此技能用于防止在设计或构建移动应用时出现桌面思维、AI 默认值和不安全假设。
1. 移动可行性与风险指数（MFRI）
在设计或实施任何移动功能或屏幕之前，评估可行性。
MFRI 维度（1-5）
| 维度 | 问题 | |------|------| | 平台清晰度 | 目标平台（iOS / Android / 两者）是否明确定义？ | | 交互复杂度 | 手势、流程或导航有多复杂？ | | 性能风险 | 是否涉及列表、动画、重状态或媒体？ | | 离线依赖 | 功能在无网络时是否会中断或降级？ | | 无障碍风险 | 是否影响运动、视觉或认知无障碍？ |
评分公式
MFRI = (平台清晰度 + 无障碍就绪度)
− (交互复杂度 + 性能风险 + 离线依赖)
范围： -10 → +10
解释
| MFRI | 含义 | 所需操作 | |------|------|----------| | 6–10 | 安全 | 正常进行 | | 3–5 | 中等 | 添加性能 + UX 验证 | | 0–2 | 有风险 | 简化交互或架构 | | < 0 | 危险 | 实施前重新设计 |
2. 任何工作前的强制思考
停止：假设前先询问（必需）
如果以下任何一项未明确说明，你必须在继续之前询问：
| 方面 | 问题 | 原因 | |------|------|------| | 平台 | iOS、Android 还是两者？ | 影响导航、手势、排版 | | 框架 | React Native、Flutter 还是原生？ | 决定性能和模式 | | 导航 | 标签、堆栈、抽屉？ | 核心 UX 架构 | | 离线 | 必须离线工作吗？ | 数据和同步策略 | | 设备 | 仅手机还是也包括平板？ | 布局和密度规则 | | 受众 | 消费者、企业、无障碍需求？ | 触摸和可读性 |
永远不要默认使用你喜欢的技术栈或模式。
3. 强制参考阅读（强制执行）
通用（始终先阅读）
| 文件 | 目的 | 状态 | |------|------|------| | mobile-design-thinking.md | 反记忆化，强制上下文 | 必须先读 | | touch-psychology.md | 费茨定律、拇指区域、手势 | 必须 | | mobile-performance.md | 60fps、内存、电池 | 必须 | | mobile-backend.md | 离线同步、推送、API | 必须 | | mobile-testing.md | 设备和端到端测试 | 必须 | | mobile-debugging.md | 原生 vs JS 调试 | 必须 |
平台特定（条件性）
| 平台 | 文件 | |------|------| | iOS | ios-patterns.md | | Android | android-patterns.md | | React Native | react-native-patterns.md | | Flutter | flutter-patterns.md |
4. 触摸设计原则
触摸目标
- 最小触摸目标：44×44pt（iOS）/ 48×48dp（Android）
- 间距：至少 8pt 间隔
- 拇指区域：主要操作放在屏幕下半部分
手势
- 滑动：用于导航和操作
- 长按：用于上下文菜单
- 捏合：用于缩放
- 避免依赖悬停状态
反馈
- 即时视觉反馈（<100ms）
- 触觉反馈用于重要操作
- 加载状态始终可见
5. 性能约束
关键指标
- 首次有意义绘制：<1.5s
- 交互就绪时间：<3s
- 帧率：60fps（不低于 30fps）
- 内存：<150MB 活跃使用
优化策略
- 懒加载屏幕外内容
- 图片压缩和适当尺寸
- 虚拟化长列表
- 最小化主线程工作
6. 离线策略
离线优先模式
- 本地数据优先显示
- 后台同步队列
- 冲突解决策略
- 清晰的同步状态指示
限制
- 仅在任务明确匹配上述范围时使用此技能。
- 不要将输出视为环境特定验证、测试或专家审查的替代品。
- 如果缺少所需的输入、权限、安全边界或成功标准，请停下来要求澄清。
