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	重排错误	稳定 ID
使用 JS 线程动画	卡顿	Native driver / GPU
在生产环境中使用 console.log	阻塞 JS 线程	移除日志
不做记忆化	增加电量消耗并拖慢性能	React.memo / const widgets

---

🚫 触控与 UX 禁忌

❌ 绝不使用	原因	✅ 始终使用
小于 44–48px 的触控目标	容易误触	最小触控目标
仅支持手势的操作	排斥部分用户	提供按钮作为替代
没有加载状态	感觉功能失效	提供明确反馈
无法从错误中恢复	陷入死路	提供重试和提示
忽视平台惯例	破坏肌肉记忆	iOS ≠ Android

---

🚫 安全禁忌

❌ 绝不使用	原因	✅ 始终使用
将令牌存入 AsyncStorage	容易被窃取	SecureStore / Keychain
硬编码密钥	可被逆向工程提取	环境变量 + 安全存储
不做 SSL 固定	存在中间人攻击风险	证书固定
记录敏感数据	泄露个人身份信息	绝不记录密钥

---

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. 必须完成的移动端检查点

在编写任何代码之前，必须完成以下事项：

🧠 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 – 崩溃与性能遥测

---

最终准则： 移动端用户容易分心、常被打断，也缺乏耐心；他们往往单手操作，在网络状况不佳且电量不足时使用设备。 要针对这种现实进行设计，否则你的应用会悄然失败。

---