Mobile Design

移动端设计系统

理念： 触控优先。关注电量。尊重平台。支持离线。
核心原则： 移动端不是缩小版桌面端。按移动约束思考，先确认平台选择。

运行时脚本

执行以下脚本进行验证（不要阅读脚本内容，直接运行）：

[CRITICAL] 强制：开始工作前先阅读参考文件

** 在读完相关文件前，不要开始开发。**

通用文件（始终必读）

mobile-design-thinking.md 是最高优先级。 该文件保证 AI 基于上下文思考，而不是套记忆模板。

平台专项文件（按目标平台阅读）

[CRITICAL] 做 iOS -> 先读 platform-ios.md
[CRITICAL] 做 Android -> 先读 platform-android.md
[CRITICAL] 做跨平台 -> 两份都读，并应用条件化平台逻辑

[WARN] 强制：先问再假设（必选）

停止！如果用户需求是开放式的，不要默认你常用的方案。

未明确时必须询问：

AI 移动端反模式（YASAK LİSTESİ）

以下是 AI 常见默认错误，必须避免。

性能类禁忌

触控/UX 禁忌

安全类禁忌

架构类禁忌

平台决策矩阵

何时统一，何时分化

                    统一（两端一致）              分化（平台特有）
                    -----------------             -----------------
业务逻辑            [OK]  始终统一                   -
数据层              [OK]  始终统一                   -
核心功能            [OK]  始终统一                   -

导航                -                             [OK]  iOS：边缘滑返，Android：返回键
手势                -                             [OK]  平台原生手感
图标                -                             [OK]  SF Symbols vs Material Icons
日期选择            -                             [OK]  原生选择器更贴合
弹窗/底部面板        -                             [OK]  iOS：底部面板 vs Android：对话框
字体                -                             [OK]  SF Pro vs Roboto（或自定义）
错误弹窗            -                             [OK]  遵循平台提示规范

快速参考：平台默认值

移动端 UX 心理学（速查）

触控版 Fitts' Law（费茨定律）

桌面端：鼠标准确（1px）
移动端：手指不精确（约 7mm 接触面）

-> 触控目标最小 44-48px
-> 重要操作放在拇指区（屏幕下部）
-> 破坏性操作远离易触区域

拇指舒适区（单手使用）

+-----------------------------+
|      难以触达               | <- 导航、菜单、返回
|        （伸展）             |
+-----------------------------+
|      可触达                 | <- 次要操作
|       （自然）              |
+-----------------------------+
|      易触达                 | <- 主要 CTA、底部 Tab
|   （拇指自然弧线）           | <- 主内容交互
+-----------------------------+
        [  HOME  ]

移动端认知负荷差异

深入阅读： touch-psychology.md

性能原则（速查）

React Native 关键规则

// [OK]  正确：Memoized renderItem + React.memo 包裹
const ListItem = React.memo(({ item }: { item: Item }) => (
  <View style={styles.item}>
    <Text>{item.title}</Text>
  </View>
));

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

// [OK]  正确：FlatList + 全量优化
<FlatList
  data={items}
  renderItem={renderItem}
  keyExtractor={(item) => item.id}  // 稳定 ID，不要用索引
  getItemLayout={(data, index) => ({
    length: ITEM_HEIGHT,
    offset: ITEM_HEIGHT * index,
    index,
  })}
  removeClippedSubviews={true}
  maxToRenderPerBatch={10}
  windowSize={5}
/>;

Flutter 关键规则

// [OK]  正确：const 构造防止重建
class MyWidget extends StatelessWidget {
  const MyWidget({super.key}); // CONST!

  @override
  Widget build(BuildContext context) {
    return const Column( // CONST!
      children: [
        Text('Static content'),
        MyConstantWidget(),
      ],
    );
  }
}

// [OK]  正确：ValueListenableBuilder 精准更新
ValueListenableBuilder<int>(
  valueListenable: counter,
  builder: (context, value, child) => Text('$value'),
  child: const ExpensiveWidget(), // 不会重建
)

动画性能

GPU 加速（快）：             CPU 受限（慢）：
+-- transform               +-- width, height
+-- opacity                 +-- top, left, right, bottom
+--（只用这些）              +-- margin, padding
                            +--（避免动画这些）

完整指南： mobile-performance.md

检查点（移动开发前强制）

在写任何移动端代码之前，必须完成此检查点：

 CHECKPOINT:

Platform:   [ iOS / Android / Both ]
Framework:  [ React Native / Flutter / SwiftUI / Kotlin ]
Files Read: [ List the skill files you've read ]

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

Anti-Patterns I Will Avoid:
1. _______________
2. _______________

示例：

 CHECKPOINT:

Platform:   iOS + Android (Cross-platform)
Framework:  React Native + Expo
Files Read: touch-psychology.md, mobile-performance.md, platform-ios.md, platform-android.md

3 Principles I Will Apply:
1. FlatList with React.memo + useCallback for all lists
2. 48px touch targets, thumb zone for primary CTAs
3. Platform-specific navigation (edge swipe iOS, back button Android)

Anti-Patterns I Will Avoid:
1. ScrollView for lists -> FlatList
2. Inline renderItem -> Memoized
3. AsyncStorage for tokens -> SecureStore

[CRITICAL] 填不出检查点？-> 回去读技能文件。

框架决策树

WHAT ARE YOU BUILDING?
        |
        +-- Need OTA updates + rapid iteration + web team
        |   +-- [OK]  React Native + Expo
        |
        +-- Need pixel-perfect custom UI + performance critical
        |   +-- [OK]  Flutter
        |
        +-- Deep native features + single platform focus
        |   +-- iOS only -> SwiftUI
        |   +-- Android only -> Kotlin + Jetpack Compose
        |
        +-- Existing RN codebase + new features
        |   +-- [OK]  React Native (bare workflow)
        |
        +-- Enterprise + existing Flutter codebase
            +-- [OK]  Flutter

完整决策树： decision-trees.md

预开发检查清单

开始任何移动项目之前

• 平台已确认？（iOS / Android / Both）
• 框架已选择？（RN / Flutter / Native）
• 导航模式已确定？（Tabs / Stack / Drawer）
• 状态管理已选择？（Zustand / Redux / Riverpod / BLoC）
• 离线需求已明确？
• 深链已从第一天规划？
• 目标设备已定义？（Phone / Tablet / Both）

每个页面前

• 触控目标 ≥ 44-48px？
• 主 CTA 在拇指区？
• 有加载态？
• 有错误态并支持重试？
• 考虑离线？
• 遵循平台规范？

发布前

• 已移除 console.log？
• 敏感数据使用 SecureStore？
• SSL pinning 已启用？
• 列表已优化（memo、keyExtractor）？
• 卸载时完成内存清理？
• 低端设备上已测试？
• 所有交互元素均有无障碍标签？

参考文件

需要更深入的指导时：

记住： 移动端用户更急、更易被打断、手指更不精确。按最糟糕条件设计：弱网、单手、强光、低电量。在那里可用，就能在任何地方可用。