UI/UX Pro Max风格图鉴
Mobile推荐

Material 3 表现力Material 3 Expressive (Mobile)

动态取色生成同族色板，用表面色调而非阴影表达层级；胶囊按钮、状态层与强调缓动。规范完整，易于规模化。

典型场景Android 应用 · 系统工具 · 跨端设计系统

编号76 年代Google Material Design 3 复杂度Medium 默认模式自动

效果示例

preview / material-you-md3-mobile
Nova 产品方案定价 开始使用

Design System

同一套组件
不同的性格

色彩、字体、圆角与材质，决定了界面的气质。

主要操作次要操作
标签 A标签 B+12
月度增长
+24.8%
转化率4.2%
客单价¥328
Aa Bb Cc 0123
按钮 / ButtonPrimaryGhost
输入 / Inputname@example.com
标签 / Chip已选中默认+8
进度 / Progress
开关 / Switch
数值 / Numeric1,284.50

同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。

风格描述

动态取色生成同族色板，用表面色调而非阴影表达层级；胶囊按钮、状态层与强调缓动。规范完整，易于规模化。

关键词

material 3 expressivevibrant colorspring motionadaptive componentsflexible typographycontrasting shapesandroid

别名

Material YouMaterial You (MD3 Mobile)MD3 MobileM3 ExpressiveMaterial Design 3 Expressive

效果与动效

Tonal elevation (overlay colors instead of strong shadows), pill-shaped buttons and chips (borderRadius 999), emphasized easing Easing.bezier(0.2,0,0,1), state layers (pressed overlays 10–15% opacity), Reanimated-filled label float for inputs, HapticFeedback on FAB/toggles

设计系统变量

--md3-bg#FFFBFE
--md3-on-surface#1C1B1F
--md3-primary#6750A4
--md3-on-primary#FFFFFF
--md3-secondary-container#E8DEF8
--md3-on-secondary-container#1D192B
--md3-tertiary#7D5260
--md3-surface-container#F3EDF7
--md3-outline#79747E
--radius-pill999px
--easing-emphasizedcubic-bezier(0.2,0,0,1)

配色方案

色值取自风格数据，不足时补充主题令牌

主色 / Primary

Primary Violet #6750A4, Secondary Container #E8DEF8, Tertiary #7D5260

辅色 / Secondary

Surface #FFFBFE, On Surface #1C1B1F, Surface Container #F3EDF7, Outline #79747E

强调色在页面底色上的对比度约 6.3:1，可用于正文与图标。

适用场景

适合 / Best For

  • Android
  • Wear OS
  • and Pixel-aligned products using Material 3 components

避开 / Do Not Use For

  • Ultra-minimal brutalist brands
  • terminal/hacker aesthetics
  • monochrome editorial apps

框架兼容

material-3jetpack-composeandroid-viewsflutter

能力矩阵

浅色模式支持
深色模式支持
移动适配原生适配
转化导向强High
渲染成本中animation / blur
无障碍风险低contrast-text-4.5 / keyboard / visible-focus / reduced-motion

实现要点

落地清单

  • MD3 color tokens applied (background/surface/container),
  • All CTAs are pill-shaped,
  • State-layer overlays instead of opacity 0.5 hacks,
  • Emphasized easing used for all animations,
  • Floating label inputs implemented,
  • FAB uses tertiary color with correct elevation,
  • Safe areas respected for organic shapes,
  • No pure white background,
  • No harsh box-shadows (ambient only)

CSS / 技术关键词

borderRadius: 999 (buttons/chips), containerRadius: 16–28, backgroundColor: '#FFFBFE', colorPrimary: '#6750A4', colorSecondaryContainer: '#E8DEF8', colorSurfaceContainer: '#F3EDF7', outlineColor: '#79747E', Pressable state-layer overlay (opacity 0.1–0.15), Easing.bezier(0.2,0,0,1), HapticFeedback.impactMedium on FAB, floating label using Reanimated translateY/scale

AI 提示词

Design a Material 3 Expressive mobile interface with vibrant semantic color, contrasting shapes, flexible typography, adaptive components, spring motion, and reduced-motion alternatives.