扁平化Flat Design
去掉渐变、阴影与高光，只用纯色、几何图形和清晰的字重区分层级。渲染成本最低、跨端一致，缺点是容易显得缺乏层次。
典型场景工具应用 · 后台系统 · 跨端产品
编号12
年代2010s Modern
复杂度Low
默认模式自动
效果示例
Nova
产品方案定价
开始使用
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
主要操作次要操作
标签 A标签 B+12
月度增长
+24.8%
转化率4.2%
客单价¥328
Aa Bb Cc 0123
按钮 / ButtonPrimaryGhost
输入 / Inputname@example.com
标签 / Chip已选中默认+8
进度 / Progress
开关 / Switch
数值 / Numeric1,284.50
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
去掉渐变、阴影与高光，只用纯色、几何图形和清晰的字重区分层级。渲染成本最低、跨端一致，缺点是容易显得缺乏层次。
关键词
2Dminimalistbold colorsno shadowsclean linessimple shapestypography-focusedmodernicon-heavy
效果与动效
No gradients/shadows, simple hover (color/opacity shift), fast loading, clean transitions (150-200ms ease), minimal icons
设计系统变量
--shadownone--color-palette4-6 solid--border-radius2px--gradientnone--iconssimplified SVG--animationminimal 150-200ms配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Solid bright: Red, Orange, Blue, Green, limited palette (4-6 max)
辅色 / Secondary
Complementary colors, muted secondaries, high saturation, clean accents
强调色在页面底色上的对比度约 3.5:1，适合大字与图形，正文需另配深色。
适用场景
适合 / Best For
- Web apps
- mobile apps
- cross-platform
- startup MVPs
- user-friendly
- SaaS
- dashboards
- corporate
避开 / Do Not Use For
- Complex 3D
- premium/luxury
- artistic portfolios
- immersive experiences
- high-detail
框架兼容
tailwindbootstrapmui
能力矩阵
浅色模式支持
深色模式支持
移动适配可适配
转化导向强High
渲染成本低无额外开销
无障碍风险低contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- No shadows/gradients,
- 4-6 solid colors max,
- Clean lines consistent,
- Simple shapes used,
- Icon-heavy layout,
- High saturation colors,
- Fast loading verified
CSS / 技术关键词
box-shadow: none, background: solid color, border-radius: 0-4px, color: solid (no gradients), fill: solid, stroke: 1-2px, font: bold sans-serif, icons: simplified SVG
下辖变体：扁平移动（触控优先）。
AI 提示词
Create a flat, 2D interface with bold colors, no shadows/gradients, clean lines, simple geometric shapes, icon-heavy, typography-focused, minimal ornamentation. Use 4-6 solid, bright colors in a limited palette with high saturation.