扁平化Flat Design

核心特征

• 纯色块填充，没有渐变、纹理与拟真高光
• 几乎不使用投影，层次靠颜色与留白区分
• 配色明亮高饱和，常见绿、蓝、红、黄的组合
• 圆角很小，常见 4–6px，形状规整
• 图标是纯色几何轮廓，没有立体细节

色板与字体

英文

Inter（自托管）

中文

系统黑体：苹方 / 微软雅黑

说明

真实项目中常用 Helvetica Neue、Open Sans、Lato 或 Source Sans，字形简洁、字重适中即可。

起源与代表作

年代：2010 年代初（Windows 8 Metro 2012 年、iOS 7 2013 年）

扁平化是对拟物化的反动。微软从 Windows Phone 7 起推行 Metro 设计语言，2012 年的 Windows 8 把它带到桌面；2013 年苹果发布 iOS 7，在 Jony Ive 主导下去掉了皮革、木纹与高光。此后 Flat UI 成为 2010 年代中期网页与移动端的主流，不少产品又在扁平的基础上引入轻微投影，演化出 Material Design 与「半扁平」风格。

AI 设计提示词 · Prompt

扁平化（Flat Design）风格界面：页面背景纯白 #FFFFFF，辅助面板为云灰 #ECF0F1，文字湿沥青 #2C3E50，次要文字 #455A64。全部元素使用纯色块填充，禁止渐变、投影、内阴影与纹理。主色为彼得河蓝 #1F78B4，辅以翡翠绿 #1E8449 与向日葵黄 #F1C40F 做卡片色块；深色色块上的文字用白色，黄色块上用 #2C3E50。圆角统一 4px，按钮为实心色块，次按钮为 2px 同色描边。图标为纯色几何形状，线宽一致。标题使用 Inter 800，正文 400。层级靠色块、字号与留白建立。所有文字与背景对比度不低于 4.5:1，可点击元素不能只靠颜色区分，需同时有形状或文字提示。

A Flat Design interface: pure white page background #FFFFFF, secondary panels in cloud gray #ECF0F1, text in wet asphalt #2C3E50 and secondary text #455A64. Every element uses solid color fills: no gradients, drop shadows, inner shadows or textures. The primary color is blue #1F78B4, with emerald green #1E8449 and sunflower yellow #F1C40F as card color blocks; use white text on dark blocks and #2C3E50 on yellow. A uniform 4px corner radius; buttons are solid blocks and secondary buttons use a 2px outline in the same color. Icons are solid geometric shapes with consistent stroke width. Headings use Inter 800 and body text 400. Hierarchy comes from color blocks, type size and whitespace. Keep text contrast at least 4.5:1 and do not rely on color alone to mark clickable elements.

CSS 设计变量

这套风格的设计令牌，可直接粘贴进项目的全局样式。

:root {
  --ds-bg: #ffffff;
  --ds-surface: #ecf0f1;
  --ds-text: #2c3e50;
  --ds-accent: #1f78b4;
  --ds-green: #1e8449;
  --ds-yellow: #f1c40f;
  --ds-radius: 4px;
  --ds-shadow: none;
}

适合与不适合

和相近风格的区别

• 新拟态：扁平化完全不用阴影，纯色块靠颜色区分层次；新拟态恰恰相反，元素与底板同色，全靠一亮一暗的阴影做出凸起与凹陷。

常见踩坑

• 没有阴影和边框时，按钮、卡片与普通色块容易混在一起，可点元素要用对比色、描边或明确的文字提示区分
• 高饱和色块上的文字对比度常常不足（如白字压在 #3498DB 上约 3:1），需要加深底色或改用深色文字，并按 4.5:1 检查
• 全部纯色会让页面单调，需要靠字号、留白和色块节奏建立层级，避免整页大小一样
• 只用颜色区分状态会让色盲用户无法辨认，错误、成功等状态要同时配图标或文字

相关 UI 模式

在 UI 模式词典里查看组件级的实现与演示。

常见问题