Mobile Web Domain Knowledge by danhvb/my-ba-skills
npx skills add https://github.com/danhvb/my-ba-skills --skill 'Mobile Web Domain Knowledge'为分析移动和 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 个代码库) | 中等 | 低 |
| 应用商店 | 必需 | 必需 | 可选 |
| 更新速度 | 应用商店审核 | 应用商店审核 | 即时 |
| 离线功能 | 完全 | 完全 | 有限 |
需求 :
REQ-AUTH-001: 用户应能使用电子邮件和密码登录
REQ-AUTH-002: 用户应能使用社交账户登录 (Google, Facebook, Apple)
REQ-AUTH-003: 用户应能使用生物识别认证 (Face ID, Touch ID, 指纹)
REQ-AUTH-004: 会话应在 30 分钟不活动后过期
REQ-AUTH-005: 用户应能通过电子邮件链接重置密码
安全考量 :
离线支持级别 :
级别 1: 只读缓存
级别 2: 乐观更新
级别 3: 完全离线
需求示例 :
REQ-OFFLINE-001: 应用应缓存最近 50 个订单以供离线查看
REQ-OFFLINE-002: 应用应向用户指示离线状态
REQ-OFFLINE-003: 应用应在离线时将操作加入队列
REQ-OFFLINE-004: 应用应在连接恢复时自动同步
REQ-OFFLINE-005: 应用应通知用户同步冲突
类型 :
需求 :
REQ-PUSH-001: 用户应收到订单状态通知
REQ-PUSH-002: 用户应选择加入营销通知
REQ-PUSH-003: 通知应能深层链接到相关屏幕
REQ-PUSH-004: 用户应在设置中管理通知偏好
技术 :
移动端性能 :
REQ-PERF-001: 应用应在 < 2 秒内启动 (冷启动)
REQ-PERF-002: 屏幕过渡应在 < 300 毫秒内完成
REQ-PERF-003: API 响应应在 < 2 秒内完成
REQ-PERF-004: 应用在滚动期间应保持 60 fps
REQ-PERF-005: 崩溃率应 < 1%
Web 性能 (核心 Web 指标) :
REQ-PERF-010: LCP (最大内容绘制) < 2.5 秒
REQ-PERF-011: FID (首次输入延迟) < 100 毫秒
REQ-PERF-012: CLS (累积布局偏移) < 0.1
REQ-PERF-013: TTI (可交互时间) < 3.8 秒
断点 :
需求 :
REQ-RESP-001: 布局应适应 320px 到 2560px 的屏幕尺寸
REQ-RESP-002: 移动端触摸目标最小应为 44x44 像素
REQ-RESP-003: 内容应无需水平滚动即可阅读
REQ-RESP-004: 图像应使用响应式尺寸 (srcset)
需求 :
REQ-A11Y-001: 所有图像应具有替代文本
REQ-A11Y-002: 颜色对比度至少应为 4.5:1
REQ-A11Y-003: 所有交互元素应可通过键盘访问
REQ-A11Y-004: 表单字段应具有可见标签
REQ-A11Y-005: 错误信息应与字段关联
REQ-A11Y-006: 应用应支持屏幕阅读器 (VoiceOver, TalkBack)
关键事件 :
工具 :
每周安装量
0
代码仓库
首次出现
1970年1月1日
安全审计
Provide comprehensive knowledge for analyzing requirements in mobile and web application projects, covering platform differences, UX patterns, and technical considerations.
Static Website : HTML/CSS, no server logic Single Page App (SPA) : Client-side rendering (React, Vue, Angular) Server-Side Rendering (SSR) : Server renders HTML (Next.js, Nuxt) Progressive Web App (PWA) : Web app with native-like features
Native : Platform-specific (Swift/iOS, Kotlin/Android) Cross-Platform : Single codebase (React Native, Flutter) Hybrid : Web in native container (Ionic, Cordova) PWA : Web app installable on mobile
| Aspect | Native | Cross-Platform | PWA |
|---|---|---|---|
| Performance | Best | Good | Good |
| Device Access | Full | Most |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| Limited |
| Development Cost | High (2 codebases) | Medium | Low |
| App Store | Required | Required | Optional |
| Update Speed | App store review | App store review | Instant |
| Offline | Full | Full | Limited |
Requirements :
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
Security Considerations :
Levels of Offline Support :
Level 1: Read-only Cache
Level 2: Optimistic Updates
Level 3: Full Offline
Requirements Example :
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
Types :
Requirements :
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
Technical :
Mobile Performance :
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 Performance (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
Breakpoints :
Requirements :
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)
Requirements :
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)
Key Events :
Tools :
Weekly Installs
0
Repository
First Seen
Jan 1, 1970
Security Audits
Refero Design:研究优先设计方法,学习最佳实践,打造独特用户体验
892 周安装