# 扁平化（Flat Design）

镜语 · 版式与界面 / 年代风格

- 别名：扁平设计、Flat UI、扁平风、Metro 风格
- 口语：「纯色块、没有阴影的那种」「图标都是简单的平面色块」「像 iOS 7 之后那种干净」
- 一句话：去掉阴影、纹理和高光，只用纯色块、清晰字体和简单图标
- 是什么：扁平化是去掉阴影、纹理、高光和渐变，只用纯色块、清晰字体与简单图形组织界面的风格。2010 年代初由 Windows Phone Metro 与 iOS 7 推向主流；后来的「Flat 2.0」又加回少量阴影来提示可点击
- 缺了就不像：纯色块；没有阴影和高光；简单几何图标
- 加了更像：高饱和配色；粗细对比的无衬线字；长投影图标（Flat 2.0）
- 适合用在：信息清晰优先的产品界面、图标体系、数据看板；视频里的信息图、说明动画，与扁平插画配合；需要在小屏幕上快速识别的按钮和图标
- 看哪里：看所有元素都是纯色：头像是圆形裁切，统计数字直接写在色块上，按钮没有阴影也没有高光，只靠颜色和文字区分。点按钮时只改颜色，作品格子的悬停也只是色块覆盖，没有任何立体变化
- 注意：完全没有阴影和边界时，用户可能分不清哪些可以点（NN/g 研究指出扁平按钮需要更多注意力）；纯色多了容易像模板，配色需要有主次，而不是每块一个鲜艳颜色
- 描述示例：做一个扁平化风格（Flat Design）的个人主页卡片：完全不用阴影、渐变、纹理和高光；用 3–4 个高饱和纯色（如青绿 #1abc9c、深蓝 #34495e、珊瑚红 #e74c3c）大面积铺色块，直角或小圆角；无衬线字体，标题粗、正文细；图标是单色几何剪影；按钮是纯色块加白字，悬停只改颜色深浅；信息靠颜色块和留白分组
- 易混：
  - [扁平插画](https://idea.ameng.dev/terms/flat-illustration.md)：扁平插画是插画画法，本条是界面风格；两者常一起使用
  - [材料设计](https://idea.ameng.dev/terms/material-design.md)：Material 在扁平色块上加回了有规则的层级阴影和动效
  - [极简界面](https://idea.ameng.dev/terms/minimal-ui.md)：极简界面强调内容少和留白，扁平化强调去掉立体效果，可以颜色很多
- 相关：[拟物化](https://idea.ameng.dev/terms/skeuomorphism.md)、[Web 2.0 高光](https://idea.ameng.dev/terms/web-2-0-gloss.md)、[瑞士国际主义平面](https://idea.ameng.dev/terms/swiss-style.md)

## 来源与延伸阅读

- [NN/g · Flat Design](https://www.nngroup.com/articles/flat-design/)
- [NN/g · 扁平界面需要更多注意力](https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/)
- [Web Design Museum · Microsoft 2012](https://www.webdesignmuseum.org/gallery/microsoft-2012)

网页版（含演示）：https://idea.ameng.dev/terms/flat-design