最近扁平化设计 ( flat design )变成相当热门的UI设计概念。不仅许多知名应用与网站开始争相采用，就连执着拟真设计 (Skeuomorphism)的苹果公司也谣传即将在下一代作业系统采用扁平式设计。而在这篇文章刊出不久，我们果然也发现苹果公司在iOS 7采用了扁平设计方案。扁平设计到底是什么，为什么它这么有魅力？在本篇文章里，justfont blog要从字型学的角度切入观察扁平设计的缘由与原理。
扁平化设计果真就是下一代iOS的长相。原图摄自justfont pinterest
不过首先，注意一下名词：扁平设计 ( flat design )此译名并非广为接受的翻译，它同时也可以被称为最小化设计 ( minimal design )或诚实的设计 ( honest design )，但概念都是讲究直接、不假雕饰的美学风格。
前一阵子inside编译了Flat Design: Can You Benefit from the Trend?这篇文章，里面对flat design有简单明确的定义：「零3D属性的设计」，放弃浮雕、斜角、渐层等花俏的特效，而采用色彩深浅标明层次，用线条比例架构美感，并直接以字体表达意念、引发视觉联想。然而，这类概念在设计史上并不是新的。扁平化设计其实承继了一些非常经典的设计传统：包浩斯(Bauhaus) 现代主义，与受其直接影响的国际字体风格 ( International Typographic Style )。
Bauhaus设计学校，现代主义设计的源头。原图来自Wikimedia Commons
二十世纪的设计师强烈认为自己身处崭新的时代。工业革命的成熟已经把人们带入机械的世纪，但这种科技的成熟却带来一次大战的毁灭。这令1920年代的思想家们深觉，他们需要新的信仰与行动准则，来为人类创造新的生命。他们强烈认为设计应该要做大，应该要实用，并能改善人类生活。这段期间产生的，想要与前代断然二分的思考模式，正好是包浩斯现代主义。
包浩斯其实是一座设计学校，在一次大战与二战之间的德国创立，意思是「建筑之家」。它募集了当时最有才华的设计师与学生在一起学习并创作。其中包含Herbert Bayer，奠定现代主义平面设计风格的大师之一。他们要以机械时代的朴素、实用风格，取代维多丽亚(Victorian)时期的缀饰，而强调经济、简约、务实而有意义的秩序。
下列三个有名的设计信念其实就出自包浩斯：
不用太仔细思考这上面三个信念，就会发现这根本就是扁平化设计的指导原则：极简，少即是多，形随功能，而且不能有莫名的材质、阴影特效，仅能用单纯的数位色块、线条呈现。
扁平化设计的视觉安排经济而切要，可以观察到包浩斯信念的痕迹。原图摄自justfont pinterest
这种信念在1960年代达到高峰，变质成为一种教条。过于严肃、呆板，所以造成另一批新兴的设计师反击，用不讲求实用的、即兴的、装饰的、拟真的设计反讽，进而取代先前的现代主义设计。
使用者图形介面 ( GUI , Graphic User Interface)是一个例子。从GUI在八零年代出现开始，拟真设计都占主流，例如一直被使用到现在的桌面概念。这某种程度是对包浩斯概念的无视：形要随功能，但拟真设计常常是装饰多于功能：书报摊的木头材质纹路不符合电子萤幕的脉络，更没有什么「少即是多」，因为就算不用木头材质，它一样可以运作，而功能上的多余就算不上美。（虽然拟真有唤起使用者过去经验的效果，例如iOS的日历长得像真的日历）
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当作首页大标题，就有说不出的时尚感。而果不其然，在iOS 7的介面上，Helvetica Neue ultra light占据了绝大部分的视觉印象。
iOS 7以helvetica neue ultra light当做最主要的字型。原图摄于苹果官网
但卫道的设计师会更支持Helvetica的祖先：Akizdenz Grotesk，一个最早发布于1898年的无衬线字体，更具有一种难以表达的帅味。另一个选项就是Adrian Frutiger所设计的Univers，家族内总有50多种粗细斜、延展(extended)或压缩(condensed)字型。
但是目前的扁平风格使用的字体就更多元了，例如贯彻扁平元素的微软metro介面就使用了Segoe UI；而目前也常常看到有app或网站使用像Zite app内文，这种圆圆的，带有人文手写感的无衬线字体，虽然不一定好读，但视觉上相当可爱。
这是近年相当流行的Proxima Nova。原图撷取自Zite App
总而言之用字没有标准答案。在扁平设计上使用字的原则跟传统版面设计的要求差异不大。除了 考量媒材的适用性(要能适合电子萤幕显示)、字的机能之外，再来就是视觉联想了。在介绍Times New Romans时，我们提供了一些挑选字型的思考方式，大家不妨参考。但这并没有正确答案，还是要靠不断尝试，才能试出最适合的字体。
我们在inside〈UI美学趋势备忘录─浅析扁平化设计〉一文中的读者社群讨论中看到有网友讨论中文线条过于复杂，导致在扁平视觉极简的需求上看来相当突兀。
就这一点我们认为，可能是整个中文介面设计上，还没有发展出应对扁平设计最好的安排；否则就中文海报而言，实在有太多非常出色的极简设计。理论上，合理的空间布局与黑白平衡造就美观的版面，而中文字本来就很讲究此类平衡，但其构成较像一幅画，而非拉丁文的线条，所以在设计中文字，还有使用中文字上，都要特别小心。我们不是不好看，只是还没有实验出最适合的设计而已。
这套字型无非比前一代的用字更具有时尚感，某种程度上也再度凸显视网膜萤幕 ( Retina Display )锐利清晰的优势。但设计似乎永远都有妥协与权衡。它或许更适合扁平风格轻盈、极简的现代感；然而这个家族本来就不是最适合阅读与萤幕使用的字型，而ultra light版本又可能因为线条过细、过于锐利，而加重眼睛的负担，尤其在相对 高彩度的App icon的组合下，或许会让部分使用者觉得难以消受。
参考资料
写点什么吧
15
作品
175
粉丝
26
关注
大牛，别默默的看了，快登录帮我点评一下吧！:)
登录 立即注册