扁平移动（触控优先）Flat Design Mobile (Touch-First)
零阴影、纯色块、48px 触控区与即时按压反馈，用整块颜色分区代替卡片堆叠。上手快、性能好、老少皆宜。
典型场景工具类 App · 教育应用 · 轻量服务
效果示例
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
零阴影、纯色块、48px 触控区与即时按压反馈，用整块颜色分区代替卡片堆叠。上手快、性能好、老少皆宜。
关键词
效果与动效
Immediate press feedback (scale 0.97, no delay), color section blocking (full-width contrasting View), zero elevation/shadow, solid icon containers (colored squares/circles), geometric low-opacity shape overlays, bottom tabs solid fill (no floating)
设计系统变量
--bg#FFFFFF--surface#F3F4F6--fg#111827--primary#3B82F6--secondary#10B981--accent#F59E0B--border#E5E7EB--radius-sm6px--radius-md12px--radius-pill999px--shadownone--elevation0--touch-target48px--spacing4 8 16 24 32 48配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Blue #3B82F6, Emerald #10B981
辅色 / Secondary
Background #FFFFFF, Surface #F3F4F6, Text #111827, Amber #F59E0B, Border #E5E7EB
强调色在页面底色上的对比度约 3.7:1，适合大字与图形，正文需另配深色。
适用场景
适合 / Best For
- Cross-platform apps (iOS
- Android parity)
- information-dense dashboards
- system UI
- brand illustration
- onboarding flows
- marketing pages
- icon design
避开 / Do Not Use For
- Ultra-premium contexts needing depth/shadow
- dark-mode-first products
- contexts where flat design reads as unfinished or sterile
框架兼容
能力矩阵
实现要点
落地清单
- Zero elevation AND shadowOpacity on all elements,
- Color-blocking sections (not borders),
- All touch targets ≥ 48×48,
- No gradients on flat elements,
- Icons inside solid colored containers,
- Pressable scale feedback,
- Geometric shapes as bg decoration,
- Bold flat bottom tabs (no floating),
- Primary headlines much larger than body,
- 4pt spacing system throughout
CSS / 技术关键词
shadowOpacity: 0, elevation: 0, borderRadius: 6/12/999, height: 48 minimum touch targets, spacing: 4/8/16/24/32/48 system, backgroundColor (section blocking), Pressable scale: pressed ? 0.97 : 1, fontWeight: '800' heads / '600' sub / '400' body, letterSpacing: -0.5 heads / 1 labels, textTransform: 'uppercase' labels, strokeWidth={2.5} icons, borderWidth: 3/4 for featured CTAs
AI 提示词
Design a Flat Design Mobile (Touch-First) mobile interface using flat, 2D, no shadow, color blocking, geometric, bold, poster, icon. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.