mobile-design

移动端设计系统

（移动端优先 · 触控优先 · 尊重平台规范）

理念： 触控优先。注重电量。尊重平台规范。支持离线。 核心原则： 移动端不是小屏桌面端。 操作规则： 先考虑限制，再考虑美观。

此技能旨在防止在设计或构建移动应用时沿用桌面端思维、默认采用 AI 偏好做法，以及作出不安全的假设。

---

1. 范围与风险

遵循现有项目和平台要求，并保留其惯例。只针对会影响实现的缺失信息提问。针对性的修复无需进行访谈，也不必切换框架。此前的 MFRI 评分是一种未经验证、维度和范围不一致的启发式指标，不是安全或发布门槛。应记录具体的交互、数据、无障碍和性能风险。

2. 选择相关检查项

对于新应用，明确平台、框架、受众、设备类别、导航方式、离线需求和实际输出。对于现有项目，沿用已有背景信息。只阅读了解变更行为所需的参考资料。用户指定的范围和仓库说明优先于此技能建议的流程。

3. 必须阅读的参考资料（强制要求）

参考资料索引（按任务需要阅读）

文件	用途	状态
mobile-design-thinking.md	防止死记硬背，强制考虑上下文	上下文参考
touch-psychology.md	Fitts 定律、拇指区域、手势	视任务而定
mobile-performance.md	60fps、内存、电量	视任务而定
mobile-backend.md	离线同步、推送、API	视任务而定
mobile-testing.md	设备与端到端测试	视任务而定
mobile-debugging.md	原生与 JS 调试	视任务而定

特定平台（有条件要求）

平台	文件
iOS	platform-ios.md
Android	platform-android.md
跨平台	BOTH above

更改特定平台的行为前，请阅读相关平台指南。

---

4. AI 移动端反模式（严格禁止）

🚫 性能禁忌（不可妥协）

❌ 绝不使用	原因	✅ 始终使用
用 ScrollView 显示长列表	内存暴涨	FlatList / FlashList / ListView.builder
未测量行项目反复变动	可能造成不必要的工作	分析标识和状态更新；仅在有用时进行记忆化
使用索引作为 key	重排错误	稳定 ID
JS 线程动画	卡顿	原生驱动 / GPU
在生产环境中使用 console.log	阻塞 JS 线程	移除日志
一概声称使用记忆化优化	可能增加复杂度，却没有收益	进行性能分析并应用有针对性的优化

---

🚫 触控与 UX 禁忌

❌ 绝不使用	原因	✅ 始终使用
过小的点击区域	容易点错	使用平台逻辑单位：通常 iOS 为 44pt / Android 为 48dp
仅支持手势的操作	排斥部分用户	提供按钮作为替代方式
没有加载状态	感觉像是出了故障	提供明确反馈
没有错误恢复机制	陷入死路	提供重试和提示信息
忽视平台惯例	破坏肌肉记忆	iOS ≠ Android

---

🚫 安全禁忌

❌ 绝不	原因	✅ 始终
将令牌存储在 AsyncStorage 中	容易被窃取	使用 SecureStore / Keychain
在应用中嵌入机密	可以被提取	将服务端机密保留在服务端；安全地保存每位用户的凭据
禁用 TLS 验证	存在中间人攻击风险	使用有效的平台 TLS；仅在有合理依据的受管威胁模型下进行证书固定
记录敏感数据	个人身份信息泄露	绝不记录机密

---

5. 平台统一与差异矩阵

UNIFY                          DIVERGE
──────────────────────────     ─────────────────────────
Business logic                Navigation behavior
Data models                    Gestures
API contracts                  Icons
Validation                     Typography
Error semantics                Pickers / dialogs

平台默认设置

元素	iOS	Android
字体	SF Pro	Roboto
最小触控区域	44pt	48dp
返回操作	边缘滑动	系统返回
弹层	底部弹层	对话框 / 弹层
图标	SF Symbols	Material Icons

---

6. 移动端 UX 心理学（不可妥协）

菲茨定律（触控现实）

• 手指 ≠ 光标
• 精准度较低
• 触达范围比精准度更重要

规则：

• 主要 CTA 放在拇指操作区
• 将破坏性操作放在较难触及的位置
• 不要假设存在悬停状态

---

7. 性能原则

React Native（固定高度示例模式）

const Row = React.memo(({ item }) => (
  <View><Text>{item.title}</Text></View>
));

const renderItem = useCallback(
  ({ item }) => <Row item={item} />,
  []
);

<FlatList
  data={items}
  renderItem={renderItem}
  keyExtractor={(i) => i.id}
  getItemLayout={(_, i) => ({
    length: ITEM_HEIGHT,
    offset: ITEM_HEIGHT * i,
    index: i,
  })}
/>

Flutter（静态组件示例）

class Item extends StatelessWidget {
  const Item({super.key});

  @override
  Widget build(BuildContext context) {
    return const Text('Static');
  }
}

• 尽可能在所有地方使用 const
• 仅进行有针对性的重建

---

8. 实现证据

说明目标平台、行为变更以及实际执行过的检查。在有代表性的设备和数据上进行性能分析；静态模式扫描无法测量触控区域、对比度、帧率、电池、平台导航或安全存储行为。

9. 框架选择

除非有变更要求，否则应保留现有技术栈。开展新工作时，应比较团队经验、原生集成、无障碍支持、部署策略和经测量的工作负载限制。Expo OTA 受运行时兼容性和应用商店政策约束；它并不授权绕过审核或交付任意原生代码。没有任何框架在所有情况下都最快或最小。

10. 发布准备清单

发布前

• 已按逻辑单位检查平台触控目标
• 已处理离线情况
• 已使用安全存储
• 已优化列表
• 已移除日志
• 已在低端设备上测试
• 已设置无障碍标签
• 已记录具体风险及任何无法执行的检查

---

11. 相关技能

• frontend-design – 视觉系统与组件
• frontend-dev-guidelines – RN/TS 架构
• backend-dev-guidelines – 适用于移动端的 API
• error-tracking – 崩溃与性能遥测

---

最终法则： 移动端用户常常心不在焉、频繁受打扰且缺乏耐心——他们往往单手操作，网络状况不佳，电量也不足。 要基于这种现实进行设计，否则你的应用会悄然失败。

---

适用场景

当需要执行概述中描述的工作流或操作时，可使用此技能。

限制

• 仅当任务明确符合上述范围时，才使用此技能。
• 不要将输出视为针对特定环境的验证、测试或专家审查的替代品。
• 如果缺少必要输入、权限、安全边界或成功标准，请暂停并请求澄清。

审查辅助工具与限制

在目标项目目录中运行 python scripts/mobile_audit.py . --json。 该辅助工具只读、范围有限，仅供参考。它不会导入项目代码，也不会判定是否合规；compliant 的值为 null。退出码 2 表示检查不完整，或未检测到移动端源代码。源代码模式提示可能匹配注释，也可能遗漏分散在多个文件中的行为。编辑前请验证检查结果。本目录审查未运行模拟器、真实设备、屏幕阅读器或 GPU。

如需重点检查，请参阅触控指南、排版、颜色、导航和决策树。代码块是与版本相关的片段，并非经过认证的完整应用；执行前请确认 API 仍然适用。