26

Mac 视觉史 vol.3:浴「水」重生的 Mac 视觉美学

 3 years ago
source link: https://www.uisdc.com/mac-visual-histroy-vol03
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

rmYveqA.jpg!web

世间所有的相遇都是久别重逢。苹果和乔布斯是如此,NeXTSTEP 和 Macintosh 是如此,iMac G3 和 Mac OS X 也是如此 。

这可能是最难写的一个章节,这也是 Mac 视觉史当中,最为富有乐趣、充满了巧合、颠覆、反转和意外的一个部分,也是我曾经在回溯探索过程中,最享受的一段。

90年代的视觉美学

在上一篇 《90年代失败操作系统大赏》 当中,我们已经见识到了当年很多操作系统的视觉特征了。

这种视觉设计风格很典型:灰色的窗口界面是第一眼立刻能注意到的视觉特征,当你定睛看细节的时候,全都是棱角分明的按钮,所有的边缘都横平竖直,厚厚的边框和斜切式的边缘,眼睛能从中感知出一种「突出」的效果。

niMnqmv.png!web

Windows 95

这是90 年代 GUI 设计的最佳实践——大家都是这样,你不需要思考为什么,它已经成为了一种视觉范式,它是最佳实践,遵循就行了。

除开 BeOS 使用了更加明快的配色和统一而有趣图标设计,NeXTSTEP 使用了更为「抄现实」的视觉元素之外,绝大多数的操作系统(包括 NeXTSTEP)都是这样。无论是风头无两的 Windows 95 ,还是依然正在服役的 Mac OS 7、Mac OS 8,又或者是 IBM 家的 OS/2 操作系统,来自开源世界的 X Window 和 Motif ,都是一股子同样的粘腻沉重的味道。

现在我们称之为「时代感」。

i2uuamY.png!web

OS/2 Warp 4

iQru6rF.png!web

3e2YNbz.png!web

Motif (Motif 原本也是苹果当初的备选收购方案,不过很快就放弃了)

qMJZnui.png!web

NeXTSTEP

然而这正是问题的所在。

「……似乎这些元素和控制器的重要性,已经盖过了计算机真要做的事情,比如浏览内容,撰写邮件。」

对于这种古早的视觉美学,Mac OS X 的视觉美学塑造者 Cordell Ratzlaff 是这么吐槽的。

缔造者 Cordell Ratzlaff

YZzMVjq.png!web

1990年的时候,苹果公司依然处于全盛状态,市场份额超过 IBM,研发团队正在在「Pink」 下面下充分地挥霍经费。当时单进行图形化界面设计和研发的团队,就有七八个。

就是在这样的背景下,Ratzlaff 加入苹果, 所参与的第一个项目,就是原计划下的 Mac OS 8 的研发,也就是 Copland 项目。当然,最后真正发布的 Mac OS 8 本质上只是 Mac OS 7.7,而原本作为备选的 Copland 项目最终折戟沉沙,其中的界面主题工具(Appearance Manager)所衍生出来的 Platinum主题最终作为正式版的 Mac OS 8 的主要视觉风格延续了下来。

JrMrMjq.png!web

Mac OS 8

「我发现一个糟糕的趋势,就是项目在完成 95% 之后就罢手停滞了……当时的苹果是非常的工程技术导向的,多数的产品都是以技术为导向,置于易用和体验的愉悦感则是不必考虑的事情。」

这种不受限制的膨胀最终导致了 Copland 成长为一个庞大的缝合怪,即时是最顶级的开发者、工程师和产品经理都无法将它封装成为一个可用的操作系统。

U3iayen.png!web

当时的苹果 CEO Gil Amelio

即便是 Appearance Manager 这个项目的遗产 Platinum主题也毫无疑问是一个「向世代主流视觉审美」靠拢的产物,即使 Appearance Manager 已经探索出很多不同的视觉风格。但是毫无疑问,在1997年之前的苹果,Ratzlaff 没有话语权,更何况整个操作系统的项目,也不太可能让好设计有出头之日。

而乔布斯的回归,带来了全面的改变。Ratzlaff 也随着公司整个团队的架构精简,加入了研发下一代操作系统的行列。

真正的 Mac OS X 要开始搞了,代号 Rhapsody ——这是一个充满野心的名字,「狂想曲」。

Rhapsody 系统

FBVFVbz.png!web

Rhapsody 这个操作系统最开始研发阶段,曾经在 X86 架构的平台上进行开发,不过到了后期全部集中到 Power Macintosh 上进行,所有非苹果平台的研发版本都被砍掉了。

这个深度融合了 NeXTSTEP 操作系统操作系统被赋予了一个更接近 Mac OS 8 的 GUI 界面:

eqMR3ey.png!web

整个操作系统在大体的视觉和外观的体验上,给人的感觉和此时的 Mac OS 8 已经非常接近了,在图标的细节处理上,则显得更加富有 NeXTSTEP 的特点;

RFFzaee.png!web

aiMVN3Y.png!web

uIVRveu.png!web

与此同时,原本 NeXTSTEP 系统上没有的 Mac 平台独占的应用,也被移植了过来,比如 QuickTime:

VjARNjy.png!web

在整个 UI 界面的视觉风格上, Platinum主题也被应用到 Rhapsody 的各个地方:

nUFrqau.png!web

eAFBNvy.png!web

但是,在图标和按钮设计上,Rhapsody 则会更接近 NeXTSTEP 的设计,比如文本编辑器和系统设置的界面中,尤其是图标和按钮的设计,有着强烈的 NeXTSTEP 的特征:

vqm2yaU.png!web

RBbMJ32.png!web

ZfQZbyB.png!web

6RZVjeZ.png!web

相比于 Mac OS 8,NeXTSTEP 无疑更加契合乔布斯对于未来操作系统的认知。在向 Mac OS X 靠近的过程中,苹果并未直接推向 Mac OS X ,而是先发布了 Mac OS X Server 操作系统。

Mac OS X Server 1.0

在 Rhapsody 项目逐步成熟的过程中,它开始包含了可以运行 老版 Mac OS 系统的「BlueBox」兼容层,大量继承自 NeXTSTEP 的功能和特性,以及更加面向未来的 Mac OS X 系统独有的部分。

2YZfumB.png!web

RNvAjiI.png!web

jEj2iyI.png!web

Yji6Jve.png!web

Mac OS X Server 1.0 中加入了大量的符合当时趋势的功能——比如对于各种网络服务的支持,这使得 Mac OS X Server 1.0 看起来非常强大。

nMz2iie.png!web

j6ZniuN.png!web

而此时 系统的文件浏览器中开始加入分栏式浏览视图,这一视图就是出自 Ratzlaff 的设计,这使得用户可以不用反复跳转,就能快速地浏览多层级的文件夹和文件,易用性极强:

b63Mn2q.png!web

在完成这一版本的发布之后,Mac OS X 终于算是正式到来了。在正式发布之前,老样子,还是先从测试版开始对外发布。

Mac OS X DP2

对外的公开测试版系统,苹果统一称之为 Mac OS X Developer Preview 。

bMfu6bY.png!web

VzURfmN.png!web

可以看得出来,直到 Mac OS X DP 2 这个版本,Mac 系统的视觉特征还是带有很典型的老款 Mac OS 系统的视觉特征和交互。不过,这个版本中 Quicktime 应用的LOGO发生了明显的变化:

EzYrmyQ.png!web

而原本显得过于冷硬沉重的图标和UI 元素也开始加入更活泼的色彩:

YrimqqI.png!web

famuuei.png!web

Mac OS X 的 DP 版系统一共对外发布了4个版本,而分水岭就出现在 DP2 和 DP3 之间。这种改变其实是苹果整体的变化所带来的必然结果。

Think Different

不疯魔,不成活。对于非同凡响产品的追求,同主流认知的对抗,在乔布斯身上一直都存在。

这种满脑子的不合时宜让他经常不被理解,但是能够接纳甚至共鸣的人也在少数。比如苹果《1984》广告的缔造者 Lee Clow。

3qeYzyf.png!web

重回苹果之后,乔布斯很快开始挑选新的广告代理商,其中就包括曾经合作过的 Lee Clow 和他背后的 Chia/Day 广告公司。

「想到这件事就会让我哽咽,真的让我哽咽。显然,Lee 还是那么爱苹果。他不愧是最棒的广告人。当时他已经10年没有比过稿了。可他来了,他把他的心都掏出来了,因为他和我们一样爱苹果。是他和他的团队带来了这个无与伦比的创意——「非同凡想」(Think Different),比其他人的要好上10倍。我激动得说不出话来,现在一想到这个我还是忍不住流泪:Lee 那么在乎苹果,还有他那个棒极了的“非同凡想”。每当我发现自己身处一种纯粹——一种精神与爱的纯粹之中,我就会忍不住掉眼泪。这感觉就这么撞进了我的心,一下子抓住了我。当时就是这样。那种纯粹我永远都不会忘记。他坐在我的办公室里给我看那些创意,我就忍不住哭了。每次一想到这个我还是忍不住要哭。」——《史蒂夫·乔布斯传》

7bMVZzJ.png!web

在今天来看,Think Different 似乎只是一个传奇的广告作品,但是重新审视20多年前的苹果,你会发现,它是彻底改变一切的那颗种子,点燃变革的火种。

「在此之前,苹果并不屑于做出和人不一样的东西,直到 Think Different 清晰地指明了此刻苹果的诉求。……与众不同是好的!……即时你的产品再好也不可能满足所有人,你是在为世界上最聪明的人做设计。」—— Ratzlaff

重新梳理 Mac OS X 的诞生,在1997年到 2001年之间发生的一系列事件,你会注意到,变化是从各个不同的地方,同时发生的。这也就是为什么,此刻我们必须要先谈一谈 iMac G3。

iMac G3 的尝试

乔布斯重回苹果最重要的标志之一,是 iMac G3。在整个苹果的产品线当中,iMac G3 也都是最具有代表性的里程碑式的产品之一。

从各种意义上来说,iMac G3 是让苹果起死回生的产品。

QjeyMbe.png!web

「我刚到这里的时候,眼前只有一大堆产品,这让我非常吃惊。我开始问别人:为什么现在我要向用户推荐3400,凭什么说它比4400好呢?什么时候一个人应该入手6500,而不是7300呢?过了三周,我还是无法把这些事情弄清楚。如果我都弄不清楚,用户又如何能弄清楚呢?」——乔布斯

苹果被「工程」和纯粹的「功能性」所主导的时间太长了。这种策略下衍生出来的产品线太多了,以至于苹果自己的营销和销售人员需要花费大量的时间来记录和判别,才能为用户介绍自家产品。

将4个系列40多款产品精简成4款产品,这是乔布斯回到苹果之后做的第一件事情。把白板擦干净,又画了一个2×2的表格。他在上面的两个格子里写下了「普通用户」和「专业人员」,在下面的两个格子里写下了「便携式电脑」和「台式电脑」。

67Nnuya.png!web

毛发旺盛时期的乔纳森和鲁宾斯坦

大规模的精简产品线之后,原来属于 Newton 产品线的设计师、属于 「Copland」 项目的设计师和开发者,以及原本的 NeXTSTEP 团队的成员,重新整合到了一起。曾经分散到不同团队的工业设计师,自此开始需要在乔纳森那里提交设计原型,而Mac OS X 的设计和研发团队,则由原 NeXT 团队的鲁宾斯坦来节制管理,并且统一向乔布斯汇报。

混乱的苹果公司开始拥有了全新的秩序。而后面的 iMac G3 则是在这样的背景下开始探索、规划并推进。

2MB7biM.png!web

在最初的硬件原型设计阶段,乔纳森带领的团队做过很多尝试。在后来接受《新闻周刊》采访的时候,乔纳森回忆道:「当时反复考虑的并不是类似芯片读取速度或者市场份额这样的问题,而是诸如「我们想给使用者什么样的用户体验」以及「它在我们的的感知中应该在什么位置」这种模糊不清的问题。」

而 iMac 的外观工业设计就是在这样的探索中开始的。

「当你做出一个3D模型,无论它多么粗糙,你都能为一个模糊的概念赋予形体,然后整个过程都会法身改变……它会刺激感官,并且把所有的目光吸引过来。」——乔纳森

yIZz6nv.png!web

整个计算机行业对于参数对比的迷恋占据主流,而那些难以言说的属性却一再被忽略。这也促使了乔纳森所领导的团队开始探索诸如「产生积极情绪」的外观。他们单第一个月就输出了10个实体原型,不过最终他们还是有选择地将原型给乔布斯过目。随后,他们很快意识到其中「鸡蛋」型的外观设计最为吸引人,然后团队开始有意识地寻求各种「鸡蛋」型设计的变体。

bmMJbyN.png!web

乔纳森团队所制作的原型有各种色彩的,紫色、橙色、红色都有。但是这些实色的塑料材质看起来很廉价。团队内有人建议使用半透明材质来制作。

「我们喜欢半透明的材质,它会给人一种张扬的感觉……你知道洗澡的时候,玻璃上的水滴是怎么形成的吗?我们希望连接线上也有同样精致的亚光面。」——乔纳森

团队开始有意识地搜集各种使用透明和半透明材质的工业设计产品或者材料。有一位设计师带来一小片呈现出蓝绿色的沙滩玻璃,表面有着轻微的磨砂质感。它可能来自加州的半月湾,或者悉尼的邦迪海滩。而这种独特的蓝绿色最终就是iMac G3 上著名的「邦迪蓝」。

jAFBJzB.png!web

BZzeuqN.png!web

「它看起来好像来自另外一个星球……一个好的星球,一个拥有更好设计师的星球。」在发布会上,乔布斯使用了这样的语句来描述这款 iMac G3。此时,iMac G3 所内置的系统仅为 Mac OS 8.1。

iMac G3 的启示

Q3uUNf7.jpg!web

为什么要花如此大的气力来说 iMac G3 的事儿呢?因为它是 Mac OS X 的视觉美学的重要触发点。

iMac G3 不仅深入契合了 Think Different 的精神内核,而且走出了 90 年代传统电脑的固有风格,以一种鲜活、灵性、友好的姿态,让全世界人知道,世界上有一种电脑叫做 PC ,还有一种电脑叫 iMac G3。

BFVjyyI.png!web

这种独特的设计,也影响着其他的团队和设计。早在 「Copland」 项目时期,Ratzlaff 在参与 主题管理器 Appearance Manager 的设计的时候,就尝试过很多不同的设计,比如类似果冻质感的界面元素。在乔布斯刚刚回到苹果的时候,他曾在项目说明会上演示过这样的设计,只不过当时并没有引起足够的重视。

在iMac G3 发布之后,他发现这种通透明快的质感内在的共通,开始继续沿着这个方向去挖掘——明亮、有趣、多彩的视觉,用充满「水滴」质感来重新设计 UI 界面元素,彻底告别死板老旧的 UI 界面。

iE7vq2Z.png!web

在视觉风格上,鲁宾斯坦所领导的团队,做过很多次不同的尝试。而 Ratzlaff 这种「水滴」视觉美学似乎走对了方向。

Ratzlaff 的思路和乔纳森在更深的层次上是不谋而合的:「什么东西和计算机界面毫无关联?」他能想到了糖果,想到了酒。

整个设计团队开始有意识地搜集杂志上的各类酒类广告,在醇香的酒液中的冰块和玻璃瓶上流转的光影中,去撷取让双眼最舒爽的变化和细节,然后以此不断发想,逐步演化成为一套视觉美学。

Aqua 的美学

一旦探索的方向确定了,后面的衍生和发展就会自然发展起来。更加直觉,强化视觉,注重体验,追逐顺滑自然的交互。

「上善若水。」

vUz2umm.png!web

在 2000 年旧金山的 MacWorld 活动上,乔布斯演示了这套全新的 Mac OS X 全新的美学,它有着和过去整个时代都完全不同的视觉体验,以及完全不同的交互逻辑。

这套 UI 界面使用拉丁语中的「水」一词来命名,也就是「Aqua」。

zyYJzeA.png!web

从控制窗口开关的按钮到滚动条,似乎都是用晶莹剔透的水滴制作而成,并且被头顶的光源给充分地照耀着,反映出令人忍不住想舔一口的强烈质感:

3EZrUzv.png!web

这种无处不在的「Aqua」美学,让进入新世纪的每一个人都在此体验到了来自一个操作系统的高峰体验:

yyQZNnm.png!web

而这种美学特征,在随后对外发布的 Mac OS X DP3 当中全方位应用上了。

Mac OS X DP3

Mac OS X DP3 大概是最为「原教旨主义Aqua美学」的操作系统了。相比于 DP2 ,它的整个 UI 界面似乎从 720P 一键升级为 4K 画质。水滴元素近乎不要钱一样应用到界面中每一个角落:

UfmEBrF.png!web

这张经典的桌面背景,似乎也是在模拟类似水的流体感:

biaiIjq.png!web

完全使用水滴按钮组成的计算器让人忍不住想去戳一下:

iInaaaA.png!web

控制面板中的标签页也使用了水滴式的设计:

InyaUba.png!web

即便是是实色的元素,也通过光影营造出一种光滑顺畅的质感:

uEBzMnv.png!web

当然,Mac OS X DP3 即便足够「原教旨主义」,但是也没有让所有的元素都那么「水」。它的播放器还依然延续着早期 Platinum 主题下的金属拉丝的材质感:

2mYbyen.png!web

直到此时,使用了 Mac OS X DP3 的 iMac G3 才算是完全体,从内到外,都遵循着一直的美学特征。

zmIZvya.png!web

进入新世纪,苹果的视觉美学重生了,苹果也重生了。

进入X时代:Mac OS X

毫无疑问,无论是 Mac OS X 还是 iMac G3,在当时的硬件设计和性能上是有要求的。但是相比于整个行业将参数奉为圭臬的态度,苹果更看重的似乎是另外的东西。

「苹果公司在基本的追求之外,还有其他的渴望。」——《乔纳森传》

这种超出常规认知的疯狂尝试,和彻底打破规则的创造性输出,大概是 iMac G3成为里程碑,并且让 Mac OS X 成为数字操作系统中独角兽的核心要义。这样的起死回生式的传奇看多少次都会让人击节赞叹。

不过, Mac OS X 再惊艳,这也仅仅只是另一次长征的开始。

Mac 视觉史系列:


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK