SaaS 移动精品SaaS Mobile (High-Tech Boutique)
电光蓝渐变按钮 + 纯白卡片 + 克制的弹簧动效，悬浮 FAB 与玻璃导航条。精致、可信，适合高频业务操作。
典型场景移动端 SaaS · 金融科技 · 效率工具
效果示例
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
电光蓝渐变按钮 + 纯白卡片 + 克制的弹簧动效，悬浮 FAB 与玻璃导航条。精致、可信，适合高频业务操作。
关键词
效果与动效
Spring animations (mass:1 damping:15 stiffness:120); gradient buttons (0052FF→4D7CFF); scale press 0.96→1.0 with haptics; floating FAB with gentle bobbing (Reanimated); glassmorphism BlurView navigation bars; staggered fade-in entrance (Y:20→0 + opacity:0→1); pulsing status dot on section badges; layout transitions (LayoutAnimation or Reanimated entering)
设计系统变量
--bg#FAFAFA--fg#0F172A--muted#F1F5F9--accent#0052FF--accent-sec#4D7CFF--card#FFFFFF--border#E2E8F0--radius16px--shadowshadowOpacity 0.1 shadowRadius 10--springmass 1 damping 15 stiffness 120--font-displayCalistoga--font-bodyInter--font-monoJetBrains Mono配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Electric Blue #0052FF, Gradient End #4D7CFF
辅色 / Secondary
Background #FAFAFA, Foreground #0F172A, Muted #F1F5F9, Card #FFFFFF, Border #E2E8F0
强调色在页面底色上的对比度约 5.5:1，可用于正文与图标。
适用场景
适合 / Best For
- B2B SaaS mobile dashboards
- fintech apps
- developer tool mobile companions
- marketing analytics apps
- HR/operations apps
- modern business productivity
避开 / Do Not Use For
- Pure consumer entertainment
- children's apps
- highly decorative lifestyle apps
- contexts where Electric Blue feels too corporate
框架兼容
能力矩阵
实现要点
落地清单
- SafeAreaView wraps all screens,
- All touch targets ≥ 44×44px,
- Spring config used for all transitions,
- Gradient buttons (not flat),
- Haptic on every Pressable,
- Section badges with PulseDot,
- Staggered entrance animation on screen mount,
- JetBrains Mono for data labels,
- Calistoga for hero headlines,
- Elevation/shadow on cards
CSS / 技术关键词
borderRadius: 16 (buttons/cards), LinearGradient colors={['#0052FF','#4D7CFF']}, shadowOpacity: 0.1, shadowRadius: 10, elevation: 4, Haptics.impactAsync(ImpactFeedbackStyle.Light) on press, withSpring({mass:1, damping:15, stiffness:120}), withTiming Y:20→0 opacity:0→1 staggered entrance, LayoutAnimation.configureNext for list updates, BlurView on nav bars
AI 提示词
Design a SaaS Mobile (High-Tech Boutique) mobile interface using saas, electric blue, gradient, fintech, spring animation, dual font, glassmorphism, boutique. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.