Flat Design 扁平设计
Flat Design renders the interface as pure 2D: surfaces are solid color fills, icons are simple geometric glyphs, and nothing pretends to be lit, embossed, or made of a material. Hierarchy comes from color, size, and typography instead of shadows and bevels. It became the dominant look around 2012–2013 (Windows 8's Metro, then iOS 7) as the direct rejection of skeuomorphism's gloss and texture.
扁平设计把界面渲染成纯粹的 2D：表面是纯色填充，图标是简单的几何字形，没有任何东西假装被打光、压凸或由某种材质制成。层级来自颜色、尺寸和排版，而不是阴影和斜面。它在 2012–2013 年前后（Windows 8 的 Metro，然后是 iOS 7）成为主流外观，是对拟物设计的光泽与质感的直接反叛。
Scope: This entry covers strict flat rendering. 'Flat 2.0' — flat surfaces with a few functional shadows reintroduced (Material Design's elevation is the systematic version) — is the common modern compromise, not a separate entry.
范围：本条目只涵盖严格的扁平渲染。「扁平 2.0」——在扁平表面上重新引入少量功能性阴影（Material Design 的 elevation 是其系统化版本）——是如今常见的折中做法，不是独立条目。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
Solid 2D color fills纯色 2D 填充 surface defining定义特征
Every surface is one flat color — no gradients, no gloss, no texture, no material of any kind.
每个表面都只有一个平坦的颜色——没有渐变、没有光泽、没有纹理，也没有任何材质。
-
No simulated depth没有模拟的深度 depth defining定义特征
No drop shadows, bevels, or highlights; elements sit on one plane and edges are drawn by color change alone.
没有投影、斜面或高光；元素都待在同一个平面上，边缘只靠颜色变化来区分。
-
Simple glyph icons简单的字形图标 imagery defining定义特征
Icons are reduced to minimal geometric silhouettes — a single-color shape reads as the whole object.
图标被简化成最精简的几何剪影——一个单色图形就代表整个物体。
-
Color carries the hierarchy颜色承担层级 color defining定义特征
Bright, often saturated block colors distinguish actions and regions — color does the job shadows used to do.
明亮、常常高饱和的色块区分操作和区域——阴影以前干的活，现在由颜色来做。
-
Typography does the structure排版撑起结构 typography supporting辅助特征
Clean sans-serif type in strong size steps separates levels of content where boxes and bevels used to.
干净的无衬线字体以强烈的字号阶梯区分内容层级，替代了过去的框线和斜面。
-
Density is free密度随意 layout variable可变特征
Flat governs RENDERING only — a flat UI can be a sparse landing page or a dense dashboard.
扁平只管渲染方式——扁平 UI 可以是稀疏的落地页，也可以是密集的仪表盘。
-
Gloss, gradients, textures光泽、渐变、纹理 depth avoid避免
A specular highlight or leather texture breaks the style — that's the doorway back to skeuomorphism.
一点镜面高光或皮革纹理就会破坏这种风格——那是回到拟物设计的大门。
Often confused with: Skeuomorphism最容易混淆：拟物设计
Flat Design扁平设计
Skeuomorphism拟物设计
This is Flat Design because surfaces are unshaded solid fills and icons are abstract glyphs — nothing imitates a physical object or material.
这是扁平设计，因为表面是没有明暗变化的纯色填充，图标是抽象字形——没有任何东西模仿真实物体或材质。
It would become skeuomorphism if the fills grew gloss, texture, and lighting until controls read as physical things you could touch.
如果填充长出光泽、纹理和打光，直到控件看起来像摸得着的实物，就变成拟物设计了。
In code — optional starting points代码写法 —— 可选起点
A flat button: one fill, no lighting anywhere
background: #2f80ed; border: none; border-radius: 4px; box-shadow: none;The un-skeuomorphing checklist — nothing simulates light
filter: none; background-image: none; text-shadow: none;State changes by color swap, not elevation
bg-sky-600 text-white rounded shadow-none hover:bg-sky-700Style brief — paste into your agent风格 Brief —— 粘贴给你的代理
Create the surface using flat design. Defining signals: every surface a solid single-color fill — zero gradients, gloss, or texture; no simulated depth — no drop shadows, bevels, or specular highlights, edges drawn by color change alone; icons as simple one-color geometric glyphs; hierarchy carried by color blocks, size, and clean sans-serif type. Keep the palette and density flexible — flat can be sparse or dense. In CSS this means background-color instead of background-image gradients, border: none or 1px solid, box-shadow: none. Do not drift into skeuomorphism: the decisive difference is that nothing imitates a lit physical material. Preserve 4.5:1 text contrast, and make interactive elements identifiable without shadows — clear color affordance, visible hover/pressed states, and visible focus rings.
用扁平设计创建这个界面。决定性特征：每个表面都是纯色单色填充——零渐变、零光泽、零纹理；没有模拟的深度——没有投影、斜面或镜面高光，边缘只靠颜色变化区分；图标是简单的单色几何字形；层级由色块、尺寸和干净的无衬线字体承担。配色和密度保持灵活——扁平可以稀疏也可以密集。在 CSS 里这意味着用 background-color 而不是 background-image 渐变，border: none 或 1px solid，box-shadow: none。不要滑向拟物设计：决定性区别在于没有任何东西模仿被打光的物理材质。保持 4.5:1 的文本对比度，并让可交互元素在没有阴影的情况下也能被认出——清晰的颜色可供性（affordance）、可见的 hover/pressed 状态和可见的焦点环。
Accessibility & misuse可访问性与误用
NN/g measured the cost: flat UIs with weak signifiers make users uncertain what is clickable — give buttons and links unmistakable color affordance, not just proximity.
NN/g 实测过代价：指示性弱的扁平 UI 会让用户拿不准什么能点——按钮和链接要有不会认错的颜色可供性，不能只靠位置邻近。
With shadows gone, color is doing double duty — check 4.5:1 contrast for text AND 3:1 for the boundaries of controls against their background.
阴影没了，颜色要一肩挑两担——文本对比度要查 4.5:1，控件边界与背景的对比度也要查 3:1。
Never remove focus outlines to keep things 'clean'; a flat UI without focus rings is unusable by keyboard.
永远不要为了「干净」删掉焦点轮廓；没有焦点环的扁平 UI 用键盘根本没法操作。
Origin起源
Rose to prominence around 2012: Microsoft's Metro language (Windows Phone 7 in 2010, Windows 8 in 2012) proved it at OS scale, and Apple's iOS 7 redesign in 2013 ended the skeuomorphic era for good. NN/g traces the deeper roots to Swiss/International typographic style.
2012 年前后崛起：微软的 Metro 语言（2010 年的 Windows Phone 7，2012 年的 Windows 8）在操作系统层面验证了它，苹果 2013 年的 iOS 7 改版则彻底终结了拟物时代。NN/g 把它更深的根源追溯到瑞士 / 国际主义排版风格。