Material Design
マテリアルデザイン / 2014– / 风格 / 谷歌 UI
把纸与墨这一物理比喻落实为阴影与叠层规则的设计体系。给元素赋予高度,用阴影表示层级,让动效带有物理因果。它成为此后界面设计「作为体系被分发」的范本。
快速判断
视觉特征
- 以高度表示的层级与阴影
- 如纸张般叠合的面
- 表示因果的动效
- 被规格化的间距单位
适用场景
- 在多个平台上分发一致的行为
- 把层级的深度用视觉传达出来
使用这一风格
把简短指引带入项目,或将结构化规格交给AI工具。
详细方法与出处制作规则、真实案例、比较、研究与引用格式
辞典词条
- 字体
- 用同一个字体家族搭出层级,靠字重与字号拉开差别
- 版面
- 把元素放到8的倍数的网格上,将留白标准化
- 材料
- 给面赋予高度,用阴影的浓淡标示前后
- 注意
- 不要把阴影当作装饰添加。高度规则一旦破了,层级传达的信息就成了谎言。
- 延伸阅读
- The first specification of 2014 / The table matching elevation to shadow / The change into Material You
相关词条
- Holo (ホロ)同属谷歌 UI。比较Material Design与Holo
- Flat Design / Vector Minimalism (フラットデザイン / ベクターミニマリズム)共同感受:Trust / Play。比较Material Design与Flat Design / Vector Minimalism
常被混淆的对象
继续浏览谷歌 UI
从谷歌 UI中按共同感受优先推荐以下词条。
- Material You (Material You)共同感受:Play / Technique。
引用此条目
这部辞典就是用来被链接的。请取用适合你写作场合的那一种形式。
- 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>