mcpField
M
Mobile Web Domain Knowledge

Mobile Web Domain Knowledge

github.com/danhvb开发87 次安装
代码仓库

关于 Mobile Web Domain Knowledge

用于分析移动端和 Web 应用需求的参考 Skill，按应用类型梳理平台差异、UX 模式与技术考量。

主要功能

  1. 01比较 Web 与移动应用类型
  2. 02梳理 iOS、Android 和 Web 要求
  3. 03评估身份验证与离线需求
  4. 04涵盖性能与响应式设计
  5. 05涉及无障碍、UX 和应用商店审核

适用场景

  1. 01比较原生、跨平台和 PWA 方案
  2. 02编写身份验证与离线需求
  3. 03检查无障碍和性能标准

安装

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

$npx skills add https://github.com/danhvb/my-ba-skills --skill mobile-web-domain-knowledge

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

详细介绍

移动端/网页领域知识技能

目的

提供全面的移动端和网页应用项目需求分析知识，涵盖平台差异、UX 模式和技术考量。

应用类型

Web 应用

静态网站：HTML/CSS，无服务端逻辑 单页应用（SPA）：客户端渲染（React、Vue、Angular） 服务端渲染（SSR）：服务端渲染 HTML（Next.js、Nuxt） 渐进式 Web 应用（PWA）：具备类似原生应用功能的 Web 应用

移动应用

原生应用：针对特定平台开发（Swift/iOS、Kotlin/Android） 跨平台应用：单一代码库（React Native、Flutter） 混合应用：在原生容器中的 Web 应用（Ionic、Cordova） PWA：可在移动设备上安装的 Web 应用

对比
方面原生应用跨平台应用PWA
性能最佳良好良好
设备访问完整大部分有限
开发成本高（2 个代码库）中低
应用商店必需必需可选
更新速度应用商店审核应用商店审核即时
离线支持完整完整有限

平台要求

iOS 注意事项
  • Swift/Objective-C 或 React Native/Flutter
  • 支持 iOS 15+（建议）
  • 遵守 App Store 指南
  • 使用社交登录时必须支持 Apple Sign-In
  • 使用 Face ID/Touch ID 进行身份验证
  • 通过 APNs 发送推送通知
  • 通过 Apple 进行应用内购买（30% 费用）
  • 隐私营养标签
Android 注意事项
  • Kotlin/Java 或 React Native/Flutter
  • 支持 Android 12+（建议）
  • 遵守 Google Play Store 指南
  • 遵循 Material Design 原则
  • 指纹/生物识别身份验证
  • 通过 FCM 发送推送通知
  • 支持多种屏幕尺寸/密度
  • 权限模型
Web 注意事项
  • 浏览器兼容性（Chrome、Safari、Firefox、Edge）
  • 响应式设计（移动优先）
  • 无障碍性（WCAG 2.1 AA）
  • SEO 要求
  • 性能（Core Web Vitals）
  • 渐进增强

常见需求模式

身份验证

需求：

REQ-AUTH-001: User shall login with email and password
REQ-AUTH-002: User shall login with social accounts (Google, Facebook, Apple)
REQ-AUTH-003: User shall use biometric authentication (Face ID, Touch ID, Fingerprint)
REQ-AUTH-004: Session shall expire after 30 minutes of inactivity
REQ-AUTH-005: User shall reset password via email link

安全注意事项：

  • 安全存储令牌（Keychain/Keystore）
  • 证书固定
  • 仅使用 HTTPS
  • OAuth 2.0/OIDC 标准
  • 速率限制
离线功能

离线支持级别：

级别 1：只读缓存

  • 查看之前加载的数据
  • 离线时无法修改
  • 实现简单

级别 2：乐观更新

  • 查看缓存数据
  • 离线时进行修改
  • 联网后同步
  • 需要解决冲突

级别 3：完整离线支持

  • 离线时提供完整功能集
  • 将所有操作加入队列
  • 同步逻辑复杂
  • 后台同步

需求示例：

REQ-OFFLINE-001: App shall cache last 50 orders for offline viewing
REQ-OFFLINE-002: App shall indicate offline status to user
REQ-OFFLINE-003: App shall queue actions when offline
REQ-OFFLINE-004: App shall auto-sync when connection restored
REQ-OFFLINE-005: App shall notify user of sync conflicts
推送通知

类型：

  • 事务类：订单更新、密码重置
  • 营销类：促销、推荐
  • 重新互动类：购物车放弃、用户不活跃

需求：

REQ-PUSH-001: User shall receive order status notifications
REQ-PUSH-002: User shall opt-in to marketing notifications
REQ-PUSH-003: Notification shall deep-link to relevant screen
REQ-PUSH-004: User shall manage notification preferences in settings

技术：

  • iOS：APNs（Apple 推送通知服务）
  • Android：FCM（Firebase 云消息传递）
  • Web：Web Push API
性能要求

移动端性能：

REQ-PERF-001: App shall launch in < 2 seconds (cold start)
REQ-PERF-002: Screen transitions shall complete in < 300ms
REQ-PERF-003: API responses shall complete in < 2 seconds
REQ-PERF-004: App shall maintain 60 fps during scrolling
REQ-PERF-005: Crash rate shall be < 1%

Web 性能（Core Web Vitals）：

REQ-PERF-010: LCP (Largest Contentful Paint) < 2.5 seconds
REQ-PERF-011: FID (First Input Delay) < 100ms
REQ-PERF-012: CLS (Cumulative Layout Shift) < 0.1
REQ-PERF-013: TTI (Time to Interactive) < 3.8 seconds
响应式设计

断点：

  • 移动端：< 768px
  • 平板：768px - 1024px
  • 桌面端：> 1024px

需求：

REQ-RESP-001: Layout shall adapt to screen sizes 320px to 2560px
REQ-RESP-002: Touch targets shall be minimum 44x44 pixels on mobile
REQ-RESP-003: Content shall be readable without horizontal scroll
REQ-RESP-004: Images shall use responsive sizing (srcset)
无障碍性（WCAG 2.1）

需求：

REQ-A11Y-001: All images shall have alt text
REQ-A11Y-002: Color contrast ratio shall be 4.5:1 minimum
REQ-A11Y-003: All interactive elements shall be keyboard accessible
REQ-A11Y-004: Form fields shall have visible labels
REQ-A11Y-005: Error messages shall be associated with fields
REQ-A11Y-006: App shall support screen readers (VoiceOver, TalkBack)

关键 UX 模式

导航
  • 标签栏（移动端）：3-5 个主要版块
  • 汉堡菜单：次级导航
  • 底部弹层：上下文操作
  • 模态对话框：聚焦任务
表单
  • 单列布局（移动端）
  • 键盘类型与输入内容匹配
  • 行内校验
  • 清晰的错误消息
  • 多步骤流程的进度指示器
加载状态
  • 骨架屏
  • 下拉刷新
  • 无限滚动或分页
  • 乐观 UI 更新
手势（移动端）
  • 点击：主要操作
  • 长按：次级菜单
  • 滑动：列表操作、导航
  • 双指捏合：缩放

应用商店注意事项

App Store（iOS）
  • 审核时间：24-48 小时
  • 首次提交需人工审核
  • 被拒原因：漏洞、崩溃、违反指南
  • 必需：隐私政策、年龄分级
  • 应用内购买：收取 15-30% 佣金
Google Play（Android）
  • 审核时间：数小时至数天
  • 自动审核 + 人工审核
  • 必需：隐私政策、年龄分级
  • 应用内购买：收取 15-30% 佣金
常见的拒绝原因
  • 崩溃或漏洞
  • 功能不完整
  • 隐私问题
  • 违反指南
  • 元数据具有误导性
  • 链接失效

分析与跟踪

关键事件：

  • 应用安装/打开
  • 屏幕浏览
  • 功能使用
  • 转化事件
  • 错误/崩溃

工具：

  • Firebase Analytics
  • Mixpanel
  • Amplitude
  • App Store Connect / Google Play Console

向利益相关者提出的问题

  • 选择原生、跨平台还是 PWA？
  • 需要支持哪些平台和版本？
  • 是否需要离线功能？
  • 推送通知的使用场景是什么？
  • 对性能有何预期？
  • 有哪些无障碍要求？
  • 是否需要上架应用商店？
  • 有哪些分析需求？

参考资料

  • Apple 人机界面指南
  • Material Design 指南
  • Web 内容无障碍指南（WCAG）
  • Core Web Vitals 文档

评论

支持 Markdown