Material Design vs Flat Design质感设计(Material Design) 对比 扁平设计

How to tell them apart: the deciding signals, and the exact changes that would turn one into the other. 怎么分清这两个:判别信号,以及一个变成另一个需要的具体改动。

预览加载中…Loading preview…

Material Design质感设计(Material Design)

预览加载中…Loading preview…

Flat Design扁平设计

This is Material Design because…这是 Material Design,因为……

This is Material Design because depth is restored as a physics system — every surface sits at a measured z-axis elevation casting a shadow that encodes its height, and motion expresses where elements come from.

这是质感设计,因为纵深被恢复成了一套物理系统 —— 每个表面在 z 轴上都有一个可测量的 elevation,投下编码其高度的阴影,动效则表达元素从哪里来。

It would become Flat Design if…如果……就变成 Flat Design 了

It would become Flat Design if the z-axis were collapsed back to zero — shadows deleted, the FAB flattened into a solid color block, hierarchy left to color and type alone.

如果把 z 轴重新压回零 —— 删掉阴影、FAB 拍扁成色块、层级全交给颜色和字体 —— 就变成扁平设计了。

我的参考集

组合页面参考、知名网站、UI 元素和视觉风格,导出给 AI。

你的下一份设计,从这里开始。

在任意标本旁点击「加入参考」,就能把页面、品牌、组件和风格组合成一份 AI 设计说明。

浏览页面参考

搜索参考库Search the library

输入关键词,搜索所有参考。