扁平化设计
Flat Design
别名:扁平化扁平风格扁平化设计没有阴影那种平面设计色块图标风格扁平UIFlat UIFlat Design
这是什么
拒绝一切拟真修饰的视觉语言：纯色块、几何形状、无渐变无投影无纹理，靠颜色、 形状与排版建立层级。它是拟物化的反面——界面不再模仿实物，而是承认自己 是一块发光的平面，用清晰与直接换取效率与一致性。
开发规格
字体
几何无衬线，中等字重
色彩
纯色平涂：蓝 #1FA2FF × 黄 #FFD54F
边框
无描边，色块分区
阴影
完全无阴影
间距
小圆角 6px，均匀网格
动效
100–150ms 颜色与透明度的线性过渡，无位移
状态反馈
hover 用更亮的平涂色；focus 用 2px 深色可见实线外框；active 换用更深色块；disabled 降到 50% 不透明；error 用红色平涂且不加阴影
风格演示
同一张页面，直接操作开始使用创建具名工作区并选择 plan，结果显示对应名称与方案；功能、价格、博客、登录各到达具体内容或演示身份说明。
整页预览 · 直接交互
使用时关注什么
- 01逐一操作 Flatly 原导航和主 CTA，检查对应内容与返回路径，不只是点击提示。
- 02完成上述 Flatly 操作后修改输入或撤销，检查结果与状态同步。
- 03用键盘和 390px / 320px 检查重排、焦点、校验；区分工具栏重载和内部清空，核对刷新后状态复位。
✓ 适用场景
- 系统级产品需要跨平台一致与极低成本维护
- 图标 信息图 后台界面，要求一眼识别 快速扫读
- 移动端小屏幕，装饰会挤占内容空间
✕ 不适用场景
- 层级复杂且用户需要空间线索区分可点与不可点
- 品牌需要温度 情绪与精致感
- 大面积灰底上加细线按钮，可点性暗示不足（ 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。
用当前风格完成 Flatly 同品牌完整页面，从原首屏延续到内容、具体操作结果和返回路径，而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。以当前 YAML preview 为品牌、原导航与 CTA 的事实来源，不替换成通用营销模板。 保留 Flatly 的蓝色首屏、黄色操作与黄/白/青三张功能卡；仍是左侧 2/5 文案、右侧 3/5 几何面板、下方三卡，不另建六色卡片实验。沿用 renderer 的圆/三角/方形及其局部投影，不用全局无渐变/无阴影规则抹掉现有图形层次。工作区按现有表单与结果列表延续。 复用当前 preview.tokens：背景 #1FA2FF；前景 #FFFFFF；强调 #FFD54F / #333333；卡面 rgba(255,255,255,.16)；边框 rgba(255,255,255,.35)；圆角 8px；字体 'Helvetica Neue', 'PingFang SC', 'Noto Sans CJK SC', sans-serif；卡影 none。 dark 与 variants 复用 generic-style-pages.css 已有工作区选择器，不据通用历史变体重画首屏；保留 renderer 内各视觉面板的局部高光、渐变和投影。 完整页面操作： 开始使用创建具名工作区并选择 plan，结果显示对应名称与方案；功能、价格、博客、登录各到达具体内容或演示身份说明。 静态封面、详情演示与 /style-scenes/flat-design/（英文 /en/style-scenes/flat-design/）共用 renderer；静态封面不嵌套真实按钮，详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流，不用占位链接、仅变颜色或一句 toast 代替结果。 操作状态仅存在当前页面内存；刷新、工具栏重载/重置与模式切换均恢复初始状态，不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作，不暗示跨页或持久保存。 提供返回、取消或清空/重置路径，说明仅当前页内存的状态边界；不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排，保留可读字号和触控目标，不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点；弹层支持关闭和焦点返回，表单校验与结果可被辅助技术读到；尊重 prefers-reduced-motion。 不新增依赖。检查中英文、原导航与 CTA、具体结果、返回/重置和窄屏重排；报告实际运行的检查与待验项，不将实现要求写成已通过结论。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
以"少即是多"为准则的视觉语言：用大量留白、克制的黑白灰配色与有限字体层级 来凸显内容本身，删除一切装饰性元素，层级完全依靠空间、字重与疏密建立。 安静、克制、内容至上是它的气质。
风格相似概念
用现实世界的材质与物理形态表示数字控件的视觉语言：皮革缝线、木质纹理、拉丝 金属、玻璃光泽，按钮做成可以按压的实体，开关做成拨杆。界面元件拥有高光、 投影与倒角，"看起来像什么"直接暗示"能怎么用"。
风格相似概念以客观网格与排版传达信息的视觉语言：严密的数学网格、无衬线字体、左对齐、 黑白加一个强调色（经典为红），用留白与字号对比建立秩序。装饰被视为噪音， 设计的目标是让信息以最短的路径被读懂。
风格相似概念用可点击的色块触发一个明确的动作，是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作，按压时有即时的下沉反馈， 繁忙时进入加载态并禁用点击，防止重复提交。
组件影响组件用圆角边框或底色围出一块自包含内容的矩形容器，一块卡片聚合一组相关信息： 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。
组件影响组件