
关于
移动优先、触控优先、尊重平台规范的移动端设计指南。
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. 离线策略
离线优先模式
- 本地数据优先显示
- 后台同步队列
- 冲突解决策略
- 清晰的同步状态指示
限制
- 仅在任务明确匹配上述范围时使用此技能。
- 不要将输出视为环境特定验证、测试或专家审查的替代品。
- 如果缺少所需的输入、权限、安全边界或成功标准,请停下来要求澄清。
