mobile-design

移动端设计系统

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

理念： 触控优先。关注电量。尊重平台。支持离线。 核心法则： 移动端不是缩小版的桌面端。 行动准则： 先考虑约束，再考虑美学。

本技能的存在是为了在设计和构建移动应用时防止桌面端思维、AI 默认套路以及不安全的假设。

---

1. 移动端可行性及风险指数（MFRI）

在设计或实现任何移动端功能或界面之前，先评估可行性。

MFRI 维度（1–5）

维度	问题
平台明确性	目标平台（iOS / Android / 两者）是否有明确定义？
交互复杂度	手势、流程或导航有多复杂？
性能风险	是否涉及列表、动画、繁重状态或媒体？
离线依赖	该功能在无网络时是否会失效或降级？
无障碍风险	是否影响运动、视觉或认知无障碍？

评分公式

MFRI = (Platform Clarity + Accessibility Readiness)
       − (Interaction Complexity + Performance Risk + Offline Dependence)

范围： -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	设备与 E2E 测试	🔴 必须阅读
mobile-debugging.md	原生与 JS 调试	🔴 必须阅读

平台特定（按条件）

平台	文件
iOS	platform-ios.md
Android	platform-android.md
跨平台	上述两者

❌ 如果你尚未阅读平台文件，则不允许设计 UI。

---

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

🚫 性能之罪（不可妥协）

❌ 绝不	原因	✅ 始终
用 ScrollView 渲染长列表	内存爆炸	FlatList / FlashList / ListView.builder
内联 renderItem	导致所有行重新渲染	useCallback + memo
用索引作为 key	排序 bug	稳定 ID
JS 线程动画	卡顿	原生驱动 / GPU
生产环境使用 console.log	阻塞 JS 线程	移除日志
不做 memoization	耗电 + 性能损耗	React.memo / const widgets

---

🚫 触控与体验之罪

❌ 绝不	原因	✅ 始终
触控目标 <44–48px	点按失败	最小触控目标
仅支持手势操作	排除部分用户	提供按钮备用方案
无加载状态	感觉像坏了	明确反馈
无错误恢复	死路一条	重试 + 提示信息
忽视平台规范	破坏肌肉记忆	iOS ≠ Android

---

🚫 安全之罪

❌ 绝不	原因	✅ 始终
将 Token 存入 AsyncStorage	容易被窃取	SecureStore / Keychain
硬编码密钥	可被逆向工程	环境变量 + 安全存储
无 SSL pinning	存在 MITM 风险	证书 pinning
记录敏感数据	泄露 PII	绝不记录密钥

---

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
返回	边缘滑动	系统返回
底部面板	Bottom sheet	Dialog / sheet
图标	SF Symbols	Material Icons

---

6. 移动端体验心理学（非可选）

费茨定律（触控现实）

• 手指 ≠ 光标
• 精度很低
• 可达性比精确性更重要

规则：

• 主要 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. 强制移动端检查点

在编写 任何代码 之前，你必须完成以下内容：

🧠 MOBILE CHECKPOINT

Platform:     ___________
Framework:    ___________
Files Read:   ___________

3 Principles I Will Apply:
1.
2.
3.

Anti-Patterns I Will Avoid:
1.
2.

❌ 无法完成 → 回去重读。

---

9. 框架决策树（规范）

Need OTA + web team → React Native + Expo
High-perf UI → Flutter
iOS only → SwiftUI
Android only → Compose

没有理由就不要争论。

---

10. 发布就绪检查清单

发布前

• 触控目标 ≥ 44–48px
• 已处理离线
• 已使用安全存储
• 列表已优化
• 日志已移除
• 已在低端设备上测试
• 已提供无障碍标签
• MFRI ≥ 3

---

11. 相关技能

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

---

最终法则： 移动端用户注意力分散、常被打断、缺乏耐心——常常单手操作、网络很差、电量很低。 为这样的现实而设计，否则你的应用会悄无声息地失败。

---

何时使用

本技能适用于执行概述中描述的工作流或操作。

限制

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