最近扁平化设计(flat design)变成相当热门的 UI 设计概念。不仅许多知名应用与网站开始争相采用，就连执著拟真设计(Skeuomorphism)的水果公司也谣传即将在下一代作业系统采用扁平式设计。 扁平设计到底是什么，为什么它这么有魅力？在本篇文章里，justfont blog 要从字型学的角度切入观察扁平设计的缘由与原理。


不过首先，注意一下名词：扁平设计(flat design)此译名并非广为接受的翻译，它同时也可以被称为最小化设计(minimal design)或诚实的设计(honest design)，但概念都是讲究直接、不假雕饰的美学风格。

前 一阵子 inside 编译了Flat Design: Can You Benefit from the Trend? 这篇文章，里面对 flat design 有简单明确的定义：“零 3D 属性的设计”，放弃浮雕、斜角、渐层等花俏的特效，而采用色彩深浅标明层次，用线条比例架构美感，并直接以字体表达意念、引发视觉联想。然而，这类概念在 设计史上并不是新的。扁平化设计其实承继了一些非常经典的设计传统：包浩斯(Bauhaus)现代主义，与受其直接影响的国际字体风格 (International Typographic Style)。

一点设计史

Bauhaus 设计学校，现代主义设计的源头。

二十世纪的设计师强 烈认为自己身处崭新的时代。工业革命的成熟已经把人们带入机械的世纪，但这种科技的成熟却带来一次大战的毁灭。这令 1920 年代的思想家们深觉，他们需要新的信仰与行动准则，来为人类创造新的生命。他们强烈认为设计应该要做大，应该要实用，并能改善人类生活。这段期间产生的， 想要与前代断然二分的思考模式，正好是包浩斯现代主义。

包浩斯其实是一座设计学校，在一次大战与二战之间的德国创立，意思是“建筑之家”。它募集了当时最有才华的设计师与学生在一起学习并创作。其中包含 Herbert Bayer，奠定现代主义平面设计风格的大师之一。他们要以机械时代的朴素、实用风格，取代维多丽亚(Victorian)时期的缀饰，而强调经济、简约、务实而有意义的秩序。

下列三个有名的设计信念其实就出自包浩斯：

形随功能(form follows function)：最出色的设计必须一目了然，要干净、诚实、直接的展露自己的功能。

忠于质材(Truth to materials)：让每种材质做它自己。塑胶不可伪装成木头、皮革等；镀金、浮雕、毛茸茸壁纸也在禁止之列——因为每种形式的外表有其特定的功能，是无法变造的。同样也不可以把现代建筑盖成古代神庙，因为每个时空有不同的脉络。

少 即是多(Less is More)：承上两者，这个流派相当奉行“经济”的设计原则，并且把“经济”提升到美学的高度上思考——好的东西应该把它运作的方式展现出来，剥除一切装 饰、象征与姿态，留下纹理、色彩、重量、比例、轮廓等等，让视觉“经济”了，一目了然，井然有序。

不用太仔细思考这上面三个信念，就会发现这根本就是扁平化设计的指导原则：极简，少即是多，形随功能，而且不能有莫名的材质、阴影特效，仅能用单纯的数位色块、线条呈现。


扁平化设计的视觉安排经济而切要，可以观察到包浩斯信念的痕迹。

这种信念在 1960 年代达到高峰，变质成为一种教条。过于严肃、呆板，所以造成另一批新兴的设计师反击，用不讲求实用的、即兴的、装饰的、拟真的设计反讽，进而取代先前的现代主义设计。

使 用者图形接口 (GUI, Graphic User Interface)是一个例子。从 GUI 在八零年代出现开始，拟真设计都占主流，例如一直被使用到现在的桌面概念。这某种程度是对包浩斯概念的无视：形要随功能，但拟真设计常常是装饰多于功能： 书报摊的木头材质纹路不符合电子萤幕的脉络，更没有什么“少即是多”，因为就算不用木头材质，它一样可以运作，而功能上的多余就算不上美。


iOS 书报摊的木质拟真设计，违背了某些包浩斯信念。

而在拟真设计流行近半世纪后，扁平化设计又大行其道，还魂重生。人们又开始执著于这种魅力极高的极简设计。

网格系统与扁平设计

扁平设计的魅力在于极简，极简却不能意味简陋；相反的它必须展现极高的功能性。平面设计极简，而又将功能性发挥极致，不会妨碍沟通，很大一部分有赖于字的编排。文字是最直接的表“意”媒介——不只有意义，还有意象与意念。

以 瑞士为中心的瑞士风格(swiss style)发扬了这类设计。瑞士风格又称国际字体风格(International Typographic Style)，理性、中性，让观者不需俱备特定文化知识与背景，也能掌握所要传达的意念。例如下面这个网站展示的各个海报设计，就充满了国际字体风格的特 色。


原图摄于www.swissted.com，一个很理想的国际风格参考网站。该字体是Akizdenz Grotesk

我 们会建议需要进行扁平设计的各位可以多多参考此一时期的海报，因为它们正是当今扁平设计的鼻祖。而要了解瑞士风格，则必须了解网格系统的使用。如同前述， 经济的视觉效益来自于比例、轮廓等基本线条的直接展现，而这类美感是透过理性的网格使用达成的。网格系统可以更方便让我们看出并安排版面上元素之间的关 系。
分析构图后可以发现，视觉的质感是由留白的空间决定的。从红色框框的地方就可以看出来，空白的地方决定视觉整齐或者零乱，但空白是怎么决定的呢？这取决于 怎么安排元素。把元素适当组合，可以让版面看来更整齐，例如B；但若让元素散布在版面各处，把空白割裂过多，就会看起来零乱，例如A。

而 圆形在网格系统里最为自由，可以不受格线的限制自由移动，增加、补强视觉效果。这类几何图形在网格系统被大量使用。其实包浩斯的视觉设计师们注意到，人眼 对这种纯粹的欧几里德式形状很感兴趣。事实上，欧美的设计先驱就在观察幼稚园时就发现了这个现象：小朋友的画中充满了直线与纯粹的形状，是人类完型视觉最 纯粹的表征。几何图形看来是一种天生的，最直接的视觉语言。
三岁孩童的绘图，使用简单的原型与线条表达。原图出自Wikimedia Commons。

在形状的使用上，平面上也没有任何几何图形是多余的，就算是一条直线也可能有导引视觉的功用，如下面这张与包浩斯同时期、同理念的海报设计：


Jan Tschichold 的新文字设计(Die Neue Typographie)，其几何元素有助于视线的流动。

另外，色彩也是国际风格关心的话题。有个著名的视觉实验如下：两个相同大小的正方形，在视觉上却似乎白色方形要比黑色方形为大。
这个实验证明人脑对形状与颜色的反应是有模式可循的：浅色好像会前移，深色会后退，而某些颜色组合比其他组合更令人愉悦；在设计扁平接口时，也要相当留意色彩的配置给使用者的视觉联想与情绪，毕竟扁平风格很大一部分借由色彩使用区分、标明版面的重心。

字体与扁平设计

字 的安排是由网格系统处理的，但字本身也对视觉印象与使用经验影响非常大，不可不注意。与瑞士风格强烈相关的，通常是几个 grotesque 无衬线字体。如同大家所熟知的 Helvetica (通常使用全部大写的 bold)，几乎与瑞士风格画上等号。iOS 系统的默认英文字型Helvetica Neue 家族内有一套极细体(ultra light)，也常见于近年的扁平风格。使用了Helvetica Neue ultra light 当作首页大标题，就有说不出的时尚感。


很明显使用了helvetica neue的接口。原图摄于justfont pinterest

但 卫道的设计师会更支持 Helvetica 的祖先：Akizdenz Grotesk，一个最早发布于1898年的无衬线字体，更具有一种难以表达的帅味。另一个选项就是Adrian Frutiger所设计的Univers，家族内总有50多种粗细斜、延展(extended)或压缩(condensed)字型。

但是目前的扁平风格使用的字体就更多元了，例如贯彻扁平美学的微软 metro 接口就使用了Segoe UI；而目前也常常看到有app或网站使用像Zite app内文，这种圆圆的，带有人文手写直感的无衬线字体，虽然不一定好读，但视觉上相当可爱。


总 而言之用字没有标准答案。在扁平设计上使用字的原则跟传统版面设计的要求差异不大。除了考量媒材的适用性(要能适合电子萤幕显示)、字的机能之外，再来就 是视觉联想了。在介绍Times New Romans时，我们提供了一些挑选字型的思考方式，大家不妨参考。但这并没有正确答案，还是要靠不断尝试，才能试出最适合的字体。


后记：中文线条过于复杂所以不适合扁平设计？

扁 平视觉极简的需求上相当突兀，就这一点我们认为，可能是整个中文接口设计上，还没有发展出应对扁平设计最好的安排；否则就中文海报而言，实在有太多非常出 色的极简设计。理论上，合理的空间布局与黑白平衡造就美观的版面，而中文字本来就很讲究此类平衡，但其构成较像一幅画，而非拉丁文的线条，所以在设计中文 字，还有使用中文字上，都要特别小心。我们不是不好看，只是还没有实验出最适合的设计而已。