扁平化Flat Design
你可能会说
不要立体不要阴影，纯色块加简单图形，平平的那种。
扁平化是一种减少立体材质、用纯色和简化图形组织界面的设计风格它适合响应式产品和工具页面，通常依靠排版、色块和清楚分区建立层级。阴影和纹理减少以后，可点击状态更需要通过文字、边界和交互反馈表达。
左右滑动查看完整示例
WANDER / SHSAT · 08.243 stops
DAY PLAN / SHANGHAI把周六
把周六
留给街道。
一条步行路线，三件刚好的事。
查看路线 →09:30武康路
12:15安福路
16:00西岸
散步
午餐
展览
设计原则 · Principles
- 用纯色和清楚分区组织信息，不依赖真实材质
- 减少无助于理解的阴影、渐变和纹理
- 图标保持简洁，同时保留可辨认的功能含义
- 通过字号、字重、位置和留白建立阅读顺序
- 让组件易于缩放和适配不同屏幕
- 用边界、颜色和状态反馈保证控件仍然容易发现
什么时候用
- 数据后台和仪表盘，需要清楚展示高密度信息订单示例转化示例告警示例
- 小屏应用，减少不必要的材质和视觉负担小屏与弱网场景可优先使用简化图形
- 有稳定品牌色，通过色块建立识别品牌色有职责的品牌色可帮助分区和识别
- 快速搭建原型，先验证结构和主要流程先用「纯色块 + 大留白」→验证结构
什么时候不用
- 按钮和普通文字外观相同，用户无法判断能否点击欢迎回来
查看详情 提交订单 退出文字与操作入口难以区分 - 色块缺少层级差异，无法说明信息主次导航正文按钮
- 浮层没有任何边界或层级提示弹窗和卡片叠一起，分不清前后
- 删掉必要细节后，把未完成状态当成简约大面积留白 + 一行小字留白未形成明确的阅读层级
发展历程 · History
2010
Windows Phone Metro
Windows Phone 的 Metro 使用纯色磁贴和大字号排版，成为当时系统界面中具有代表性的扁平化实践。
2013
iOS 7 转向简化视觉
iOS 7 大幅减少拟物化装饰，推动了扁平化在移动界面中的进一步普及；不同产品仍采用了不同程度的层次表现。
2014
Material Design 发布
Google 以层级、动效和组件规则扩展了扁平化界面的表现方式，并强调状态与空间关系。
2016—今
Flat 2.0（Almost Flat）
轻阴影、微渐变和边界被更多产品用于表达层级与可操作性，形成了多种近扁平实践。
组成结构 · Anatomy
纯色块
直角 / 微圆角
零阴影零渐变
◤
细字 + 大留白
色块可用于分区与品牌识别，饱和度应配合内容和文字对比度
直角或小圆角都可以；选择应与品牌、组件尺寸和触控目标一致
减少不帮助理解的效果；需要表现层级或状态时可以适度使用
图标简化为圆、方、三角等基本形，缩小也可辨
用合适的字号、字重和留白建立层级，避免过细文字影响阅读
AI 提示词 · Prompt
做一个城市周末行程页，用清楚的色块、图标和排版区分路线、时间与地点。页面要轻快且易扫读，所有按钮和可点击区域都要能被看出来。路线、时间和地点只用现有资料，缺少的先标“待补充”，不要自己编。
典型使用场景
扁平化城市日程
左右滑动查看完整示例
PLAN A DAYSaturday
in Shanghai24 AUG
in Shanghai24 AUG
3 stops
4.8 km walk
4.8 km walk
09:30
武康路12:15
安福路16:00
西岸
武康路12:15
安福路16:00
西岸
iOS 7 天气 App
左右滑动查看完整示例
扁平化数据仪表盘
左右滑动查看完整示例
扁平化落地页
左右滑动查看完整示例
延伸阅读 · 权威出处