AgentSkillsCN

mobile-design

混合应用（Capacitor/Web）的移动优先设计原则。聚焦于触摸目标、手势替代和平台特定的用户体验。

SKILL.md
--- frontmatter
name: mobile-design
description: Mobile-first design principles for hybrid apps (Capacitor/Web). Focuses on touch targets, gesture alternatives, and platform-specific UX.

Mobile Design System

Ensure a "native-like" experience for mobile users.

1. Touch & Targets

  • •Minimum Size: 44x44px (iOS) / 48x48px (Android) for all interactive elements.
  • •Spacing: Minimum 8px between tappable elements to prevent accidental clicks.

2. Platform Conventions

  • •iOS: Centered titles, chevron-left for back, bottom tab bars.
  • •Android: Left-aligned titles, arrow-left for back, drawer or tab navigation.
  • •Project Choice: The "wasser" project uses a standard Bottom Navigation and a Top App Bar.

3. Gestures & Accessibility

  • •Alternatives: Never rely only on gestures (swipes/pinches). Always provide a visible button alternative.
  • •Feedback: Use visual haptics (scale, opacity change) on touch.

4. Performance

  • •Lists: Use virtualization for long lists (MUI FixedSizeList or similar if needed).
  • •Images: Lazy load images that are off-screen.
  • •Animations: Use useNativeDriver (if applicable) or Framer Motion's hardware-accelerated transforms.

5. Offline Handling

  • •Indicators: Show "Offline" state clearly.
  • •Action: Inform users if an action (like saving a scan) is queued or requires connection.