丁宇 | DING Yu

聊聊Mac OS X的界面设计

1

2001年的夏天参加了一个平面设计展,有一间展厅的桌子上放了几台Mac,虽然之前已看过Mac OS X的截图,还在Windows上玩过它的皮肤,但亲眼见到、面对精致细腻的阴影和动画,还是相当惊讶。

现在按照时间推算一下,我当时看到的应该是Mac OS X 10.1 Puma:

10.1-2

10.1

2

三年后我买了我的第一部苹果电脑—iBook G3,上面跑的是双系统:MacOS 9.2和Mac OS X 10.2 Jaguar。

MacOS 9其实是个很美的系统,也很受设计师的欢迎。1999年到2001年间我买了不少网页设计的书,其中的截图大多是MacOS 9上的Photoshop和Netscape浏览器。MacOS 9的美在于精致、朴实和简约,尽量让本身隐藏在内容的背后,而不是使用特效和材质喧宾夺主。

Mac_OS_9

Mac_OS_9_screenshot_2

本文主要介绍OS X,所以关于MacOS 9的话题就此打住。

OS X的界面风格叫做“Aqua”,中文翻译过来就是“水”。有些设计师把苹果的材质说成是玻璃,这其实是不准确的。

aqua-the-name

乔布斯在2000年的苹果全球开发者大会(WWDC)上第一次介绍Aqua,他说:“one of the design goals was when you saw it you wanted to lick it”(6分54秒),他话音未落台下观众就笑了,笑声中似乎蕴含着半信半疑的成分。然而10分钟后,大家就被革命性的界面设计和乔布斯“现实扭曲场”的双重威力折服了(YouTube)。

"one of the design goals was when you saw it you wanted to lick it"

Aqua到了Mac OS X的第三个版本10.2 Jaguar时,算是基本定型了。和后面的版本相比,此时的Aqua就像一汪清水,嫩嫩的,无比通透。

10.2-2

10.2-3

10.2

如果你仔细看,可以看到界面背景那个条纹的材质,这个叫做“条纹(Pinstripe)”。

另外,乔布斯在介绍Aqua时,特意提到说,他不希望在界面上使用焦点边框,因为那样看起来很难看。焦点边框就是,比如当界面上有“确定”和“取消”两个按钮时,如果你按回车键就代表按下“确定”,那“确定”按钮肯定有一圈轮廓,代表现在界面的焦点在此。乔布斯对这个问题的解决方案是,让“确定”按钮的蓝色背景一明一暗地闪动起来,这样既好用又好看。

3

2003年,苹果发布了Mac OS X 10.3 Panther。从这个版本开始,苹果确立了“每两个版本大幅度修改设计风格”的做法。

10.3中最明显的变化有两个。一是条纹效果变得不怎么明显了,看上去更柔和一些。第二个变化则非常大,这就是新材质“拉丝金属(Brushed Metal)”的引入。

10.3

10.3-1

拉丝金属完全是乔布斯的作品。他要求设计团队把一款手表的金属材质,应用到界面设计上来,最终就形成了OS X中的效果。感兴趣的话可以阅读此文章了解这段历史

我自己非常钟爱拉丝金属!我觉得拉丝金属配合细细的条纹和如水滴般的按钮,让整个系统看起来极为明亮和现代。

但拉丝金属的引入,造成了苹果设计历史上相当大的一个争议。因为,苹果在一个系统内使用了两种材质,但又没有明确说明什么情况下该使用哪种,甚至它自己制作的软件(比如Safari),都完全违背其官方发布的《人本界面指南(Human Interface Guidelines》,而“错误地”使用了金属材质,使得广大开发者相当困惑,有许多人都写文章批评苹果。

10.3中的Exposé是交互设计上的另一大新功能。简单地说,只要按一下键盘上的F9,屏幕上所有的窗口就会自动缩放平铺排练,非常漂亮,而且相当实用。

expose

expose2

Exposé后来被陆续整合进了功能更强的Spaces和Mission Control中,不过对我来说,因为其功能变得越来越复杂,我反倒几乎不用了。

4

单就界面来说,2005年发布的Mac OS X 10.4 Tiger是我最喜欢的操作系统!

Aqua在经历了几年的完善后,到Tiger时已经相当成熟了。这个版本的界面设计,在水嫩通透和后工业时代的金属质感间,找到了一个完美的平衡。

10.4-3

10.4-4

Tiger中有一个效果酷毙了的功能:Dashboard的水波纹动画。这个没办法用语言形容,看乔布斯的演示(1小时22分)。

Tiger是Aqua的巅峰之作。Tiger之后,苹果逐渐偏离了“水”的晶莹和通透,开始进入“黑暗”时代。