扁平化Flat Design
设计风格减少纹理和立体装饰，依靠颜色与排版
扁平化使用纯色、简化图标和清楚分区组织界面，适合响应式产品和工具页面。装饰减少以后，可点击状态更需要通过文字、颜色和交互反馈表达，不能只靠用户猜测。
WANDER / SHSAT · 08.243 stops
DAY PLAN / SHANGHAI把周六
把周六
留给街道。
一条步行路线，三件刚好的事。
查看路线 →09:30武康路
12:15安福路
16:00西岸
散步
午餐
展览
设计原则 · Principles
- 用纯色和清楚分区组织信息，不依赖真实材质邮件照片日历
- 减少无助于理解的阴影、渐变和纹理拟物→扁平
- 图标保持简洁，同时保留可辨认的功能含义▲●■
- 通过字号、字重、位置和留白建立阅读顺序排版就是导航超大细字 + 大量留白，层级靠字重
- 让组件易于缩放和适配不同屏幕桌面宽手机
- 用边界、颜色和状态反馈保证控件仍然容易发现标题按钮？
什么时候用
- 数据后台和仪表盘，需要清楚展示高密度信息订单 1,204转化 3.2%告警 2
- 小屏应用，减少不必要的材质和视觉负担小屏 + 弱网：纯色块最清晰最快
- 有稳定品牌色，通过色块建立识别品牌色色块本身就是记忆点
- 快速搭建原型，先验证结构和主要流程跟 AI 说「纯色块 + 大留白」→秒出
什么时候不用
- 按钮和普通文字外观相同，用户无法判断能否点击欢迎回来
查看详情 提交订单 退出三行字，哪个能点？ - 所有色块完全相同，没有建立信息主次导航正文按钮
- 浮层没有任何边界或层级提示弹窗和卡片叠一起，分不清前后
- 删掉必要细节后，把未完成状态当成简约一片空白 + 一行小字去得太干净，像没做完
发展历程 · History
2010
Windows Phone Metro
纯色磁贴 + 超大排版，扁平化第一次成为系统级设计语言，比苹果早了三年。
2013
iOS 7 全面转向
苹果删除全部拟物，拟物时代终结，扁平一夜之间成为全球默认。
2014
Material Design 接棒
Google 在扁平上加回「纸的海拔」与有意义的动效，补上了扁平最弱的层级感。
2016—今
Flat 2.0（Almost Flat）
轻阴影、微渐变回归——纯扁平「找不到按钮」的教训被吸收，成为今天的实用默认。
组成结构 · Anatomy
纯色块
直角 / 微圆角
零阴影零渐变
◤
细字 + 大留白
1纯色块Solid Color Block高饱和的品牌色直接铺底，颜色本身就是分区与记忆点
2直角 / 微圆角Sharp CornerMetro 用纯直角，iOS 7 起放宽到小圆角，绝不出现大圆角
3零装饰No Ornament无阴影、无渐变、无纹理——能删的全删掉
4几何图标Geometric Icon图标简化为圆、方、三角等基本形，缩小也可辨
5细字 + 大留白Thin Type & Space超大超细标题配大量留白，层级靠字重和位置而非装饰
AI 提示词 · Prompt
扁平化设计，纯色磁贴，零阴影零渐变，几何图标，超大细字标题，大量留白，flat design, solid color blocks, no shadows, geometric icons, thin typography, generous whitespace典型使用场景
扁平化城市日程
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
扁平化数据仪表盘
扁平化落地页