mobile-design

Mobile Design - 移动优先的设计与工程规范

技能概述

Mobile Design 是一套移动优先的设计与工程规范，帮助开发者在构建 iOS、Android 或跨平台应用时避免桌面思维陷阱，确保应用的性能、可用性和安全性。

适用场景

移动应用开发前评估

在开始编码前，使用 MFRI（移动可行性与风险指数）评估功能可行性，识别平台清晰度、交互复杂度、性能风险等关键维度，提前发现潜在问题。

跨平台应用设计与开发

为 React Native、Flutter 或原生开发提供统一的设计原则和性能规范，明确哪些元素需要统一（业务逻辑、数据模型），哪些需要遵循平台差异（导航、手势、图标）。

移动应用代码审查与优化

识别和修复常见的移动端反模式，如使用 ScrollView 处理长列表、触摸目标过小、缺少离线处理、性能优化缺失等问题。

核心功能

MFRI 可行性评估系统

提供五维度的评分公式（平台清晰度 + 可访问性准备度 - 交互复杂度 - 性能风险 - 离线依赖），输出 -10 到 +10 的风险分数，根据分数等级决定是正常推进、增加验证、简化交互还是重新设计。

强制思考流程检查点

在开始任何工作前强制开发者明确平台、框架、导航方式、离线需求、设备范围和目标用户，防止假设性错误，并要求阅读相关参考文档（触摸心理学、性能规范、后端集成、测试调试等）。

移动端反模式识别库

收录性能、交互、安全三大类常见错误及正确做法，包括列表组件选择、触摸目标尺寸、平台规范遵循、安全存储等，提供 React Native 和 Flutter 的代码规范示例。

常见问题

移动应用开发前为什么要做 MFRI 评估？

MFRI 评估帮助你在投入开发前识别功能可行性风险。许多移动项目失败是因为在桌面环境设计，忽视了移动端的性能、网络和交互约束。通过 5 个维度的评分，你可以提前知道哪些功能需要简化、哪些需要额外验证，避免后期返工。

iOS 和 Android 的触摸目标尺寸有什么区别？

iOS 规范要求最小触摸目标为 44pt（约 44 像素），Android 规范要求 48dp（约 48 像素）。两者都基于人手指触控的准确度限制。违反这些规范会导致用户频繁误触，严重影响可用性。此技能会提醒你在设计任何交互元素时遵守这些底线。

React Native 为什么不能用 ScrollView 做长列表？

ScrollView 会一次性渲染所有子组件，即使屏幕外不可见。对于长列表，这会迅速消耗大量内存，导致应用卡顿甚至崩溃。正确做法是使用 FlatList 或 FlashList，它们只渲染可见区域的行，配合 keyExtractor、getItemLayout 和 React.memo 可以实现流畅滚动。此技能会强制你避开这类反模式。