跳到内容

看哪里 点任何按钮或列表项,看水波纹从你点下的位置扩散;顶部应用栏、卡片和右下角加号按钮的阴影深浅不同,代表离纸面的高度不同。点加号按钮,它会升高、阴影变大

这是什么

Material Design 是 Google 2014 年发布的设计体系,把界面想象成有厚度的数字纸片:不同层级用投影高度区分,触摸后从触点扩散出水波纹,重要操作放在悬浮圆形按钮(FAB)上。2021 年的 Material 3(Material You)改为更圆的形状和从壁纸取色的色调

也叫质感设计MD 风格安卓风格Material YouMaterial 3

关键特征

缺了就不像
触点扩散的水波纹按高度区分的投影悬浮操作按钮 FAB
加了更像
彩色应用栏Roboto 字体标准化卡片与列表

容易混淆

材料设计Material Design

Google 的设计体系:纸片层级阴影、悬浮按钮和点击水波纹

你可能会说

  • 安卓那种点一下有水波纹
  • 右下角圆形加号按钮
  • 一张张纸片叠起来的阴影

适合用在

  • 安卓应用、后台管理和工具类网页,需要现成、一致的组件规范
  • 视频或演示里需要「标准安卓界面」时
  • 团队协作时用官方组件库保证一致性

这样描述给 AI

做一个 Material Design 风格的个人主页:顶部靛蓝 #3f51b5 应用栏带 4dp 阴影,正文是浅灰背景上的白色卡片(2dp 阴影、4px 圆角),强调色粉红 #ff4081;右下角一个 56px 圆形悬浮按钮(FAB)带 6dp 阴影;所有按钮和列表项点击时从触点扩散灰色水波纹;Roboto 无衬线字体,按钮文字大写或中等字重;层级由阴影高度表达