Material Design

マテリアルデザイン / 2014– / 风格 / 谷歌 UI

把纸与墨这一物理比喻落实为阴影与叠层规则的设计体系。给元素赋予高度,用阴影表示层级,让动效带有物理因果。它成为此后界面设计「作为体系被分发」的范本。

Material Design — Google《Material Design》的界面组件 — Wikimedia Commons / Public domain
Google《Material Design》的界面组件 — Wikimedia Commons / Public domain
Material Design — Google《Material Design 3》的组件 2021 — Wikimedia Commons / CC BY 4.0 · © Google LLC
Google《Material Design 3》的组件 2021 — Wikimedia Commons / CC BY 4.0 · CC BY 4.0 · © Google LLC

快速判断

视觉特征

  • 以高度表示的层级与阴影
  • 如纸张般叠合的面
  • 表示因果的动效
  • 被规格化的间距单位

适用场景

  • 在多个平台上分发一致的行为
  • 把层级的深度用视觉传达出来

使用这一风格

把简短指引带入项目,或将结构化规格交给AI工具。

详细方法与出处制作规则、真实案例、比较、研究与引用格式

辞典词条

字体
用同一个字体家族搭出层级,靠字重与字号拉开差别
版面
把元素放到8的倍数的网格上,将留白标准化
材料
给面赋予高度,用阴影的浓淡标示前后
注意
不要把阴影当作装饰添加。高度规则一旦破了,层级传达的信息就成了谎言。
延伸阅读
The first specification of 2014 / The table matching elevation to shadow / The change into Material You

相关词条

常被混淆的对象

继续浏览谷歌 UI

从谷歌 UI中按共同感受优先推荐以下词条。

查看谷歌 UI全部词条

引用此条目

这部辞典就是用来被链接的。请取用适合你写作场合的那一种形式。

Link
https://indexstyle.org/zh/styles/material-design
Markdown
[Material Design — IndexStyle](https://indexstyle.org/zh/styles/material-design)
HTML
<a href="https://indexstyle.org/zh/styles/material-design">Material Design — IndexStyle</a>

返回索引中的位置