看哪里 看所有元素都是纯色:头像是圆形裁切,统计数字直接写在色块上,按钮没有阴影也没有高光,只靠颜色和文字区分。点按钮时只改颜色,作品格子的悬停也只是色块覆盖,没有任何立体变化
这是什么
扁平化是去掉阴影、纹理、高光和渐变,只用纯色块、清晰字体与简单图形组织界面的风格。2010 年代初由 Windows Phone Metro 与 iOS 7 推向主流;后来的「Flat 2.0」又加回少量阴影来提示可点击
也叫扁平设计Flat UI扁平风Metro 风格
关键特征
- 缺了就不像
- 纯色块没有阴影和高光简单几何图标
- 加了更像
- 高饱和配色粗细对比的无衬线字长投影图标(Flat 2.0)
容易混淆
- 扁平插画Flat Illustration
扁平插画是插画画法,本条是界面风格;两者常一起使用
- 材料设计Material Design
Material 在扁平色块上加回了有规则的层级阴影和动效
- 极简界面Minimalist UI
极简界面强调内容少和留白,扁平化强调去掉立体效果,可以颜色很多
扁平化Flat Design
去掉阴影、纹理和高光,只用纯色块、清晰字体和简单图标
你可能会说
- 纯色块、没有阴影的那种
- 图标都是简单的平面色块
- 像 iOS 7 之后那种干净
适合用在
- 信息清晰优先的产品界面、图标体系、数据看板
- 视频里的信息图、说明动画,与扁平插画配合
- 需要在小屏幕上快速识别的按钮和图标
这样描述给 AI
做一个扁平化风格(Flat Design)的个人主页卡片:完全不用阴影、渐变、纹理和高光;用 3–4 个高饱和纯色(如青绿 #1abc9c、深蓝 #34495e、珊瑚红 #e74c3c)大面积铺色块,直角或小圆角;无衬线字体,标题粗、正文细;图标是单色几何剪影;按钮是纯色块加白字,悬停只改颜色深浅;信息靠颜色块和留白分组