mobile-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Mobile Design System

移动设计系统

(Mobile-First · Touch-First · Platform-Respectful)

Philosophy: Touch-first. Battery-conscious. Platform-respectful. Offline-capable. Core Law: Mobile is NOT a small desktop. Operating Rule: Think constraints first, aesthetics second.

This skill exists to prevent desktop-thinking, AI-defaults, and unsafe assumptions when designing or building mobile applications.

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

设计理念： 触控优先、注重续航、尊重平台、支持离线。 核心准则： 移动端绝非缩小版桌面端。 操作原则： 先考虑约束，再兼顾美观。

本准则旨在避免在设计或开发移动应用时陷入桌面思维、AI默认逻辑和不安全假设。

1. Mobile Feasibility & Risk Index (MFRI)

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

Before designing or implementing any mobile feature or screen, assess feasibility.

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

MFRI Dimensions (1–5)

MFRI评估维度（1–5分）

Dimension	Question
Platform Clarity	Is the target platform (iOS / Android / both) explicitly defined?
Interaction Complexity	How complex are gestures, flows, or navigation?
Performance Risk	Does this involve lists, animations, heavy state, or media?
Offline Dependence	Does the feature break or degrade without network?
Accessibility Risk	Does this impact motor, visual, or cognitive accessibility?

维度	问题
平台清晰度	是否明确定义了目标平台（iOS/Android/两者皆有）？
交互复杂度	手势、流程或导航的复杂程度如何？
性能风险	是否涉及列表、动画、大量状态或媒体资源？
离线依赖度	无网络时该功能是否会失效或体验降级？
可访问性风险	是否会影响运动、视觉或认知障碍用户的使用？

Score Formula

评分公式

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

Range:

-10 → +10

MFRI = (平台清晰度 + 可访问性就绪度)
       − (交互复杂度 + 性能风险 + 离线依赖度)

评分范围：

-10 → +10

Interpretation

评分解读

MFRI	Meaning	Required Action
6–10	Safe	Proceed normally
3–5	Moderate	Add performance + UX validation
0–2	Risky	Simplify interactions or architecture
< 0	Dangerous	Redesign before implementation

MFRI分数	含义	要求动作
6–10	安全	正常推进开发
3–5	中等风险	增加性能与UX验证环节
0–2	高风险	简化交互或重构架构
< 0	极高风险	重新设计后再实施

2. Mandatory Thinking Before Any Work

2. 开展任何工作前的强制思考

⛔ STOP: Ask Before Assuming (Required)

⛔ 停：先提问再假设（必须执行）

If any of the following are not explicitly stated, you MUST ask before proceeding:

Aspect	Question	Why
Platform	iOS, Android, or both?	Affects navigation, gestures, typography
Framework	React Native, Flutter, or native?	Determines performance and patterns
Navigation	Tabs, stack, drawer?	Core UX architecture
Offline	Must it work offline?	Data & sync strategy
Devices	Phone only or tablet too?	Layout & density rules
Audience	Consumer, enterprise, accessibility needs?	Touch & readability

🚫 Never default to your favorite stack or pattern.

如果以下任何一项未明确说明，必须先提问再推进：

方面	问题	原因
平台	是iOS、Android还是两者兼顾？	影响导航、手势、排版规则
框架	是React Native、Flutter还是原生框架？	决定性能表现与开发模式
导航	采用标签栏、栈式还是抽屉式导航？	核心UX架构
离线支持	是否必须支持离线使用？	影响数据与同步策略
设备适配	仅支持手机还是同时支持平板？	布局与密度规则
目标受众	消费者、企业用户还是有可访问性需求的用户？	影响触控区域与可读性

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

3. Mandatory Reference Reading (Enforced)

3. 强制参考阅读（强制执行）

Universal (Always Read First)

通用内容（必须首先阅读）

File	Purpose	Status
mobile-design-thinking.md	Anti-memorization, context-forcing	🔴 REQUIRED FIRST
touch-psychology.md	Fitts’ Law, thumb zones, gestures	🔴 REQUIRED
mobile-performance.md	60fps, memory, battery	🔴 REQUIRED
mobile-backend.md	Offline sync, push, APIs	🔴 REQUIRED
mobile-testing.md	Device & E2E testing	🔴 REQUIRED
mobile-debugging.md	Native vs JS debugging	🔴 REQUIRED

文件	用途	状态
mobile-design-thinking.md	打破固化思维，聚焦场景需求	🔴 必须首先阅读
touch-psychology.md	菲茨定律、拇指热区、手势设计	🔴 必须阅读
mobile-performance.md	60fps帧率、内存管理、续航优化	🔴 必须阅读
mobile-backend.md	离线同步、推送通知、API设计	🔴 必须阅读
mobile-testing.md	设备测试与端到端测试	🔴 必须阅读
mobile-debugging.md	原生与JS调试对比	🔴 必须阅读

Platform-Specific (Conditional)

平台专属内容（按需阅读）

Platform	File
iOS	platform-ios.md
Android	platform-android.md
Cross-platform	BOTH above

❌ If you haven’t read the platform file, you are not allowed to design UI.

平台	文件
iOS	platform-ios.md
Android	platform-android.md
跨平台	上述两个文件都需阅读

❌ 若未阅读对应平台文件，不得开展UI设计工作。

4. AI Mobile Anti-Patterns (Hard Bans)

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

🚫 Performance Sins (Non-Negotiable)

🚫 性能大忌（不可妥协）

❌ Never	Why	✅ Always
ScrollView for long lists	Memory explosion	FlatList / FlashList / ListView.builder
Inline renderItem	Re-renders all rows	useCallback + memo
Index as key	Reorder bugs	Stable ID
JS-thread animations	Jank	Native driver / GPU
console.log in prod	JS thread block	Strip logs
No memoization	Battery + perf drain	React.memo / const widgets

❌ 绝对禁止	原因	✅ 正确做法
用ScrollView实现长列表	内存占用激增	使用FlatList / FlashList / ListView.builder
内联定义renderItem	触发整行重渲染	配合useCallback + memo使用
用索引作为key	排序时出现bug	使用稳定ID
JS线程执行动画	出现卡顿	使用原生驱动 / GPU加速
生产环境保留console.log	阻塞JS线程	移除日志
不使用缓存优化	消耗电量与性能	使用React.memo / 常量widgets

🚫 Touch & UX Sins

🚫 触控与UX大忌

❌ Never	Why	✅ Always
Touch <44–48px	Miss taps	Min touch target
Gesture-only action	Excludes users	Button fallback
No loading state	Feels broken	Explicit feedback
No error recovery	Dead end	Retry + message
Ignore platform norms	Muscle memory broken	iOS ≠ Android

❌ 绝对禁止	原因	✅ 正确做法
触控区域<44–48px	容易误触	设置最小触控目标
仅支持手势操作	排除部分用户	提供按钮备选方案
无加载状态	让用户误以为应用已崩溃	提供明确反馈
无错误恢复机制	陷入死胡同	提供重试按钮与提示信息
忽略平台规范	打破用户肌肉记忆	区分iOS与Android设计

🚫 Security Sins

🚫 安全大忌

❌ Never	Why	✅ Always
Tokens in AsyncStorage	Easily stolen	SecureStore / Keychain
Hardcoded secrets	Reverse engineered	Env + secure storage
No SSL pinning	MITM risk	Cert pinning
Log sensitive data	PII leakage	Never log secrets

❌ 绝对禁止	原因	✅ 正确做法
在AsyncStorage中存储Tokens	易被盗取	使用SecureStore / Keychain
硬编码密钥	易被逆向工程破解	使用环境变量+安全存储
不做SSL证书绑定	存在中间人攻击风险	启用证书绑定
记录敏感数据	导致个人信息泄露	绝不记录敏感信息

5. Platform Unification vs Divergence Matrix

5. 平台统一与差异化矩阵

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

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

Platform Defaults

平台默认规范

Element	iOS	Android
Font	SF Pro	Roboto
Min touch	44pt	48dp
Back	Edge swipe	System back
Sheets	Bottom sheet	Dialog / sheet
Icons	SF Symbols	Material Icons

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

6. Mobile UX Psychology (Non-Optional)

6. 移动端UX心理学（必须遵守）

Fitts’ Law (Touch Reality)

菲茨定律（触控现实）

Finger ≠ cursor
Accuracy is low
Reach matters more than precision

Rules:

Primary CTAs live in thumb zone
Destructive actions pushed away
No hover assumptions

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

规则：

主要CTA按钮位于拇指热区
破坏性操作放在拇指难以触及的位置
绝不假设用户能使用悬停操作

7. Performance Doctrine

7. 性能准则

React Native (Required Pattern)

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,
  })}
/>

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 (Required Pattern)

Flutter（必须遵循的模式）

dart

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

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

```
const
```
everywhere possible
Targeted rebuilds only

dart

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

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

尽可能使用
```
const
```
仅触发目标组件重绘

8. Mandatory Mobile Checkpoint

8. 强制移动端检查点

Before writing any code, you must complete this:

🧠 MOBILE CHECKPOINT

Platform:     ___________
Framework:    ___________
Files Read:   ___________

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

Anti-Patterns I Will Avoid:
1.
2.

❌ Cannot complete → go back and read.

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

🧠 移动端检查点

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

我将遵循的3条原则:
1.
2.
3.

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

❌ 无法完成检查 → 返回重新阅读相关文档。

9. Framework Decision Tree (Canonical)

9. 框架决策树（标准流程）

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

No debate without justification.

需要OTA更新+已有Web团队 → React Native + Expo
高性能UI需求 → Flutter
仅iOS平台 → SwiftUI
仅Android平台 → Compose

无合理理由不得偏离此流程。

10. Release Readiness Checklist

10. 发布就绪检查清单

Before Shipping

上线前检查

11. Related Skills

11. 相关技能

frontend-design – Visual systems & components
frontend-dev-guidelines – RN/TS architecture
backend-dev-guidelines – Mobile-safe APIs
error-tracking – Crash & performance telemetry

Final Law: Mobile users are distracted, interrupted, and impatient—often using one hand on a bad network with low battery. Design for that reality, or your app will fail quietly.

frontend-design – 视觉系统与组件设计
frontend-dev-guidelines – RN/TS架构规范
backend-dev-guidelines – 移动端友好API设计
error-tracking – 崩溃与性能遥测

最终准则： 移动端用户通常处于分心、被打断的状态，且缺乏耐心——他们往往用单手操作，网络状况不佳，电量也可能不足。 针对这种现实场景设计，否则你的应用会悄然失败。