Mobile Design

移动端设计系统

(移动优先 · 触控优先 · 尊重平台)

理念： 触控优先。省电意识。尊重平台。离线可用。 核心法则： 移动端不是缩小版的桌面端。 操作准则： 先想约束，再想美观。

本技能存在的意义是防止桌面思维、AI默认行为和不安全假设在移动应用设计与构建中蔓延。

1. 移动端可行性与风险指数 (MFRI)

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

MFRI 维度 (1–5)

评分公式

MFRI = (平台明确度 + 无障碍就绪度)
       − (交互复杂度 + 性能风险 + 离线依赖度)

范围： -10 → +10

解读

2. 动手前必须思考

⛔ 停下：先问再假设（强制）

以下任何一项未明确说明时，必须在推进前提问：

🚫 绝不默认使用你偏好的技术栈或模式。

3. 必读参考资料（强制执行）

通用（始终先读）

平台特定（条件性）

❌ 没读过平台文件，就不允许设计UI。

4. AI移动端反模式（硬性禁止）

🚫 性能禁忌（不可协商）

🚫 触控与UX禁忌

🚫 安全禁忌

5. 平台统一与分化矩阵

统一                            分化
──────────────────────────     ─────────────────────────
业务逻辑                        导航行为
数据模型                        手势
API契约                         图标
校验                            排版
错误语义                        选择器/对话框

平台默认值

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

Fitts定律（触控现实）

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

规则：

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

编写任何代码前，必须完成：

🧠 移动端检查点

平台：     ___________
框架：    ___________
已读文件：   ___________

我将应用的3条原则：
1.
2.
3.

我将避免的反模式：
1.
2.

❌ 无法完成 → 回去阅读。

9. 框架决策树（权威）

需要OTA + 有Web团队 → React Native + Expo
高性能UI → Flutter
仅iOS → SwiftUI
仅Android → Compose

没有理由不要争论。

10. 发布就绪清单

上线前

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

11. 相关技能

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

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

使用时机

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

限制

• 仅在任务明确匹配上述范围时使用本技能。
• 输出不能替代特定环境的验证、测试或专家审查。
• 缺少必要输入、权限、安全边界或成功标准时，停下来提问。