shield_lock
金大哥
← 返回 Skill 列表
extension
分类: 开发与工程无需 API Key

mobile-app-design-mastery

基于重构UI原则的生产级移动应用UI设计。始终激活用于：Flutter应用、移动应用、iOS应用、Android应用、移动UI、应用屏幕、移动导航、底部工作表、移动表单、触摸目标、移动字体排印、应用配色方案、移动卡片、列表视图、移动模态框、标签栏、应用栏、浮动操作按钮。提供移动设计工作流程、触控优化间距、移动字体排印比例、平台感知模式。土耳其语：mobil uygulama tasarımı, Flutter tasarım, uygulama arayüzü, mobil UI, telefon uygulaması, Android tasarım, iOS tasarım。英语：app design, mobile interface, touch-friendly, native feel, mobile UX。

person作者: jakexiaohubgithub
open_in_new仓库download下载资源包

Mobile App Design Mastery

Production-grade mobile UI design principles adapted from Refactoring UI for Flutter/native apps.

Core Mobile Design Workflow

1. Start with a Screen, Not a Shell

  • Design the core functionality of a single screen first
  • Don't start with navigation, tab bars, or app chrome
  • Work in greyscale first—add color after hierarchy is clear
  • Design for the primary device size, then adapt

2. Establish Mobile Systems

Spacing Scale (dp/logical pixels):

| Token | Size | Use Case | |-------|------|----------| | xs | 4 | Micro gaps, icon padding | | sm | 8 | Tight, within components | | md | 12 | Related elements | | base | 16 | Standard padding | | lg | 24 | Between sections | | xl | 32 | Major separation | | 2xl | 48 | Screen margins on tablets |

Touch Targets:

| Platform | Minimum Size | |----------|-------------| | iOS | 44×44 pt | | Android | 48×48 dp | | Comfortable | 56×56 |

Type Scale (sp/pt):

| Size | Use Case | |------|----------| | 11-12 | Captions, labels | | 14 | Body text, default | | 16 | Emphasized body | | 18-20 | Subheadings | | 24 | Screen titles | | 28-34 | Large titles (iOS style) |

Shadow/Elevation Scale (dp):

| Level | Elevation | Use Case | |-------|-----------|----------| | 0 | 0 | Flat surfaces | | 1 | 1-2 | Cards, tiles | | 2 | 4 | Raised buttons, app bar | | 3 | 8 | Bottom sheets, dialogs | | 4 | 16 | Navigation drawers | | 5 | 24 | Modals |

3. Build Mobile Hierarchy

Mobile screens have limited space—hierarchy is even more critical.

  • Primary: Key action/content (one per screen)
  • Secondary: Supporting info (visible but not competing)
  • Tertiary: Metadata, timestamps (smallest/lightest)

Key principles:

  • Size matters more on mobile—but don't overdo it
  • Use weight and color before increasing size
  • Emphasize by de-emphasizing competing elements
  • Icons need softer colors to balance with text

4. Design for Touch

  • Generous touch targets (minimum 44pt/48dp)
  • Adequate spacing between interactive elements
  • Visual feedback on press (ripples, scale, opacity)
  • Swipe actions for common operations

5. Apply Platform-Aware Depth

  • iOS: Subtle shadows, blur/frosted glass, less elevation
  • Android: Material elevation system, layered surfaces
  • Use depth to indicate interactivity and focus

Mobile Anti-Patterns

NEVER do:

  • Touch targets smaller than 44×44
  • Text smaller than 11sp (illegible)
  • Grey text on colored backgrounds
  • Ambiguous spacing between groups
  • Full-width buttons edge-to-edge without padding
  • Relying on color alone for meaning
  • Ignoring safe areas (notch, home indicator)

Reference Files

| Topic | File | When to Read | |-------|------|--------------| | Visual hierarchy, labels, emphasis | mobile-hierarchy.md | Balancing element importance | | Spacing, touch targets, layout | mobile-spacing.md | Layout decisions | | Typography, fonts, readability | mobile-typography.md | Text styling | | Color, themes, dark mode | mobile-color.md | Color system | | Shadows, elevation, layers | mobile-depth.md | Adding depth | | Components, navigation, patterns | mobile-patterns.md | Platform-specific patterns |