视觉风格图鉴
认识100+种视觉风格

平面设计

扁平设计

放下仿真的皮革、玻璃和金属,把界面还原为颜色、文字、图标与层级;但真正的扁平设计仍要让人看得懂、点得准。

数字转折
约2010—2014
关键系统
Metro、iOS 7、Material Design
应用
界面、图标、插画、品牌与信息图形

视觉线索

  • 平面色块
  • 无复杂阴影
  • 轮廓清楚
  • 图标化
开始观察↓
以纯色色块、简化轮廓和轻量投影演绎的扁平设计苹果
当代演绎 · 视觉教学示例

读图

看它删掉了什么,也看它用什么补回信息

苹果不再依靠皮革纹理、镜面高光或逼真体积来成立。纯色色块与清楚轮廓承担识别,而一块克制投影仍提示落点——扁平不等于把所有深度线索清零。

  1. 01

    看连续色面

    红色几乎作为一个完整平面出现,色相差异服务分区,而非模拟复杂材质。

  2. 02

    看轮廓先于纹理

    苹果、叶片与果蒂凭剪影立即被识别,不需要写实表皮证明对象。

  3. 03

    看细节是否被归纳

    叶脉、桌纹和植物被压缩为少量线与块,信息有取舍而非随意缺失。

  4. 04

    看功能性深度

    宽而简单的投影说明苹果落在桌面上;必要的层级线索可以保留,只是不追求幻真。

一句话理解

不是把一切压成二维,
而是用数字媒介自己的规则组织信息

扁平设计以清晰字体、图标、纯色、网格和简化形状取代拟物界面的材质模仿。它的历史前提包括现代主义平面设计、公共图标与矢量图形;2010年前后的微软Metro把内容、排版与动态置于装饰之前,iOS 7让去拟物化进入大众移动界面。扁平设计不是单一品牌风格,而是一场关于数字界面该不该伪装成现实物件的转向。

视觉语言

界面 DNA

01

形状

几何、简化

对象依靠轮廓和比例被快速识别。
02

颜色

纯色、分区

色块区分层级、状态和品牌,而非模拟材质。
03

文字

内容优先

字号、字重和间距承担导航与信息秩序。
04

图标

系统化、可缩放

有限笔画在不同尺寸保持一致识别。
05

动态

解释变化

过渡与反馈补充静态平面中缺少的因果和空间关系。

它从哪里来

从现代主义图形语言到触屏时代的去拟物化

扁平设计不是突然出现的流行滤镜。它把瑞士国际主义、公共标识和早期数字图标的简化方法,带进多屏幕、多尺寸和触控操作的产品系统。

  1. 现代主义信息系统

    网格、无衬线字体、标准图标和高对比色为跨媒介清晰度建立基础。

  2. Metro语言成形

    Zune与Windows Phone以排版、内容、鲜明色块和动态取代仿真控件。

  3. 扁平化成为主流

    Windows 8扩展Metro;iOS 7移除大量皮革、毡布和高光,让移动界面集体转向。

  4. Material重新引入规则化深度

    Google用纸张隐喻、光影和运动区分层级,回应纯扁平界面可发现性不足的问题。

艺术家与作品

通过四套系统认识它

01

微软Metro团队

以大字号、内容块和有方向的动态建立数字原生导航。
Windows Phone 7
02

Apple设计团队

在iOS 7中移除大量拟物材质,以层次、色彩和动态重组熟悉控件。
iOS 7
03

Google Material团队

以表面、光影、组件和动效规则让平面语言重新获得可操作深度。
Material Design
04

奥托·艾舍

更早以一致图标、网格和有限形状证明复杂公共信息可以被系统化。
慕尼黑奥运视觉系统

如何辨认

先看信息层级,再看有没有写实装饰

  • ✓形状和图标是否无需逼真纹理也能被识别?
  • ✓色彩、字号和间距是否清楚区分层级与状态?
  • ✓按钮、链接和选择状态是否仍具有可发现性?
  • ✓动态与反馈是否解释操作结果,而非只做轻快装饰?

风格关系

三种数字界面的空间观

参考资料

资料来源与说明

苹果图是当代视觉教学演绎,只展示简化轮廓、色块和功能性投影。真正的扁平界面还必须在交互、状态、响应式布局和无障碍条件下检验。

  1. Microsoft Learn:Metro design principles ↗
  2. Apple HIG:Design principles ↗
  3. Google Design:Material Design launch, 2014 ↗