欢迎登录宁夏云智库广告文化传媒公司网站 >>

扁平化与字体设计

宁夏云智库传媒  2016-07-22  0次  0  加入收藏

最近扁平化设计(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时,我们提供了一些挑选字型的思考方式,大家不妨参考。但这并没有正确答案,还是要靠不断尝试,才能试出最适合的字体。

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

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


上一篇:一本"标准"旅行摄影书的样子

下一篇:没有了

招贤纳士

Copyright © 2016 宁夏云智库广告文化传媒公司 版权所有 宁ICP备16001477号关于我们|站内搜索|友情链接