mcpField
M
mobile-design

mobile-design

github.com/pixel-process-ug设计与 UI389 次安装33 周前更新
代码仓库

关于 mobile-design

用于规划和构建移动应用的设计技能，涵盖 React Native、Flutter 和 SwiftUI。它提供平台规范、响应式布局、离线设计及应用商店提交指导，并设置阶段评审。

主要功能

  1. 01平台与框架选择指导
  2. 02Apple HIG 和 Material Design 模式
  3. 03导航与组件规划
  4. 04响应式布局和安全区域处理
  5. 05离线优先架构指导
  6. 06应用商店准备指导

适用场景

  1. 01为 iOS 或 Android 应用选择框架
  2. 02规划导航和可复用移动组件
  3. 03适配手机和平板布局
  4. 04设计适用于网络不稳定的应用

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/pixel-process-ug/superkit-agents --skill mobile-design

安装后在 Claude Code 中输入/mobile-design确认已加载。

详细介绍

移动端设计

概述

设计并构建在各个平台上都具有原生体验的移动应用。本技能涵盖 React Native、Flutter 和 SwiftUI，并深入了解特定平台的人机界面指南（Apple HIG）和 Material Design、手势处理、响应式布局、离线优先模式以及应用商店提交要求。

阶段 1：平台分析

  1. 确定目标平台（iOS、Android 或两者）
  2. 选择框架（React Native、Flutter、SwiftUI 或跨平台方案）
  3. 查阅特定平台的设计指南
  4. 定义导航架构
  5. 梳理离线需求

停止 — 在开始设计前，说明平台和框架建议及其理由。

框架选择决策表
需求React NativeFlutterSwiftUIKotlin/Compose
仅 iOS可行可行最佳不支持
仅 Android可行可行不支持最佳
跨平台良好最佳不支持不支持
对原生性能要求高尚可良好最佳最佳
现有 React Web 团队最佳学习成本较高学习成本较高学习成本较高
复杂动画良好最佳良好良好
快速原型开发良好良好最佳（iOS）尚可
大型现有代码库（JS）最佳重写重写重写

阶段 2：设计实现

  1. 构建包含平台变体的组件库
  2. 实现导航（标签栏、导航栈、抽屉）
  3. 处理安全区域和屏幕缺口
  4. 添加手势识别器
  5. 为手机和平板实现响应式布局

停止 — 提交导航架构和组件清单以供审核。

遵循平台特定的人机界面指南
Apple 人机界面指南
领域指南
导航UINavigationController（推入/弹出），底部标签栏（最多 5 个）
排版SF Pro / SF Pro Rounded，支持动态字体（全部 11 种大小）
安全区域遵循 safeAreaInsets — 切勿延伸至屏幕缺口或主屏幕指示器下方
手势通过向后滑动进行导航，长按显示上下文菜单
触觉反馈UIFeedbackGenerator（冲击、选择、通知）
颜色语义系统颜色（label、secondaryLabel、systemBackground）
模态窗口使用工作表（.sheet、.fullScreenCover），支持拖动关闭
列表设置使用分组内嵌样式，内容信息流使用普通样式
图标SF Symbols 图标库（5000+ 个图标，可调整字重和大小）
Material Design（Android）
领域指南
导航底部导航栏、导航抽屉、顶部应用栏
排版Roboto / 产品字体、Material 字体比例
边到边内容绘制到系统栏下方，处理窗口内边距
手势预测性返回手势（Android 14+）、滑动关闭
触觉反馈HapticFeedbackConstants（点击、长按、键盘）
颜色Material You 根据壁纸生成动态颜色和色调调色板
组件FAB、提示条、底部工作表、标签
动效共享元素过渡、容器变换
跨平台模式决策表
功能iOS 模式Android 模式
返回导航从左侧边缘滑动系统返回按钮
主要操作导航栏右侧按钮FAB
警告框UIAlertControllerMaterialAlertDialog
加载指示器UIActivityIndicatorCircularProgressIndicator
分段控件UISegmentedControl标签页 / 标签
日期选择器滚轮选择器日历选择器
下拉刷新原生支持SwipeRefreshLayout
上下文菜单长按 + 触觉反馈长按 + 弹出菜单
安全区域处理
React Native
import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';

function Screen() {
  const insets = useSafeAreaInsets();
  return (
    <View style={{ flex: 1, paddingTop: insets.top, paddingBottom: insets.bottom }}>
      {/* Content */}
    </View>
  );
}
Flutter
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: // Content
    ),
  );
}
SwiftUI
var body: some View {
  VStack {
    // Content automatically respects safe areas
  }
  .ignoresSafeArea(.keyboard) // Only ignore keyboard if needed
}
手势导航模式
手势用途最小触控目标
点按主要操作44x44pt
长按上下文菜单 / 次要操作44x44pt
水平滑动导航、关闭、显示操作整行
垂直滑动滚动、下拉刷新、关闭底部面板整个区域
双指缩放缩放图片 / 地图内容区域
平移 / 拖动重新排序、移动元素拖动手柄
触控目标规则
规则值
最小尺寸（iOS）44x44pt
最小尺寸（Android）48x48dp
最小间距目标之间间隔 8pt
视觉尺寸与触控尺寸视觉尺寸可以更小；使用内边距扩大触控区域
主要操作屏幕底部 1/3 区域（拇指可触及区域）

第 3 阶段：平台精细化

  1. 平台专属的动画和转场
  2. 集成触觉反馈
  3. 应用图标和启动屏幕
  4. 支持深色模式和动态字体
  5. 应用商店元数据和截图

停止 — 宣布完成前，请在实体设备上进行测试。

响应式布局决策表
设备形态布局导航
手机竖屏单列底部标签栏
手机横屏单列或分栏侧边标签栏
平板竖屏两列侧边栏
平板横屏三列常驻侧边栏
React Native 响应式布局
import { useWindowDimensions } from 'react-native';

function useResponsive() {
  const { width } = useWindowDimensions();
  return {
    isPhone: width < 768,
    isTablet: width >= 768 && width < 1024,
    isDesktop: width >= 1024,
    columns: width < 768 ? 1 : width < 1024 ? 2 : 3,
  };
}
Flutter 响应式布局
class ResponsiveLayout extends StatelessWidget {
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth < 600) return MobileLayout();
        if (constraints.maxWidth < 1200) return TabletLayout();
        return DesktopLayout();
      },
    );
  }
}
离线优先架构
层模式实现方式
数据本地优先使用 SQLite/Realm 作为主存储，以服务端作为同步目标
更新乐观更新在本地应用更新，在后台同步
冲突解决策略最后写入优先或按字段合并
队列持久化操作存储待处理操作，联网后重试
缓存过期后重新验证提供缓存内容，在后台刷新
实现检查清单
  • 检测网络状态并显示 UI 指示器
  • 为所有关键数据使用本地数据库
  • 为待处理的写入操作设置队列
  • 使用指数退避的重试逻辑
  • 冲突检测和解决策略
  • 缓存失效策略
  • 在 UI 中显示同步状态指示器
  • 为仅限联网的功能提供优雅降级
应用商店指南摘要
要求Apple App StoreGoogle Play Store
截图必须提供 6.7" 和 5.5" 尺寸，12.9" iPad 截图每台设备最少 2 张，最多 8 张
应用图标1024x1024px，不带透明度，不带圆角512x512px，建议使用自适应图标
隐私必须提供隐私营养标签必须填写数据安全部分
审核时间通常为 24-48 小时数小时至数天
常见拒绝原因崩溃、占位内容违反政策、崩溃
性能目标
指标目标
冷启动< 2 秒
屏幕转场< 300ms
触控响应< 100ms
滚动帧率60fps（无掉帧）
内存使用量< 200MB 基准值
应用大小< 50MB 下载大小

反模式 / 常见错误

反模式错误原因替代做法
在移动端使用 Web 模式（悬停状态）触控设备不支持悬停使用按压 / 点按状态
触控目标过小（< 44pt）体验糟糕，无法满足无障碍要求触控区域至少为 44x44pt
在 Android 上使用 iOS 风格按钮显得格格不入，令用户困惑使用平台原生组件
针对单一屏幕尺寸使用固定布局在平板和折叠屏设备上显示异常使用带断点的响应式布局
在主线程上执行阻塞式 I/OUI 冻结，出现 ANR 对话框使用异步 I/O 和后台线程
未处理键盘弹出内容被键盘遮挡键盘弹出时调整布局
假设网络始终连接离线时应用崩溃或卡住采用离线优先架构
使用像素值而非 dp/pt不同屏幕上的尺寸各不相同使用与密度无关的单位
跳过触觉反馈应用显得廉价且响应迟钝为关键交互添加触觉反馈

文档查询（Context7）

使用 mcp__context7__resolve-library-id，然后使用 mcp__context7__query-docs 获取最新文档。返回的文档优先于记忆中的知识。

  • react-native — 用于组件 API、导航或特定平台的模块
  • flutter — 用于 Widget 目录、状态管理或平台通道

集成点

技能集成
ui-ux-pro-max调色板、排版、UX 指南
ui-design-system为移动端调整的设计令牌
canvas-design移动端数据可视化和图表
ux-researcher-designer移动端可用性测试
senior-frontendReact Native 组件实现
deployment应用商店提交流程
performance-optimization移动端性能分析

技能类型

FLEXIBLE — 根据所选框架和目标平台调整模式。面向单一平台时，应遵循特定平台的指南；跨平台应用则可灵活融合各种惯例。

评论

支持 Markdown