Windows 8 Metro 界面
微软 · 2012 · 版权期（微软版权）
看：扁平化的第一次完整亮相——大色块动态磁贴铺满开始屏幕，文字本身就是视觉主体，内容压过装饰。
艺术风格 · 美学百科全书
扁平化设计
Flat Design
扁平化设计是以纯色块、简洁几何与干净字体，彻底去掉阴影、渐变与纹理的二维界面风格。
约 2010 年至今 · 美国（微软、苹果）
向下看看 ↓
简介
扁平化设计诞生于 2010 年代初的美国。2010 年，微软随 Windows Phone 7 推出 Metro 设计语言，用大色块磁贴与大号字体取代了拟物化的立体质感；2012 年 Windows 8 把这套语言带上桌面。2013 年，苹果在乔纳森·艾维主导下发布 iOS 7，一夜之间扔掉了皮革、毡布与缝线——曾经最坚定的拟物化拥护者转了向，扁平化由此成为整个行业的默认语言。
它的主张很直接：屏幕本来就是二维的，何必假装三维？去掉一切模拟深度的手法——阴影、渐变、倒角、材质纹理——只留纯色面、几何形与清晰的文字层级。它的血脉来自更早的现代主义：瑞士风格的网格与无衬线字体、包豪斯的几何与功能优先，只不过第一次完整地长在了触屏界面上。
但纯扁平很快暴露出一个问题：按钮和文字长得一样，用户分不清哪里能点——可操作性不足。于是 2014 年起，谷歌的 Material Design 用"纸片"隐喻与海拔阴影给扁平加回了克制的层次；2015 年前后，Flat 2.0（半扁平）成型：保留纯色与简洁，只把细微阴影与柔和渐变用在需要表达层级与可点性的地方。今天我们日常用的界面，绝大多数其实都是半扁平，而不是纯扁平。
英文定义：Flat design is a two-dimensional interface style built on solid color blocks, simple geometry and clean typography, stripping away shadows, gradients and textures entirely.
第一个 prompt
要跟 AI 说这个风格，第一句话就这么说。直接复制就能用。
用扁平化风格设计一个天气 App 首页：纯色块与简洁几何图标、干净无衬线字体、网格化布局，清爽、轻快、一目了然。
Design a weather app home screen in flat design style: solid color blocks, simple geometric icons, clean sans-serif typography, a grid layout — fresh, light, instantly clear.
变体
-
仪表盘
用扁平化风格设计一个健身数据仪表盘：纯色卡片分区、粗细对比的无衬线数字、一致的间距网格，干净、专注、有条理。
Design a fitness data dashboard in flat design style: solid-color card sections, sans-serif numerals with bold-thin contrast, a consistent spacing grid — clean, focused, orderly.
-
插画海报
用扁平化风格做一张城市旅行海报：大面积纯色块、几何化的建筑剪影、有限的明亮色板，轻松、明快、有海报感。
Design a city travel poster in flat design style: large solid color blocks, geometric building silhouettes, a limited bright palette — relaxed, vivid, poster-like.
-
换强度（Flat 2.0）
用半扁平（Flat 2.0）风格设计一个待办事项 App：纯色卡片加细微阴影、圆角几何图标、柔和的按钮渐变，简洁但摸得着层级。
Design a to-do app in Flat 2.0 (semi-flat) style: solid-color cards with subtle shadows, rounded geometric icons, a soft button gradient — simple, with a touchable sense of hierarchy.
风格卡
给机器用的规格。工作台拼装时，真正调用的就是这张卡。
配色
#3498DB
亮蓝 · 主色·按钮与链接
#2ECC71
翠绿 · 辅色·成功与点缀
#E74C3C
珊瑚红 · 辅色·提醒与强调
#F1C40F
明黄 · 点缀
#2C3E50
深蓝灰 · 文字与结构
#FFFFFF
亮白 · 底色
- 字体
- 干净无衬线是唯一选择，层级靠字号与字重，不靠装饰。推荐：Roboto（Apache 2.0 开源，Material Design 系统字体）；标题可用 Inter（OFL 开源）或 Poppins（OFL 开源）；中文用 Noto Sans SC（OFL 开源）。Metro 原用 Segoe UI（微软专有字体，需授权，不推荐）。
- 构图
- 严格网格化布局；一致的间距与对齐；内容优先，装饰为零；大面积留白；卡片分区代替分割线堆砌。
- 形态
- 只用完美几何形——矩形、圆形、圆角矩形；线条笔直、边角利落；图标用最简的几何概括，线条粗细一致。
- 质感与母题
- 零质感：纯色面，无纹理、无噪点、无材质——这是扁平化最核心的识别点。母题：大色块、几何图标、色块分区、简洁的插画剪影。Flat 2.0 可在卡片与按钮上加细微阴影与柔和渐变，但只用于表达层级与可点性，不模拟真实材质。
- 禁忌
- 不用拟物材质（皮革、木纹、金属拉丝一律不要）；不用厚重投影、斜角与浮雕；不用写实图标；不用衬线装饰字体；不在纯扁平里加渐变与阴影（要加就明确做成 Flat 2.0，别半吊子）。
画廊
几幅代表作。每幅只看一点：它最能说明这个风格的那一点。
iOS 7 界面
苹果 · 2013 · 版权期（苹果版权）
看：转折点——皮革日历、毡布 Game Center、缝线备忘录一夜消失，取而代之的是白底、亮色与细字；从此扁平化成为行业默认。
谷歌 Material Design
谷歌 · 2014 · 版权期（谷歌版权）
看：扁平化的修正版——界面是叠起来的"纸片"，海拔阴影告诉你哪张在上、哪里能点；鲜艳大胆的配色与涟漪动效成为标志。
Flat 2.0 界面范式
行业共同演进，无单一作者 · 2015 至今 · 范式本身无版权
看：纯扁平的补课——卡片下加一层细微阴影、按钮上加一点柔和渐变，只为回答"哪里能点"，不回到拟物化。今天的大多数 App 其实都是这个样子。
各大品牌扁平化 logo（微软 2012、谷歌 2013 / 2015）
微软、谷歌 · 2012–2015 · 版权期（各公司商标与版权）
看：扁平化从界面蔓延到品牌——微软 2012 年换成四色方块，谷歌 2013 年去掉 logo 投影、2015 年换成几何无衬线的 Product Sans 字标；立体、投影、渐变一起消失。
历史流变
- 2010 微软 Metro 设计语言随 Windows Phone 7 推出（10 月 21 日），大色块磁贴与大号字体登场；此前已在 Zune 与 Windows Media Center 中萌芽。
- 2012 Windows 8 把 Metro 带上桌面，开始屏幕取代开始菜单；同年 8 月微软换成四色方块新 logo，品牌与界面一起变扁平。
- 2013 苹果 iOS 7 在 WWDC 发布（6 月 10 日），9 月 18 日正式推送，弃用拟物化；同年谷歌 logo 去掉投影变扁平。扁平化成为行业默认语言。
- 2014 谷歌在 Google I/O 发布 Material Design（6 月 25 日），以纸片隐喻与海拔阴影给扁平加回克制的层次。
- 2015 Flat 2.0（半扁平）成型并普及；9 月 1 日谷歌换成 Product Sans 几何无衬线新 logo。
- 2017 微软推出 Fluent Design System，接替 Metro，在扁平的基础上加回光线、深度与材质。
- 2021 谷歌发布 Material You（Material Design 3），扁平基底上加入个性化动态配色。
关键人物
- 微软 Metro 设计团队——最早把扁平化做成一套完整系统语言的人，源头可追溯到 Zune 与 Windows Media Center。
- 乔纳森·艾维——主导 iOS 7 转向，让扁平化从一家公司的选择变成整个行业的默认。
- 艾伦·戴伊——iOS 7 视觉重设计的创意负责人，定下"内容即界面"的方向。
- 马蒂亚斯·杜阿尔特——谷歌 Material Design 主设计师，用纸片与海拔给扁平加回层次。
演变与影响
从拟物化转向而来——2007–2013 年拟物化教会用户怎么用触屏，但装饰越来越臃肿；扁平化砍掉一切模拟深度，根源在瑞士风格与包豪斯。纯扁平因可操作性不足演进为 Flat 2.0（半扁平），又分化出 Material Design、Fluent Design 等各家系统语言，并影响了之后的新拟态与玻璃拟态。它至今仍是 UI 设计的默认语言，也是 AI 生成界面最稳妥的起点。
相关条目
相关流派
各流派页逐篇发布，发布后转为链接。
搭得好的组件
关键词：扁平化、Flat Design、Metro、iOS 7、Material Design、Flat 2.0、半扁平、零质感
草稿。画廊全部为版权产品界面，只放文字介绍 + 外链，不放图。英文全文翻译后补。