扁平化设计
Flat Design
别名:扁平化扁平风格扁平化设计没有阴影那种平面设计色块图标风格扁平UIFlat UIFlat Design
这是什么
拒绝一切拟真修饰的视觉语言：纯色块、几何形状、无渐变无投影无纹理，靠颜色、 形状与排版建立层级。它是拟物化的反面——界面不再模仿实物，而是承认自己 是一块发光的平面，用清晰与直接换取效率与一致性。
开发规格
字体
几何无衬线，中等字重
色彩
纯色平涂：蓝 #1FA2FF × 黄 #FFD54F
边框
无描边，色块分区
阴影
完全无阴影
间距
小圆角 6px，均匀网格
动效
100–150ms 颜色与透明度的线性过渡，无位移
状态反馈
hover 用更亮的平涂色；focus 用 2px 深色可见实线外框；active 换用更深色块；disabled 降到 50% 不透明；error 用红色平涂且不加阴影
风格演示
先看整页效果，再试交互场景整页预览
Simple & Solid
去掉装饰，信息直达。
没有渐变 · 没有阴影 · 只有信息
开始使用 →大色块分区
几何小图标
克制的圆角
交互场景
正在加载演示…
✓ 适用场景
- 系统级产品需要跨平台一致与极低成本维护
- 图标 信息图 后台界面，要求一眼识别 快速扫读
- 移动端小屏幕，装饰会挤占内容空间
✕ 不适用场景
- 层级复杂且用户需要空间线索区分可点与不可点
- 品牌需要温度 情绪与精致感
- 大面积灰底上加细线按钮，可点性暗示不足（ Flat 2.0 随之出现）
常见形式
Metro 磁贴
Metro Tiles
微软 Metro，大色块磁贴与矩形至上
Flat UI 撞色
Flat UI Colors
高饱和撞色 加浅底 圆角与细描边
扁平 2.0
Flat 2.0
补回轻微阴影与层次，Material 前奏
实现要点
solid-colorborder: 0box-shadow: nonetransition: background-color纪律比技巧重要：只允许纯色填充与 1px 描边，box-shadow 一律 none，渐变与 纹理一律不出现；层级交给色块面积与明度差。可交互元素用高饱和强调色或 描边保证可点性；hover 只改 background-color，150ms 内完成。深浅色模式 各维护一套色板而非简单反色。
交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
在当前项目中用扁平化设计（Flat Design）实现一组卡片与按钮区块。 先检查现有 Design Token 与色彩变量，把风格色板映射进现有变量体系。 要求： - 只用纯色填充，无渐变 无投影 无纹理 - 交互元素用高饱和强调色，hover 仅改 background-color - 层级靠色块面积 明度差与字号字重建立 - 支持深色模式（独立色板，不做简单反色） - 若有过渡动画，尊重 prefers-reduced-motion，150ms 内完成 - 不新增任何依赖 完成后运行项目现有检查，并列出修改的文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
以"少即是多"为准则的视觉语言：用大量留白、克制的黑白灰配色与有限字体层级 来凸显内容本身，删除一切装饰性元素，层级完全依靠空间、字重与疏密建立。 安静、克制、内容至上是它的气质。
风格相似概念用现实世界的材质与物理形态表示数字控件的视觉语言：皮革缝线、木质纹理、拉丝 金属、玻璃光泽，按钮做成可以按压的实体，开关做成拨杆。界面元件拥有高光、 投影与倒角，"看起来像什么"直接暗示"能怎么用"。
风格相似概念以客观网格与排版传达信息的视觉语言：严密的数学网格、无衬线字体、左对齐、 黑白加一个强调色（经典为红），用留白与字号对比建立秩序。装饰被视为噪音， 设计的目标是让信息以最短的路径被读懂。
风格相似概念用可点击的色块触发一个明确的动作，是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作，按压时有即时的下沉反馈， 繁忙时进入加载态并禁用点击，防止重复提交。
组件影响组件用圆角边框或底色围出一块自包含内容的矩形容器，一块卡片聚合一组相关信息： 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。
组件影响组件