正确认识扁平化设计(Flat Design)

随着iOS7测试版的发布, 扁平化设计再一次成为了人们关注的热点. 除了Apple公司开始扁平化设计外, Microsoft、Google、Facebook早在几年前就开始了对其产品的扁平化设计, 但由于其产品本身过于标新立异, 反而没有引起人们对于设计理念的关注.

对于Flat这个词, 中文翻译为扁平化, 由于其字面意思和人们的惯性思维很容易引起歧义, 比如说:

  • 使用单色是扁平化
  • 去除3D效果是扁平化
  • 无阴影是扁平化
  • 没有边界是扁平化
  • …….

这些都不是扁平化, 它们只是扁平化设计可能的形式之一, 扁平化设计本身是一种设计理念, 而不是设计要求.

为了更好的说明什么是扁平化设计, 更好的正确认识扁平化设计, 不得不提一下扁平化的对立面——拟物化(Skeuomorphism, 事实上这个翻译并不准确, 但已经是约定俗成了). 拟物化设计是一种把现实中的物品改造成UI的设计理念, 以求得在软件界面的交互上能减少学习和习惯的成本, 做到无障碍使用软件.

拟物化长什么样? 拿按钮举个例子:

拟物化按钮

这是一个标准的拟物化按钮, 视觉上, 它有明显的凸起, 在被按下的时候也有明显的反馈. 我们看到这种按钮的时候, 会下意识的认为”它是个按钮, 我可以按它”.

扁平化的按钮与它完全不同:

扁平化按钮

图中的按钮运用了扁平化设计中常用的使用不同颜色的色块来区分内容的手段, 这里两个按钮的颜色与背景相差很大, 以此让人们认为它是一个独立的部分, 既然是独立的部分, 就应该有它的作用.

从设计的角度看, 拟物化注重让设计对象变得”显而易见”, 而扁平化注重让设计对象变得”简单明了”.

拟物化可以做得很”扁平”, 扁平化却不可能做得很”拟物”, 为了区分扁平化和拟物化, 业内有一个屡试不爽的例子:

计算器

这是两个计算器APP, 大多数人都会认为, 左边的是拟物化设计, 右边的是扁平化设计.

事实是, 右边的计算器也是拟物化的. 在文章开头我就说过, 扁平化很容易在字面意思上产生歧义, 你不能认为右边的按钮都是平面的就认为它是扁平化设计.

为什么说右边的也是拟物化? 从结构上来看右边这个计算器, 上面是计算过程及结果的显示区域, 下面是输入用的键盘, 这和生活中用到的普通计算器是一样的, 甚至连数字和运算符的键位布局都是一样的, 仔细看看左边的计算器和右边的计算器, “0”是不是都在”1″和”2″的下面? “=”是不是都占两个位置?

现在你应该能理解, 拟物化与现实生活的联系了.

也许有人想问了, 扁平化的计算器长什么样? 很遗憾, 现在还没有一种真正扁平化设计的计算器, 因为”计算器”这个概念本身就是现实中的对象, 想要将其硬生生的改造成扁平化设计非常困难. 如果今后真的出了一种扁平化的”计算器”, 那恐怕已经不是我们认识中的计算器了.

扁平化在外观上几乎无法找到现实生活中相似的例子, 扁平化造成的一种现象就是让现实和虚拟能够被明显区别. 不是因为扁平化不用浮雕效果而被称为扁平化, 而是扁平化不需要浮雕效果去突出实体的立体感, 这就解释了为什么扁平化设计出的产品看起来大多是”扁平”的.

再谈谈扁平化风格(Flat Style), 提这个其实已经有点跑题了, 不过为了更好的认识扁平化设计, 不得不提一下. 扁平化风格是扁平化设计发展出的一套设计风格, 比起设计理念, 扁平化风格更像字面意思上的”扁平”, 它可以不遵从扁平化的设计理念, 纯粹使用扁平化的常见效果去改造拟物化设计出的产品. 扁平化风格更多的是与浮雕效果的对抗, 而不是拟物化设计. 像Flat UIFuratto就是扁平化风格, 而不是扁平化设计, 可以说扁平化风格是一个独立的概念.

现在能理解什么是扁平化设计(Flat Design)了吧.