谈拟物和扁平化设计

今年的WWDC Keynote可谓万众瞩目,也算是内容丰富,以至于第一次看到Tim Cook这个习惯慢条斯理的人都加快了讲话的语速。整场发布会的重头戏,也是大家关注的重点,自然是新版的iOS。尽管发布前几天9to5Mac就流出了数张截图,iOS 7的新设计仍然让不少人大跌眼镜,同时也让一些人大喜过望。

其实新版iOS的设计会发生重大变化的预测已经不是一天两天了,各种传言和猜测从来没有间断过。一方面也许是因为很多人喜新厌旧的情节:新的Windows和Android的界面都十分「炫酷」,而iOS的界面几乎没有什么大的改变。更重要的原因则是负责iOS开发的Scott Forstall去年十月被踢出Apple,由负责工业设计的Jony Ive取而代之。

我们先说Forstall。据坊间传言,从iPhone OS开始到iOS 6所贯彻的拟物化的视觉效果跟Forstall的喜好有密切联系。而苹果设计中拟物的最显著代表莫过于以皮革、纺织品、木材、纸张为质感的几款应用,比如:Calendar(iPad和Mac版),Reminders,iBooks,Game Center,Find My Friends(如下图)。

Find my Friends应用界面

不管这个词被设计界如何过分诠释,所谓「拟物化」设计的思路其实很直接:日历就应该像是一个摆在桌上的高端台历;电子书就像纸质书一样有封皮,有书页,甚至翻页的时候还能看到背面的文字。这种思想是从图形界面的起源开始就贯穿始终的:看看你用的电脑,为什么回收站要像是个垃圾桶?为什么文件夹就长得像个文件夹?为什么计算器要和真的计算器一模一样?

在图形界面最早的设计者们看来,电脑的虚拟世界附属于现实世界,电脑作为一个工具的目的是为了让你更好的完成生活中的任务和目标。把一个文件拖进垃圾桶就是删除,这是多么强大的一个隐喻(metaphor)。这些渗透在电脑界面的图标、语言和行为模式之中的隐喻让熟悉了在电脑之外的世界生活的人能够更容易理解怎样去用一个他们本不熟悉的东西。

现实世界与虚拟世界的类比

用乔布斯的话来说,拟物就是「我们把屏幕上的按钮做得漂亮到让人忍不住想要舔一舔」1。我猜测乔布斯在情感上仍然会支持Forstall风格的iOS,毕竟图形界面的原型是他亲手从Xerox PARC的实验室「偷」来的,哪怕已经不顺应今天的时尚。老罗沿着偶像未走完的道路一直走到黑的念头也就不难理解了。


很多人都以为如今扁平化的趋势只是一种今夏流行的潮流风格,仿佛拟物的风格已经过气,我们只需跟风即可。也有人以为风水轮流转,说不定哪天拟物又时兴起来。这样的认识太过肤浅,低估了这次变革的深刻程度。

在扁平化的推崇者看来,拟物最深层次的谬误不在于看起来老气或是花哨,而在于拟物本质上是一种对现实世界中既有事物的模拟,其手段是营造一种假象。无论有着多么善意的动机,所有这些质感、光线、阴影和反光统统是虚假的。当人触摸iPad的时候,感受不到那些不同材质的不同触感,也摸不出凹凸不平的按钮和层次。当这些虚假的物理结构都化为了泡影,我们所使用的就是一块玻璃,一个光滑的平面。用视觉效果来掩盖真相何异于掩耳盗铃?

这种针锋相对的思路为我们带来了拟物的反面,即微软Metro设计中提出的“Authentically digital”2原则:数字世界和现实世界一样,同样是真的真实;我们不需要用「拟物」的方式来模拟现实世界。因此不要去想现实生活的局限,只有完全将数码设备的能力利用起来,摒弃模仿和隐喻,才能创造真正属于新时代的体验。

这个听起来很浮夸的宣言和以往大部分的界面设计都形成了对立。最前沿的旗帜就是Windows 8,Windows Phone OS,还有Clear、LetterPress,Solar等应用:没有阴影,没有材质,没有现实参照,有的是鲜艳的颜色,创新的手势,活跃的动画。所谓的极简、扁平化只是这个新设计哲学的副产品而已。


Clear的宣传视频

数字化新设计大幕的拉开的同时,曾经那些繁复的元素被一个精准而刻薄的词概括:skeuomorph —— 保留旧事物的形式作为新事物所不必要的装饰。这个很难翻译的词汇3揭露了拟物化设计的硬伤:非功能目的、纯装饰性的拟物。现实生活中皮革上的缝线是为了固定,而屏幕上的界面也用针线来固定则毫无逻辑可言。

左:Château de Maisons-Laffitte(1630),法国巴洛克建筑典范;右:法国建筑师Le Corbusier的Villa Savoye(1928),国际主义建筑典范

正如不少古代建筑的外墙和内部有着各种繁复的纹样和华丽的装饰,这些元素对这些建筑并不是必须的 —— 想想巴洛克的教堂,再想想洛可可风格的宫殿。当上个世纪初包豪斯开始兴起的时候,现代建筑的先驱们就推翻了这些无谓的装饰,高举着功能主义“Form follows function”(「形式服从功能」)的大旗,盖出无数方形的盒子:平屋顶、单色外墙、水平条窗。

现代派的设计很容易让人联想到苹果的硬件风格:极为简化的形状 —— 圆角矩形;极为统一的材质 —— 玻璃和拉丝金属铝;极为朴素的颜色 —— 黑白灰。工业设计出身的Jony Ive继承了现代设计的衣钵,许多苹果设备中都有功能主义设计大师Dieter Rams的影子4

正如多年前我用拙笨的文字试图阐释过:最好的电脑是透明的。当你用电脑的时候,你应该专注在你所要做的工作上,而不是电脑本身。当你在iPad上打开一个应用的时候,iPad就成为了这个应用。此时一切硬件的细节,无论是按钮、边框,还是摄像头、指示灯,都不应该分散你的注意力。因此iPad的硬件设计看起来如此简化。正因为它的功能需要它的硬件保持低调,以至于达到一个几乎隐形的状态。5

在这样一个硬件风格的衬托下,软件界面中的过度装饰显得愈加格格不入。那些软件上的皮革缝线与光滑平整的硬件形成了一种很微妙的矛盾,一方面让用户忘记这是电脑,一方面却向用户强调了这个界面的不真实性。

所以,当不到八个月前Jony Ive替代Forstall负责iOS开发的时候,iOS的改版几乎是注定会发生的。而结果我们也看到了:一个现代风格的软件界面,一个颠覆从前的美学,一个完全重新设计的iOS 7。

iOS 7的邮件应用

如果讨论到此为止,那结论仿佛已经注定:拟物的大势已去,让我们都「扁平」起来。可是继续往深处挖掘,有些难题仍然不能不问:如今这些「现代化」、「纯数字化」的界面究竟是不是比拟物更好?会不会反而带来更多的问题?

我们都很熟悉现代平面设计中漂亮的字体、干净的线条和色块。机场地铁的导示设计,书报杂志的装帧设计,都渗透了International Typographic Style6的影响,也是这里所讲的界面新风格重要的灵感源泉。

左:纽约地铁上世纪初的马赛克站牌;右:纽约地铁设计标准手册,1970 (Massimo Vignelli在1970年前后设计的纽约地铁标志系统是信息设计的经典案例,推荐阅读Type is Beautiful的文章。)

当拟物化界面的阴影、材质和皮革缝线统一被打上「恶俗」(“kitsch”)标签的时候,这些元素在交互中所蕴含的信息也被遗漏了。为什么按钮要有边框?因为边框指示出界面元素的边界。为什么按钮要有阴影和高光?因为这样让人知道这个东西可以点击。扁平化设计摒弃了拟物化装饰的同时,却把拟物化在交互中的功能也同样抛弃了。如今在试图将平面设计风格照搬到用户界面之时,两者的一个重要区别并没有得到足够的重视:平面设计只有信息的单向传递,几乎不需要接收用户的输入。而用户界面是双向的,是交互的,是需要用户真正使用的。

我以为这个重大的疏漏是当今的扁平化设计易用性7问题的源头。最终导致为了界面的极简和扁平,很多提示和按钮都被隐藏了起来,可以点击和操作的和仅仅表示信息的图标容易混淆,整个界面所传达的信息量太少且浪费空间……也难怪易用性专家Jacob Nielson得出结论,在普通PC上,Windows 8就是一个「怪物」

Windows 8空旷的邮件应用

回头再来看拟物化设计,好像顿时变得亲切了几分。尽管拟物有些时候走进了skeuomorphism的陷阱,然而即便从功能主义的观点上看,拟物也并非纯粹装饰。例如一个微波炉,无论它的工业设计是多么简洁,在光线的照耀下必然会有高光、阴影。上面凸出的旋钮是我们从古至今所熟悉的东西,它的形状就传达着它的用法。为何在纯数字的虚拟世界中就不能有旋钮呢?

或者更进一步问,我们在模拟一个旧事物的时候,是背负了它的包袱,还是榨取了它的价值?

我不认为这里一定有一个黑白分明的界限。以「保存」按钮为例,通常一个软盘的图标代表保存。但今天还有几台配置软盘驱动器的电脑?恐怕如今的小朋友都没有真正见过软盘长什么样。但这并不妨碍软盘图标的诸多优点:独特、清楚、标准,还可以适用于各式各样的界面风格和使用环境。8

Floppy disk
软盘图标

齿轮代表设置,放大镜代表搜索,挂锁代表安全,这些东西难免不会在未来消失。文字和图标在这方面十分类似。很多汉字的现实依据早已被埋没在了历史的洪流中。如「战」字,繁体「戰」左侧是投石器、右侧是平頭戟,一个远攻,一个近守,构成了战争。如今它们早已被大炮、坦克取代,但这个字却流传了下来。同理,将软盘作为保存图标如果确实能解决问题,又能流传后世,那何乐而不为。


或许完全不使用拟物的手段,我们最终也能找到这些易用性问题的具体解决办法。但拟物的效用提醒了我们,人不是机械,不是完全追求效益的,更不是完全现代的。可以作为佐证的是近年来蔓延的一种怀旧的潮流:怀念青春、怀念旧事物、怀念单纯美好的年代。想想《老男孩》、《那些年》、《致青春》,看看民国风的毕业照,再逛逛街头巷尾所谓很「文艺」的小店,你就能感受一二。

这是另一个非常庞杂的话题,我无意在这里细究其原因。我很同意iA的Oliver Reichenstein所做的解读,这种怀旧(nostalgia)的趋势并不是一时兴起、也不是逃避现实,而是说明「旧」的反面 —— 「新」作为一个概念开始失去它的诱惑力。我们被太多「新」的东西包围,然而真正带来进步的创新很少很难,其余的「新」都只是构造出来的概念,让人厌倦。

从这个角度说来,拟物化发展到skeuomorphism的极致未尝不是对怀旧心态的一种迎合:与其把旧的东西包装成新的,不如把新的东西包装成旧的。这样的用户界面所带来的虽然不是易用性,但却是易用性的表象。当看到他所熟悉的台历、记事本、书的时候,用户会以为自己知道怎么用,即便事实并非如此。但看到一个「新」的扁平化界面时,他认为需要学习新的东西才能使用,而干脆放弃。

这一点可能对站在技术发展前沿的geek们,nerd们,科技工作者们来说十分恼人。我们勇于尝试新的事物,看到技术的新趋势感到迫不及待,想到未来的美好新世界便心生向往,并对周围其他人对待变革的保守态度感到不可理解甚至怒不可遏。但不知道有多少人注意到,科幻电影、游戏中的未来界面几乎都体现了扁平化设计的极端:深色背景,几何形状,闪烁的光点,和几乎难以辨认的字体。与拟物化正好相反,这些扁平化的设计又未尝不是对现代主义心态的一种迎合?

电影《遗落战境》中的界面设计[^9]
科幻并不是真的未来,所表现的其实是创作之时前沿理念的延展。正如Paul Renner的Futura「未来」字体,体现了1927年,那个现代设计兴起的年代对未来字体的展望:垂直的线条、完美的几何形状、字体粗细一致。衬线这种「拟物」的设计9被去掉,甚至连小写字母“t”和“j”的末尾都被捋直了。

但很少人了解,就算是这个面向未来的字体,也必须要向人的认知做出妥协:从尺寸上看,横竖的线条宽度其实并不一样,而字母o也并不是一个正圆。说起来有些讽刺,正是由于人的视错觉,这样的数学上不完美的形状在人眼看到才是真正完美的形状。反而数学上完美的东西,在人看来不总是自然而直观的。

Futura Medium字体的“Lot”,白色是「完美」的几何轮廓,黑色是实际的字体设计。(更多关于几何字体的讨论请参见这篇文章。)

我不反对现代主义的设计,我们生活的很多方面还不够现代、不够理性,我们的感官还被各种繁芜丛杂的垃圾充斥着。我喜欢简单的设计,我十分崇拜Dieter Rams,我也特别欣赏FLW的流水别墅。但是现代设计并没有终止于上世纪六七十年代,authentically digital的理念也毕竟不是界面设计的终点。

这样的机械美学忠于了电脑的工作方式,却忽视了人类的感知和思维模式仍然是模拟的。如果说拟物是幼稚的,数字化设计是「成熟」的,那这种成熟同时也意味着没有感情、没有灵魂;而那点幼稚反而正是来源于每个人心里那一点稚嫩的成分。这场争论表面上是界面设计风格、路线之争,从另一个层面上其实是模拟与数字之争,怀旧与科幻之争,更是几个世纪以来传统主义者与现代主义者在绘画、建筑、工业设计上的拉锯在信息化时代的新篇章。

拟物化和扁平化并不是非此即彼的关系,它们之中还有许多可以权衡妥协的空间。就像Google所走的“almost flat”路线,为了界面的易用性保留了少量的拟物特性。抑或是像小米MIUI那样极为节制的拟物风格。但更重要的是,我们不应该只停留在这两者的讨论上,而要想到在这两者之外还有无数其它的可能性10

在我看来真正未来界面设计的方向,和这两者并不在同一个维度上。这两种具体的风格的未来,也许殊途同归,也许争论将持续很久,甚至都被更新的风格取代。但可以确定的是,模拟和数字都必将在未来占有一席之地。


最后简单说说iOS 7:苹果突然从争论的一端跳到了另一端。只用了不到八个月的时间就完成了这么大的一场转换,令人惊叹。配色和图标的确有很多问题,但这部分在整个设计思路的转换中只能算是细枝末节,同时也是非常容易解决的问题。「图标丑」成为很多人所诟病甚至嘲讽的对象,无非是因为这些东西嘴上说说很容易。但整个系统的易用性,新的应用是怎么工作的,才是应该关注的重点。在正式版发布之前,这些都有很大改变的余地,所以现在就对iOS 7的设计进行最终评价为时实在太早。

值得注意的是,苹果在发布会上并没有阐述风格如此巨变的官方动机和理由,这一点令我很困惑。我的揣测是,苹果十分擅长迭代式的改进,然而改良最终可能陷入局部最优。人事变动正好是苹果人机界面彻底改头换面的契机,iOS 7的改变未尝不是一次「破坏性」(disruptive)创新的勇敢尝试。未来的iOS甚至OS X都可以以此为基础进行新一轮的迭代创新

新的设计必然会带来新的机遇和挑战,这对苹果开发者来说是好事。很多用户迫不及待就升级到beta版已经体现出了很多人的热情。如Marco Arment所说,在已经接近饱和的AppStore上,新的开发者又有了闯出一片天地的机会。


  1. Mac OS X最开始的按钮正像是一颗糖。 
  2. 可以直译为「名副其实的数字化」。 
  3. 国内普遍将skeuomorph直接翻译为「拟物」,但我认为两者概念并不等同。「拟物」是中性词,而skeuomorph的定义就包含了贬义的价值判断。因此下文均用英文衍生词。 
  4. 包括这次发布的Mac Pro,像极了Braun Aromaster KF 20咖啡机(不是垃圾桶)。 
  5. 这也能够解释为什么iOS的应用都是全屏运行,不鼓励multi–tasking。iOS的桌面更像是个启动器,因为桌面的核心作用就是帮助你找到要打开的应用。 
  6. 国际字体风格,也叫瑞士风格。 
  7. 即usability,指人造物体容易使用和学习的性质。也叫「用户友好」(user-friendly)。 
  8. 扁平化设计流行起来之后,有不少重新设计保存图标的尝试,但还没有足以取代软盘的作品。 
  9. 衬线(serif)正是对手写笔画的模拟。 
  10. 我十分同意John Maeda的观点:“What we need now is to move beyond the superficial conversation about styles and incremental adjustments to boldly invent the next frontier of interface design.”