用途
Mobile Design 技能用于在以下工作中提供移动端设计指导：移动优先 Web 应用、原生移动应用（iOS/Android）、渐进式 Web 应用（PWA）、混合移动应用（React Native、Flutter 等）、响应式设计系统、触摸优先界面、移动电商、移动仪表盘、基于手势的界面以及无障碍审计。目标是帮助创建在智能手机和平板电脑上感觉原生、性能良好且令用户愉悦的移动体验。
主要能力
移动优先设计理念
移动优先从最小屏幕开始，逐步为更大设备增强。资料给出的理由包括：强制优先考虑核心内容与功能、默认提升性能（更轻的资源、更简单的布局）、向上扩展比向下缩减更容易、反映真实用户行为（移动流量常超过桌面）、确保核心功能在所有设备上可用。资料提供了移动优先与桌面优先的 CSS 对比示例，移动优先以基础样式面向移动端，再通过 min-width 媒体查询为平板和桌面增强；桌面优先则以桌面为基础样式，再用 max-width 覆盖。
触摸目标与人体工学
资料列出最小触摸目标尺寸：Apple 为 44×44 点（iOS 人机界面指南），Google 为 48×48 dp（Material Design），Microsoft 为 40×40 像素（Windows Phone）；推荐最小 48×48 像素，最佳 56×56 像素。触摸目标间距：交互元素之间最小 8px，常用控件最佳 12-16px；不同类型的边缘按钮（如取消与确认）可以相邻。
拇指区域分为三个人体工学区域：易达区（绿色，底部三分之一居中，拇指最易触及）、伸展区（黄色，中部，需要轻微伸展）、困难区（红色，顶部角落，单手最难触及）。设计含义：主要操作放在易达区（底部居中），破坏性操作放在困难区（顶部角落），导航通常位于顶部或底部而非中部，并考虑左右手用户。资料给出了 React Native 底部对齐主操作的代码示例，包含为 iPhone home indicator 增加底部内边距、56 高度按钮等。
视口与屏幕考量
资料列出常见移动断点：超小设备（手机，320px-479px）、小设备（大屏手机，480px-767px）、中设备（平板，768px-1023px）、大设备（小笔记本，1024px-1279px）、超大设备（桌面，1280px 及以上）。视口 meta 标签示例包括响应式视口（width=device-width, initial-scale=1, maximum-scale=5, user-scalable=yes）以及 PWA 独立模式（viewport-fit=cover、apple-mobile-web-app-capable 等）。安全区域（iPhone X 及以后）通过 env(safe-area-inset-top/left/right/bottom) 处理刘海和 home indicator。
触摸交互
资料详细介绍了多种触摸交互及其实现代码：
- 单击：按钮、链接、列表项的主要操作，应在 0-100ms 内提供即时视觉反馈，最小尺寸 48×48 像素。示例包含 React 按压状态与 CSS 缩放反馈。
- 双击：用于地图/图片缩放、点赞/收藏，应谨慎使用。iOS 双击缩放可通过 touch-action: manipulation 防止，同时允许捏合缩放。
- 水平滑动：用于屏幕/页面切换、显示操作（滑动删除、滑动归档）、关闭卡片/模态、切换标签。示例为 React 可滑动列表项，含最小滑动距离 50、显示操作与回弹逻辑。
- 垂直滑动：用于下拉刷新（从顶部向下滑）、滚动内容、关闭底部弹层/模态（向下滑）。示例为 React 下拉刷新组件，含阈值 80 与释放提示。
- 捏合与张开（缩放）：用于图片画廊、地图、PDF 查看器及任何可缩放内容。示例为 React 捏合缩放图片，限制 1x 到 4x。
- 长按：用于上下文菜单、项目选择模式、拖放启动、附加选项。示例为 React useLongPress 钩子，默认 500ms。
- 拖放：示例为 React Native 使用 PanResponder 与 Animated 实现可拖动卡片，释放后弹回原位。
导航模式
资料介绍了多种移动导航模式及代码：
- 底部标签栏（iOS 标准、Android 常见）：示例使用 React Navigation 的 createBottomTabNavigator，含图标切换、激活/非激活颜色、为安全区域设置高度与底部内边距。最佳实践：最多 3-5 个标签、始终显示标签文字（不只依赖图标）、清晰高亮当前标签、标签始终可见、最重要的部分放在左侧（LTR 语言）。
- 汉堡菜单（抽屉导航）：示例使用 createDrawerNavigator，含抽屉位置、类型、宽度与图标。适用场景：次级导航、导航选项多（6+）、不常访问的功能、设置与账户选项。避免场景：需要主导航、用户需要快速访问所有部分、主要部分不超过 5 个（应使用标签栏）。
- 底部弹层与模态：资料包含 React 底部弹层示例，支持向下拖动关闭，含触摸开始、移动（仅允许向下拖）、结束（超过 100 阈值关闭）逻辑。
使用方式
该技能以技能文档形式提供，包含概念说明、最佳实践与可直接参考的代码示例（CSS、React、React Native）。使用时可根据具体移动端设计任务查阅对应章节，将示例代码适配到项目中。资料未提供安装命令或调用方式。
适用场景
移动优先 Web 应用、原生 iOS/Android 应用、PWA、混合移动应用、响应式设计系统、触摸优先界面、移动电商、移动仪表盘、基于手势的界面、无障碍审计。
限制
资料未提供该技能的收费、价格、平台支持范围、性能基准或效果保证等信息。部分代码示例（如捏合缩放中的 lastDistance 变量声明位置、底部弹层示例的截断）在原始资料中即不完整，实际使用时需自行补全。