VOCABULARY / 词条
扁平化设计
Flat Design
以去除光泽、渐变、投影等模拟三维效果为特征的界面视觉风格，用纯色块、简单几何形状和排版本身表达界面元素。
识别特征
- 纯色填充的面和控件，没有渐变、纹理或光泽高光
- 没有或几乎没有投影，元素靠颜色与留白而非立体感区分
- 简化的几何图标与清晰排版承担大部分信息表达
概念边界
扁平化设计描述的是“去掉模拟三维线索”这一视觉处理，不等同于瑞士国际主义——后者是一种以网格和排版为核心的设计传统，二者可以同时出现，也可以分别单独出现。它是对拟物化（用纹理和光影模仿现实物体）的反向选择；“Flat 2.0”或“半扁平”则在保持简洁的同时重新引入细微的阴影与层次，本词条把它视为扁平化的变体而非独立风格。
什么时候考虑它
- 希望界面在多种屏幕尺寸和分辨率上保持干净、易缩放的观感
- 品牌想表达现代、克制、“原生数字”的气质，而非模仿实体材质
- 信息密度较低、布局遵循常见惯例，用户能凭位置与文案判断可交互元素
什么时候慎用
- 页面信息密度高、可点击元素与静态文本混排，仅靠颜色难以区分
- 目标用户不熟悉常见界面惯例，需要更强的可点击性提示
- 为了追随潮流而移除全部可见提示，导致用户需要猜测哪里可以点击
取舍
视觉更简洁、易于适配和维护，但去掉立体线索后，按钮、链接等元素的可点击性提示减弱，需要用对比度、留白与惯例位置来补偿。
条件规则 · 编辑建议
相关词条
两者常被混称，但一个关心排版与网格秩序，一个关心是否保留三维线索，可独立取舍。
玻璃拟态依靠半透明与模糊表达层次，扁平化则刻意去掉这类深度线索，通常不宜并存。
用户需要凭可见提示辨认可操作对象，而不是靠记忆或猜测。
来源与支持范围
该文（Kate Moran，2015-09-27）将扁平化定义为界面元素缺少光泽或三维视觉效果的风格，指出它移除了历史上用于提示可交互性的投影、渐变与高光，追溯到 Microsoft 的 Metro 语言和对拟物化的反动，并把重新引入细微阴影与层次的做法称为 Flat 2.0；本词条定义与边界据此转述。
检索日期：2026-09-15该文（Kate Moran，2017-09-03）报告一项 71 人、9 个网站的眼动实验：与强提示版本相比，用户在弱可点击性提示版本上平均多花 22% 的查看时间、多 25% 的注视点，注视分布更分散；文章建议扁平界面依靠高对比、留白和惯例布局来弥补；本词条的规则与不适用条件据此提出。
检索日期：2026-09-15定义参考以上来源；数字界面示例、选择建议、条件关系及配方由本样例编辑，尚未经用户研究验证。
类型扩展与实现说明
本词条尚无可操作示例；插画为编辑示意。应用到产品时仍须在真实页面上验证可交互元素是否足够醒目，必要时补充深度线索。
{
"tokens": {
"surface": "#f4efe4",
"ink": "#2b3a3a",
"accent": "#c9713d",
"radiusPx": 6,
"shadow": "none"
},
"tokenScope": "本样例配方；Flat 2.0 变体可加入极浅的阴影，但需按产品实际验证可点击性提示。"
}打开本词条的 Agent JSON 文件这个文件原样收录本词条的全部字段，并附上来源、存档与编辑声明。